學習過程-京東註冊的靜態界面

時間 2019-11-15

原文原文鏈接

HTML源代碼：css

<!DOCTYPE html>
<html>
<head>
   <title>京東註冊</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="jdzccss.css">
</head>
<body>


       <nav>
           <div class="nav_all">
               <ul class="nav_lef">
                   <li><img src="./images/star.jpg"></li>
                   <li><a href="">收藏京東</a></li>
               </ul>
               <ul class="nav_rig">
                   <li><a href="">您好，歡迎來到京東！</a></li>
                   <li><a href="">[登陸]</a></li>
                   <li><a href="">[免費註冊]</a></li>
                   <li>|</li>
                   <li><a href="">個人訂單</a></li>
                   <li>|</li>
                   <li><a href="">手機京東</a></li>
                   <li>|</li>
                   <li><a href="">客戶服務</a></li>
                   <li>|</li>
                   <li><a href="">網站導航</a></li>
               </ul>
           </div>
       </nav>


       <div class="jd">
           <ul class="jd_logo">
               <li id="jd_logo"></li>
               <li id="separator">|</li>
               <li id="zc">歡迎註冊</li>
           </ul>
       </div>


       <div class="from_bt">
           <ul>
               <li class="from_gr">我的用戶</li>
               <li class="from_qy">企業用戶</li>
               <li class="from_engliash">InternationalCustomers</li>
           </ul>
       </div>

   <header class="head">
       <form>
           <div class="from_nam">
           <span class="from_xing">*</span>
           <span class="from_name">用戶名:</span>
               <div id="text_logo">
                   <input type="text" name="" class="from_text">
                   <span class="yhtx_logo"><img src="./images/user.jpg"></span>
               </div>
           <span class="from_tsy">4-20位字母、數字漢字及特殊字符組合</span>
           </div>
           
           <div class="from1_nam">
           <span class="from1_xing">*</span>
           <span class="from1_name">密碼:</span>
               <div id="text1_logo">
                   <input type="password" name="" class="from1_text">
                   <span class="yhtx1_logo"><img src="./images/pwd.jpg"></span>
               </div>
           <span class="from1_tsy">6-20位字符，建議字母、數字和符號</span>
           </div>
           
           <div class="from2_nam">
           <span class="from2_xing">*</span>
           <span class="from2_name">請確認密碼:</span>
               <div id="text2_logo">
                   <input type="password" name="" class="from2_text">
                   <span class="yhtx2_logo"><img src="./images/pwd.jpg"></span>
               </div>
           <span class="from2_tsy">請再次輸入密碼</span>
           </div>
           
           <div class="from3_nam">
           <span class="from3_xing">*</span>
           <span class="from3_name">驗證手機:</span>
               <div id="text3_logo">
                   <input type="text" name="" class="from3_text">
                   <span class="yhtx3_logo"><img src="./images/phone.jpg"></span>
               </div>
           <span class="from3_tsy">完成驗證後，能夠使用該手機找回</span>
           </div>
           
           <div class="from4_nam">
           <span class="from4_xing">*</span>
           <span class="from4_name">短信驗證碼:</span>
               <div id="text4_logo">
                   <input type="text" name="" class="from4_text">
               </div>
           <span class="from4_tsy">獲取短信驗證碼</span>
           </div>
           
           <div class="from5_nam">
               <input type="checkbox" name="">
               <span>我已贊成並閱讀</span>
               <span><a href=""><<京東用戶註冊協議>></a></span>
           </div>
           <input type="button" name="" class="from5_text" value="當即註冊">
       </form>


       <div id="regphone">
       <img src="./images/reg_phone.jpg">
       </div>
   </header>

   <footer>
       <ul class="footer">
           <li><a href="#">關於咱們</a></li>
           <li>|</li>
           <li><a href="#">聯繫咱們</a></li>
           <li>|</li>
           <li><a href="#">人才招聘</a></li>
           <li>|</li>
           <li><a href="#">商家入駐</a></li>
           <li>|</li>
           <li><a href="#">廣告服務</a></li>
           <li>|</li>
           <li><a href="#">手機京東</a></li>
           <li>|</li>
           <li><a href="#">友情連接</a></li>
           <li>|</li>
           <li><a href="#">銷售聯盟</a></li>
           <li>|</li>
           <li><a href="#">京東社區</a></li>
           <li>|</li>
           <li><a href="#">京東公益</a></li>
           <li id="jd_number">Copyright©2004-2016 京東JD.com 版權全部 </li>
       </ul>
   </footer>

   <aside>
       <ul>
           <li class="zhuti">特點欄目</li>
           <li>爲我推薦</li>
           <li>視頻購物</li>
           <li>京東社區</li>
           <li>特點欄目</li>
           <li>校園頻道</li>
           <li>在線讀書</li>
           <li>裝機大師</li>
           <li>禮品卡</li>
       </ul>
       <ul>
           <li class="zhuti">企業服務</li>
           <li>企業採購</li>
           <li>辦公直通車</li>
       </ul>
       <ul>
           <li class="zhuti">旗下網站</li>
           <li>36TOP</li>
           <li>迷你挑</li>
           <li>EngliahSite</li>
       </ul>
   </aside>
