HTML5学习笔记(三)

版权声明: https://blog.csdn.net/qq_40515156/article/details/80494137

采用段落或无序列表与超链接组合实现网站导航

代码如下:

<!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>


效果图:


猜你喜欢

转载自blog.csdn.net/qq_40515156/article/details/80494137