HTML+CSS的小實例


  通過一個月以來對HTML5+CSS的學習。這篇隨筆給大家來做一個簡單的網頁中常見的導航欄。

這些都稱之為網頁中的導航欄。

我簡單的做了一個某寶和58同城的導航欄,供大家學習參考。

一、58同城導航欄:

解析:首先我們來看到這個導航欄,我們可以把它分成兩個部分 左邊為一部分,右邊為一部分。把導航欄拆分成兩個部分 這樣這個導航欄的難度就大大降低了。

 

 

 

HTML5部分:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <link rel="stylesheet" href="master1.css">
  9     <link rel="shortcut icon" href="56.ico" />
 10     <title>【58同城 58.com】珠海分類信息 - 本地 免費 高效</title>
 11 
 12 </head>
 13 
 14 <body>
 15     <div class="warpper">
 16 
 17         <div class="top-nav-wrap">
 18             <div class="top-nav">
 19                 <!---->
 20                 <ul class="top-nav-l">
 21                     <!-- <li class="top-nav-menu area">
 22                         <a href="#">
 23                             <span>珠海</span>
 24                         </a>
 25                     </li>-->
 26                     <li class="top-nav-menu city">
 27                         <span class="area">珠海</span>
 28                         <span>
 29                             <a href="#">[切換城市</a>
 30                         </span>
 31                         <a href="#">澳門</a>
 32                         <a href="#">中山</a>
 33                         <a href="#">重慶]</a>
 34                     </li>
 35                     <li class="top-nav-menu tianqi">
 36                         <span class="bg-pic yl-pic"></span>
 37                         &nbsp;
 38                         <span></span>
 39                         <span>28 ~ 21℃</span>
 40                         &nbsp;
 41                         <span class="bg-pic zl-pic"></span>
 42                     </li>
 43                 </ul>
 44 
 45                 <!---->
 46                 <ul class="top-nav-r">
 47                     <li class="top-nav-menu login">
 48                         <a href="#">
 49                             <span class="c-span">登錄 / 注冊 </span>
 50                         </a>
 51                     </li>
 52                     <!-- <li class="top-nav-menu cut-off">
 53                         <span>/</span>
 54                     </li>
 55 
 56                     <li class="top-nav-menu login">
 57                         <a href="#">
 58                             <span class="c-span">注冊</span>
 59                         </a>
 60                     </li>-->
 61                     <li class="top-nav-menu per">
 62                         <a href="#">
 63                             <span class="c-span">個人中心</span>
 64                         </a>
 65                         <span class="bg-pic xsj-pic"></span>
 66                     </li>
 67 
 68                     <li class="top-nav-menu mer">
 69                         <a href="#">
 70                             <span class="c-span">商家中心</span>
 71                         </a>
 72                         <span class="bg-pic xsj-pic"></span>
 73                     </li>
 74 
 75                     <li class="top-nav-menu help">
 76                         <a href="#">
 77                             <span class="c-span">幫助中心</span>
 78                         </a>
 79                         <span class="bg-pic xsj-pic"></span>
 80                     </li>
 81 
 82                     <li class="top-nav-menu ser">
 83                         <a href="#">
 84                             <span class="c-span">聯系客服</span>
 85                         </a>
 86                     </li>
 87 
 88                     <li class="top-nav-menu vig">
 89                         <a href="#">
 90                             <span class="c-span">網站導航</span>
 91                         </a>
 92                         <span class="bg-pic xsj-pic"></span>
 93                     </li>
 94 
 95                 </ul>
 96             </div>
 97         </div>
 98     </div>
 99 </body>
