HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07

最新推荐文章于 2022-09-21 15:21:52 发布
星夏一夜
最新推荐文章于 2022-09-21 15:21:52 发布
阅读量1.3k
点赞数 6
分类专栏： IT 文章标签： css html css3 html5
本文链接：https://blog.csdn.net/m0_47268176/article/details/109964276
版权
IT 专栏收录该内容
17 篇文章 1 订阅
订阅专栏
myday6-day07 网页的制作实战（附自己的代码）（仿一个网站的网页）

网页效果图

在这里插入图片描述
自己的代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 导航栏出问题 */
        /* 布局用浮动+ul li和盒子模型做 区域用div划分可以，最好用ul li比较方便*/
        /* padding值要内减 注意，还没有解决右面蓝色可视区溢出，隐藏了滚动条只是*/
        /* .borderBottom{
         border-bottom:1px solid #d8d8d8;
         给盒子单独加线，很灵活，很好用
     } */
          * {
            padding: 0;
            margin: 0;
        }
        /* html{
            overflow-x:hidden;
            overflow-y:auto;
        } */
        body{
            /* body的最小宽度min-width设置成上面的固定宽度一致就可以解决浏览器缩小页面右面截断和留白的问题，这个很有用。但是放大页面还是会有些问题。不设置的话会更糟糕，中国地方铁路协会原网站也是出现这种问题,是缩小的时候主图会留白，但是我的问题是图片小的放的话原窗口会留白，缩小没有。已解决，不是隐藏水平滚动条，而是padding的影响撑开了，用calc减去即可*/
            min-width: 1349px;
            /* font-family: "宋体"; */
        }
        ul{
            list-style: none;
        }
        .header{
            width: calc(100% - 80px);
            height: 130px;
            background-color: #ffffff;
            padding: 20px 0px 0px 80px;
        }
      .h-left{
          float:left;
          width: 430px;
          height: 100px;
          background: url(./images/logo.jpg) no-repeat;
          /* padding:0px 0px 0px 0px; */
          background-size: 100%;
          margin-right:141px;
      }

      .mid{
          float:left;
          width: 300px;
          height: 50px;
          border:1px solid #d7d7d7;
          border-radius:10px;
          font-size:18px;
          line-height: 50px;
          text-indent:2em;
          margin-top:25px;
          margin-right:55px;
          background: url(./images/fdj.png) no-repeat 95% center;
          color:#888888;

      }
      .h-right{
          float: left;
          width: 100px;
          height: 100px;
          background: url(images/weima.png) no-repeat top;
          background-size:77px;
          text-align: center;
          line-height:175px;
          font-size:10px;
          color:#949494;
          margin-right:60px;
          margin-top:12px;
      }
