案例 - 代码天地

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>传智播客设计学院首页</title>
	<style>
	.danner{
		width: 1000px;
		height: 285px;
		margin: 13px auto 15px auto;
		overflow: hidden;/* 对溢出的部分进行修剪,防止溢出内容呈现在元素框之外; */
	}
	.left{
		width: 755px;
		height: 285px;
		font-weight: bold;/* 文本粗细 */
		background-color: red;/* 背景颜色 */
		position: relative;/* 设置父元素相对定位 */
		float: left;/* 向左浮动 */
	}
	.content_left{
		position: absolute;/* 设置绝对定位 */
		top: 90px;/* 相对父元素上边线的距离 */
		right: 45px;/* 相对父元素右边线的距离 */
		text-align: right;/* 文本内容右对齐 */
	}
	.school-en{
		font-size: 14px;
	}
	.school-ch{
		font-size: 24px;
		font-family:黑体;
		background-color: black;
		padding-right: 10px;/* 右内边矩 */
	}
	.advertise{/* 类选择器 */
		margin-top: 20px;/* 上内边距 */
		font-family: 黑体;
		font-size: 16px;
	}
	ul.style_a{/* 交集选择器即第一个为标记选择器第二个为类选择器或者id选择器,中间不能有空格 */
		margin-top: 25px;
		margin-left: 120px;
		list-style:none;/* 取消无序列表前的标记 */
		overflow: hidden; /* 对溢出的部分进行修剪,防止溢出内容呈现在元素框之外; */
	}
	ul.style_a li{/* 后代选择器 */
		float: left;/* 浮动 */
		margin-left: 10px;/* 内边距 */
	}
	body{/* 全局控制 */
		font-family: 微软雅黑;font-size: 12px;color: #FFF;
	}
	body,p,ul,li,h4,img{/* 并集选择器 */
		margin: 0;/* 与其他盒子之间的距离（外边距） */
		padding: 0;/* 内边距 */
		border: 0;/* 边框 */
		list-style: none;/* 取消无序列表前的标记 */
	}
	</style>
</head>
<body>
	<div class="banner">
		<div class="left">
			<div class="content_left">
				<p class="school_en">CHUANZHIBOKECHUAN<br/>ZHIBOKE</p>
				<p class="school_ch">传智播客</p>
				<p class="advertise">以就业为导向<br/>打造理论与实际相结合的实战型人才</p>
				<ul class="style_a">
					<li class="current"><a href="#">1</a></li>
					<li><a href="#">2</a></li><a> <!-- 标签定义超链接，用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性，它指定链接的目标。#代表连接到本页。 -->
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
				</ul>
			</div>
		</div>
		<div class="right">
		    <div class="content_right">
			    <h4>课程介绍</h4>
			    <ul class="style_icon">
				   <li><a href="#">1</a></li>
				   <li><a href="#">2</a></li>
				   <li><a href="#">3</a></li>
				   <li><a href="#">4</a></li>
			    </ul>
			    <p class="cl">传智博客设计学院</p>
		    </div>
		</div>
	</div>
</body>
</html>
此代码不是全部的代码，只是对书上的案例进行解析，
案例

猜你喜欢