100 
101 </html>

 CSS代碼部分:

  1 /*頁面初始化*/
  2 *{
  3     margin:0;
  4     padding:0;
  5     list-style: none;
  6     text-decoration:none;
  7 }
  8 /*頁面的整體顯示*/
  9 html,
 10 body{
 11     width:100%;
 12     height:100%;
 13     background-color:#f4f4f4;
 14     color:#555;
 15     overflow: hidden;
 16 }
 17 /*頁面的模塊*/
 18 .warpper{
 19     width:100%;
 20     height:100%;
 21     
 22 }
 23 /*設置導航欄的寬高*/
 24 .warpper .top-nav-wrap{
 25     width:100%;
 26     height:35px;
 27     background-color:#fff;
 28     border-bottom: 1px solid #ddd;/*下標線*/
 29     /*background-color:1px solid #000;*/
 30 } 
 31 /*給顯示東西的導航欄設置寬高*/
 32 .warpper .top-nav-wrap .top-nav{
 33     width:1190px;
 34     height:35px;
 35     /*border:1px solid red;*/
 36     margin:0 auto;
 37      
 38 }
 39 /*將左邊的內容 向左靠齊*/
 40 .warpper .top-nav-wrap .top-nav .top-nav-l{
 41     float:left;
 42 }
 43 /*將右邊的內容 向右靠齊*/
 44 .warpper .top-nav-wrap .top-nav .top-nav-r{
 45     float:right;
 46 }
 47 /*將所以的內容區域水平排列*/
 48 .warpper .top-nav-wrap .top-nav ul li{
 49     float:left;
 50     margin:5px;
 51 }
 52 /*將內容的所以的a標簽改變顏色大小等*/
 53 .warpper .top-nav-wrap .top-nav  a{
 54     color:#555;
 55     font-size:12.5px;
 56     padding:0 5px;
 57     margin:0;
 58 }
 59 /*將內容首個   改變樣式和字體,大小*/
 60 .warpper .top-nav-wrap .top-nav .area{
 61     color:#ff552e;
 62     font-size:7.5px;
 63     font-weight:bold;/*字體加粗*/
 64     float: left;
 65     padding-top: 4px;
 66 }
 67 /*改變所以span的內容字體大小*/
 68 .warpper .top-nav-wrap .top-nav span{
 69     font-size:11px;
 70    
 71 }
 72 /*鼠標指向改變狀態。。顏色*/
 73 .warpper .top-nav-wrap .top-nav  a:hover{
 74     color:#ff552e;
 75 }
 76 /*內容間距*/
 77 .warpper .top-nav-wrap .top-nav .city{
 78     padding:0 -6px;
 79     word-spacing:-10px; 
 80     letter-spacing: 1px;
 81 }
 82 
 83 
 84 /*圖片設置*/
 85 .warpper .top-nav-wrap .top-nav .bg-pic{
 86     display:inline-block;
 87     width:14px;
 88     height:9px;
 89     background-size:100% 100%;
 90     vertical-align:middle; 
 91 }
 92 
 93 .warpper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
 94     background-image: url('./xsj1.png');
 95     width:9px;
 96     height:7px;
 97 }
 98 .warpper .top-nav-wrap .top-nav .bg-pic.yl-pic{
 99     background-image: url('./tq.png');
100     width:16px;
101     height:10px;
102 }
103 .warpper .top-nav-wrap .top-nav .bg-pic.zl-pic{
104     background-image: url('./zl.png');
105     width:18px;
106     height:18px;
107 }

 運行效果:

二、淘寶導航欄

 

HTML代碼部分:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <link rel="stylesheet" href="master.css">
 9 