</body>
</html>html

CSS源代碼：ide

/*總體格式化*/

*{
   margin: 0px;
   padding: 0px;
   font-size: 15px;
   color:#666;
   text-decoration: none;
   background:#f1f1f1;
}
input:focus{
   outline: none;
}
/*導航部分*/
nav{
   border: 1px solid #fff;
   width: 100%;
   height: 30px;
   background: #fff;
}
.nav_all>ul{
   list-style-type: none;
}
.nav_all{
   padding: 0px auto;
   height: 30px;
   width: 1800px;
   background-color:#fff;

}
.nav_lef{
   margin-left: 200px;
}
.nav_rig{
   float: right;
}
.nav_all>ul>li{
   float: left;
   padding-left: 15px;
   line-height: 30px;
   background-color: #fff;
}
a
{
   background-color: #fff;
}

a:hover{
   color:red;

}
/*以上是導航部分*/

/*京東logo*/
.jd_logo{
   border:1px solid transparent;
   width: 500px;
   height: 60px;
   margin-left: 220px;

}
.jd>ul>li{
   float:left;
   list-style-type: none;

}
#jd_logo{
   background:url(https://misc.360buyimg.com/user/reg/1.0.0/css/i/icon.png) no-repeat;
   width: 160px;
   height:50px;
}
#separator{
   font-size: 50px;
   margin-top: 3px;
   color:#ccc;
}
#zc{
   font-size: 30px;
   font-weight: bold;
   margin-top: 20px;
   margin-left: 5px;
}

/*主信息*/
/*表單頭*/
.from_bt{
   border: 1px solid #f3f3f3;
   width: 700px;
   height: 50px;
   margin:0px auto;
}
.from_bt>ul{
   list-style-type: none;
}
.from_gr,.from_qy{
   float: left;
   border: 1px solid #ccc;
   width: 65px;
   height: 15px;
   margin-left: 20px;
   padding: 15px 30px;
   font-size: 15px;
   font-weight: bold;
   background-color: #fff;
   border-bottom: none;
}
.from_qy{
   background-color: #f3f3f3;
}
.from_gr{
   color:red;
}
.from_engliash{
   float: left;
   border: 1px solid #ccc;
   width: 180px;
   height: 15px;
   margin-left: 20px;
   padding: 15px 30px;
   font-size: 15px;
   font-weight: bold;
   background-color: #f3f3f3;
   border-bottom: none;
}
/*表單主體*/
.head{
   width: 1200px;
   height: 650px;
   border: 1px solid #fff;
   margin:auto;
   background-color: #fff;
   position: absolute;
   top:141px;
   left:320px;

}

