昨天没有写博客，实在是忙不过来，晚上布局网页到十一二点，有时焦头烂额，有时丢三落四，有时牵一发而动全身，编程路上遇见第一块绊脚石~
如果你每天没有进步，那你一定是在退步~
26号上课有点走神，有些知识点没有听清，还好今天老师通过例案的方式详细讲了一遍~
按着老师的框架将这两天国务院的网页做完~ 老实说并不难，但还是熟练度的问题，相信做多了 我也能变成老师那般的老司机吧~
附今天老师上课的几点小结，帮助我更好的理解和应用CSS
1、外部样式表：<link rel="stylesheet" href="css/index.css">
2、标签的类名（class）可以有多个，多个类名用空格分割，都在引号里面
3、父元素、子元素、同级元素
4、有margin-top的元素是父元素的第一个子元素，那么这个外边距将作用在父元素上。
5、a标签、span标签，默认width和height不起效；
行内标签，块标签 dispaly： block inline inline-block
6、设置居中 1、标签 ：center 2、样式：margin: 0 auto;
7、内边距和边框会导致元素本身的宽度或高度变化。
解决方式： 样式：box-sizing: border-box;
8、子元素超出父元素的内容处理方式：overflow：
附上今天完成的框架网页，总之要学的东西还有很多，我应该多总结多思考，每天进步一点点~
样式表：
*{
padding: 0px;
margin: 0px;
}
/*头部css*/
#top{
width: 100%;
height: 130px;
}
.top_div{
width: 460px;
height: 50px;
float: left;
}
.search{
width: 225px;
margin-left: 330px;
padding-top: 40px;
}
.guohui{
width: 471px;
margin-left: 174px;
padding-top: 40px;
}
.guohui img{
margin-right: 10px;
}
.daohang{
width:100%;
height: 37px;
background: url(../images/nav_bg.jpg) repeat-x;
margin-top: 3px;
}
/*搜索框*/
.search_div{
width: 100%;
height: 50%;
}
.kuaijie{
/* background-color: red;*/
}
/*top搜索框*/
.search_text{
width: 85%;
border: 1px solid #CCCCCC;
height: 35%;
border-radius: 10px;
}
.search_text .wbk{
height: 100%;
position: relative;
top: -3px;
left: 10px;
border: none;
}
.search_text .btn{
width: 20px;
height: 20px;
background: url(../images/topImg/search_button.png) no-repeat center;
position: relative;
top: -3px;
left: 30px;
border: none;
}
.kuaijie ul{
width: 100%;
height: 100%;
list-style: none;
}
.kuaijie ul li{
float: left;
margin-right: 5px;
}
.kuaijie ul li a{
display: block;
}
.kuaijie ul li span{
font-size: 12px;
color: #025194;
}
/*快捷图标*/
.icon1{
width: 21px;
height: 16px;
background: url(../images/topImg/icon_1_hover.jpg);
}
.icon2{
width: 16px;
height: 16px;
background: url(../images/topImg/icon_2_hover.jpg);
}
.icon3{
width: 12px;
height: 17px;
background: url(../images/topImg/icon_3_hover.jpg);
}
.icon4{
width: 21px;
height: 17px;
background: url(../images/topImg/icon_4.jpg);
}
.icon5{
width: 23px;
height: 18px;
background: url(../images/topImg/icon_5.jpg);
}
/*top-导航*/
.dh_center{
padding-left: 26px;
width: 75%;
height: 37px;
line-height: 37px;
vertical-align: middle;
margin: 0 auto;
}
.dh_center ul{
list-style: none;
}
.dh_center ul li{
font-size: 20px;
color: #fff;
font-weight: bold;
float: left;
padding: 0px 25px;
border-right: 1px solid #fff;
}
.dh_center ul li img{
position: relative;
top: 3px;
left: 0px;
}
/*身体css*/
#center{
width: 100%;
height: 1680px;
background-color: #F2F2F2;
}
.center_div{
width: 75%;
height: 100%;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
padding: 0px 35px;
}
.mbxdh{
width: 100%;
height: 44px;
line-height: 44px;
vertical-align: middle;
font-size: 12px;
}
.clt{
float: left;
height: 300px;
}
.center_left{
width: 63%;
background-color: red;
}
.center_center{
width: 7%;
}
.center_right{
width: 30%;
background-color: rosybrown;
}
.bt1,.bt2,.bt3{
height: 50px;
line-height: 50px;
vertical-align: middle;
font-size: 25px;
text-indent: 15px;
background: #DCDCDD;
}
.bt4{
font-size: 18px;
}
.bt5{
width: 100%;
height: 150px;
background-color: #FFFFFF;
border-bottom: hidden;
}
.bt6{
width: 112px;
height: 30px;
background-color: #CCCCCC;
}
.bt1_neirong,.bt2_neirong{
width: 100%;
}
.bt1_neirong img{
width: 100%;
height: 600px;
}
.bt2_neirong img{
width: 100%;
height: 353px;
}
.bt2{
margin-top: 20px;
}
.zt2{
font-size: 12px;
color: darkgray;
}
.right_div{
width:100%;
height: 78px;
background-color: #C1D1D0;
}
.rd1,.rd2{
width: 100%;
margin: 0 auto;
height: 39px;
line-height: 39px;
vertical-align: middle;
}
.rd2{
color: #fff;
font-size: 14px;
}
.right_div1{
width: 100%;
height: 375px;
background-color: #FFFFFF;
}
.rd3{
font-size: 20px;
padding-top: 30px;
}
.rd4,.rd5{font-size: 12px;
vertical-align: middle;
}
.sbj1{
padding-top: 25px;
}
.sbj2{
padding-top: 10px;
}
.zt1{
font-size:14px;
color: #DCDCDD;
}
.right_div2,.right_div3,.right_div5,.right_div6{
width:100% ;
height: 57px;
background-color:#C1D1D0 ;
font-size: 20px;
vertical-align: middle;
line-height: 57px;
margin: 0 auto;
margin-top: 0px;
}
.right_div4{
width: 100%;
height: 40px;
background-color: #DCDCDD;
padding-top: 0px;
line-height: 40px;
margin: 0 auto;
font-size: 20px;
vertical-align: middle;
}
/*底部*/
#foot{
width: 100%;
height: 500px;
background-color: #F2F2F2;
}
.foot_1{
width: 75%;
height: 100%;
margin: 0 auto;
background: #FFFFFF;
box-sizing: border-box;
padding: 0px 35px;
}
.foot_2{
width: 100%;
height: 8px;
margin: 0 auto;
background: #025194;
}
.foot_3{
width: 100%;
height: 210px;
margin: 0 auto;
background-color: #FFFFFF;
}
ul{
list-style: none;
}
.zt3{
font-size: 18px;
font-weight: 200;
}
.zt4{
font-size: 12px;
padding-top: 5px;
}
.zt5{
float: left;
margin-left: 20px;
margin-right: 20px;
}
HTML表：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="images/favicon.ico" rel="shortcut icon" sizes="any" type="image/x-icon">
<title>国务院</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头-->
<div id="top">
<div class="guohui top_div">
<img src="images/topImg/logo.jpg" alt="">
<img src="images/topImg/logo_wz.jpg" alt="">
</div>
<!-- 搜索框-->
<div class="search top_div">
<div class="kuaijie search_div">
<ul>
<li><a class="icon1" href="#" ></a></li>
<li><a class="icon2" href="#" ></a></li>
<li><a class="icon3" href="#" ></a></li>
<li><a class="icon4" href="#" ></a></li>
<li><a class="icon5" href="#" ></a></li>
<li><span>简</span></li>
<li><span>|</span></li>
<li><span>繁</span></li>
<li><span>|</span></li>
<li><span>EN</span></li>
</ul>
</div>
<div class="search_text search_div">
<input class="wbk" type="text">
<input class="btn" type="button" value="">
</div>
</div>
<div class="daohang top_div" >
<!-- 导航div-->
<div class="dh_center">
<ul>
<li><img src="images/topImg/icon_9.jpg" alt=""></li>
<li>国务院</li>
<li>总理</li>
<li>新闻</li>
<li>政策</li>
<li>互动</li>
<li>服务</li>
<li>数据</li>
<li>国情</li>
</ul>
</div>
</div>
</div>
<!--身体-->
<div id="center">
<div class="center_div">
<div class="mbxdh"><b>首页</b> > 国务院</div>
<!-- 身体左-->
<div class="center_left clt">
<div class="bt1">国务院领导</div>
<div class="bt1_neirong">
<img src="images/2017-09-27_111255.jpg" alt="">
</div>
<div class="bt2">国务院组织机构</div>
<div class="bt2_neirong">
<img src="images/table.jpg" alt="">
</div><br />
<div class="bt3">动态 <span class="zt2">按发稿时间排序</span></div>
<div class="bt3_neirong">
<div>
<div class="bt4 sbj1">基辛格：美中应坚持友好与合作 <span class="zt1">2017-09-27</span></div><hr />
<div class="bt4 sbj1">刘延东出席中美文化论坛并致辞 <span class="zt1">2017-09-27</span></div><hr />
<div class="bt4 sbj1">刘延东出席中美大学校长与智库论坛 <span class="zt1">2017-09-27</span></div><hr />
<div class="bt4 sbj1">特写：以球会友，搭建友谊之桥——国务院副总理刘延东纽约观看中美中学生男篮友谊赛侧记 <span class="zt1">2017-09-27</span></div><hr />
<div class="bt4 sbj1">郭声琨会见出席第86届国际刑警组织全体大会的部分外国客人 <span class="zt1">2017-09-27</span></div><hr /><br />
<div class="bt5">
<center><div class="bt6">更多 >></div></center>
</div>
</div>
</div>
</div>
<!-- 身体中-->
<div class="center_center clt">
<div style="height: 1550px; border-left: 1px solid #ccc; width: 0px; margin: 0 auto;"></div>
</div>
<!-- 身体右-->
<div class="center_right clt">
<div class="right_div">
<div class="rd1"><center>国务院常务会议</center></div>
<div class="rd2"><center>2017-09-20</center> </div>
</div>
<div class="right_div1">
<div class="rd3">视窗 丨 解读</div>
<hr>
<div>
<div class="rd4 sbj1"> 国务院常务会议 <span class="zt1">2017-09-13</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-09-06</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-08-30</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-08-23</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-08-18</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-07-28</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-07-19</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-07-12</span></div>
<div class="rd4 sbj2"> 国务院常务会议 <span class="zt1">2017-07-05</span></div>
<div class="rd4 sbj2"> 更多 >></div>
</div><br /><br />
</div>
<div class="right_div2"><center>国务院全体会议</center></div><br />
<div class="right_div3"><center>政府工作报告</center></div><br />
<div class="right_div4"><center>国务院组成部门负责人</center></div>
<div class="rd5 sbj1"><img src="images/sanjiaoxing.jpg">外交部部长 王毅</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">国防部部长 常万全（兼）</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">发展改革委主任 何立峰</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">教育部部长 陈宝生</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">科技部部长 万钢（兼）</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">工业和信息化部部长 苗圩</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">国家民委主任 巴特尔（蒙古族）</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">公安部部长 郭声琨（兼）</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">安全部部长 陈文清</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">监察部部长 杨晓渡</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">民政部部长 黄树贤</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">司法部部长 张军</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">财政部部长 肖捷</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">人力资源社会保障部部长 尹蔚民</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">国土资源部部长 姜大明</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">环境保护部部长 李干杰</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">住房城乡建设部部长 王蒙徽</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">交通运输部部长 李小鹏</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">水利部部长 陈雷</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">农业部部长 韩长赋</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">商务部部长 钟山</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">文化部部长 雒树刚</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">卫生计生委主任 李斌（女）</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">人民银行行长 周小川（兼）</div>
<div class="rd5 sbj2"><img src="images/sanjiaoxing.jpg">审计署审计长 胡泽君（女）</div><br />
<div class="right_div5"><center>历届国务院领导机构</center></div><br />
<div class="right_div6"><center>历任国务院总理</center></div><br />
</div>
</div>
</div>
<!--底部-->
<div id="foot">
<div class="foot_1">
<div class="foot_2"></div>
<div class="foot_3">
<ul class="zt5"><br />
<li class="zt3">国务院</li>
<li class="zt4">动态</li>
<li class="zt4">常务会议丨视窗</li>
<li class="zt4">全体会议</li>
<li class="zt4">组织机构</li>
<li class="zt4">政府工作报告</li>
</ul>
<ul class="zt5"><br />
<li class="zt3">总理</li>
<li class="zt4">最新</li>
<li class="zt4">讲话</li>
<li class="zt4">文章</li>
<li class="zt4">媒体报道</li>
<li class="zt4">视频</li>
<li class="zt4">音频</li>
<li class="zt4">图片库</li>
</ul>
<ul class="zt5"><br />
<li class="zt3">新闻</li>
<li class="zt4">要闻</li>
<li class="zt4">专题</li>
<li class="zt4">政务联播</li>
<li class="zt4">新闻发布</li>
<li class="zt4">人事</li>
<li class="zt4">滚动</li>
</ul>
<ul class="zt5"><br />
<li class="zt3">国务院</li>
<li class="zt4">动态</li>
<li class="zt4">常务会议丨视窗</li>
<li class="zt4">全体会议</li>
<li class="zt4">组织机构</li>
<li class="zt4">政府工作报告</li>
</ul>
<ul class="zt5"><br />
<li class="zt3">国务院</li>
<li class="zt4">动态</li>
<li class="zt4">常务会议丨视窗</li>
<li class="zt4">全体会议</li>
<li class="zt4">组织机构</li>
<li class="zt4">政府工作报告</li>
</ul>
<ul class="zt5"><br />
<li class="zt3">国务院</li>
<li class="zt4">动态</li>
<li class="zt4">常务会议丨视窗</li>
<li class="zt4">全体会议</li>
<li class="zt4">组织机构</li>
<li class="zt4">政府工作报告</li>
</ul>
<ul class="zt5"><br />
<li class="zt3">国务院</li>
<li class="zt4">动态</li>
<li class="zt4">常务会议丨视窗</li>
<li class="zt4">全体会议</li>
<li class="zt4">组织机构</li>
<li class="zt4">政府工作报告</li>
</ul>
<ul class="zt5"><br />
<li class="zt3">国务院</li>
<li class="zt4">动态</li>
<li class="zt4">常务会议丨视窗</li>
<li class="zt4">全体会议</li>
<li class="zt4">组织机构</li>
<li class="zt4">政府工作报告</li>
</ul>
</div>
<hr />
</div>
</div>
</body>
</html>
网页布局开始有点难度了，更要跟上老师的步伐，大家一起加油吧！
3975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
