第一次完成一个静态页面 记录一下我的学习轨迹

于 2019-09-24 16:32:24 发布
阅读量229 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanghuan5294/article/details/84255776
版权

独立完成了一个静态页面，想要将我的练习成果记录下来，希望能不断进步。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <style type="text/css">
        * {
            margin:0px;
            padding: 0px;
            font-family: '微软雅黑';
            font-size: 14px;
           
        }
        .wrap{
            position: relative;
            background-color: rgb(124, 130, 152);
            background-size: 100% 100%;
            width: 1024px;
            height: 576px;
            background-position: center;
            margin:170px;
           
        }
        .header{
            position: absolute;
            background: url("./img/titlebg.png");
            background-size: 100% 100%; 
            width: 1024px;
            height: 46px;
        }
        .logo{
            position: absolute;
            left: 40px;
        }
        ._2{
            position: absolute;
            top:6px;
            right: 0px;
            z-index: 1;
        }
        .header p{
            position: absolute;
            font-size: 12px;
            font-family: "Adobe Heiti Std"; 
            color: rgb( 192, 205, 220 );
            line-height: 1.667;
            text-shadow: 1.5px 2.598px 3px rgb( 0, 0, 0 );
            left: 172px;
            top: 14px;
        }
        .all{
            position: absolute;
            top:4px;
            right: 4px;
            z-index: 2;
        }
     
        .content{
            position: relative;
            background: url("./img/1.png");
            background-size: 100% 100%;
            top:46px;
            width: 1024px;
            height: 540px;  
        }
        .searchbox {
            position: absolute;
            background-image: url("./img/searchbg.png");
            top:14px;
            left: 12px;
            width: 766px;
            height: 28px;
            /* border: 2px solid red; */
            border-radius: 6px;
            z-index: 1;
        }
        .mod_select {
            position: absolute;
            left: 0;
            top: 0;
            width: 98px;
            height: 28px;
        }

        .select_txt1 {
            position: absolute;
            font-family: "Microsoft YaHei";
            color: rgb( 255, 255, 255 );
            font-size: 12px;
            top:6px;
            left: 20px; 
        }
        .select_txt2 {
            position: absolute;
            font-family: "Microsoft YaHei";
            color: rgb( 255, 255, 255 );
            width: 100px;
            font-size: 12px;
            top:6px;
            left: 150px; 
        }
        .select_txt3 {
            position: absolute;
            font-family: "Microsoft YaHei";
            color: rgb( 255, 255, 255 );
            width: 100px;
            font-size: 12px;
            top:6px;
            left: 260px; 
        }
        .select_txt4 {
            position: absolute;
            font-family: "Microsoft YaHei";
            color: rgb( 255, 255, 255 );
            width: 100px;
            font-size: 12px;
            top:6px;
            left: 378px; 
        }

        .searchbox .btn-search {
            position: absolute;
            right: 4px;
            top: 3px;
            width: 28px;
            height: 22px;
            background-image:url(./img/searchlogo.png);
            border-radius: 5px;
            border: 0px solid ;
            /* border: 1px solid red; */
        }
        .outport{
            position: absolute;
            background-color: rgb(84, 89, 110);
            font-family: "Microsoft YaHei";
            color: rgb( 255, 255, 255 );
            width: 60px;
            height: 28px;
            right: -82px;
            top: 0px;
            border-radius: 4px;
            border: 0px solid ;
            box-shadow: 4px 5px 8px -2px rgb(105, 109, 126);
            /* border: 1px solid red; */

        }
        .bg2{
            position: absolute;
            background-color: rgb( 101, 106, 121 );
            left: 8px;
            top: 56px;
            /* opacity: 0.59; */
            width: 1010px;
            height: 28px;
            z-index: 5;
        }
        .bgtext{
            position: absolute;
            top: 4px;
            right: 64px;
            z-index: 10;
        }
        .title2{
            position: absolute;
            background-color: rgb( 215, 217, 219 );
            width: 108px;
            height: 22px;
            border-radius: 4px;
            left: 30px;
            top: 8px;
            text-align: center;
        }
        .title3{
            position: absolute;
            background-color: rgb( 79, 80, 80 );
            color: #ffffff;
            width: 108px;
            height: 22px;
            border-radius: 4px;
            left: 142px;
            top: 8px;
            text-align: center;
            z-index: 0;
        }
        .testtable1{
            position: absolute;
            /* border: 1px solid red; */
            border-collapse:collapse;
            left: 8px;
            top: 84px;
            width: 1010px;
            height: 370px;
            text-align:center;
            z-index: 5;
            
        }
        ._1{
            background-color: rgb( 215, 217, 219 );
            height: 28px;   
            z-index: 5;
        }
        .tbody{
            color: rgb( 217, 144, 22 ); 
        }
        .jiance{
            color: #ffffff;
        }
        #myCheck + label,
        #myCheck2 + label,
        #myCheck3 + label,
        #myCheck4 + label,
        #myCheck5 + label,
        #myCheck6 + label,
        #myCheck7 + label,
        #myCheck8 + label,
        #myCheck9 + label
        {
            background-color: white;
            border-radius: 2px;
            border:1px solid #d3d3d3;
            width:18px;
            height:18px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 20px;
        }
        #myCheck:checked + label，
        #myCheck2:checked + label，
        #myCheck3:checked + label，
        #myCheck4:checked + label，
        #myCheck5:checked + label，
        #myCheck6:checked + label，
        #myCheck7:checked + label，
        #myCheck8:checked + label，
        #myCheck9:checked + label
        {
            background-color: #eee;
        }
        #myCheck:checked + label:after,
        #myCheck2:checked + label:after,
        #myCheck3:checked + label:after,
        #myCheck4:checked + label:after,
        #myCheck5:checked + label:after,
        #myCheck6:checked + label:after,
        #myCheck7:checked + label:after,
        #myCheck8:checked + label:after,
        #myCheck9:checked + label:after
        {
            content:"\2714";
        }
        .tbody tr.altrow{
            background-color: rgb( 59, 61, 70 );
            height: 36px; 
            text-align: center;
            
        }
        .tbody tr.altrow2{
            background-color: rgb( 68, 71, 79 );
            height: 36px; 
            text-align: center;
        }
        input{
            color: #ffffff;
            font-size: 10px;
            background-color: rgb( 92, 97, 116 );
            width: 50px;
            height: 20px;
            border: 0px solid ;
        }
        .footer{
            position: relative;
            background-color: rgb( 71, 75, 92 );
            text-align:center;
            height: 50px; 
            bottom: 0px;
        }
        .rainbow{
            position: absolute;
            bottom: 38px;
            left: 380px;
            
        }
       
     
       
    </style>
    <body>
        <div class="wrap">
       
            <div class="header">
                <img class="logo" src="./img/logo.png" alt="北京地铁">
                <p>机电设备运维服务智能监控系统</p>
                <div style="position:relative">
                        <img class="_2" src="./img/2.png" alt="2">
                        <div class="all">
                            <a href="http://baidu.com"><img  src="./img/3.png" alt="3"></a>
                            <a href="#"></a><img  src="./img/4.png" alt="4">       
                            <img  src="./img/5.png" alt="5">
                            <img  src="./img/6.png" alt="6">
                        </div>
                        
                </div>
                
            </div>
            <div class="content">
                <div class="searchbox">
                    <div class="mod_select">
                            <span class="select_txt1">线路：6号线</span>
                            <span class="select_txt2">车站：全部</span>
                            <span class="select_txt3">设备系统：全部</span>
                            <span class="select_txt4">设备类型：全部</span>
                    </div>
                    <form >
                        <input  class="btn-search"type="submit" value="&nbsp" >  
                    </form>
                    <form><input class="outport" type="submit" value="导出"></form>    
                </div>
                <div style="position:relative">
                        <div class="bg2">
                            <div class="title2"><span style="font-size:12px">实时报警信息</span></div>
                            <div class="title3"><span style="font-size:12px">以往历史事件</span></div>
                                <div class="bgtext">
                                    <span style="color:red;font-size:12px">二级报警：2次&nbsp&nbsp&nbsp&nbsp&nbsp</span> 
                                    <span style="color: rgb( 217, 144, 22 );font-size:12px">一级报警：3次&nbsp&nbsp&nbsp</span>
                                    <span style="color:rgb( 157, 157, 161 );font-size:12px">断网：3次&nbsp&nbsp</span>
                                    <span style="color:rgb( 255, 102, 0 );font-size:12px">全部：8次</span>
                                </div>
                        </div>
                        <div >
                                <table class="testtable1"> 
                                        <thead>
                                            <tr class="_1">
                                                <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp序号</td>
                                                <td>设备名称</td>
                                                <td>时间</td>
                                                <td>车站</td>
                                                <td>报警事件</td>
                                                <td>状态</td>
                                                <td>操作</td>
                                            </tr>
                                        </thead>
                                        <tbody class="tbody">
                                            <tr class="altrow"><td>
                                                <input type="checkbox" id="myCheck" style="display:none" >
                                                <label for="myCheck"></label>&nbsp&nbsp1
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow2"><td>
                                                    <input type="checkbox" id="myCheck2" style="display:none" >
                                                    <label for="myCheck2"></label>&nbsp&nbsp2
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow"><td>
                                                    <input type="checkbox" id="myCheck3" style="display:none" >
                                                    <label for="myCheck3"></label>&nbsp&nbsp3
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow2"><td>
                                                    <input type="checkbox" id="myCheck4" style="display:none" >
                                                    <label for="myCheck4"></label>&nbsp&nbsp4
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow"><td>
                                                    <input type="checkbox" id="myCheck5" style="display:none" >
                                                    <label for="myCheck5"></label>&nbsp&nbsp5
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow2"><td>
                                                    <input type="checkbox" id="myCheck6" style="display:none" >
                                                    <label for="myCheck6"></label>&nbsp&nbsp6
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow"><td>
                                                    <input type="checkbox" id="myCheck7" style="display:none" >
                                                    <label for="myCheck7"></label>&nbsp&nbsp7
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow2"><td>
                                                    <input type="checkbox" id="myCheck8" style="display:none" >
                                                    <label for="myCheck8"></label>&nbsp&nbsp8
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow"><td>
                                                    <input type="checkbox" id="myCheck9" style="display:none" >
                                                    <label for="myCheck9"></label>&nbsp&nbsp9
                                                </td><td>TC-ZPF-A排风机</td><td>2018.1.26 17:22:10</td><td>田村站 A端风道 TC-ZPF-A</td><td>电机轴承超温警报</td><td>报警</td><td class="jiance">【检测】</td></tr>
                                            <tr class="altrow2" >
                                                <td colspan="7" class="table3">
                                                    <input type="submit" value="上一页">
                                                    <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp1/2&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                                                    <input type="submit" value="下一页">
                                                </td>
                                            </tr>
                                          
                                        </tbody>
                                </table> 
                        </div>
                        
                </div>
                
            </div>
            <div class="footer">
                <img class="rainbow" src="./img/rainbow2.png" alt="rainbow">
            </div>
        </div>
    
    </body>
</html>

 

力力力力力力气
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值