CSS:
/*代码太多了没注释0.0*/
/*
* @Author: Administrator
* @Date: 2018-11-24 11:37:27
* @Last Modified by: Administrator
* @Last Modified time: 2018-11-28 23:22:11
*/
*{
padding:0;
margin:0;
overflow-x:hidden;
}
.fl{
float: left;
}
.fr{
float: right;
}
.banxin{
width: 1004px;
margin: 0 auto;
}
.long{
width: 1542px;
}
ul,li,ol{
list-style:none;
}
a{
text-decoration:none;
}
.head{
background: url("../images/caomei_04.png") no-repeat 665px 0px;
}
.green{
display: inline-block;
height: 39px;
background-color: #2d7600;
padding-left: 270px;
}
.bg{
margin-top: -5px;
}
.greennav{
float: left;
width: 155px;
height: 39px;
padding-top: 8px;
padding-left: 15px;
}
.greennav a{
float: left;
width: 155px;
height: 39px;
padding-left: 37px;
color: white;
}
.change:hover{
background-color: #419e07;
}
.main{
height: 1280px;
/* background-color: red; */
}
.l1{
width: 706px;
height: 277px;
/* background-color: red; */
/* border: solid 0.8px lightgray; */
}
.main img{
float: left;
padding-top:20px;
padding-left: 20px;
}
.l1 h5{
display: inline-block;
padding-top: 17px;
margin-left: 28px;
font-size: 16px;
}
.l1 span{
color: #bdbdbd;
margin-left: 8px;
}
.l1 a{
display: inline-block;
padding-left: 146px;
color: gray;
font-weight: bolder;
}
.l1 .greenvelle{
display: block;
margin-top: -16px;
margin-left: -5px;
}
.main .l1 p{
display: inline-block;
margin-top: -12px;
color: lightgray;
}
.main .l1 .inside li{
display: inline-block;
width: 310px;
margin-top: -5px;
}
.main .l1 .inside p{
color: green;
font-size: 12px;
margin-left: 5px;
margin-top: 3px;
}
.main .inside .arrow{
margin-top: -12px;
}
.main .l1 .inside h5{
margin-top: -15px;
font-weight: normal;
font-size: 12px;
}
.main .l2{
width: 282px;
height: 277px;
border: solid 0.8px lightgray;
}
.main .l2 h5{
display: inline-block;
padding-top: 10px;
margin-left: -70px;
font-size: 16px;
}
.main .l2 .greenvelle{
display: inline-block;
margin-top: 11px;
margin-left: -12px;
}
.main .l2 span{
color: #bdbdbd;
margin-left: 8px;
}
.main .l2 p{
margin-top: -6px;
color: lightgray;
}
.main .l2 a{
display: inline-block;
padding-left: 110px;
color: gray;
font-weight: bolder;
}
.main .l2 .inside p{
color: green;
font-size: 12px;
margin-left: 5px;
margin-top: 3px;
}
.main .l2 .inside h5{
margin-top: -15px;
margin-left: 20px;
font-weight: normal;
font-size: 12px;
}
.main .l2 li{
margin-top: -3px;
}
/* .clear{
clear: both;
overflow: hidden;
} */
.main .l3{
width: 343px;
height: 277px;
margin-top: 14px;
border: solid 1px lightgray;
/* background-color: red; */
}
.main .l3 .title{
float: left;
width: 345px;
height: 45px;
background-color: #ebf2dd;
}
.main .l3 h5{
margin-top: 15px;
margin-left: 18px;
}
.main .l3 .inside li{
margin-top: -13px;
width: 345px;
height: 40px;
}
.main .l3 span{
color: #71a510;
font-size: 12px;
margin-left: 146px;
margin-top:0px;
}
.main .l3 .inside span{
color: #71a510;
font-size: 12px;
margin-left: 16px;
margin-top:0px;
}
.main .l3 .greenvelle{
display: inline-block;
margin-top: -22px;
margin-left: -20px;
}
.main .l3 .inside a{
font-size: 12px;
/* margin-top:0px; */
display: inline-block;
padding-left: 110px;
color: gray;
font-weight: bolder;
}
.main .l3 .inside{
display: inline-block;
}
.main .l3 .inside p{
font-size: 12px;
margin-top: 15px;
}
.main .l3 .inside .diandian{
margin-top: 0px;
margin-left: 20px;
}
.main .l4{
margin-left: 6px;
margin-top: 14px;
}
.main .l5{
margin-left: 10px;
margin-top: 14px;
}
.main .l7{
margin-left: 10px;
}
.main .middle{
margin-left: -20px;
}
.footer{
height: 258px;
border: solid 1px lightgray;
margin-top: -240px;
}
.footer .footer_f1{
height: 254px;
width: 324px;
}
.footer .l8 .title{
float: left;
width: 345px;
height: 43px;
/* background-color: #ebf2dd; */
}
.footer .l8 h5{
margin-top: 15px;
margin-left: 18px;
}
.footer .l8 .inside li{
margin-top: -8px;
width: 345px;
height: 35px;
}
.footer .l8 span{
color: #71a510;
font-size: 12px;
margin-left: 146px;
margin-top:0px;
}
.footer .l8 .inside span{
color: #71a510;
font-size: 12px;
margin-left: 16px;
margin-top:0px;
}
.footer .l8 .greenvelle{
display: inline-block;
padding-top: 48px;
margin-left: -350px;
}
.footer .l8 .inside a{
font-size: 12px;
margin-top:0px;
display: inline-block;
/* padding-left: 110px; */
color: gray;
font-weight: bolder;
}
.footer .l8 .inside{
display: inline-block;
}
.footer .l8 .inside p{
display: inline-block;
font-size: 12px;
margin-top: 5px;
margin-left: 10px;
}
.footer .l8 .inside .diandian{
margin-top: -17px;
padding-left: 20px;
}
.line{
/* display: inline-block; */
margin-top: -14px;
margin-left: 50px;
}
.footer .l8 li{
height: 34px;
width: 254px;
}
.finnal h5{
display: inline-block;
padding-top: 17px;
margin-left: 28px;
font-size: 16px;
}
.finnal span{
color: #adadad;
font-size: 12px;
margin-left: 70px;
margin-top:0px;
}
.finnal p{
font-size: 12px;
font-family: "微软雅黑";
margin-top: 10px;
margin-left: 30px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/father.css">
</head>
<body>
<div class="head banxin">
<a href="#">
<img src="images/logo_02.jpg">
</a>
</div>
<div class="nav long banxin">
<ul class="green long">
<li class="greennav"> <a>网站首页</a></li>
<li class="greennav"> <a>协会概况</a></li>
<li class="greennav change"> <a>行业动态</a></li>
<li class="greennav"> <a>产品知识</a></li>
<li class="greennav"> <a>会员之家</a></li>
<li class="greennav"> <a>联系我们</a></li>
</ul>
<img src="images/bgcaomei_07.png" class="banxin long bg">
</div>
<div class="main banxin">
<ul>
<li class="l1 fl">
<img src="images/lingdao_10.png" >
<h5>最新快讯<span>NEWS</span></h5>
<a href="#">查看更多</a>
<img src="images/greenvelle.png" class="greenvelle"><p>——————————————</p>
<ul class="inside">
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用产品专业委员....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用产品专业委员....</h5>
</li>
<li>
<h5>.................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用产品专业委员....</h5>
</li>
<li>
<h5>.................................................................................................</h5>
</li>
</ul>
</li>
<li class="l2 fl">
<h5>通知报告</h5>
<a href="#">NOTICE</a>
<img src="images/greenvelle2_17.png" class="greenvelle"><p>——————————————</p>
<ul class="inside">
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
</ul>
</li>
<li class="l3 fl">
<a href="#" class="title"><h5>行业动态<span>Industry dynamics</span></h5></a>
<img src="images/greenvelle2_17.png" class="greenvelle">
<ul class="inside">
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
</ul>
</li>
<li class="l3 fl l4">
<a href="#" class="title"><h5>行业动态<span>Industry dynamics</span></h5></a>
<img src="images/greenvelle2_17.png" class="greenvelle">
<ul class="inside">
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
</ul>
</li>
<!-- daitu -->
<li class="l2 fl l5">
<h5>通知报告</h5>
<a href="#">NOTICE</a>
<img src="images/greenvelle2_17.png" class="greenvelle"><p>——————————————</p>
<ul class="inside">
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
</ul>
</li>
<img src="images/middle_38.png" height="138" width="1004" class="middle banxin">
<li class="l3 fl l6">
<a href="#" class="title"><h5>产品知识<span>Industry dynamics</span></h5></a>
<img src="images/greenvelle2_17.png" class="greenvelle">
<ul class="inside">
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
</ul>
</li>
<li class="l3 fl l7">
<a href="#" class="title"><h5>产品知识<span>Industry dynamics</span></h5></a>
<img src="images/greenvelle2_17.png" class="greenvelle">
<ul class="inside">
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
</ul>
</li>
<li class="l2 fl l5">
<h5>通知报告</h5>
<a href="#">NOTICE</a>
<img src="images/greenvelle2_17.png" class="greenvelle"><p>——————————————</p>
<ul class="inside">
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
<li>
<img src="images/arrow_16.png" class="arrow">
<p>2015-04-01 <span>NEW</span></p>
</li>
<li>
<h5>金华会长出席中国安全生产协会矿用....</h5>
</li>
<li>
<h5>................................................................................................................</h5>
</li>
</ul>
</li>
</ul>
</div>
<div class="footer banxin">
<ul>
<li class=" l3 footer_l1 fl">
<img src="images/footer_strawberry_40.png" height="254" width="385">
</li>
<li class="l8 fl">
<a href="#" class="title"><h5>产品知识<span>Industry dynamics</span></h5></a>
<img src="images/greenvelle2_17.png" class="greenvelle"><p class="line">—————————————————</p>
<ul class="inside">
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
<li>
<img src="images/arrow_16.png"><p>金华会长出席中国安全生产协会矿用....<span>2015-02-02</span></p>
</li>
<li>
<p class="diandian">................................................................................................................</p>
</li>
</ul>
</li>
<li class="finnal">
<h5>联系我们<span>awdhlaiwhd</span></h5>
<img src="images/arrow_16.png" height="11" width="15">
<p>
地址:长春朝阳区西安大路727号中银大厦A座</p>
<p>邮编:130000</p>
<p> 电话:0431-96877 0431-88923793</p>
<p>传真:0431-88923816</p>
</li>
</ul>
</div>
</body>
</html>
效果图: