css简单练习5
根据css现学内容，完成如下页面布局。
图例如下所示：
练习分析：
- 整体观察图片可知该网页的背景颜色是灰色，即最大的盒子中背景颜色应设为灰色。大盒子中摆入多个小一点的盒子来完成布局，其他的盒子摆放可通过下图来理解。
- 盒子摆好后可以根据实际情况加入外边距（margin）或内边距（padding）来分开盒子，以便于按要求完成任务。
- 对于形状相同的盒子写出来一个后复制粘贴来，可以减少作业任务。
- 对于上方的菜单导航栏中可以加入伪类来增强视觉效果。
- 若代码量比较大为了编写方便，可以将css代码块与html代码块分开写，但注意需要通过
link来将css导入html中。如本题目中使用的<link href="css/css.css" rel="stylesheet" />。
html代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/css.css" rel="stylesheet" />
</head>
<body>
<!-- 顶部线 -->
<div class="aline"></div>
<!-- 顶部线结束 -->
<!-- logo部分,分三个小部分，左中右 -->
<div id="logo">
<div class="logo_left"></div>
<div class="logo_center"></div>
<div class="logo_right">
<a href="http://www.baidu.com">登 录</a>
<a href="http://www.baidu.com">注 册</a>
</div>
<div style="clear: left;"></div>
</div>
<!-- logo部分结束 -->
<!-- 导入栏 -->
<div class="manu">
<div class="manu1"><a href="">首页</a></div>
<div class="manu1"><a href="">唐诗</a></div>
<div class="manu1"><a href="">宋词</a></div>
<div class="manu1"><a href="">古代小说</a></div>
<div class="manu1"><a href="">现代小说</a></div>
<div class="manu1"><a href="">散文</a></div>
<div class="manu1"><a href="">诗歌</a></div>
<div style="clear: left;"></div>
</div>
<!-- 导入栏结束 -->
<!-- 广告区 -->
<div>
<div class="advertising"></div>
</div>
<!-- 广告区结束 -->
<!-- 项目分区分为project_1，project_2和project三部分 -->
<div class="project">
<!-- project第一部分开始 -->
<div class="project_1">
<div class="part_1">
<div class="part_1-1">唐诗</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
</div>
<div class="part_2">
<div class="part_1-1">宋词</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
</div>
<div class="part_3">
<div class="part_1-1">元曲</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
</div>
<div style="clear: left;"></div>
</div>
<!-- project第一部分结束 -->
<!-- project第二部分开始 -->
<div class="project_2">
<div class="part_1">
<div class="part_1-1">唐诗</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
</div>
<div class="part_2">
<div class="part_1-1">宋词</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
</div>
<div class="part_3">
<div class="part_1-1">元曲</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
<div class="part_1-3">
<a href="">静夜思</a>
</div>
</div>
<div style="clear: left;"></div>
</div>
<!-- project第二部分结束 -->
<!-- project第三部分开始 -->
<div class="proect_3">
<div class="part_3-1">友情链接</div>
<div class="part_3-2"></div>
<div style="clear: both;"></div>
<div class="part_3-3">
<a href="http://www.baidu.com">百度</a>
</div>
</div>
<!-- project第三部分结束 -->
</div>
</body>
</html>
css代码实现如下：
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #E3E3E3;
}
.aline {
background-color: #00A9F8;
height: 3px;
width: 1200px;
margin: auto;
}
#logo {
width: 75rem;
margin: 10px auto;
}
.logo_right a {
color: #00A9F8;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
.logo_center, .logo_left, .logo_right {
height: 80px;
float: left;
}
.logo_left {
width: 250px;
background-color: #F5F5F5;
background-image: url(../img/logo.jpg);
background-repeat: no-repeat;
background-position: center;
}
.logo_center {
width: 700px;
background-color: #00A9F8;
background-image: url(../img/timg.jpg);
background-position: center;
background-repeat: no-repeat;
}
.logo_right {
width: 250px;
background-color: #F5F5F5;
text-align: center;
line-height: 80px;
}
.logo_right a {
text-decoration-line: none;
}
.manu {
margin: 10px auto;
width: 1200px;
height: 60px;
}
.manu1 {
background-color: #00A9F8;
width: 171px;
float: left;
height: 60px;
text-align: center;
line-height: 60px;
}
.manu1 a {
color: #FFFFFF;
text-decoration: none;
}
.manu1:hover {
background-color: #18e8ff;
}
.advertising {
width: 1200px;
height: 120px;
background-image: url(../img/timg.gif);
background-position: center;
background-repeat: no-repeat;
margin: 10px auto;
}
.part_1 {
height: 45px;
background-color: #FFFFFF;
width: 385px;
}
.part_1-1, .part_1-2 {
height: 45px;
border-bottom-width: 3px;
border-bottom-color: #00A9F8;
border-bottom-style: solid;
width: 385px;
color: #FFFFFF;
}
.part_1-1 {
float: left;
background-color: #00A9F8;
width: 105px;
text-align: center;
line-height: 45px;
}
.part_1-2 {
float: right;
background-color: #FFFFFF;
width: 260px;
text-align: right;
line-height: 45px;
padding-right: 20px;
}
.part_1-3 {
text-align: left;
line-height: 45px;
border-bottom-width: 1px;
border-bottom-color: #E3E3E3;
border-bottom-style: dotted;
background-color: #FFFFFF;
width: 375px;
padding-left: 10px;
}
.part_1-2 a {
color: #00A9F8;
text-decoration: none;
}
a {
color: black;
text-decoration: none;
}
.part_1, .part_2, .part_3 {
float: left;
}
.part_2 {
margin: 0px 22.5px;
}
.project {
width: 1200px;
margin: 0px auto;
}
.project_2 {
margin-top: 10px;
margin-bottom: 10px;
}
.parject_3 {
width: 1200px;
background-color: #FFFFFF;
height: 45px;
}
.part_3-1, .part_3-2 {
height: 45px;
border-bottom-width: 3px;
border-bottom-color: #00A9F8;
border-bottom-style: solid;
text-align: center;
line-height: 45px;
}
.part_3-1 {
background-color: #00A9F8;
width: 95px;
float: left;
padding-left: 10px;
color: #FFFFFF;
}
.part_3-2 {
width: 1095px;
float: right;
background-color: #FFFFFF;
}
.part_3-3 {
width: 1190px;
height: 45px;
background-color: #FFFFFF;
padding-left: 10px;
}
运行结果：
