<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          网页设计中的导航列表

          • 2019-09-09 10:23:03
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          网页设计中,导航菜单随处可见,大多都是通过设置CSS列表样式创建的,本例以介绍网页中常见的导航菜单制作方法,来说明列表网页菜单在网页设计中的应用。

          【操作步骤】第1步,启动Dreamweaver,新建一个网页,保存为index.html。

          第2步,构建网页结构,在<body>标签中输入以下内容:

          <dl>    

          <dt> <a href="#a">娱乐健身</a> <a href="#b">餐饮服务</a> <a href="#c">购物指南</a> </dt>    

          <dd>        

          <ul id="a">            

          <li><a href="#">博纳悠唐国际影城博纳悠唐国际影城</a></li>            

          <li><a href="#">家富富侨足疗(右安门店)家富富侨足疗(右安门店)</a></li>            

          <li><a href="#">朱国凡良子(长虹桥店)朱国凡良子(长虹桥店)</a></li>            

          <li><a href="#">昆泰大酒店游泳馆昆泰大酒店游泳馆</a></li>            

          <li><a href="#">奥力健身俱乐部(亚运村旗舰店)</a></li>            

          <li><a href="#">炫力骄阳健身(玺萌丽苑店)炫力骄阳健身(玺萌丽苑店)</a></li>        

          </ul>        

          <ul id="b">            

          <li><a href="#">家富富侨足疗(右安门店)家富富侨足疗(右安门店)</a></li>           

          <li><a href="#">中秋宴预定火爆食材涨幅异常</a></li>            

          <li><a href="#">餐饮业升级转型:要人才资源也要文化</a></li>            

          <li><a href="#">79元的“总统套餐”火了79元的“总统套餐”火了</a></li>            

          <li><a href="#">湖南餐饮大佬抢滩快餐业湖南餐饮大佬抢滩快餐业</a></li>

          <li><a href="#">第四届云南火锅美食节开幕第四届云南火锅美食节开幕</a></li>        

          </ul>        

          <ul id="c">            

          <li><a href="#">网上购物,凡客诚品促销中!优质低价,超值网购!</a></li>            

          <li><a href="#">蓝色港湾购物蓝色港湾购物</a></li>            

          <li><a href="#">走秀网-全球品牌网络旗舰店:正品,支持货到付款  </a></li>            

          <li><a href="#">昆泰大酒店游泳馆昆泰大酒店游泳馆</a></li>            

          <li><a href="#">英国出现少女购物狂掀起网络炫富潮</a></li>            

          <li><a href="#">炫力骄阳健身(玺萌丽苑店)炫力骄阳健身(玺萌丽苑店)</a></li>        

          </ul>    

          </dd>

          </dl>

          在上面的代码中,首先用<dl>标签创建了一个定义列表,在<dt>标签中,定义3个项目,分别是“娱乐健身”、“餐饮服务”和“购物指南”,在<dd>标签中包含了3个<ul>标签,用于创建<ul>无序列表,分别对应于上面的3个项目“娱乐健身”、“餐饮服务”和“购物指南”的内容。此时的显示没有任何CSS样式设置。

          第3步,在<head>标签内添加<styletype="text/css">标签,定义一个内部样式表,然后输入下面样式,规划整个页面的基本显示属性:字体颜色、背景颜色等。

          dl {                          /*定义列表样式*/    

          position:absolute;        /*定义元素的绝对定位*/    

          width:460px;    

          height:170px;    

          border:10px solid #eee;    /*定义元素的边框样式*/ }dt {                           /*定义<dt>标签(菜单)的样式*/    

          position:absolute;         /*定义元素的绝对定位,以父元素的原点为原点*/    

          right:1px;                 /*右边框离父标签1px*/}

          dd {                           /*定义<dd>标签(菜单内容)样式*/

          margin:0;    

          width:460px;    

          height:170px;    

          overflow:hidden;           /*溢出隐藏*/ }

          在以上代码中,定义了<dl>列表的样式。在<dd>样式中,在网页设计中,overflow:hidden语句的作用是将超出其设置的高度和宽度部分隐藏起来,如果缺少这句,那么3个<ul>标签中的内容将全部显示出来。

          第4步,设置菜单项的链接样式。

          dt a {                              /*dt(菜单项)的链接样式*/    

          display:block;                  /*设置为块级元素*/    

          margin:1px;                     /*四周补白为1px,这样设置可使菜单项有1px间隔*/    

          width:80px;                     /*菜单项的宽度*/    

          height:56px;                    /*菜单项的高度*/    text-align:center;    

          font:700 12px/55px "宋体";      /*用font属性综合设置字体样式*/    

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

          text-decoration:none;           /*不显示项目符号*/    

          background:#666;                /*背景颜色*/}

          dt a:hover {                       /*鼠标悬停时菜单项的样式*/    

          background:orange;             /*鼠标悬停时背景色改为橙色*/}

          在以上代码中,设置了菜单项<dt>中的链接样式,其中display:block将本是行内元素的<a>标签改为了块元素,通过该语句,当鼠标进入到该块的任何部分时都会被激活,而不仅仅是在文字上方时才被激活,也就是鼠标进入菜单区域时,变为橙色。

          第5步,设置<ul>列表和<li>标签的样式。

          ul {                          /*设置列表ul样式*/    

          margin:0;                 /*使列表内容紧靠父标签*/    

          padding:0;    

          width:460px;    

          height:170px;    

          list-style-type:none;     /*不显示列表项目*/    

          background:#fff;          /*背景颜色*/}li { /* <li>标签的样式*/    

          width:405px;              /*<li>标签的宽度*/    

          height:27px;    

          padding-left:20px;        /*文字左侧距离边框有20px距离*/    

          font:12px/27px "宋体";    /*用font属性综合设置字体样式*/

          }在以上代码中,定义了<ul>和<li>标签的样式,其中有一个语句读者可能有些陌生:font:12px/27px"宋体",在这里12px/27px表示字体大小为12px,行间距为27px,相当于:font-size:12px;line-height: 27px。此时网站导航完成设置。

          当前文章标题:网页设计中的导航列表

          当前URL:http://www.1c4w.com/news/wzzz/3092.html

          上一篇:在网页设计中设计新闻列表

          下一篇:如何设计多级菜单列表

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图