吉软-人文精英班-第七次作业

原创
2018/11/28 23:31
阅读数 37

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>

效果图

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部