/* 60 */
      .login{
          float:left;
          width: 88px;
          height: 38px;
          background-color: #0052d9;
          color:#ffffff;
          text-align: center;
          line-height: 38px;
          border-radius:38px;
          margin-top:31px;
      }
    
      .show0 ul {
            /* width:calc(100% + 600px); */
            list-style: none;
            width: calc(100% - 110px);
            height: 48px;
            background-color: #0052d9;
            padding: 0px 0px 0px 110px;
            line-height: 48px;
        }

        .show0 ul li {
            float: left;
            height: 44px;
            margin-right: 36px;
            padding: 0px 10px;
        }

        .show0 ul li a {
            text-decoration: none;
            color: #ffffff;
        }
        .show0 ul .first{
            border-bottom: 4px solid #ffffff;
        }
        .show0 ul li:hover{
            border-bottom: 4px solid #ffffff;
        }
      /* 1440 411 */
      .mainPic{
            width:1349px;
            height: 411px;
            background: url(images/mainPic.jpg) no-repeat;
      }

      .main-zone{
            width: 1202px;
            margin:0 auto;
      }
      .notice{
          width: 1170px;
          height: 50px;
          line-height: 50px;
          background-color: #e6f7ff;
          padding:0px 20px 0px 10px;
          margin:22px 0px;
      }
      .clearFix:before{
          content: "";
          display: inline-block;
          clear:both;
      }
      .clearFix:after{
          content: "";
          display: inline-block;
          clear:both;
      }
      .noticePic{
          width: 72px;
          float: left;
          margin-right:22px;
          margin-top:3px;
      }
      .leftContent{
            float: left;
      }
      .rightContent{
            float: right;
      }
      a{
          text-decoration: none;
          font-size:14px;
          color:#2b71e1;
      }
      .show1{
          width: 1200px;
          height: 346px;
          padding:1px;
          background-color: #f7fafa;
      }
      .show1 ul{
          list-style: none;
      }
      .show1Img{
        width: 565px;
        height: 345px;
      }
      .show1 ul li{
          float:left;
      }
      .show1-top{
          height: 43px;
          line-height: 44px;
          padding:0px 20px 0px 0px;
          border-bottom:1px solid #72adff;
      }
      .show1-mid{
          width: 324px;
          height: 344px;
          margin-right:10px;
          background-color: #ffffff;
          /* border:solid; */
      }
      .leftShow1{
            float:left;
            height: 44px;
        /* line-height: 44px; */
      }
      .leftShow1 img{
          float:left;
          margin-right:22px;
      }
      .leftShow1 span{
        height: 44px;
        float: left;
      }
      .show1-right{
          width: 300px;
          height: 344px;
          /* border:solid; */
          float:left;
          background-color: #ffffff;
      }
      .rightShow1{
         float:right;
      }
      .mainShow1 ul li a{
            color:#414141;
            text-align: center;
      }
      .mainShow1 ul li{
          margin-bottom: 10px;
      }
      .mainShow1{
            height: 330px;
            padding:30px 0px  0px 20px;
      }
      .mark::before{
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius:50%;
            background-color: #d3d3d3;
            vertical-align: middle;
            margin-right:12px;
            margin-top:-3px;
      }
      .mark2::before{
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius:50%;
            background-color: #d3d3d3;
            vertical-align: middle;
            margin-right:12px;
            margin-top:-3px;
      }
      .mark:after{
          font-family: Arial, Helvetica, sans-serif,"宋体";
            font-size:12px;
            content: "HOT";
            color:white;
            display: inline-block;
            width: 31px;
            height: 15px;
            line-height: 15px;
            padding-left:1px;
            padding-top:2px;
            background-color: #fc7171;
            margin-left:20px;
            border-radius:3px;
      }
      .show2{
          width: 1200px;
          height: 117px;
          background: url(./images/show2.png) no-repeat;
          margin:16px auto;
      }
      .show3{
          width:1200px;
          height: 466px;
          background-color: #ffffff;
      }
      .show3Left{
          width: 580px;
          height: 466px;
          float: left;
          overflow: hidden;
          background-color:#f3f5f6;
          margin-right:40px;
      }
      .show3Right{
          width: 580px;
          height: 466px;
          float: left;
          overflow: hidden;
          background-color:#f3f5f6;
      }
     .show3 ul li{
         width: 520px;
         height: 40px;
         margin:0 auto;
         /* margin-bottom:23px; */
         /* margin-top:15px; */
         margin-left:30px;
         /* border:1px solid black; */
         padding:20px 0px 20px 0px;
     }
     .borderBottom{
         border-bottom:1px solid #d8d8d8;
     }
     .show3 a{
         font-size:16px;
         color:#333333;
         margin-right:50px;
         width: 386px;
         height: 88px;
         float:left;
     }
     /* .show3 show3Left showNews a:nth-child(2){
      
         background-color: aqua;
     } */
     .show3 span{
         color:#b6b6b7;
         float:left;
     }
     .show4{
         width: 1200px;
         height: 92px;
         background:url(./images/img-03.png) no-repeat;
         margin:22px auto;
     }
     .show5{
         width: 1200px;
         height: 352px;
         margin-bottom: 40px;
     }
     .show5Left{
         width: 384px;
         height: 350px;
         float: left;
         /* 这个盒子不加浮动，下个盒子加浮动不上来，为什么要两个都加上才可以 */
     }
     .show5Left-top{
         width: 384px;
         height: 66px;
         line-height: 66px;
         border-bottom:2px solid #377ae2;
     }
     .article{
         font-size:24px;
         float: left;
     }
     .many{
         float: right;
     }
     .show5Left ul li{
        margin-top:20px;
     }
     .show5Left ul li:nth-child(1):before{
         content:"1";
         font-size:19px;
         color:#377ae2;
         font-weight: bold;
         margin-right:20px;
     }
     .show5Left ul li:nth-child(2):before{
         content:"2";
         font-size:19px;
         color:#377ae2;
        font-weight: bold;
        margin-right:20px;
     }
     .show5Left ul li:nth-child(3):before{
         content:"3";
         font-size:19px;
         color:#377ae2;
        font-weight: bold;
        margin-right:20px;
     }
     .show5Left ul li:nth-child(4):before{
         content:"4";
         font-size:19px;
         color:#377ae2;
        font-weight: bold;
        margin-right:20px;
     }
     .show5Left ul li:nth-child(5):before{
         content:"5";
         font-size:19px;
         color:#377ae2;
        font-weight: bold;
        margin-right:20px;
     }
     .show5Left ul li:nth-child(6):before{
         content:"6";
         font-size:19px;
         color:#377ae2;
        font-weight: bold;
        margin-right:20px;
     }
     .show5 .show5Right{
         width: 776px;
         height: 350px;
         float: right;;
         /* border:solid; */
     }
     .show5Right-top{
         width: 776px;
         height: 66px;
         line-height: 66px;
         border-bottom:2px solid #377ae2;
     }
     .show5Right ul li{
         float: left;
         margin-top:16px;
     }
     .show5Right ul li a{
         float: left;
         color:#7a7a7a;
         margin-left:14px;
     }
     h1{
          font-weight: normal;
          text-align: center;
          margin-bottom:17px;
      }

     /* 写到这里，都是从外向里写的是最顺手的，但是结构越简便越好，按顺序一步一步来是比较好的，能用ul li就不要用div，用div会很麻烦和累，要起很多的类名，很容易绕晕。越简便越好*/

      .show6{
          width: 1140px;
          height: 296px;
          border:1px solid #e5e5e5;
          padding:10px 30px;
          margin-bottom:60px;
      }
    
      .show6Left{
            float: left;
            margin-right: 0px;
      }
      .show6Right{
          float:right;
      }
      .show6Right-top{
            width: 540px;
            height: 40px;
            padding-left: 30px;
      }
      .iconAndLetterLeft img{
          float: left;
          margin-top:3px;
      }
      .iconAndLetterLeft{
          float: left;
          margin-top:3px;
      }
      .iconAndLetterRight{
          float:right;
          margin-top:3px;
      }
      .iconAndLetterRight img{
          float:right;
          margin-top:3px;
      }
      .show6Right-main{
        width: 540px;
        height: 280px;
        padding-left: 30px;
      }
      h5{
        display: inline-block;
        margin-bottom: 16px;
      }
      .show6Right-main span{
        display: inline-block;
        font-size:12px;
        margin-bottom: 16px;
      }
      .bottomNav{
          width: 100%;
          height: 304px;
          background-color: #00092b;
          color:#878b9a;
      }
      .bottomNav .top{
          width: 1200px;
          height: 88px;
          line-height: 88px;
          margin: 0 auto;
          border-bottom: 1px solid #25305b;
      }
     .bottomNav .top ul li .triangle::after{
            content: "";
            display:inline-block;
            width: 0px;
            height: 0px;
            border:6px solid #ffffff;
            border-color:transparent transparent #ffffff transparent;
            position: relative;
            top:-2px;
            margin-left: 10px;
      }
      .bottomNav .top ul li{
          float: left;
          margin-right:54px;
      }
      .bottomNav ul li a{
        color:#dadce0;
      }
      .bottomNav .center{
          width: 1200px;
          height: 88px;
          line-height: 88px;
          margin: 0 auto;
          border-bottom: 1px solid #25305b;
      }
      .bottomNav .center ul li{
          float: left;
          margin-right:54px;
      }
      .bottomNav .center img{
          float: right;
          margin-top:20px;
      }
      .bottomNav .center img:nth-child(2){
          margin-left:20px;
      }
      .bottomNav .bottom{
            height: 88px;
            margin-top: 44px;
      }
      p{
          color: #b8bbc4;
          margin: 0 auto;
          text-align: center;;
          font-size: 12px;
          color:#dadce0;
      }
      /* 为什么这样设置不成功
      .bottomBorder2{
        border-bottom: 1px solid #ffffff;
      } */
      /* show6卡了一下，不设置高度main里面，都全下去了。 */
    </style>
