<!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>
此代码不是全部的代码,只是对书上的案例进行解析,