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;才会起作用,才能使<strong>与下面的元素维持一定距离*/ font-size:12px; color:#333; margin-bottom:5px; }
#content #contentR table{ font-size:12px; color:#900; }
#content #contentR p{ font-size:12px; }
|