</head>
<body>
   <div class="broswer">
        <div class="header">
             <div class="h-left"></div>
             <div class="mid">请输入关键字</div>
             <div class="h-right">
                <div>APP下载</div>
             </div>
             <div class="login">登录</div>

        </div>
        <div  class="show0">
            <ul class="clearFix">
                <li  class="first"><a href="#">首页</a></li>
                <li><a href="#">协会概况</a></li>
                <li><a href="#">协会动态</a></li>
                <li><a href="#">政策法规</a></li>
                <li><a href="#">行业资讯</a></li>
                <li><a href="#">会员专区</a></li>
                <li><a href="#">协会刊物</a></li>
                <li><a href="#">交流培训</a></li>
                <li><a href="#">咨询服务</a></li>
                <li><a href="#">统计工作</a></li>
                <li><a href="#">通知公告</a></li>
            </ul>
        </div>
        

        <div class="mainPic"></div>
       
        <div class="main-zone" class="clearFix">
            <div class="notice">
                <div class="leftContent">
                    <img src="./images/smallhuoche.png" alt="" class="noticePic">
                    <span>公告：中国地方铁路协会网站已经开通，网站是协会的“窗口”...</span>
                </div>

                <div class="rightContent">
                    <a href="">查看更多</a>
                    <img src="images/doubleRight.gif" alt="" class="showMany">
                </div>
            </div>

            <div class="show1" class="clearFix">
                <ul>
                    <li>
                        <img src="./images/show1.png" alt="" class="show1Img">
                    </li>
                    <li class="show1-mid">
                        <div class="show1-top">
                            
                            <div class="leftShow1">
                                <img src="./images/navbg1.png" alt="">
                                <span>社会动态</span>
                            </div>
    
                            <div class="rightShow1" class="clearFix">
                                <a href="#">更多&nbsp;</a>
                                <img src="./images/doubleRight.gif" alt="" class="showMany">
                            </div>

                        </div>

                        <div class="mainShow1">
                            <ul>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li>
                            </ul>
                        </div>
                    </li>



                    <li class="show1-right">
                        <div class="show1-top">
                            
                            <div class="leftShow1">
                                <img src="./images/navbg1.png" alt="">
                                <span>社会动态</span>
                            </div>
    
                            <div class="rightShow1">
                                <a href="#">更多&nbsp;</a>
                                <img src="./images/doubleRight.gif" alt="" class="showMany">
                            </div>

                        </div>

                        <div class="mainShow1">
                            <ul>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                                <li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li>
                            </ul>
                        </div>
                    </li>

                    
                </ul>
            </div>

        <div class="show2"></div> 

        <div class="show3" class="clearFix()">
            <div class="show3Left">
                <div>
                    <img src="./images/zcfg.png" alt="">
                </div>
                
                <ul class="showNews">
                    <li class="borderBottom"><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...</a><span>2019/5/20</span></li>
                    <li class="borderBottom"><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...</a><span>2019/5/07</span></li>
                    <li><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...</a><span>2019/5/20</span></li>
                </ul>
            </div>

            <div class="show3Right">
                <div>
                    <img src="./images/hyzx.png" alt="">
                </div>
                
                <ul class="showNews">
                    <li class="borderBottom"><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市</a><span>2019/5/20</span></li>
                    <li class="borderBottom"><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市</a><span>2019/5/07</span></li>
                    <li><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市</a><span>2019/5/20</span></li>
                </ul>
            </div>
            

        </div>

        <div class="show4"></div>

        <div class="show5">
            <div class="show5Left">
                <div class="show5Left-top" >
                    <div class="article">协会刊物</div>
                    <div class="many" >
                        <a href="#">更多&nbsp;</a>
                        <img src="./images/doubleRight.gif" alt="" >
                    </div>
                </div>
                
                <ul >
                    <li>《地方铁路信息》中国铁路科技创新成就展</li>
                    <li>长三角地区省会高铁站全部实现空铁无缝隙换乘...</li>
                    <li>我国铁路2018年底开通10条新线高铁运输能...</li>
                    <li>上海局集团公司创新物资管理促进降本增效</li>
                    <li>蒙煤外运大通道准硕铁路开通运营</li>
                    <li>京张高铁八达岭隧道贯通</li>
                </ul>


            </div>

           <div class="show5Right">
                <div class="show5Right-top">
                    <div class="article">会员风采</div>
                </div>
                <ul>
                    <li><img src="./images/show5.png" alt=""></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                    <li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li>
                </ul>
           </div>

        </div>

        <h1>交流培训</h1>

        <div class="show6">
            <div class="show6Left">
                <img src="./images/show6.png" alt="">
            </div>

            <div class="show6Right">
                <div class="show6Right-top" class="clearFix">
                    <div class="iconAndLetterLeft">
                        <img src="./images/kj_icon@2x.png" alt="" width="18px" height="18px">
                        <a href="#">&nbsp;培训动态</a>
                    </div>

                    <div class="iconAndLetterRight">
                        <a href="#">更多&nbsp;</a>
                        <img src="./images/icon2-j-t.png" alt=""  width="18px" height="18px">
                    </div>
                </div>



                <div class="show6Right-main">
                   <h5>禹毫铁路公司邀请铁路专家杨建兴一行莅临指导及培训</h5>
                   <span>2019-08-20</span>
                   <span>
                       5月12日至13日，禹毫铁路公司邀请原体味到副总工程师杨建兴等铁路专家一行莅临禹毫铁路公司帮助、指导工作。禹毫公司总经理王子华、常务副总经理甘立尚等领导参加...
                   </span>
                   <h5>禹毫铁路公司邀请铁路专家杨建兴一行莅临指导及培训</h5>
                   <span>2019-08-20</span>
                   <span>
                       5月12日至13日，禹毫铁路公司邀请原体味到副总工程师杨建兴等铁路专家一行莅临禹毫铁路公司帮助、指导工作。禹毫公司总经理王子华、常务副总经理甘立尚等领导参加...
                   </span>
                   <h5>禹毫铁路公司邀请铁路专家杨建兴一行莅临指导及培训</h5>
                   <span>2019-08-20</span>
                   <span>
                       5月12日至13日，禹毫铁路公司邀请原体味到副总工程师杨建兴等铁路专家一行莅临禹毫铁路公司帮助、指导工作。禹毫公司总经理王子华、常务副总经理甘立尚等领导参加...
                   </span>
                </div>
            </div>

        </div>
            
      

        </div>

        <div class="bottomNav">
            <div class="top" class="bottomBorder2">
                <ul>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#" class="triangle">中央和国家部委</a></li>
                    <li><a href="#" class="triangle">国家铁路集团所属各单位</a></li>
                    <li><a href="#" class="triangle">铁路相关单位</a></li>
                </ul>

            </div>


            <div class="center">
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#">网站地图</a></li>
                    <li><a href="#">安全提示</a></li>
                    <li><a href="#">内部邮箱</a></li>
                    <li><a href="#">门户网站</a></li>
                </ul>
                <img src="./images/48bottom.png" alt="">
                <img src="./images/48bottom2.png" alt="">
            </div>
            <div class="bottom">
                <p>中国地方铁路协会 | 电话：010-09098989 | 北京市丰台区科学城海鹰路9号院3号楼 | 京ICP证7889768号</p>
                <p>【京ICP备13032135号】 【京公网安备11010602004570号】</p>
            </div>
        </div>
    </div>
</body>
</html>