HTML5學習筆記(三)

採用段落或無序列表與超鏈接組合實現網站導航

代碼如下:

<!DOCTYPE html>

<html>

    <head>

       <!--jason-zl-->

       <meta charset="utf-8" />

       <title>網站導航</title>

       <style>      

       ul{list-style-type:none; text-align: center; }

         li{display:inline;}

         lia{padding:020px;}

       </style>

    </head>

    <body>

       <p>利用段落標記和超鏈接實現網站導航</p>

       <center>

           <p>

              <a href="http://www.baidu.com/">百度</a>&nbsp;&nbsp;&nbsp;&nbsp;

              <a href="http://www.sina.com.cn/">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;

              <a href="ttp://www.qq.com/">騰訊</a>&nbsp;&nbsp;&nbsp;&nbsp;

              <a href="ttp://www.sohu.som/">搜狐</a>&nbsp;&nbsp;&nbsp;&nbsp;

              <a href="http:www.163.com/">網易</a>&nbsp;&nbsp;&nbsp;&nbsp;

              <a href="tp:www.google.hk/">谷歌</a>&nbsp;&nbsp;&nbsp;&nbsp;

           </p>

       </center>

       <hr align="center" size="3" color="blue">

           <p>利用無序列表實現水平導航條</p>

       <center>

           <p>

              <ul>

              <li><a href="tp:www.google.hk/">谷歌</a></li>

              <li><a href="http://www.baidu.com/">百度</a></li>

              <li><a href="http://www.sina.com.cn/">新浪</a><li>

              <li><a href="ttp://www.qq.com/">騰訊</a><li>

              <li><a href="ttp://www.sohu.som/">搜狐</a></li>

              <li><a href="http:www.163.com/">網易</a></li>

              </ul>

           </p>

       </center>

    </body>

</html>


效果圖:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章