快手上张韵子整容了吧:css

来源:百度文库 编辑:偶看新闻 时间:2024/04/27 16:10:58

body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{
margin:0;
padding:0;
}

#logo,#nav,#banner,#content,#footer{width:900px; margin:0 auto;}

#logo{
height:80px;
}

#logoLink{
display:block;/*将链接a 转化成块状元素,这样才能显示出背景*/
width:173px;
height:46px;
background:url(images/logo1.gif) no-repeat;
float:left;/*为了让ie6 和ff 显示效果一样,如果不加上这句话,后面的margin-top:20px;两个浏览器解析不一样,大家可以去掉这句话,看看两者显示效果差别*/
margin-top:20px;/*设置a 的顶部外边距为20 像素,这样才能和浏览器顶部有段距离,才能和图片中做的一样*/
}

#nav{
height:42px;
}

#nav ul{
height:42px;
background:#56990c;
}

#nav ul li{height:42px; float:left;list-style:none;}

#nav ul li a{
display:block;/*转化成块状元素,因链接是内链元素,若想给它定义下面的属性,必须将它转化成块状元素,*/
height:42px;
color:#FFF;
padding:0 10px;
line-height:42px;
font-size:14px;
font-weight:bold;
font-family:Arial;
text-decoration:none;/*去除链接样式,默认是有下划线的,加上这句就没有任何样式,下划线也没有了*/
float:left;/*这句一定要加,不然在IE6 中会出现,这种效果*/
}

#nav ul li a:hover{background:#68acd3;}

#banner{
background:url(images/banner4.jpg) no-repeat;
height:290px;
}

#content{
overflow:hidden;
background:#d3e7f2;
}

#content #contentL,#content #contentR{float:left; padding:15px;}

#content #contentL{width:570px; background:#f0f0f0;}

#content #contentR{width:270px; background:#d3e7f2;}

#footer{
text-align:center;
background:#68acd3;
padding: 10px 0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
line-height:20px;
}

#content #contentL h1{
height:40px;
line-height:40px;/*设置行距,目的是保证h1 中的文字垂直居中*/
font-size:16px;
color:#054d73;
border-bottom:1px #969696 dashed;/*设置h1 的下边框为宽度1 像素的虚线*/
margin-bottom:10px;/*设置外边距,让h1 和下面的内容区域p 保持10 像素的距离*/
}

#content #contentL p{
font-size:12px;
line-height:20px;
text-indent:2em;/*这句话的目的就是为了让文章第一行缩进两个汉字,记住这句话就OK了*/
}

#content #contentL p img{
float:left;
margin-right:10px;
}

#content #contentR h1{
height:40px;
line-height:40px;/*设置行距,目的是保证h1 中的文字垂直居中*/
font-size:16px;
color:#900;
border-bottom:1px #969696 dashed;/*设置h1 的下边框为宽度1 像素的虚线*/
margin-bottom:10px;/*设置外边距,让h1 和下面的内容区域p 保持10 像素的距离*/
}

#content #contentR strong{
display:block;/*只有把strong 标签,转化成块状元素,margin-bottom:5px;才会起作用,才能使与下面的元素维持一定距离*/
font-size:12px;
color:#333;
margin-bottom:5px;
}

#content #contentR table{
font-size:12px;
color:#900;
}

#content #contentR p{
font-size:12px;
}