10     <title>淘寶網 - 淘!我喜歡</title>
11 </head>
12 
13 <body>
14 
15     <div class="wrapper">
16         <!--導航欄-->
17         <div class="top-nav-wrap">
18             <div class="top-nav">
19 
20                 <ul class="top-nav-l">
21                     <li class="top-nav-menu china">
22                         <span class="c-span">中國大陸</span>
23                         <span class="bg-pic xsj-pic"></span>
24                     </li>
25                     <li class="top-nav-menu login-sign">
26                         <a href="#">親,請登錄</a>
27                         <a href="#">免費注冊</a>
28                     </li>
29                     <li class="top-nav-menu ">
30                         <a href="#">手機逛淘寶</a>
31                     </li>
32                 </ul>
33 
34                 <ul class="top-nav-r">
35                     <li class="top-nav-menu my-taobao">
36                         <a href="#">我的淘寶</a>
37                         <span class="bg-pic xsj-pic"></span>
38                     </li>
39                     <li class="top-nav-menu shop-Car">
40                         <a href="#">
41                             <span class="bg-pic shopCar-pic"></span>
42                             <span>購物車0</span>
43                         </a>
44                         <span class="bg-pic xsj-pic"></span>
45                     </li>
46                     <li class="top-nav-menu like">
47                         <a href="#">
48                             <span class="bg-pic like-pic"></span>
49                             <span>收藏夾</span>
50                         </a>
51                         <span class="bg-pic xsj-pic"></span>
52                     </li>
53 
54                     <li class="top-nav-menu goods">
55                         <a href="#">商品分類</a>
56                     </li>
57 
58                     <li class="top-nav-menu cut-off">
59                         <span>|</span>
60                     </li>
61                     <li class="top-nav-menu seller">
62                         <a href="#">
63                             <span class="c-span">賣家中心</span>
64                             <span class="bg-pic xsj-pic"></span>
65                         </a>
66                     </li>
67                     <li class="top-nav-menu cutsomer">
68                         <a href="#">
69                             <span class="c-span">聯系客服</span>
70                             <span class="bgPic xsj"></span>
71                         </a>
72                     </li>
73                     <li class="top-nav-menu web-nav">
74                         <a href="#">
75                             <span class="bg-pic web-nav-pic"></span>
76                             <span>網站導航</span>
77                         </a>
78                         <span class="bg-pic xsj-pic"></span>
79                     </li>
80                 </ul>
81             </div>
82             <!--導航圖片
83             <div class="ad-wrap">
84                 <img src="toutiao4.png" alt="圖">
85             </div>-->
86         </div>
87     </body>
88     </html>

 

 CSS代碼部分:

  1 /*初始化工作*/
  2 *{
  3     margin: 0;/*去邊距*/
  4     padding: 0;
  5     list-style:none;/*去標簽小圓點*/
  6     text-decoration: none;/*去下划線*/
  7 }
  8 /*想設置頁面的寬度,必須先讓父元素先修改值*/
  9 html,
 10 body{
 11     width: 100%;
 12     height: 100%;
 13     background-color:#f4f4f4;
 14     color:#3c3c3c;
 15     overflow: hidden;/*去縱向滾動條*/
 16 }
 17 .wrapper{
 18     width: 100%;
 19     height: 100%;
 20 }
 21 /*上導航欄條*/
 22 .wrapper .top-nav-wrap{
 23     width: 100%;
 24     height:35px;
 25     /*border:1px solid #000;*/
 26 }
 27 .wrapper .top-nav-wrap .top-nav{
 28     width: 1190px;
 29     height: 35px;
 30     /*border:1px solid black;*/
 31     margin:0 auto;/*讓導航條居中在頁面中間*/
 32 }
 33 .wrapper .top-nav-wrap .top-nav .top-nav-l{
 34     float:left;/*讓左側的東西靠左*/
 35 }
 36 .wrapper .top-nav-wrap .top-nav .top-nav-r{
 37     float:right;/*讓右側的東西靠右*/
 38 }
 39 .wrapper .top-nav-wrap .top-nav ul li{
 40     float:left;/*導航條水平排列*/
 41     margin:6px;/*字間距*/
 42 }
 43 .wrapper .top-nav-wrap .top-nav a{
 44     color:#6c6c6c;
 45     font-size:12.5px;
 46     padding:0 6px;
 47     margin:0;  
 48 }
 49 /*偽類 鼠標指針指向*/
 50 .wrapper .top-nav-wrap .top-nav a:hover{
 51     color:#f40;
 52 }
 53 .wrapper .top-nav-wrap .top-nav .china{
 54     color:black;
 55     font-size:13px;
 56     padding-top:3.5px;
 57 }
 58 .wrapper .top-nav-wrap .top-nav .my-taobao a{
 59     color:black;
 60 }
 61 .wrapper .top-nav-wrap .top-nav .login{
 62     color:#f40;
 63 }
 64 .wrapper .top-nav-wrap .top-nav .c-span{
 65     padding:0 3px;
 66     
 67 }
 68 .wrapper .top-nav-wrap .top-nav .bg-pic{
 69     display:inline-block;
 70     width:10px;
 71     height:10px;
 72     background-size:100% 100%;
 73     vertical-align:middle; 
 74 }
 75 .wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
 76     background-image: url('./xsj.png');
 77     
 78 }
 79 .wrapper .top-nav-wrap .top-nav .like-pic{
 80     background-image: url('./xxx.png');
 81     width:13px;
 82     height:9px;
 83    padding-top:4px;
 84     
 85 }
 86 .wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic{
 87     background-image: url('./gwc.png');
 88     width:14px;
 89     height:15px;
 90     
 91 }
 92 .wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic{
 93     background-image: url('./xuanxiang.png');
 94     width:10px;
 95     height:8px;
 96     padding-top:2px;
 97 }
 98 .wrapper .top-nav-wrap .top-nav .cut-off{
 99     line-height:25px;
100     color:#ddd;
101 }

注:因為沒有運用到JavaScript所以很多動態交互無法實現,圖標都是圖片暫時放上的。所以請多多理解。

運用的知識:1.title顯示, 2.css樣式引入, 3.css選擇器與選擇器權重, 4.橫向滾動條消失, 5.display, 6.浮動, 7.居中, 8.文字豎直居中, 9.background, 10.偽類, 11.定位position, 12.margin/padding

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com