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>

Python前端开发 PITSU 正则表达式 html css3 mysql
Python前端开发1.前端三剑客（HTML，CSS和JavaScript）1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言；html是开发网页的语言；html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML：分为页头，页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中
初识HTML中的div块元素—零基础自学网页制作猿说前端 html web开发
块元素基础属性讲解元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。那时，大街小巷上有好多网吧。那时，马云刚刚辞去工作准备创业。那时，发送邮件的操作都会出现在计算机课程中。那时，对页面还没有现在的跨平台
localStorage在上面位置？数据存放文件名是什么？ 2301_79698214 html java
在上述代码中，数据并不是以传统文件的形式存放在某个具体的文件里，而是存储在浏览器的localStorage中。localStorage是HTML5新增的一个会话存储对象，它用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据仍然存在。数据存储位置和文件名存储位置：localStorage是浏览器提供的一个存储机制，数据存储在浏览器的本地存储区域，不同的浏览器存储位置不同，例如：Chro
NSSCTF_crypto_[HGAME 2022 week3]RSA attack 3 岁岁的O泡奶 python 开发语言密码学 crypto NSSCTF 维纳攻击
[HGAME2022week3]RSAattack3题目:太多了自己去看，提示:维纳攻击首先在做这题之前你得先懂得维纳攻击的原理https://www.cnblogs.com/wandervogel/p/16805992.htmlok啊看懂了维纳攻击的原理就来开始写脚本吧fromCrypto.Util.numberimportlong_to_bytesimportgmpy2#已知参数n=50741
网页大屏适配使用css的scale方法缺点是两边会有留白；无足鸟丶 css css3 html javascript 前端
网页大屏适配使用css的scale方法缺点是两边会有留白；Document*{margin:0;padding:0;}html,body{width:100vw;height:100vh;background-color:blue;}#container{width:100%;height:100%;}.box{width:1920px;height:1080px;background-color
Browser-Use WebUI项目启动指南思考在马桶上人工智能 chatgpt 经验分享 python
摘要此前发布《Browser-UseWebUI使用体验》博文后，鉴于部分朋友运行时出现问题，重新运行并整理相关内容。本文详细记录WebUI项目启动全过程，涵盖Python3.11+、Chrome浏览器及APIKeys等环境要求，Python环境检查、依赖安装等环境配置步骤，.env文件中环境变量的设置方法。同时，针对启动中如lxml.html.clean依赖缺失、连接被拒等问题给出解决方案，介绍启
网络安全入门教程（非常详细）从零基础入门到精通，看完这一篇就够了白帽黑客坤哥 web安全网络安全 python windows
href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v
移动端IOS的H5页面被键盘顶起后，底部有一大片空白区域的解决方法不怕麻烦的鹿丸浏览器 HTML5 JavaScript 前端 html5 javascript
在移动端开发中，当使用HTML5(特别是在Vue.js框架下)构建应用时，经常会遇到键盘弹出导致页面内容被顶起的问题。当键盘收起后，页面未能自动恢复到原来的位置。当键盘弹出时，你可以通过JavaScript监听键盘的显示和隐藏事件，并相应地调整页面的滚动位置。exportdefault{mounted(){window.addEventListener('focusin',this.handleF
爬虫基础--request库详解 amo的代码园_毕设 Java基础爬虫 java spring boot vue.js python 开发语言
爬虫基础–request库详解1.requests模块介绍request库中文文档：https://docs.python-requests.org/zh_CN/latest/user/quickstart.htmlrequests是一个非常流行的PythonHTTP第三方库，它允许你发送各种HTTP请求，处理cookies、会话、连接池、重定向、多种认证方式等，使得处理HTTP请求变得非常便捷，
Selenium实战-模拟登录淘宝并爬取商品信息_使用selenium模拟真实登录行为,并爬取商品评论数据。 2401_84009899 程序员 selenium python 测试工具
模拟淘宝登录deflogin_taobao():print(‘开始登录…’)try:login_url=‘https://login.taobao.com/member/login.jhtml’driver.get(login_url)input_login_id=wait.until(EC.presence_of_element_located((By.ID,‘fm-login-id’)))in
使用CRACO自定义 Webpack 配置黄毛火烧雪下 React webpack 前端 node.js
1、为什么要用CRACO？默认情况下，CRA的Webpack配置是隐藏的，如果你需要修改Webpack，比如：✅CDN配置✅配置alias（路径别名）✅修改Less/Sass变量✅添加Babel插件✅优化Webpack构建（如SplitChunks、CDN加载）✅支持TailwindCSS✅移动端适配启用PostCSS+px转rem如果不用CRACO，你必须运行yarneject/npmrunej
uniapp中使用webview并与原页面通信数学分析分析什么？ uni-app
uniapp中使用webview并与原页面通信1.接收数据主要使用@message与@onPostMessage接收原页面数据，且两个方法只能在APP中使用，其他平台均不支持。/***接收页面返回参数*@param{Object}item*/htmlMessage(item){console.log('收到的消息',item)letdata=item.detail...},2.发送数据（调用原页面
uniapp工程中解析markdown文件 pvfhv uni-app
在uniapp中如何导入markdown文件，同时在页面中解析成html，请参考以下配置：1.安装以下3个依赖包npminstallmarkedhighlight.jsvite-plugin-markdown2.创建vite.config.js配置文件//vite.config.jsimport{defineConfig}from'vite';importunifrom'@dcloudio/vit
设备树学习（二十三、番外篇-中断子系统之softirq）奔跑的小刺猬设备树设备树原理和实现
既然开始学了，那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言，linux将其分成了两个部分，一个叫做中断handler（tophalf），是全程关闭中断的，另外一部分是deferabletask（bottomhalf），属于不那么紧急需要处理的事情
【Apache Storm】茉菇 apache storm 大数据
一、Storm简介1、概述官网地址：https://storm.apache.org/index.htmlApacheStorm是一个开源的、分布式的实时计算系统，专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统，Storm具有处理无限数据流的能力，支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言，具有高度的灵活性。2、核心功能分布
vue3+springboot电影院售票选座管理系统 qq_3166678367 spring boot 后端 java
目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻
HTML音频、视频--课后作业实践 Heetun html5
浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
H3C Network命令详解 weixin_30471561
转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html
CSS中的伪类与伪元素：让样式更加灵活优雅程序员
CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto
如何创建HTML自定义元素：使用 Web Component 的最佳实践乐闻x Web Component 学习记录前端 html web component
什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
css知识点总结吃橘子的Crow css html 前端
1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是
【css酷炫效果】纯CSS实现动态云雾效果冰夏之夜影 css 前端
【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra
【css酷炫效果】纯CSS实现流动岩浆纹理效果冰夏之夜影 css 前端
【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi
【css酷炫效果】实现鱼群游动动态效果冰夏之夜影 web前端 css 前端
【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f
deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师... CoderBin_ 与deepseek的对话前端
一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）
Storm实战常见问题及解决方案 Lzy失控的 storm-分布式流式计算 bigdata-大数据
原文seehttp://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html1关于Storm集群1.1关于storm集群的环境变量配置问题安装好JDK后，需要配置环境变量，通常情况下出于经验，我们往往会修改/etc/profile的值进行环境变量配置，但这在安装JDK以及后面安装的storm集群、zookeeper集群以及metaq集群时会出问题，这时候我们需
【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用金枝玉叶9 程序员知识储备1 程序员知识储备2 程序员知识储备3 rust 开发语言后端
《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可
element ui 封装Table组件沃野_juededa ui
1.首先npmielement-ui-S安装element-ui2.引入Element在main.js中写入以下内容：importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);n
能否在编辑器中一键导入Word文档？ 2501_90646763 umeditor粘贴word ueditor粘贴word ueditor复制word ueditor上传word图片 ueditor导入word ueditor导入pdf ueditor导入ppt
要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
css3选择器详解丸子猪的dady css3 前端 css html
CSS3选择器我们之前学过CSS的选择器，比如：div标签选择器.box类名选择器#boxid选择器divp后代选择器div.box交集选择器div,p,span并集选择器div>p子代选择器*:通配符div+p:选中div后面相邻的第一个pdiv~p:选中的div后面所有的p属性选择器属性选择器的标志性符号是[]。匹配含义：^：开头$：结尾*：包含格式：E[title]选中页面的E元素，并且E存
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)