js_node

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

myday6-day07 网页的制作实战（附自己的代码）（仿一个网站的网页）

网页效果图

自己的代码实现：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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="#">更多 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="#">更多 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/20span>li>
                    <li class="borderBottom"><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...a><span>2019/5/07span>li>
                    <li><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...a><span>2019/5/20span>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/20span>li>
                    <li class="borderBottom"><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市a><span>2019/5/07span>li>
                    <li><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市a><span>2019/5/20span>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="#">更多 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/[email protected]" alt="" width="18px" height="18px">
                        <a href="#"> 培训动态a>
                    div>

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



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

swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
非关系型数据库天秤-white nosql
一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%
Python精选200Tips：121-125 AnFany Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
七.正则化愿风去了
吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
TOMCAT在POST方法提交参数丢失问题 357029540 java tomcat jsp
摘自http://my.oschina.net/luckyi/blog/213209 昨天在解决一个BUG时发现一个奇怪的问题，一个AJAX提交数据在之前都是木有问题的，突然提交出错影响其他处理流程。检查时发现页面处理数据较多，起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交，较少数据能够提交成功。恢复较多数据后跟踪提交FORM DATA ，发现数
在MyEclipse中增加JSP模板删除-2008-08-18 ljy325 jsp xml MyEclipse
在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp 目录下找到Jsp.vtl，复制一份，重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式，保存。然后在 D:\Progr
JavaScript常用验证脚本总结 eksliang JavaScript javaScript表单验证
转载请出自出处：http://eksliang.iteye.com/blog/2098985 下面这些验证脚本，是我在这几年开发中的总结，今天把他放出来，也算是一种分享吧，现在在我的项目中也在用！包括日期验证、比较，非空验证、身份证验证、数值验证、Email验证、电话验证等等...! &nb
微软BI（4） 18289753290 微软BI SSIS
1） Q:查看ssis里面某个控件输出的结果： A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString()); 这是我们在包里面定义的变量 2):在关联目的端表的时候如果是一对多的关系，一定要选择唯一的那个键作为关联字段。 3) Q：ssis里面如果将多个数据源的数据插入目的端一
定时对大数据量的表进行分表对数据备份酷的飞上天空大数据量
工作中遇到数据库中一个表的数据量比较大，属于日志表。正常情况下是不会有查询操作的，但如果不进行分表数据太多，执行一条简单sql语句要等好几分钟。。分表工具：linux的shell + mysql自身提供的管理命令原理：使用一个和原表数据结构一样的表，替换原表。 linux shell内容如下： =======================开始
本质的描述与因材施教永夜-极光感想随笔
不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解 &
很迷茫。。。随便小屋随笔
小弟我今年研一，也是从事的咱们现在最流行的专业（计算机）。本科三流学校，为了能有个更好的跳板，进入了考研大军，非常有幸能进入研究生的行业（具体学校就不说了，怕把学校的名誉给损了）。先说一下自身的条件，本科专业软件工程。主要学习就是软件开发，几乎和计算机没有什么区别。因为学校本身三流，也就是让老师带着学生学点东西，然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说
23种设计模式的意图和适用范围 aijuans 设计模式
Factory Method 意图定义一个用于创建对象的接口，让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。　　适用性当一个类不知道它所必须创建的对象的类的时候。　　当一个类希望由它的子类来指定它所创建的对象的时候。　　当类将创建对象的职责委托给多个帮助子类中的某一个，并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。 Abstr
Java中的synchronized和volatile aoyouzi java volatile synchronized
说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字，又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的，working memory则是线程的工作内存，它保存有部分main memory变量的拷贝，对这些变量的更新直接发生在working memo
js数组的操作和this关键字百合不是茶 js 数组操作 this关键字
js数组的操作; 一:数组的创建: 1、数组的创建 var array = new Array();　//创建一个数组 var array = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]
别人的阿里面试感悟 bijian1013 面试分享工作感悟阿里面试
原文如下：http://greemranqq.iteye.com/blog/2007170 一直做企业系统，虽然也自己一直学习技术，但是感觉还是有所欠缺，准备花几个月的时间，把互联网的东西，以及一些基础更加的深入透析，结果这次比较意外，有点突然，下面分享一下感受吧！ &nb
淘宝的测试框架Itest Bill_chen spring maven 框架单元测试 JUnit
Itest测试框架是TaoBao测试部门开发的一套单元测试框架，以Junit4为核心，集合DbUnit、Unitils等主流测试框架，应该算是比较好用的了。近期项目中用了下，有关itest的具体使用如下： 1.在Maven中引入itest框架： <dependency> <groupId>com.taobao.test</groupId&g
【Java多线程二】多路条件解决生产者消费者问题 bit1129 java多线程
package com.tom; import java.util.LinkedList; import java.util.Queue; import java.util.concurrent.ThreadLocalRandom; import java.util.concurrent.locks.Condition; import java.util.concurrent.loc
汉字转拼音pinyin4j 白糖_ pinyin4j
以前在项目中遇到汉字转拼音的情况，于是在网上找到了pinyin4j这个工具包，非常有用，别的不说了，直接下代码： import java.util.HashSet; import java.util.Set; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin
org.hibernate.TransactionException: JDBC begin failed解决方案 bozch ssh 数据库异常 DBCP
org.hibernate.TransactionException: JDBC begin failed: at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68) at org.hibernate.impl.SessionImp
java-并查集（Disjoint-set）-将多个集合合并成没有交集的集合 bylijinnan java
import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.HashSet; import java.util.Iterator; import java.util.List; import java.util.Map; import java.ut
Java PrintWriter打印乱码 chenbowen00 java
一个小程序读写文件，发现PrintWriter输出后文件存在乱码，解决办法主要统一输入输出流编码格式。读文件： BufferedReader 从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取。可以指定缓冲区的大小，或者可使用默认的大小。大多数情况下，默认值就足够大了。通常，Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因
[天气与气候]极端气候环境 comsci 环境
如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵...... 那么地球上的国家应该做什么样的防备工作呢? &n
oracle order by与union一起使用的用法 daizj UNION oracle order by
当使用union操作时，排序语句必须放在最后面才正确，如下：只能在union的最后一个子查询中使用order by，而这个order by是针对整个unioning后的结果集的。So：如果unoin的几个子查询列名不同，如 Sql代码 select supplier_id, supplier_name from suppliers UNI
zeus持久层读写分离单元测试 deng520159 单元测试
本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码: 1.ZeusMasterSlaveTest.java package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Assert; import org.j
Yii 截取字符串(UTF-8) 使用组件 dcj3sjt126com yii
1.将Helper.php放进protected\components文件夹下。 2.调用方法： Helper::truncate_utf8_string($content,20,false); //不显示省略号 Helper::truncate_utf8_string($content,20); //显示省略号 &n
安装memcache及php扩展 dcj3sjt126com PHP
安装memcache tar zxvf memcache-2.2.5.tgz cd memcache-2.2.5/ /usr/local/php/bin/phpize (?) ./configure --with-php-confi
JsonObject 处理日期 feifeilinlin521 java json JsonOjbect JsonArray JSONException
写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException 原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说直接上代码 &n
Ehcache（06）——监听器 234390216 监听器 listener ehcache
监听器 Ehcache中监听器有两种，监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中，Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。
activiti 自带设计器中chrome 34版本不能打开bug的解决 jackyrong Activiti
在acitivti modeler中，如果是chrome 34，则不能打开该设计器，其他浏览器可以，经证实为bug，参考 http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34 修改为，找到 oryx.debug.js 在最头部增加 if (!Document.
微信收货地址共享接口-终极解决 laotu5i0 微信开发
最近要接入微信的收货地址共享接口，总是不成功，折腾了好几天，实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来，希望能给微信的接口文档起到一个辅助作用，让后面进来的开发者能快速的接入，而不需要像我们一样苦逼的浪费好几天，甚至一周的青春。各种羞辱、谩骂的话就不说了，本人还算文明。如果你能搜到本贴，说明你已经碰到了各种 ed
关于人才 netkiller.github.com 工作面试招聘 netkiller 人才
关于人才每个月我都会接到许多猎头的电话，有些猎头比较专业，但绝大多数在我看来与猎头二字还是有很大差距的。与猎头接触多了，自然也了解了他们的工作，包括操作手法，总体上国内的猎头行业还处在初级阶段。总结就是“盲目推荐，以量取胜”。目前现状许多从事人力资源工作的人，根本不懂得怎么找人才。处在人才找不到企业，企业找不到人才的尴尬处境。企业招聘，通常是需要用人的部门提出招聘条件，由人
搭建 CentOS 6 服务器 - 目录 rensanning centos
(1) 安装CentOS ISO（desktop/minimal）、Cloud（AWS/阿里云）、Virtualization（VMWare、VirtualBox）详细内容 (2) Linux常用命令 cd、ls、rm、chmod...... 详细内容 (3) 初始环境设置用户管理、网络设置、安全设置...... 详细内容 (4) 常驻服务Daemon
【求助】mongoDB无法更新主键 toknowme mongodb
Query query = new Query(); query.addCriteria(new Criteria("_id").is(o.getId())); &n
jquery 页面滚动到底部自动加载插件集合 xp9802 jquery
很多社交网站都使用无限滚动的翻页技术来提高用户体验，当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件： 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。 2. jQuery Screw S

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

myday6-day07 网页的制作实战（附自己的代码）（仿一个网站的网页）

网页效果图

自己的代码实现：

你可能感兴趣的:(IT,css,html,css3,html5)