• python第八十四天---十五周作业


    后台管理页面:

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>后台管理页面</title>
      6     
      7     <style type="text/css">
      8         /*顶部菜单*/
      9         .pag-head{
     10             position: fixed;
     11             z-index: 7;
     12             top: 0;
     13             left: 0;
     14             right: 0;
     15             height: 48px;
     16             width: 100%;
     17             background: #005EA7;
     18             
     19         }
     20         .meun_top{
     21             height: 48px;
     22             line-height: 48px;
     23             width: 960px;
     24             /*border: 1px solid red;*/
     25             margin: 0 auto;
     26         }
     27             /*顶部菜单组*/
     28         .meuns_top{
     29             text-decoration: none;
     30             color: white;
     31             padding: 0px 10px 0px 10px;
     32             display: inline-block;
     33         }
     34         .meuns_top:hover{
     35             background-color: rgba(64,119,203,0.6);
     36         }
     37         
     38         .clear_div{
     39             clear: both;
     40         }
     41         /*顶部菜单结束*/    
     42         
     43         
     44         /*下方大框*/
     45         .pag-cent{
     46             margin-top: 50px;
     47             
     48         }
     49         
     50         
     51         /*左侧菜单*/
     52         .left-meun{
     53             z-index: 8;
     54             position: fixed;
     55             top: 50px;
     56             left: 55px;
     57         }
     58         .meuns{
     59             
     60             background-color: #005EA7;
     61             height: 45px;
     62             width:150px;
     63             color:white;
     64             line-height: 45px;
     65             text-align: center;
     66         }
     67         .meuns:hover{
     68             background-color: rgba(64,119,203,0.6);
     69         }
     70         .hide{
     71             display: none;
     72         }
     73         .content{
     74             margin-left: 65%;
     75         }
     76         .item{
     77             width:150px;
     78         }
     79         /*左侧菜单结束*/
     80         
     81         /*下方右边内容块*/
     82         .big-content{
     83             height: 1000px;
     84             border: 1px solid green;
     85         }
     86         
     87         .content_right{
     88             margin: 0 auto;
     89             height: 800px;
     90             width: 960px;
     91             border: 1px solid blueviolet;
     92         
     93            }
     94            
     95            .hosts{
     96                margin-left: 30px;
     97                margin-top: 20px;
     98            }
     99            table{
    100                border-spacing: 1px;
    101                margin-top: 8px;
    102                }
    103         /*遮罩层*/
    104         .c1{
    105             position: fixed;
    106             z-index: 9;
    107             /*打开多层样式 fixed模式 定义层级为9*/
    108             top:0;
    109             right:0;
    110             left:0;
    111             bottom:0;
    112             /*上面表示全覆盖*/
    113             background-color: black;
    114             /*上面为背景色 为黑  下面为透明度为50%*/
    115             opacity: 0.5;
    116         }
    117         .c2{
    118            position: fixed;
    119            z-index: 10;
    120             /*打开多层样式 fixed模式 定义层级为9*/
    121 
    122             width:400px;
    123             height: 300px;
    124             top:50%;
    125             left:50%;
    126             margin-left: -200px;
    127             margin-top: -150px;
    128             background-color: white;
    129             
    130         }
    131         .z-z{
    132             width: 230px;
    133             height: 120px;
    134             margin-top: 90px;
    135             margin-left: 90px;
    136         }
    137         hr{
    138             width: 230px;
    139         }
    140         #cre{
    141             margin-left: 70px;
    142         }
    143         .heds{
    144             /*默认不显示*/
    145             display: none;
    146         }
    147         
    148         /*下方右边内容块结束*/
    149         
    150         
    151         /*返回顶部*/
    152         .pa-top{
    153             width: 68px;
    154             height: 48px;
    155             position: fixed;
    156             right: 25px;
    157             bottom: 25px;
    158             background-image: url(img/top.png);
    159             background-position: -425px -270px ;
    160             
    161         }
    162     </style>
    163 </head>
    164 <body style="margin: 0">
    165     <!--顶部菜单-->
    166     <div class="pag-head">
    167         <div class="meun_top">
    168             <a href="" class="meuns_top">顶部菜单一</a>
    169             <a href="" class="meuns_top">顶部菜单二</a>
    170             <a href="" class="meuns_top">顶部菜单三</a>
    171             <a href="" class="meuns_top">顶部菜单四</a>
    172             <a href="" class="meuns_top">顶部菜单五</a>
    173             <a href="" class="meuns_top">顶部菜单六</a>            
    174         </div>
    175         <div class="clear_div">
    176             
    177         </div>
    178         
    179     </div>
    180     <!--下方大框-->
    181     <div class="pag-cent">
    182         
    183         <!--左边菜单-->
    184         <div class="left-meun">
    185             <div class="item">
    186                 <div id="i1" onclick="changemenu('i1')" class="meuns">菜单1</div>
    187                     <div class="content">
    188                         <div>内容1</div>
    189                         <div>内容1</div>
    190                         <div>内容1</div>
    191                         <div>内容1</div>
    192                     </div>
    193                 </div>
    194             
    195             <div class="item">
    196                 <div id="i2" onclick="changemenu('i2')" class="meuns">菜单2</div>
    197                 <div class="content hide">
    198                     <div>内容2</div>
    199                     <div>内容2</div>
    200                     <div>内容2</div>
    201                     <div>内容2</div>
    202                 </div>
    203             </div>
    204             
    205             <div class="item">
    206                 <div id="i3" onclick="changemenu('i3')" class="meuns">菜单3</div>
    207                 <div class="content hide">
    208                     <div>内容3</div>
    209                     <div>内容3</div>
    210                     <div>内容3</div>
    211                     <div>内容3</div>
    212                 </div>
    213             </div>
    214             
    215             <div class="item">
    216                 <div id="i4" onclick="changemenu('i4')" class="meuns">菜单4</div>
    217                 <div class="content hide">
    218                     <div>内容4</div>
    219                     <div>内容4</div>
    220                     <div>内容4</div>
    221                     <div>内容4</div>
    222     
    223                 </div>
    224 
    225 
    226             </div>
    227              
    228         </div>
    229         
    230             
    231             
    232         <!--右边内容-->
    233         <div class="big-content">
    234             <div class="content_right">
    235                 <div class="hosts">
    236                     <input type="button" value="添加" onclick="showmod()">
    237                     <input type="button" value="全选" onclick="Chooseall()">
    238                     <input type="button" value="取消" onclick="cancleall()">
    239                     <input type="button" value="返选" onclick="Reverseall()">
    240         
    241                     <table border="1" id="tab">
    242                         <thead>
    243                             <tr>
    244                                 <th>选择</th>
    245                                 <th>主机</th>
    246                                 <th>端口</th>
    247                             </tr>
    248                         </thead>
    249                         <tbody id="tb">
    250         
    251                             <tr>
    252                                 <td><input type="checkbox"></td>
    253                                 <td>10.10.12.1</td>
    254                                 <td>1000</td>
    255                             <tr>
    256                                 <td><input type="checkbox"></td>
    257                                 <td>10.10.12.2</td>
    258                                 <td>1002</td>
    259                             </tr>
    260                             <tr>
    261                                 <td><input type="checkbox"></td>
    262                                 <td>10.10.12.3</td>
    263                                 <td>1003</td>
    264                             </tr>
    265                         </tbody>
    266                     </table>
    267                 </div>
    268             </div>
    269             <!--遮罩层-->
    270             <div class="c1 heds" id="z-cent"></div>
    271             <!--对话框-->
    272             <div class="c2 heds" id="z-first">
    273                 <div class="z-z">
    274                     <lable>&nbsp;机:</lable>
    275                     <input type="text" id="users"><br /><br />
    276                     <lable>I&nbsp;&nbsp;&nbsp;P:</lable>
    277                     <input type="text" id="ip_add"><br />
    278                     <hr />
    279                     <input type="button" name="" id="cre" onclick="cresc()" value="确定" >
    280                     <input type="button" onclick="hidemod()" value="关闭">
    281                 </div>
    282                 
    283             </div>
    284             
    285         </div>
    286         
    287     </div>
    288     
    289     
    290     
    291     <div class="pa-top" onclick="topy();"></div>
    292     
    293     
    294     
    295     <script type="text/javascript">
    296         //左侧菜单js 点击函数
    297         function changemenu(id){
    298             var curr_header=document.getElementById(id)//获取当前的元素对象
    299             var itme_list=curr_header.parentElement.parentElement.children;//取得当前的上上级的所有子元素
    300             for (var i=0;i<itme_list.length;i++){
    301                 var curr_list=itme_list[i];
    302                 curr_list.children[1].classList.add('hide')//加上关闭
    303             }
    304             curr_header.nextElementSibling.classList.remove('hide')//移除关闭
    305         }
    306         //返回顶部
    307         function topy(){
    308             document.body.scrollTop=0;
    309         }
    310         
    311         
    312         
    313         
    314         //显示对话框
    315         function showmod(){
    316                 document.getElementById('z-cent').classList.remove('heds');//移除类名 样式
    317                 document.getElementById('z-first').classList.remove('heds');
    318 
    319             }
    320         //关闭对话框
    321         function hidemod(){
    322             document.getElementById('z-cent').classList.add('heds');//添加 类名
    323             document.getElementById('z-first').classList.add('heds');
    324         }
    325         //添加主机 IP
    326         function cresc(){
    327             var tab=document.getElementById('tab');
    328             var user=document.getElementById('users').value
    329             var ip=document.getElementById('ip_add').value
    330             var tradd=tab.insertRow(4)
    331             tradd.style.background='green'
    332             if (user=='' || ip==''){
    333                 alert('主机或用户名不能为空')
    334                 return 0
    335             }
    336             tradd.innerHTML='<td><input type="checkbox"></td><td>'+user+'</td><td>'+ip+'</td>'    
    337             hidemod()
    338         }
    339         //全选
    340         function Chooseall(){
    341             var tbody=document.getElementById('tb');
    342             var tr_list=tbody.children;//取所有子元素的列表
    343             for (var i=0;i<tr_list.length;i++){
    344                 var curr=tr_list[i];//取当前子元素的子元素列表
    345                 var checkbox=curr.children[0].children[0];
    346                 checkbox.checked=true//打上勾
    347             }
    348          }
    349         
    350         //取消
    351         function cancleall() {
    352             var tbody = document.getElementById('tb');
    353             var tr_list = tbody.children;//取所有子元素的列表
    354             for (var i = 0; i < tr_list.length; i++) {
    355                 var curr = tr_list[i];//取当前子元素的子元素列表
    356                 var checkbox = curr.children[0].children[0];
    357                 checkbox.checked = false;//取消勾
    358             }
    359         }
    360         //反选 
    361         function Reverseall() {
    362             var tbody = document.getElementById('tb');
    363             var tr_list = tbody.children;//取所有子元素的列表
    364             for (var i = 0; i < tr_list.length; i++) {
    365                 var curr = tr_list[i];//取当前子元素的子元素列表
    366                 var checkbox = curr.children[0].children[0];
    367                 if (checkbox.checked){
    368                     checkbox.checked = false;//取消勾
    369                 }else {
    370                     checkbox.checked = true;//打上勾
    371                 }
    372 
    373             }
    374         }
    375     </script>
    376     
    377 </body>
    378 </html>
    View Code

    商城页面:

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="UTF-8">
      5         <title></title>
      6         <style type="text/css">
      7         /*顶部菜单*/    
      8         .top{
      9             background-color: #000000;
     10             color: #DDDDDD;
     11         }
     12         .top-meun{
     13             margin: 0 auto;
     14             width: 1100px;
     15             height: 32px;    
     16         }
     17         .top-meun a,.top-meun span{
     18             font-size: 12px;
     19             display: inline-block;
     20             line-height: 32px;
     21             padding-right: 10px;
     22         }
     23         .top-meun-left{
     24             float: left;
     25         }
     26         .top-meun-right{
     27             float: right;
     28         }
     29         .top-meun-right span{
     30             color: red;
     31         }
     32         /*a标签 去下划线*/
     33         a {
     34             text-decoration: none;
     35             color: #DDDDDD;
     36         }
     37         /*返回顶部*/
     38         .top-s{
     39             position: fixed;
     40             top: 160px;
     41             right: 250px;
     42             width: 60px;
     43             height: 150px;
     44             /*border: 1px solid darkred;*/
     45         }
     46         
     47         ul{
     48             list-style-type: none;
     49         }
     50         
     51         #jcSide li a{
     52             display: inline-block;
     53             list-style-type: none;
     54             
     55             background-color: #c41240;
     56             width: 45px;
     57             height: 45px;
     58             margin-left: 5px;
     59             margin-top: 5px;
     60             text-align: center;
     61             
     62         }
     63         #jcSide li{
     64             
     65             margin: 5px;
     66             width: 55px;
     67             height: 55px;
     68             background-color:#c41240 ;
     69         }
     70         #jcSide li a:hover{
     71             background-color: white;
     72             color: #c41240;
     73         }
     74         #jcSide li span{
     75             font-weight: bolder;
     76         }
     77         /*上方LOGO*/
     78         
     79         .logo-big{
     80             height: 93px;
     81             background-image:url(img/v_index_bg.png) ;
     82         }
     83         .logo{
     84             margin: 0 auto;
     85             width: 1100px;
     86             position: relative;
     87         }
     88         .logo-img,.search{
     89             float: left;
     90         }
     91         .search{
     92             position: absolute;        
     93             left: 185px;
     94             top: 18px;
     95             border: 1px solid red;
     96             height: 45px;
     97             
     98         }
     99         .search select,#search-id{
    100             display: inline-block;
    101             line-height: 45px;
    102             width: 100px;
    103             height: 45px;
    104             padding: 0 0 ;
    105             margin: 0 0;
    106         }
    107         /*搜索框 */
    108         #search-id{
    109             width: 400px;
    110             height: 41px;
    111         }
    112         .img-small{
    113             position: absolute;
    114             top: 15px;
    115             right: 10px;
    116             height: 20px;
    117             width: 20px;
    118             background-image: url(img/sprite-photo-search.png);
    119         }
    120         .img-big{
    121             background-color: #e20052;
    122             position: absolute;
    123             position: relative;
    124             top: 18px;
    125             left: 700px;
    126             width: 47px;
    127             height: 47px;
    128         }
    129         
    130         #a-img{
    131             position: absolute;
    132             background-image: url(img/v_hd_bg1.png);
    133             top: 1px;
    134             left: 14px;
    135             background-position: 0px -60px;
    136             background-repeat: no-repeat;
    137             width: 50px;
    138             height: 50px;
    139         }
    140         .hot{
    141             font-size: 12px;
    142             position: absolute;
    143             top: 32px;
    144             left: 758px;
    145             color: #646363;
    146         }
    147         .hot a{
    148             color: #474545;
    149         }
    150         
    151         /*中间菜单*/
    152         .meun_centr{
    153             background-color: #740d92;
    154         }
    155         .meun_centr-big{
    156             margin: 0 auto;
    157             width: 1100px;
    158             height: 40px;
    159         }
    160         .meun_centr-big a{
    161             display: inline-block;
    162             line-height: 40px;
    163             font-size: 13px;
    164             font-weight: bolder;
    165             padding:0 10px 0 10px ;
    166             text-align: center;
    167         }
    168         .meun_centr-big a:hover{
    169             background-color: #c41240;
    170         }
    171 
    172         .centr-left{
    173             float: left;
    174         }
    175         .centr-right{
    176             float: right;
    177         }
    178         
    179         /*中间菜单下方*/
    180         .meun-down{
    181             height: 15px;
    182             background-color: #c41240;
    183         }
    184         /*中间内容*/
    185         .content{
    186             
    187             background-image: url(img/v_index_bg.png);
    188         }
    189         .cont-cent ,.footer-noe,.mag,.down{
    190             margin: 0 auto;
    191             width: 1100px;
    192             /*border: 2px solid #740D92;*/
    193         }
    194         
    195         
    196         .cont-cent-left{
    197             float: left;
    198             width: 820px;            
    199             /*border: 1px dashed;*/
    200         }
    201         .new{
    202             height: 82px;
    203         }
    204         .list-li, .list ul,.list{
    205             margin: 0 0;
    206             padding: 0 0;
    207         }
    208         
    209         .list-li{
    210             margin: 0 0;
    211             padding: 0 0;
    212             width: 820px;
    213             height: 230px;
    214             background-color:gainsboro;
    215             
    216         }
    217         .list{
    218             margin-bottom: 10px;
    219         }
    220         /*.list-li:hover{
    221             border: 2px solid #C41240;
    222         }*/
    223         .a-big{
    224             position: relative;
    225             display: block;
    226             width: 820px;
    227             height: 230px;    
    228             background-color: black;
    229         }
    230         .a-big:hover{
    231             border: 4px solid #C41240;
    232             background-color: #C41240;
    233         }
    234         
    235         .shop_name,.time,.left_shadow{
    236             position: absolute;
    237         }
    238         .shop_name{
    239             display: inline-block;
    240             line-height: 30px;
    241             width: 230px;
    242             bottom: 0px;
    243             left: 0px;
    244             color: white;
    245             background-color: black;
    246             font-size: 14px;
    247             text-align: center;
    248         }
    249         .shop_name:hover{
    250             background-color: #C41240;
    251         }
    252         
    253         .left_shadow{
    254             left: 5px;
    255             top: 5px;
    256             text-align: center;
    257         }
    258         
    259         .time{
    260             width: 590px;
    261             height: 30px;
    262             right: 0;
    263             bottom: 0px;
    264             background-color: white;
    265             text-align: left;
    266             line-height: 30px;
    267             font-size: 12px;
    268             color: #000000;
    269         }
    270         .sale{
    271             display: inline-block;
    272             width: 220px;
    273             height: 20px;
    274             background-color: white;
    275             color: red;
    276             font-size: 14px;
    277             padding-top: 80px;
    278             
    279         }
    280         .shop_ad{
    281             text-align: center;
    282             margin: 0 auto;
    283             font-size: 12px;
    284             color: #696969;
    285         }
    286         /*右边内容*/
    287         .cont-cent-right{
    288             float: right;
    289             width: 270px;
    290             height: 960px;
    291             /*border: 1px dashed;*/
    292         }
    293             
    294         .gif{
    295             margin-top: 82px;
    296             width: 220px;
    297             height: 200px;
    298         }
    299         
    300         
    301         /*底部开始*/
    302         .footer-noe-right{
    303             float: right;
    304             display: inline-block;
    305             line-height: 76px;
    306             height: 66px;
    307             width: 235px;        
    308             
    309         }
    310         .foot-span{
    311             float: left;
    312             display: inline-block;
    313             height: 52px;
    314             width: 138px;
    315             /*margin-top: 15px;
    316             margin-left: 15px;*/
    317             margin: 15px 15px 15px 15px;
    318         }
    319         #footer-img-4{
    320             background-image: url(img/footer_bg.png);
    321         }
    322         #footer-img-3{
    323             background-image: url(img/footer_bg.png);
    324             background-position-y: -52px;
    325         }
    326         #footer-img-2{
    327             background-image: url(img/footer_bg.png);
    328             background-position-y: -104px;
    329         }
    330         #footer-img-1{
    331             background-image: url(img/footer_bg.png);
    332             background-position-y: -156px;
    333         }
    334         
    335         footer{
    336             border-top:3px solid red ;
    337             background-color: #fafafa;
    338             border-bottom: 1px solid #DCDCDC;
    339         }
    340         
    341         /*下方信息*/
    342         .footer_sort{
    343             margin-top: 30px;
    344             width: 154px;
    345             float: left;
    346             text-align: center;
    347         }
    348         .f_title{
    349             padding-left:23px ;
    350             display: inline-block;
    351             text-align: center;
    352             width: 145px;
    353         }
    354         .f_title ul{
    355             width: 145px;
    356             text-align: left;
    357             /*padding-left: 10px;*/
    358             list-style: none;
    359             margin: 0;
    360         }
    361         .f_title ul li{
    362             
    363             line-height: 20px;
    364             height: 20px;
    365         }
    366         .f_title ul li a{
    367         
    368         }
    369         
    370         .footer_sort a{
    371             color: black;
    372             font-size: 12px;
    373         }
    374         
    375         /*最下方底疗*/
    376         .footer_nav a{
    377             margin: 15px;
    378         }
    379         .footer_nav_box a, .footer_nav_box {
    380             color: #8c8c8c;
    381             font-size: 12px;
    382             text-decoration: none;
    383         }
    384         
    385         .footer_nav_box .footer_nav {
    386             text-align: center;
    387             line-height: 20px;
    388             padding-bottom: 17px;
    389         }
    390         .footer_nav_box .footer_copyright {
    391             line-height: 20px;
    392             text-align: center;
    393             width: 960px;
    394             margin: 0 auto;
    395         }
    396         
    397         .footer_nav_box{
    398             padding-bottom: 70px;
    399         }
    400         
    401         /*清除浮动*/
    402         .div_float {
    403             clear: both;
    404         }
    405         </style>
    406     </head>
    407     <body style="margin: 0;">
    408         <!--上方菜单-->
    409         <div class="top">
    410             <div class="top-meun">
    411                 <div class="top-meun-left">
    412                     <span>欢迎光临当当,</span>
    413                     <a href="登陆页面.html">请登陆</a>
    414                     <a href="注册页面.html">成为会员</a>                    
    415                 </div>
    416                 <div class="top-meun-right">
    417                     <a href="#">购物车</a><span>0</span>
    418                     <a href="#">我的订单</a>
    419                     <a href="#">原创征文</a>
    420                     <a href="#"><img src=""/>手机当当</a>
    421                     <a href="#">我的当当</a>
    422                     <a href="#">企业采购</a>
    423                     <a href="#">客户服务</a>                    
    424                 </div>
    425                 
    426             </div>
    427             <div class="div_float"></div>
    428         </div>
    429         
    430         <!--top返回顶部 -->
    431         <div class="top-s">
    432             <ul id="jcSide">
    433               <li id="back_1"><a href="javascript:;" class="maobackvip" rel="po1">今日<span>最新</span></a></li>
    434               <li id="back_2"><a href="javascript:;" class="maobackvip" rel="po2">最后<span>疯抢</span></a></li>
    435               <li id="back_3"><a href="javascript:;" class="maobackvip" rel="po3">即将<span>开售</span></a></li>
    436               <li onclick="topy()"><a href="javascript:;" class="v_back_top" id="back_to_top"><br /><span>TOP</span></a></li>            
    437             </ul>
    438             
    439         </div>
    440         <!--上方logo-->
    441         <div class="logo-big">
    442             <div class="logo">
    443                 <div class="logo-img">
    444                     <a href="3"><img src="img/v_logo.png"/></a>
    445                 </div>
    446                 <div class="search">
    447                     <select name="all-meun" >
    448                         <option value="#">全部分类</option>
    449                         <option value="#">尾品汇</option>
    450                         <option value="#">图书</option>
    451                         <option value="#">电子书</option>
    452                         <option value="#">时尚美妆</option>
    453                         <option value="#">玩具</option>
    454                         <option value="#">家居日用</option>                        
    455                     </select>
    456                     <input type="text" name="" id="search-id" value="图书" />
    457                     <span class="img-small"></span>
    458                 </div>
    459                 <div class="img-big"><a href="" id="a-img"></a></div>
    460                 <span class="hot">大家都在搜:
    461                     <a href="#" name="hotword" target="_blank">初语</a>
    462                     <a href="#" name="hotword" target="_blank">AMII</a>
    463                     <a href="#" name="hotword" target="_blank">连衣裙</a>
    464                 </span>
    465             </div>
    466             <div class="div_float"></div>
    467         </div>
    468         
    469         <!--中间的菜单-->
    470         <div class="meun_centr">
    471             <div class="meun_centr-big">
    472                 <div class="centr-left">
    473                     <a href="#">当当首页</a>
    474                     <a href="#">尾品汇</a>
    475                     <a href="#">孕婴服饰</a>
    476                     <a href="#">家居日用</a>
    477                     <a href="#">家具装饰</a>
    478                     <a href="#">箱包皮具</a>
    479                     <a href="#">手表饰品</a>
    480                     <a href="#">运动户外</a>
    481                     <a href="#">汽车用品</a>
    482                 </div>
    483                 <div class="centr-right">
    484                     <a href="#">收藏此页</a>
    485                 </div>
    486                 
    487             </div>
    488             <div class="div_float"></div>
    489         </div>
    490         <!--中间的菜单下方-->
    491         <div class="meun-down">
    492             
    493         </div>
    494         
    495         
    496         <!--中间内容-->
    497         <div class="content">
    498             <div class="cont-cent">
    499                 <div class="cont-cent-left">
    500                     <div class="new">
    501                         <img src="img/jinrizuixin.png"/>
    502                     </div>
    503                     
    504                     <div class="list" >
    505                         <ul>
    506                             <li class="list-li">
    507                                 <a href="#" target="_blank" class="a-big">
    508                                     <img src="img/177030034604248_1_o.jpg">
    509                                     <span class="shop_name">七匹狼全场低至2折起</span>
    510                                     <span class="time">
    511                                         <span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
    512                                             <span sec="sep">还剩    <span>3</span></span>
    513                                         </span>
    514                                      </span>
    515                                     <span class="left_shadow">
    516                                         <span class="img_logo">
    517                                             <img data-original="" src="img/177030034604250_1_o.jpg" style="display: block;">
    518                                         </span>
    519                                         <span class="shop_ad">七匹狼,中国知名品牌!</span><br />                                        
    520                                         <span class="sale"></span>
    521                                     </span>
    522                                     <span class="red_circle" style="display: none;"></span>
    523                                 </a>
    524                             </li>
    525                         </ul>
    526                     </div>
    527                     
    528                     <div class="list" >
    529                         <ul>
    530                             <li class="list-li">
    531                                 <a href="#" target="_blank" class="a-big">
    532                                     <img src="img/182870031157919_1_o.jpg">
    533                                     <span class="shop_name">全场低至2折起</span>
    534                                     <span class="time">
    535                                         <span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
    536                                             <span sec="sep">还剩    <span>2</span></span>
    537                                         </span>
    538                                      </span>
    539                                     <span class="left_shadow">
    540                                         <span class="img_logo">
    541                                             <img data-original="" src="img/182870031157922_1_o.jpg" style="display: block;">
    542                                         </span>
    543                                         <span class="shop_ad">喜欢自己 表现到底</span><br />
    544                                         
    545                                         <span class="sale"></span>
    546                                     </span>
    547                                     <span class="red_circle" style="display: none;"></span>
    548                                 </a>
    549                             </li>
    550                         </ul>
    551                     </div>
    552                     
    553                     
    554                     <div class="list" >
    555                         <ul>
    556                             <li class="list-li">
    557                                 <a href="#" target="_blank" class="a-big">
    558                                     <img src="img/184840026912612_1_o.jpg">
    559                                     <span class="shop_name">全场低至2折起</span>
    560                                     <span class="time">
    561                                         <span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
    562                                             <span sec="sep">还剩    <span>2</span></span>
    563                                         </span>
    564                                      </span>
    565                                     <span class="left_shadow">
    566                                         <span class="img_logo">
    567                                             <img data-original="" src="img/184840026912614_1_o.jpg" style="display: block;">
    568                                         </span>
    569                                         <span class="shop_ad">喜欢自己 表现到底</span><br />                                        
    570                                         <span class="sale">满200减120</span>
    571                                     </span>
    572                                     <span class="red_circle" style="display: none;"></span>
    573                                 </a>
    574                             </li>
    575                         </ul>
    576                     </div>
    577                     
    578                     
    579                     
    580                     <div class="list" >
    581                         <ul>
    582                             <li class="list-li">
    583                                 <a href="#" target="_blank" class="a-big">
    584                                     <img src="img/177030034604248_1_o.jpg">
    585                                     <span class="shop_name">七匹狼全场低至2折起</span>
    586                                     <span class="time">
    587                                         <span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
    588                                             <span sec="sep">还剩    <span>3</span></span>
    589                                         </span>
    590                                      </span>
    591                                     <span class="left_shadow">
    592                                         <span class="img_logo">
    593                                             <img data-original="" src="img/177030034604250_1_o.jpg" style="display: block;">
    594                                         </span>
    595                                         <span class="shop_ad">七匹狼,中国知名品牌!</span><br />                                        
    596                                         <span class="sale"></span>
    597                                     </span>
    598                                     <span class="red_circle" style="display: none;"></span>
    599                                 </a>
    600                             </li>
    601                         </ul>
    602                     </div>
    603                     
    604                     <div class="list" >
    605                         <ul>
    606                             <li class="list-li">
    607                                 <a href="#" target="_blank" class="a-big">
    608                                     <img src="img/182870031157919_1_o.jpg">
    609                                     <span class="shop_name">全场低至2折起</span>
    610                                     <span class="time">
    611                                         <span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
    612                                             <span sec="sep">还剩    <span>2</span></span>
    613                                         </span>
    614                                      </span>
    615                                     <span class="left_shadow">
    616                                         <span class="img_logo">
    617                                             <img data-original="" src="img/182870031157922_1_o.jpg" style="display: block;">
    618                                         </span>
    619                                         <span class="shop_ad">喜欢自己 表现到底</span><br />
    620                                         
    621                                         <span class="sale"></span>
    622                                     </span>
    623                                     <span class="red_circle" style="display: none;"></span>
    624                                 </a>
    625                             </li>
    626                         </ul>
    627                     </div>
    628                     
    629                     
    630                     <div class="list" >
    631                         <ul>
    632                             <li class="list-li">
    633                                 <a href="#" target="_blank" class="a-big">
    634                                     <img src="img/184840026912612_1_o.jpg">
    635                                     <span class="shop_name">全场低至2折起</span>
    636                                     <span class="time">
    637                                         <span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">
    638                                             <span sec="sep">还剩    <span>2</span></span>
    639                                         </span>
    640                                      </span>
    641                                     <span class="left_shadow">
    642                                         <span class="img_logo">
    643                                             <img data-original="" src="img/184840026912614_1_o.jpg" style="display: block;">
    644                                         </span>
    645                                         <span class="shop_ad">喜欢自己 表现到底</span><br />                                        
    646                                         <span class="sale">满200减120</span>
    647                                     </span>
    648                                     <span class="red_circle" style="display: none;"></span>
    649                                 </a>
    650                             </li>
    651                         </ul>
    652                     </div>
    653                     
    654                     
    655                     
    656                 </div>
    657                 
    658                 
    659                 
    660                 <div class="cont-cent-right">
    661                     <div class="gif">
    662                         <img src="img/slogan.gif.gif"/>
    663                     </div>
    664                     <img src="img/tushu.png"/>
    665                     <img src="img/tongshutemai.jpg"/>
    666                     <img src="img/tushu211_1030.jpg"/>
    667                     <div class="div-right">
    668                         <div class="">
    669                             <img src="img/jijiangkaish (1).png"/>
    670                         </div>
    671                         
    672                     </div>
    673                 </div>
    674                 
    675             </div>
    676             <div class="div_float"></div>
    677         </div>
    678         
    679         <!--底部-->
    680         <footer>
    681             <div class="footer-noe">
    682                 <a class="footer-noe-right" href="#">
    683                     <span id="footer-img-1" class="foot-span"></span>
    684                 </a>
    685                 <a class="footer-noe-right" href="#">
    686                     <span id="footer-img-2" class="foot-span"></span>
    687                 </a>
    688                 <a class="footer-noe-right" href="#">
    689                     <span id="footer-img-3" class="foot-span"></span>
    690                 </a>
    691                 <a class="footer-noe-right" href="#">
    692                     <span id="footer-img-4" class="foot-span"></span>
    693                 </a>
    694             </div>
    695             <div class="div_float"></div>
    696         </footer>
    697         <!--下方信息块-->
    698         <div class="shop-wit">
    699             <div class="mag">
    700                 
    701                 <div class="public_footer_new">
    702                     <div class="footer_sort footer_nvice">
    703                         <span class="f_title">购物指南</span>
    704                         <ul>
    705                             <li><a name="foot_gouwu" href="#" target="_blank" class="main" rel="nofollow">购物流程</a></li>
    706                             <li><a name="foot_jifen" href="#" target="_blank" rel="nofollow">发票制度</a></li>
    707                             <li><a name="foot_fapiao" href="#" target="_blank" rel="nofollow">账户管理</a></li>
    708                             <li><a name="foot_mydangdang" href="#" target="_blank" rel="nofollow">会员优惠</a></li>
    709                         </ul>
    710                     </div>
    711                     <div class="footer_sort footer_pay">
    712                         <span class="f_title">支付方式</span>
    713                         <ul>
    714                             <li><a name="foot_tuihuanhuoliucheng" href="#" target="_blank" rel="nofollow">货到付款</a></li>
    715                             <li><a name="foot_tuihuanhuo" href="#" target="_blank" rel="nofollow">网上支付</a></li>
    716                             <li><a name="foot_huanhuo" href="#" target="_blank" rel="nofollow">礼品卡支付</a></li>
    717                             <li><a name="foot_tuihuo" href="#" target="_blank" rel="nofollow">银行转帐</a></li>
    718                         </ul>
    719                     </div>
    720                     <div class="footer_sort footer_characteristic">
    721                         <span class="f_title">订单服务</span>
    722                         <ul>
    723                             <li><a name="foot_jifen" href="#" target="_blank" class="main" rel="nofollow">订单配送查询</a></li>
    724                             <li><a name="foot_lipinka" href="#" target="_blank" rel="nofollow">订单状态说明</a></li>
    725                             <li><a name="foot_ershoushu" href="#r" target="_blank" rel="nofollow">自助取消订单</a></li>
    726                             <li><a name="foot_shouji" href="#" target="_blank" rel="nofollow">自助修改订单</a></li>
    727                         </ul>
    728                     </div>
    729                     <div class="footer_sort footer_distribution">
    730                         <span class="f_title">配送方式</span>
    731                         <ul>
    732                             <li><a name="foot_huodaofukuan" href="#" target="_blank" class="main" rel="nofollow">配送范围及免邮标准</a></li>
    733                             <li><a name="foot_yinhangzhuanzhang" href="#" target="_blank" class="main" rel="nofollow">当日递/次日达</a></li>
    734                             <li><a name="foot_dangdanglijuan" href="#" target="_blank" rel="nofollow">订单自提</a></li>
    735                             <li><a name="foot_dangdanglijuan" href="#" target="_blank" rel="nofollow">验货与签收</a></li>
    736                         </ul>
    737                     </div>
    738                     <div class="footer_sort footer_help">
    739                         <span class="f_title">退换货</span>
    740                         <ul>
    741                             <li><a name="foot_faq" href="#" target="_blank" rel="nofollow">退换货政策</a></li>
    742                             <li><a name="foot_zhaohuimima" href="#" target="_blank" rel="nofollow">自助申请退换货</a></li>
    743                             <li><a name="foot_huikuandan" href="#" target="_blank" rel="nofollow">退换货进度查询</a></li>
    744                             <li><a name="foot_tuiding" href="#" target="_blank" rel="nofollow">退款方式和时间</a></li>
    745                         </ul>
    746                     </div>
    747                     <div class="footer_sort footer_shangjia">
    748                         <span class="f_title">商家服务</span>
    749                         <ul>
    750                             
    751                             <li><a name="foot_zhaohuimima" href="#" target="_blank" rel="nofollow">商家中心</a></li>
    752                             <li><a name="foot_huikuandan" href="#" target="_blank" rel="nofollow">运营服务</a></li>
    753                             <li><a name="foot_tuiding" href="#" target="_blank" rel="nofollow">加入尾品汇</a></li>
    754                         </ul>
    755                     </div>
    756                 </div>
    757                 
    758                 
    759                 
    760                 
    761                 
    762             </div>
    763             <div class="div_float"></div>
    764         </div>
    765         
    766             
    767             
    768         <!--最底部-->
    769         <div class="footer-down">
    770             <!--<div class="down">-->
    771                 <div class="footer_nav_box">
    772                     <div class="footer_nav">
    773                         <a href="#" target="_blank" rel="nofollow">公司简介</a>
    774                         <span class="sep">|</span>
    775                         <a href="#" target="_blank">Investor Relations</a>
    776                         <span class="sep">|</span>
    777                         <a href="#" target="_blank">诚聘英才</a>
    778                         <span class="sep">|</span>
    779                         <a href="#" target="_blank">网站联盟</a>
    780                         <span class="sep">|</span>
    781                         <a href="#" target="_blank">当当招商</a>
    782                         <span class="sep">|</span>
    783                         <a href="#" target="_blank" rel="nofollow">机构销售</a>
    784                         <span class="sep">|</span>
    785                         <a href="#" target="_blank">手机当当</a>
    786                         <span class="sep">|</span>
    787                         <a href="#" target="_blank">官方    Blog</a>
    788                         <span class="sep">|</span>                        
    789                         <a href="#" target="_blank" >热词搜索</a>
    790                     </div>
    791                             
    792                     <div class="footer_copyright">
    793                         <span>Copyright (C) 当当网 2004-2017, All Rights Reserved</span>
    794                         <a href="#" target="_blank" class="footer_img" rel="nofollow"><img src="img/validate.gif" target="_blank" rel="nofollow">京ICP证041189号</a>
    795                         <span>出版物经营许可证 新出发京批字第直0673号</span>
    796                     </div>
    797                         
    798                 </div>
    799                 
    800                 
    801             <!--</div>-->
    802             <div class="div_float"></div>
    803             
    804         </div>
    805         
    806         
    807         <script type="text/javascript">
    808             //返回顶部
    809         function topy(){
    810             document.body.scrollTop=0;
    811         }
    812         </script>
    813         
    814     </body>
    815 </html>
    View Code

    注册页面:

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="UTF-8">
      5         <title></title>
      6         <style type="text/css">
      7             
      8         /*顶部菜单*/
      9         .top-meun{
     10             background-color: #DDDDDD;
     11         }
     12         .top-one{
     13             margin: 0 auto;
     14             width: 960px;
     15             height: 32px;
     16             
     17             
     18         }
     19         .top-meun a{
     20             display: inline-block;
     21             line-height: 32px;
     22             font-size: 14px;
     23             padding-right:15px ;
     24             text-decoration: none;
     25             color: dimgray;
     26         }
     27         .top-meun-left{
     28             float: left;
     29         }
     30         .top-meun-right{
     31             float: right;
     32         }
     33         /*logo 框*/
     34             
     35         .logo{
     36             padding-top:18px ;
     37             margin: 0 auto;
     38             /*top: 50px;
     39             left: 10px;*/
     40             width: 960px;
     41             height: 80px;
     42         }
     43         
     44         /*外边大框*/
     45         .oustd{                
     46             margin: 0 auto;
     47             width: 960px;
     48         }
     49         /* 注册框*/
     50         
     51         .rest{
     52             
     53             border: 5px solid #dddddd;
     54             top: 150px;
     55             width: 960px;
     56             height: 600px;
     57                             
     58         }
     59         
     60         /*左边*/
     61         
     62         h2{
     63             margin-top:10px;
     64         }
     65         .rest_left{
     66             padding-left:50px ;
     67             position: relative;
     68             width: 550px;
     69             height: 600px;
     70             border-right: 1px solid blueviolet;
     71             float: left;
     72         }
     73         .rest_left input{
     74             width: 220px;
     75             height: 30px;
     76             padding-right: 35px;
     77         }
     78         span{
     79             color: red;
     80             
     81         }
     82         .users{
     83             margin-top: 55px;
     84             padding-top:5px ;
     85             clear: both;
     86             
     87         }
     88         .users_u{
     89             margin:70px 10px;
     90         }
     91         .users_user{
     92             position: relative;
     93             float: left;
     94             width: 300px;
     95             /*border: 1px solid blue;*/
     96         }
     97         .sp{
     98             display: inline-block;
     99             line-height: 30px;                
    100             width: 100px;
    101             float: left;
    102             /*border: 3px solid black;*/
    103         }
    104         .sp-1{
    105             height: 30px;                
    106             width: 100px;
    107         }
    108         .sp label{
    109             float: right;
    110         }
    111         
    112         /*验证码*/
    113         
    114         
    115         #yzm{
    116             float: left;
    117             width: 70px;
    118             height: 30px;
    119         }
    120         #img_yzm a{
    121             float: left;
    122             width: 70px;
    123             height: 30px;
    124             background-image: url(img/view.png);
    125             background-position-x: -25px;
    126             background-position-y: 5px;
    127             margin: 0 0;
    128             padding: 0 0 ;
    129             
    130             /*display: inline-block;
    131             line-height: 45px;*/
    132         }
    133         .auto_left{
    134             float: left;
    135             font-size: 12px;
    136             padding-right: 15px;
    137         }
    138         #check_left{
    139             display: inline;
    140             width: 15px;
    141             height: 15px;
    142         }
    143         #auto_logo{
    144             color: black;
    145         }
    146         #logoing,.rest-q{
    147             background-color: red;
    148             
    149             width: 200px;
    150             text-align: center;
    151             display: inline-block;
    152             line-height: 30px;
    153             
    154         }
    155         
    156         
    157         /*清除浮动*/
    158         .div_float {
    159             clear: both;
    160         }
    161         
    162         
    163         #logoing a,.rest-q a{
    164             
    165             text-decoration: none;
    166             color: white;
    167         }
    168         
    169         
    170         /*右边*/
    171         .rest_right{
    172             /*background-repeat: no-repeat;
    173             */
    174             float: right;
    175             width: 350px;
    176             height: 600px;
    177             /*border: 1px solid red;*/
    178             text-align: center;
    179             
    180         }
    181         
    182         .ld-div{
    183             margin-top:50px ;
    184         }
    185         .ld-div span{
    186             color: black;
    187         }
    188         .img-right{
    189             margin-top: 50px;
    190             width: 200px;
    191             border:0;
    192         }
    193         </style>
    194     </head>
    195     <body style="margin: 0;">
    196         <!--顶部菜单-->
    197         <div class="top-meun">
    198             <div class="top-one">
    199                 <div class="top-meun-left">
    200                     <a href="3">收藏本站</a>                    
    201                 </div>
    202                 <div class="top-meun-right">
    203                     <a href="登陆页面.html" target="_blank">登陆</a>
    204                     <a href="注册页面.html">免费注册</a>
    205                     <a href="#">我的订单</a>
    206                     <a href="#">VIP会员俱乐部</a>
    207                     <a href="#">客户服务</a>
    208                 </div>
    209                 
    210             </div>
    211             <div class="div_float"></div>
    212             
    213         </div>
    214         
    215         
    216         <div class="logo"><a href="#"><img src="img/logo.png"/></a></div>
    217         
    218         <div class="oustd">
    219             
    220             
    221             
    222             <!--注册框-->
    223             <div class="rest">
    224                 <!--左边-->
    225                 <div class="rest_left">
    226                     <div class="users">
    227                         <h2>注册新用户</h2>
    228                     </div>
    229                     
    230                     <div class="users">
    231                         <div class="sp">
    232                             <label><span>*</span>用户名:</label>                        
    233                         </div>
    234                         <div class="users_user">
    235                             <input type="text" name="" id="" value="" />    
    236                             <samp id="img-user"></samp>
    237                         </div>
    238                     </div>
    239                     
    240                     <div class="users">
    241                         <div class="sp">
    242                             <label><span>*</span>手机号:</label>                        
    243                         </div>
    244                         <div class="users_user">
    245                             <input type="text" name="" id="" value="" />    
    246                             <samp id="img-user"></samp>
    247                         </div>
    248                     </div>
    249                     
    250                     <div class="users" >
    251                         <div class="sp">
    252                             <label><span>*</span>登陆密码:</label>
    253                         </div>
    254                         <div class="users_user">
    255                             <input type="text" name="" id="" value="" />
    256                             <samp id="img-pwd"></samp>
    257                         </div>
    258                     </div>    
    259                     
    260                     <div class="users" >
    261                         <div class="sp">
    262                             <label><span>*</span>确认密码:</label>
    263                         </div>
    264                         <div class="users_user">
    265                             <input type="text" name="" id="" value="" />
    266                             <samp id="img-pwd"></samp>
    267                         </div>
    268                     </div>    
    269                     
    270                     <div class="users">                        
    271                         <div class="sp">
    272                             <label><span>*</span>验证码:</label>
    273                         </div>
    274                         <div class="users_user" >
    275                             <input type="text" name="" id="yzm" value="" />
    276                             <span id="img_yzm"><a href=""></a></span>
    277                         </div>                    
    278                     </div>    
    279                     
    280                     <div class="users ">
    281                         <div class="sp sp-1">                            
    282                         </div>
    283                         <div class="users_user ">
    284                             <input type="checkbox" name="" class="auto_left" id="check_left" value="" />
    285                             <span class="auto_left" id="auto_logo">我已阅读并同意</span> 
    286                             <a href="#" class="auto_left">&lt;&lt;用户注册协议&gt;&gt;</a>
    287                         </div>                    
    288                     </div>
    289                     
    290                     <div class="users">
    291                         <div class="sp sp-1">                        
    292                         </div>
    293                         <div class="users_user" id="logoing" ><a href="#">同意以上协议并注册</a>                            
    294                         </div>                        
    295                     </div>
    296                     
    297                     
    298                     
    299                 </div>
    300                 <!--右边-->
    301                 <div class="rest_right">
    302                     <div class="ld-div">
    303                         <span id="dl">
    304                             我已经注册,现在就
    305                         </span>
    306                         <a href="登陆页面.html" target="_blank">登陆</a>
    307                     </div>
    308                     <img src="img/right.jpeg" class="img-right" alt="这是一张风景画!" title="好看吗?"/>
    309                 </div>
    310             </div>
    311             
    312             
    313             <div class="div_float"></div>
    314                 
    315         </div>
    316     </body>
    317 </html>
    View Code

    登陆页面:

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="UTF-8">
      5         <title></title>
      6         <style type="text/css">
      7             
      8             /*logo 框*/
      9             
     10             .logo{
     11                 margin: 0 auto;
     12                 top: 50px;
     13                 left: 10px;
     14                 width: 960px;
     15                 height: 80px;
     16             }
     17             
     18             /*外边大框*/
     19             .oustd{                
     20                 margin: 0 auto;
     21                 width: 960px;
     22             }
     23             /* 登陆框*/
     24             
     25             .rest{
     26                 
     27                 border: 5px solid #dddddd;
     28                 top: 150px;
     29                 width: 960px;
     30                 height: 400px;                
     31             }
     32             /*左边*/
     33             .rest_left{
     34                 /*background-repeat: no-repeat;
     35                 */
     36                 float: left;
     37                 width: 450px;
     38                 height: 400px;
     39                 /*border: 1px solid red;*/
     40                 text-align: center;
     41                 
     42             }
     43             .rest_left a{
     44                 background-image: url(img/left.jpg);
     45                 background-repeat: no-repeat;
     46                 text-decoration: none;
     47                 display: inline-block;
     48                 line-height: 315px;                
     49                 width: 315px;
     50                 height: 315px;
     51                 margin-top: 45px;
     52                 
     53                 /*border: 1px solid green;*/
     54             }
     55             /*右边*/
     56             .rest_right{
     57                 position: relative;
     58                 width: 505px;
     59                 height: 400px;
     60                 /*border: 1px solid blueviolet;*/
     61                 float: right;
     62             }
     63             .rest_right input{
     64                 width: 260px;
     65                 height: 30px;
     66                 padding-right: 35px;
     67             }
     68             span{
     69                 color: red;
     70                 
     71             }
     72             .users{
     73                 margin-top: 55px;
     74                 padding-top:5px ;
     75                 clear: both;
     76                 
     77             }
     78             .users_u{
     79                 margin:70px 10px;
     80             }
     81             .users_user{
     82                 position: relative;
     83                 float: left;
     84                 width: 300px;
     85                 /*border: 1px solid blue;*/
     86             }
     87             .sp{
     88                 display: inline-block;
     89                 line-height: 30px;                
     90                 width: 100px;
     91                 float: left;
     92                 /*border: 3px solid black;*/
     93             }
     94             .sp-1{
     95                 height: 30px;                
     96                 width: 100px;
     97             }
     98             .sp label{
     99                 float: right;
    100             }
    101             /*输入框 小图标*/
    102             #img-user,#img-pwd{
    103                 position: absolute;
    104                 background-image: url(img/user.jpg);
    105                 background-position: -86px -150px;
    106                 height: 25px;
    107                 width: 25px;
    108                 /*border: 1px solid red;*/
    109                 right: 5px;
    110                 top: 5px;
    111                 display: inline-block;    
    112             }
    113             #img-pwd{
    114                 background-position: -275px -320px;
    115             }
    116             /*验证码*/
    117             
    118             
    119             #yzm{
    120                 float: left;
    121                 width: 70px;
    122                 height: 30px;
    123             }
    124             #img_yzm a{
    125                 float: left;
    126                 width: 70px;
    127                 height: 30px;
    128                 background-image: url(img/view.png);
    129                 background-position-x: -25px;
    130                 background-position-y: 5px;
    131                 margin: 0 0;
    132                 padding: 0 0 ;
    133                 
    134                 /*display: inline-block;
    135                 line-height: 45px;*/
    136             }
    137             .auto_left{
    138                 float: left;
    139                 font-size: 12px;
    140                 padding-right: 15px;
    141             }
    142             #check_left{
    143                 display: inline;
    144                 width: 15px;
    145                 height: 15px;
    146             }
    147             #auto_logo{
    148                 color: black;
    149             }
    150             #logoing,.rest-q{
    151                 background-color: red;
    152                 
    153                 width: 200px;
    154                 text-align: center;
    155                 display: inline-block;
    156                 line-height: 30px;
    157                 
    158             }
    159             /*免费注册*/
    160             .rest-q{    
    161                 width: 100px;
    162                 height: 30px;
    163                 background-color: green;    
    164                 position: absolute;        
    165                 right: 0;
    166                 bottom: 0;                
    167             }
    168             
    169             /**/
    170             .div_float {
    171                 clear: both;
    172             }
    173             /*下方*/
    174             .footer{
    175                 margin: 0 auto;
    176                 top: 560px;
    177                 width: 960px;
    178                 text-align: center;                
    179             }
    180             
    181             #logoing a,.rest-q a{
    182                 
    183                 text-decoration: none;
    184                 color: white;
    185             }
    186             
    187         </style>
    188     </head>
    189     <body>
    190         <div class="logo"><a href="#"><img src="img/logo.png"/></a></div>
    191         
    192         <div class="oustd">
    193             
    194             
    195             
    196             <!--注册框-->
    197             <div class="rest">
    198                 <!--左边-->
    199                 <div class="rest_left">
    200                     <a href="#"></a>    
    201                 </div>
    202                 
    203                 <!--右边-->
    204                 <div class="rest_right">
    205                     <div class="users">
    206                         <div class="sp">
    207                             <label><span>*</span>用户名:</label>                        
    208                         </div>
    209                         <div class="users_user">
    210                             <input type="text" name="" id="" value="" />    
    211                             <samp id="img-user"></samp>
    212                         </div>
    213                     </div>
    214                     
    215                     <div class="users" >
    216                         <div class="sp">
    217                             <label><span>*</span>密码:</label>
    218                         </div>
    219                         <div class="users_user">
    220                             <input type="text" name="" id="" value="" />
    221                             <samp id="img-pwd"></samp>
    222                         </div>
    223                     </div>    
    224                     
    225                     <div class="users">                        
    226                         <div class="sp">
    227                             <label><span>*</span>验证码:</label>
    228                         </div>
    229                         <div class="users_user" >
    230                             <input type="text" name="" id="yzm" value="" />
    231                             <span id="img_yzm"><a href=""></a></span>
    232                         </div>                    
    233                     </div>    
    234                     
    235                     <div class="users ">
    236                         <div class="sp sp-1">                            
    237                         </div>
    238                         <div class="users_user ">
    239                             <input type="checkbox" name="" class="auto_left" id="check_left" value="" />
    240                             <span class="auto_left" id="auto_logo">自动登陆</span> 
    241                             <a href="#" class="auto_left">忘记密码</a>
    242                         </div>                    
    243                     </div>
    244                     
    245                     <div class="users">
    246                         <div class="sp sp-1">                        
    247                         </div>
    248                         <div class="users_user" id="logoing" ><a href="#">登陆</a>                            
    249                         </div>                        
    250                     </div>
    251                     
    252                     
    253                     <div class="rest-q"><a href="注册页面.html" target="_blank">免费注册》</a></div>
    254                 </div>
    255                 
    256             </div>
    257             
    258             <div class="div_float"></div>
    259             
    260         </div>
    261         
    262         
    263         <!--下方-->
    264         <footer class="footer">                
    265                 <p>Copyright ©老男孩教育. All Rights Reserved.</p>                
    266         </footer>
    267     </body>
    268 </html>
    View Code
  • 相关阅读:
    模拟100 题解
    模拟99 题解
    模拟98 题解
    模拟97 题解
    模拟96 题解
    模拟95 题解
    模拟94 题解
    模拟93 题解
    模拟92 题解
    Django-- 多数据库联用
  • 原文地址:https://www.cnblogs.com/uge3/p/7235935.html
Copyright © 2020-2023  润新知