网页设计第二讲

一、导航菜单的实现

1.  HTML中的3个新标签：图片标签<img>、超链接标签<a>、列表标签<ul><li>

        （1）超链接标签<a>：

                       成对出现<a></a>、用于从一个页面跳转到另一个页面

                       <a>最重要的属性href，跳转的连接目标。若没有目标，可用#表示空链接

                              <a href=“http://www.baidu.com”>去百度</a>

                              <a href=“#”>哪也不去</a>

        （2）列表标签<ul><li>：成对出现<ul></ul>、<li></li>、<ol></ol>

                       列表分为无序列表和有序列表。无需列表用粗体圆点对项目标记，有序用数字。

   例如：    

    <div id="menu">

            <!--ol是有序列表1,2,3  ul为无序列表-->

         <ul>

                 <li><a href="http://www.baidu.com" target="_blank">首页</a></li>

                 <li><a href="#">相册</a></li>

                 <li><a href="#">阳光生活</a></li>

                 <li><a href="#">释放梦想</a></li>

                 <li><a href="#">留言</a></li>

            </ul>       

     </div>

 

2.  CSS样式中的：背景色、超链接样式、列表样式的写法            

         a:link - 正常，未访问过的链接

         a:visited - 用户已访问过的链接

         a:hover - 当用户鼠标放在链接上时

         a:active - 链接被点击的那一刻

例如：

       

     #menu{

             background-color:#328048;/*用吸管颜色取色器取的*/

             height:50px;

     }

        /*修改id为menu的html标签下面的ul标签的样式*/

     #menu ul{

             list-style:none;/*去掉点*/

             float:right;/*靠右*/

             height:50px;

             line-height:50px;/*设置行居中*/

             width:450px;

      }

     #menu li{

            line-height:50px;/*设置行居中*/

            float:left;/*可以使列表竖着变横着*/

            margin-left:20px;/*li距离左边那个li的距离*/

     }

 

     #menu a{

            color:#FFF;/*字体颜色*/

            text-decoration:none;/*去掉下划线*/

            font-size:16px;/*字体大小*/

            font-family:"微软雅黑";/*word中的常见字体*/

     }

     #menu a:hover{/*当鼠标滑过超链接标签时的样式*/

             color:#F60;

     }

二、左侧列表的实现

      分为三部分，如图：

  1.  HTML中的标签：块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li>

        （1）“作者”这个div里是包含图片和文本。

        （2）<img />单标签、有src和alt两个属性，

        （3）<span></span>成对、没有语义的标签，主要是为了方便对文本添加样式的

 

     例如：      

     <div id="left">

             <!--分为三部分-->

                <div id="zuozhe">

                     <img src="images/baby.jpg" alt="我的照片"/>

                     <!--文字，span方便对文字的样式修改  一行  不会换行-->

                     <span>linda zhaoqi</span>

                </div>

                <div id="huoli">

                6个列表项

                </div>

                <div id="list">

                分类和列表div

                </div>

          </div>

  2.  CSS样式中的属性

             对图片需要设置：

                   内边距padding:一圈都是15px;

                   设置绿色的、实线的边border：1px solid #999

例如：

     #zuozhe{
         padding-top:15px;
         padding-left:15px;/*上边和左边留点空*/
         text-align:center;/*整个内容水平居中*/
    
     }
     #zuozhe img{
         border:1px solid #999;/*加边 solid 实线*/
         padding:8px;/*边与图片有个空白 类似相框*/
         border-radius:20px;/*  圆角  值越大 角越圆*/
     }

 

 

 

转载于:https://my.oschina.net/u/4090401/blog/3024130