html+css 製作簡易導航欄

JaFlower發表於2018-11-28
HTMLCSS

二話不說直接上程式碼（萌新：實在也沒什麼好說的）

 1 <!DOCTYPE html>
 2 
 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>導航欄</title>
 7     <style type="text/css">
 8     
 9      #nav{
10          width:100%;
11          height:39px;
12         margin:0px;
13         background:#808080
14     }
15      #nav ul li{
16          margin:5px 10px;
17          float:left;
18          list-style:none;
19      }
20      #nav ul li a{
21          float:left;
22          padding:0px 16px;
23          <!--margin:auto;-->
24          color:#ffffff;
25          font-size:15px;
26      }
27     </style>
28 </head>
29 <body>
30     <div id="nav">
31         <ul >
32             <li ><a href="#">首頁</a></li>
33             <li ><a href="#">朋友</a></li>
34             <li ><a href="#">商城</a></li>
35             <li ><a href="#">下載客戶端</a></li>
36         </ul>
37     </div>
38 </body>
39 </html>

主要就是css（級聯樣式表）對html的內容做格式化（不太會表述）；

其中對元素可以直接用標識對其設定格式；對某個id為nav的元素做格式化，要在前面加#；對class=“nav”修改格式要在nav前加 “.”

這三個的應用我自己還是不太熟悉，就不說了，此處希望有大觸可以指導一番，或者有人和我探討也行。

css程式碼可以用開始<style type=”txt/css”>、結束標識</style>寫在html文件的head裡，即內嵌在head裡，

我這裡是簡易的導航欄css程式碼不多就內嵌在head裡

上述是css的一種引用方式：內嵌式樣式表

—————————————————————————————————————————

如果css程式碼比較多可以直接把程式碼寫在css檔案，然後用link標記在html檔案的head裡引入樣式表css。

上述事實第二種引用方式：外部樣式表（現在的網頁繁雜，用這種方法比較多）

 

還有一種就是內聯樣式表，這裡不做解釋。

相關文章