content部分css（一）
紧接着上一篇补充css的内容：https://blog.youkuaiyun.com/weixin_42280639/article/details/84582895
<style type="text/css">
#leftArticle{
float: left;
margin: 10px;
display: inline;/*避免IE6双倍margin left 的bug，也就是margin宽变成2倍*/
}
#rightInfo{
float: left;
margin: 10px;
}
#content{
overflow: hidden;/*消除所有子元素的浮动（上述leftArticle和rightInfo都用到了float: left;）*/
background: #EAEAEA;
font-size: 12px;
line-height: 24px;
}
只需要在leftInfo里面设置margin-right: 0px;/*避免左右两边的中间处margin变成双倍*/
#leftArticle a,#leftArticle a img{
display: block;
width: 765px;
height: 467px;
}
#leftArticle h1{
margin: 20px 0;
/*此处使用margin不用padding，如果使用padding需要重新设置line-height做垂直居中用*/
}
h1{
font-size: 100%;/*line-height多大他就会多大*/
}设置leftArticle中文字的格式
#leftArticle p{
color: #333;
text-indent: 2em;/*缩进,一个em就相当于14px，就相当于是一个字宽*,2个em相当于28px*/
font-size: 14px;
}
那么左边部分的css样式就已经完成了，查看一下左边的完整样式
leftArticle全部css代码
#content{
overflow: hidden;/*消除所有子元素的浮动（上述leftArticle和rightInfo都用到了float: left;）*/
background: #EAEAEA;
font-size: 12px;
line-height: 24px;
}
#leftArticle{
float: left;
margin: 10px;
display: inline;/*避免IE6双倍margin left 的bug，也就是margin宽变成2倍*/
margin-right: 0px;/*避免左右两边的中间处margin变成双倍*/
font-size: 24px;
width: 765px;
}
#leftArticle #artId,#leftArticle a img{
display: block;
width: 765px;
height: 467px;
}
#leftArticle h1{
margin: 20px 0;
/*此处使用margin不用padding，如果使用padding需要重新设置line-height做垂直居中用*/
}
#leftArticle h1 a{
color: #900;
text-decoration: none;
margin-left: 20px;
}
#leftArticle h1 a:hover{
text-decoration: underline;/*鼠标点击产生下划线*/
}
h1{
font-size: 100%;/*line-height多大他就会多大*/
}
#leftArticle p{
color: #333;
text-indent: 2em;/*缩进,一个em就相当于14px，就相当于是一个字宽*,2个em相当于28px*/
font-size: 14px;
margin-bottom: 20px;
}content部分css（二）
右边部分css完成状态
代码如下
#rightInfo{
float: left;
margin: 10px;
/*background: #FF0000;/*测试一下这个块的高宽*/
width: 381px;
height: 800px;
}
#rightInfo dl{
margin-bottom: 10px;
}
#rightInfo dl dt{
font-size: 15px;
font-weight: bold;/*加重*/
text-indent: 28px;/*28px=2em*/
background: #900;
height: 32px;
line-height: 32px;/*居中*/
color:#FFF;
}
#rightInfo dl dd{
height: 24px;
line-height: 24px;
color:#333;/*重灰色，越小越灰*/
background: #FFF;
text-indent: 16px;
font-size: 13px;
}
#rightInfo dl dd:last-child{/*最后一个dd下添加以下的属性*/
margin-bottom: 20px;
}
#rightInfo dl dd a{
text-decoration: none;
color: #333;
}
#rightInfo dl dd a:hover{
color: #900;
text-decoration: underline;
}foot部分css
#footer{
background: #393838;/*红色，比900深一点*/
margin-top: 10px;
padding-top: 18px;
height: 68px;
line-height: 18px;/*line-height给字用的*/
text-align: center;
color: #CCC;
font-size: 12px;
margin-bottom: 40px;
}
#footer a{
color:#CCC;
text-decoration: none;
}
#footer a:hover{
text-decoration: underline;
}
总体样式、代码
<!--
作者：offline
时间：2018-11-28
描述：主页的搭建（一）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*为什么要写margin：0*/
/*因为不同浏览器缺省的margin和padding，都设成0，避免兼容性问题*/
/*加不加*号，加*号之后会在整个浏览器跑一遍，轮询所有的元素效率低下，这会增加浏览器的负担*/
/**{
margin: 0;
padding: 0;
}*/
/*正确的写法如下：囊括所有元素*/
body,div,p,ul,li,dl,dt,dd,h1,a{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑""verdana, geneva, sans-serif";/*设置字体格式*/
}
html,body{
background: #2E2E2E;
}
#header,#banner,#content,#footer{
/*background: #900; /*用一个红色来看元素整体是否居中*/
width: 1176px;
margin: 0 auto;/*margin: 上下居中是0，而auto代表的就是左右居中*/
}
#header{
overflow: hidden;/*overflow:用来隐藏超过div的部分，消除浮动，overflow用于隐藏溢出*/
}
/*
* 1.浮动会让子元素脱离文档流，当所有元素都脱离时，而与此同时父元素没有设定高度造成父元素高度变为0
* （也就是这个问题中header高度为0的问题）
* 2.overflow:hidden；会消除所有子元素的浮动，然后进行自适应高度计算，因为父元素没有设定高度，所以不会裁剪。
* /
/* 告诉现在的header高度为0 */
/*#header{
width: 1500px;
background: #00FF00;/*设成绿色，查看一下header高度，发现Chrome没有变化，header高度为0
}*/
body{
padding-top: 5px;
}
img{
border: none;/*取消img的边框*/
}
/*通常来说，img元素是内联元素，为了能为img元素设定宽高
* 我们会用display:block来修饰img
* 如果img被包括在一个a标签的内部，那么a标签也需要设为display:block修饰
*/
#logo{
width: 220px;
height:84px;
float: left;
}
#logo a{
display: block;
width: 222px;
height: 84px;
}
#logo a img{
display: block;
}
#nav{/*导航栏*/
width:956px;/*1176-222=954所以还剩下的宽度是954,但是不知道什么原因，不匹配，所以我加了2px*/
height: 84px;
float: left;
background: #111111;
}
#nav li{
float: left;
list-style: none;/*去掉点*/
}
#nav li a{
text-decoration: none;/*去掉下划线*/
display: block;/*因为a标签是内联元素，所以需要先把他设为块，才能更改他的大小*/
padding: 0 20px;/*上下不需要设置，将左右设成20px*/
height: 84px;
line-height: 84px;/*居中显示*/
float: left;
font-size: 23px;
text-align: center;
color: #EEEEEE;
}
#nav li a:hover{/*设置菜单栏点击后的样式*/
color: #111111;
font-size: 24px;
background: #EEEEEE;
}
#nav li .navActive{
background: linear-gradient(to bottom,#EEEEEE,#555555);/*设置他的颜色是渐变的*/
*background: #999999;
/*
* 对IE6而言，第一行，linear-gradient不支持，所以显示不出来
* 第二行，认识*，所以background设定为#999999
* 第二行覆盖第一行
* 对Chrome而言，第一行，支持
* 第二行，不认识*
* 第一行生效
*/
}
#banner{
margin: 10px auto;/*上下10个px左右居中*/
height: 580px;
}
#banner a,#banner a img{
display: block;
width: 1176px;
height: 580px;
}
#content{
overflow: hidden;/*消除所有子元素的浮动（上述leftArticle和rightInfo都用到了float: left;）*/
background: #EAEAEA;
font-size: 12px;
line-height: 24px;
}
#leftArticle{
float: left;
margin: 10px;
display: inline;/*避免IE6双倍margin left 的bug，也就是margin宽变成2倍*/
margin-right: 0px;/*避免左右两边的中间处margin变成双倍*/
font-size: 24px;
width: 765px;
}
#leftArticle #artId,#leftArticle a img{
display: block;
width: 765px;
height: 467px;
}
#leftArticle h1{
margin: 20px 0;
/*此处使用margin不用padding，如果使用padding需要重新设置line-height做垂直居中用*/
}
#leftArticle h1 a{
color: #900;
text-decoration: none;
margin-left: 20px;
}
#leftArticle h1 a:hover{
text-decoration: underline;/*鼠标点击产生下划线*/
}
h1{
font-size: 100%;/*line-height多大他就会多大*/
}
#leftArticle p{
color: #333;
text-indent: 2em;/*缩进,一个em就相当于14px，就相当于是一个字宽*,2个em相当于28px*/
font-size: 14px;
margin-bottom: 20px;
}
#rightInfo{
float: left;
margin: 10px;
/*background: #FF0000;/*测试一下这个块的高宽*/
width: 381px;
height: 800px;
}
#rightInfo dl{
margin-bottom: 10px;
}
#rightInfo dl dt{
font-size: 15px;
font-weight: bold;/*加重*/
text-indent: 28px;/*28px=2em*/
background: #900;
height: 32px;
line-height: 32px;/*居中*/
color:#FFF;
}
#rightInfo dl dd{
height: 24px;
line-height: 24px;
color:#333;/*重灰色，越小越灰*/
background: #FFF;
text-indent: 16px;
font-size: 13px;
}
#rightInfo dl dd:last-child{/*最后一个dd下添加以下的属性*/
margin-bottom: 20px;
}
#rightInfo dl dd a{
text-decoration: none;
color: #333;
}
#rightInfo dl dd a:hover{
color: #900;
text-decoration: underline;
}
#footer{
background: #393838;/*红色，比900深一点*/
margin-top: 10px;
padding-top: 18px;
height: 68px;
line-height: 18px;/*line-height给字用的*/
text-align: center;
color: #CCC;
font-size: 12px;
margin-bottom: 40px;
}
#footer a{
color:#CCC;
text-decoration: none;
}
#footer a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<a href="#">
<img src="./img/logo.png" />
</a>
</div>
<div id="nav">
<ul>
<li><a class="navActive" href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
</ul>
</div>
</div>
<div id="banner">
<a href="#"><img src="img/bannerR.png"/></a>
</div>
<div id="content">
<div id="leftArticle">
<a id="artId"href="#"><img src="img/article2.jpg" alt="" /></a>
<h1><a href="#">文章标题============</a></h1>
<p>企鹅我去热饭阿斯弗發揮骨幹和關乎西安市飞速发货搜IC阿此事件四粉红色的是佛回四川搜我和是使导航是通讯机从v ID局is的还是会死发挥好二哥胡歌忽而給我fish的風險和機會的復古如果光滑度合格如果hi的發送附件是度過的那些度hi度刮鬍刀刮鬍刀和復試分數覅色热气啊啊大阿斯顿是否会黑UR给大家分析会发生IEEE如果我红烧豆腐接电话覅而放入 福覅UR回顾人工湖v个数设任何人无哦么蝴蝶酥符合水电费规划局快乐成长手册学习呢笑口常开吧是靳绥东是就是滴哦不仅是破的 十几次奥数据从怕说出口的数据搜查给排水中间产品搜几次多试几次是的奇偶IC酒叟点击产生大V就 长三角四川贾斯丁是刺激刺激度低功耗度而同一天局势问我让他光和热</p>
<p>企鹅我去热饭阿斯弗發揮骨幹和關乎二哥胡歌忽而給我fish的風險和機发送不蹿升窜出is奇偶is多喝点后付费湖是多少石佛寺紧凑型车几乎是杜舒适度和促使是會的復古如果光滑度合格如果hi的發送附件是度過的那些度hi度刮鬍刀刮鬍刀和復試分數覅色热气啊啊大阿斯顿是否会黑UR给大家分析会发生反而UR诶给认购额诶软件诶附近的地方GVE如果我红烧豆腐接电话覅而放入 福覅UR回顾人工湖v个数设任何人无哦么蝴蝶酥符合度低功耗度 职称证书吃撒初三光和茶多酚过年回家双方各汉健康，模拟吧v撒风格化是打发斯蒂芬水电费刚回家沃尔特也会更改方法不对称我去而太阳大扫除徐我肤色大哥发吧v水电费功能改变对方改变是大法官V儿童有害健康解码和割发瓦尔多提意见很快就去玩儿请问该如何提高你发不发VCD实现多幅低功耗代首B热</p>
<p>企鹅我去热饭阿斯弗發揮骨幹和關乎二哥胡歌忽而給我fish的風險和機會史称年送你的护士都很丰富的是你此生此搜查搜狐长度地方就是豆腐司法解释对方司机湿地恢复水电费的说法是电话费福建省的復古如果光滑度合格如果hi的發送附件是度過的下上传速度收低搜福建省双方都解放军搜积分搜索那些度hi度刮鬍刀刮鬍刀和復試分數覅色热气啊啊大阿斯顿是否会黑UR给大家分析会发生反而UR诶给认购额诶软件诶附近的地方GVE如果我红烧豆腐接电话覅而放入 福覅UR回顾人工湖v个数设任何人无哦么蝴蝶酥符合度低玩儿体育节目和工本费是大城市显示出大V发表过户金银花如果对方而体育局和吧v各行业好吧玩儿体育局为对方更好我二姨功耗度玩儿体育局框架儿童与僧多粥少玩儿的风格沃尔特海洋局解码和弄个吧范德萨水电费刚回家和娃儿同行业吧v的撒电饭锅电饭锅光和热</p>
</div>
<div id="rightInfo">
<dl>
<div>
<dt>标题1：请问问问而其他</dt>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
</div>
<div>
<dt>标题2：请问问问而其他</dt>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
</div>
<div>
<dt>标题3：请问问问而其他</dt>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
</div>
<div>
<dt>标题4：请问问问而其他</dt>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
</div>
<div>
<dt>标题5：请问问问而其他</dt>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
</div>
<div>
<dt>标题6：请问问问而其他</dt>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
</div>
<div>
<dt>标题7：请问问问而其他</dt>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
<dd><a href="#">去去去特服上的伟大的送点饭</a></dd>
</div>
</dl>
</div>
</div>
<div id="footer">
<p>
<a href="">关于XX |</a>
<a href="">广告服务 |</a>
<a href="">联系我们 |</a>
<a href="">版权声明 |</a>
<a href="">合作对象</a>
</p>
<p>京ICP备 11111111号</p>
<!--网站提交备案资料，经工业信息化产业部（及各地通信管理局）
审核通过后，会通过电子邮箱发送一个备案号码给你-->
All rights(c) 2008-2010 Reserved <!-- 表示所有的权利都是被保护的:主要是版权-->
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
