div+css实现交通运输网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .all {
                width: 960px;
                height: 975px;
                margin: auto;
            }
            .header {
                background-image: url(Image/top_bg.jpg);
                width: 960px;
                height: 85px;
                background-repeat: no-repeat;
            }
            .b div{
                width: 121px;
                height: 40px;
                float: left;
                text-align: center;
                padding-top: 10px;
                color: rgb(21,9,14);
            }
            .top {
                width: 740px;
                height: 820px;
                margin-left: 120px;
            }
            .footer {
                position: fixed;
                bottom: 0;
                background-image: url(Image/footer.jpg);
                width: 960px;
                height: 60px;
                background-repeat: no-repeat;
                font-size: 12px;
                color: #000000;
                text-align: center;
            }
            .b {
                background-image: url(Image/menu_bg.jpg);
                background-repeat: no-repeat;
                width: 740px;
                height: 50px;
            }
            .c {
                background-image: url(Image/banner.jpg);
                background-repeat: no-repeat;
                width: 740px;
                height: 300px;
                margin-top: 20px;
                position: relative;
            }
            .c>img{
                position: absolute;
                right: 40px;
                bottom: 20px;
            }
            .d {
                background-size: 246px;
                width: 740px;
                height: 180px;
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
            }
            .e {
                width: 740px;
                height: 250px;
            }
            .d1,
            .d2,
            .d3 {
                background-image: url(Image/title_bg.jpg);
                background-repeat: no-repeat;
                height: 180px;
                width: 240px;
                position: relative;
            }
            .d img{
                position: absolute;
                right: 5px;
                top: 25px;
            }
            .d5{
                height: 20px;
                width: 70px;
                color: white;
                position: absolute;
                margin-top:15px;
                margin-left: 20px;
            }
            .d ul{
                margin-left: 30px;
                margin-top: 60px;
                font-size: 12px;
                line-height: 20px;
            }
            .e1 img{
                margin-right: 10px;
                float: right;
            }
            .e1 {
                width: 492px;
                height: 250px;
                float: left;
            }

            .e2 {
                width: 240px;
                height: 250px;
                float: left;
                
            }
            a{
                color: rgb(44,144,184);
                font-size: 15px;
            }
            .e11{
                float: left;
                color: rgb(113,113,113);
                font-size: 12px;
                width: 320px;
                height: 30px;
                text-indent: 2em;
                margin-top:15px;
            }
            .e13{
                width: 480px;
                text-indent: 2em;
                color: rgb(113,113,113);
                font-size: 12px;
                margin-top: 40px;
            }
            .e12{
                text-indent: 2em;
                margin-top: 100px;
                color: rgb(37,103,151);
                font-size: 12px;
                width: 480px;
                height: 30px;
            }
            .e21{
                width: 230px;
                height: 50px;
                font-size: 12px;
                margin-left: 15px;
                margin-top: 20px;
                margin-bottom: 20px;
                text-indent: 2em;
                color: rgb(113,113,113);
            }
            .e2 a{
                font-size: 13px;
                text-align: center;
                margin-left: 15px;
                padding-top: 10px;
                font-weight: bold;
            }
            .e2 img{
                margin-left: 160px;
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="header"></div>
            <div class="top">

                <div class="b">
                    <div>咨询中心</div>
                    <div>交通频道</div>
                    <div>港口船舶</div>
                    <div>物流资讯</div>
                    <div>贸易频道</div>
                    <div>展览会议</div>
                </div>
                <div class="c"><img src="Image/detail.jpg"></div>
                <div class="d">
                    <div class="d1"><div class="d5">交通频道</div><img src="Image/more.jpg">
                        <ul>
                            <li>7月份国际国内海运运价情报</li>
                            <li>环渤海港口资源整合大幕已全部拉开</li>
                            <li>腹地之争:营口港吃掉大连港</li>
                            <li>原油运价上涨明显,成品油轮下行加速</li>
                            <li>以港口建设为龙头大力推进沿海开发</li>
                        </ul>
                    </div>
                    <div class="d2"><div class="d5">港口船舶</div><img src="Image/more.jpg">
                        <ul>
                            <li>环渤海港口资源整合大幕已全部拉开</li>
                            <li>腹地之争:营口港吃掉大连</li>
                            <li>原油运价上涨明显成品油轮下行加速</li>
                            <li>以港口建设为龙头大力推进沿海开发</li>
                            <li>面对金融危机青岛港吞吐量跨越2亿吨</li>
                        </ul>
                    </div>
                    <div class="d3"><div class="d5">物流资讯</div><img src="Image/more.jpg">
                        <ul>
                            <li>电子商务与快递物流大会9月在杭举行</li>
                            <li>论邮政物流对化解B2物流瓶颈作用</li>
                            <li>广州计划6年初步建成物流体系</li>
                            <li>西部最大物流中心:那曲物流中心落成</li>
                            <li>上半年快递业收入同比增10.36</li>
                        </ul>
                    </div>
                </div>
                <div class="e">
                    <div class="e1"><a href="#">物流企业:标准化、信息化是当务之急</a><div class="e11">近日,国内最大的物流官理软件供应商博科资讯直属的物流供应链研究中心发布了其《物流业调整和振兴规划》效应调研报告,对2009年 第一季度中国企业物流市场份额、物流企业发展状况等问题进行分析比较。</div><img src="Image/003.jpg">
                          <div class="e12">博科资讯物流供应链研究中心负责人王颐介绍,物流标准化是以物流为-个大系统,分别制定系统内部各个环节的工作标准、技术标准社服务标准,各岗位责任制。操作程序、机械设备使用规定等。以系统为出发点,研究各个系统与分领域中各个标准的配合性,按其要求,统一整个物流系统的标准、计量标准等。</div>
                          <div class="e13">实现物流标准化是发展物流技术、实施大系统物流管理的有效保证。然而目前的标准化体系已远远不能满足现代物流业发展的需求,在实际的运作过程中表现出严重的缺陷。</div>
                          <img src="Image/knows.jpg">
                    </div>
                    <div class="e2">
                        <a href="#">月份国际国内海运运价情报</a>
                        <div class="e21">尽管全球经济见底信号越来越清晰,但在7月份传统旺季中,除了集装箱运输市场触底反弹外其它.....</div>
                        <a href="#">环渤海港口资源整合大已全部拉开</a>
                        <div class="e21">尽管全球经济见底信号越来越清晰,但在7月份传统旺季中,除了集装箱运输市场触底反弹外其它.....</div>
                        <img src="Image/knows.jpg">
                    </div>
                </div>
            </div>
            <div class="footer">  <br/>国际站  &nbsp;&nbsp;| &nbsp;&nbsp; 分支机构 &nbsp;&nbsp; | &nbsp;&nbsp; 买卖通渠道 &nbsp;&nbsp; | &nbsp;&nbsp; 广告服务&nbsp;&nbsp;| &nbsp;&nbsp; 网站地图  &nbsp;&nbsp;|  &nbsp;&nbsp;诚聘英才&nbsp;&nbsp;  | &nbsp;&nbsp; 法律声明 &nbsp;&nbsp; |&nbsp;&nbsp;  意见投诉 &nbsp;&nbsp; | &nbsp;&nbsp; 帮助中心 &nbsp;&nbsp; | &nbsp;&nbsp; 友情链接<br/>
                 Copyri ghto2000- 2008 yunshuwang. com All Rights Reserved
            </div>
        </div>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/dai556688/article/details/119729032