/*用戶名*/
.from_nam,.from1_nam,.from2_nam,.from3_nam,.from4_nam{
   width: 800px;
   height: 50px;
   border:1px solid transparent;
   position: absolute;
   top: 50px;
   left: 100px;
   background-color: #fff;
}
.from_xing,.from1_xing,.from2_xing,.from3_xing,.from4_xing{
   color:red;
   position: absolute;
   top:6px;
   left: 6px;
   background-color: #fff;
}
.from_name,.from1_name,.from2_name,.from3_name,.from4_name{
   margin-left: 20px;
   font-size: 25px;
   background-color: #fff;
   position: relative;
   top: 4px;
}
#text_logo,#text1_logo,#text2_logo,#text3_logo,#text4_logo{
   display:inline-block;
   background-color: #fff;
   border: 1px solid #ccc;
   width: 270px;
   height:40px;

}
.yhtx_logo>img,.yhtx1_logo>img,.yhtx2_logo>img,.yhtx3_logo>img{
   width: 20px;
   height: 25px;
   margin-top: 9px;
   float: right;
   padding-right: 3px;
}
.from_nam .from_text,.from1_nam .from1_text,.from2_nam .from2_text,.from3_nam .from3_text,.from4_nam .from4_text{

   border: 1px solid transparent;
   margin-left: 10px;
   width:200px;
   height: 20px;
   background-color: #fff;
   margin-top: 8px;

}
.from_tsy,.from1_tsy,.from2_tsy,.from3_tsy,.from4_tsy{
   border:1px solid #ccc;
   font-size: 17px;
   background-color: #fff;
   padding: 12px 40px 11px 5px;
   position: relative;
   top:3px;

}
/*密碼框*/
.from1_nam{

   position: absolute;
   top: 130px;

}
.from1_xing{
   position: absolute;
   top:6px;
   left: 30px;
}
.from1_name{
   position: relative;
   left: 25px;
}
#text1_logo{
       margin-left: 25px;

}
.from1_tsy{
   padding-right: 58px ;
}
/*確認密碼框*/
.from2_nam{
   width: 875px;
   position: absolute;
   top: 210px;
   left: 26px;
}
.from2_xing{
   position: absolute;
   top:6px;
   left: 30px;
}
.from2_name{
   position: relative;
   left: 25px;
}
#text2_logo{
       margin-left: 25px;

}
.from2_tsy{
   padding-right: 210px ;
}
/*手機驗證*/
.from3_nam{
   width: 875px;
   position: absolute;
   top: 290px;
   left: 50px;
}
.from3_xing{
   position: absolute;
   top:6px;
   left: 30px;
}
.from3_name{
   position: relative;
   left: 25px;
}
#text3_logo{
       margin-left: 25px;

}
.from3_tsy{
   padding-right: 75px ;
   padding-left: 5px;
}
/*短信驗證碼*/
.from4_nam{
   width: 875px;
   position: absolute;
   top: 370px;
   left: 25px;
}
.from4_xing{
   position: absolute;
   top:6px;
   left: 30px;
}
.from4_name{
   left: 25px;
}
#text4_logo{
       width: 223px;
       margin-left: 25px;

}
.yhtx4_logo>img{
   width: 165px;
}
.from4_nam .from4_text{
   width:160px;
   height: 20px;

}
.from4_tsy{
   padding-bottom: 10px ;
   padding-right: 11px ;
}
/*表單尾部*/
.from5_nam{
   width: 295px;
   height: 20px;
   border:1px solid transparent;
   position: absolute;
   top: 460px;
   left: 214px;
   background-color: #fff;
}

.from5_nam>span>a:link,.from5_nam>span>a:visited{
   color:#435D7E;
}

.from5_text{
   width:200px;
   height: 20px;
   position: absolute;
   top: 530px;
   left: 206px;
   margin-left: 10px;
   height: 30px;
   font-size: 20px;
   color:#fff;
   background-color: red;
   border-radius: 5px;
   padding:10px 190px 30px 110px;

}
#regphone>img{
   width: 210px;
   height:315px;
   position: absolute;
   top: 20px;
   left: 920px;
}
/*頁腳部分*/
.footer{
   width: 1200px;
   height: 30px;
   border: 1px solid transparent;
   list-style-type: none;
   position: absolute;
   top:805px;
   left: 425px;
}
.footer>li{
   float: left;
   padding-left: 15px;

}
.footer>li>a{
   background-color: #f1f1f1;
}
.footer #jd_number{
   margin-top: 20px;
   margin-left: 295px;
}
.footer>a:link,.footer>a:visited{
   color:#999999;
}
/*側邊懸浮框*/
aside{
   width: 310px;
   height:250px;
   border: 1px solid #ccc;
   background-color: #fff;
   position: fixed;
   top: 33px;
   left:1490px;
}
aside>ul{
   float: left;
   margin-left: 20px;
   list-style-type: none;
   background-color: #fff;
}
aside>ul>li{
   background-color: #fff;
   margin-top: 7px;
   color:#5F5F5F;
   }
aside .zhuti{
   font-size: 20px;
   font-weight: bold;
   margin-bottom: 10px;
   color: black;
}網站