建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > CSS布局实例 >

网页菜单制作实例

更新时间:2015-12-15整理编辑:建站学习网阅读:0
  1.不用表格的菜单(纵向)
  <div id="menu">

  <ul>

  <li><a href='http://www.dedexuexi.com/dedejiaocheng/' rel='dropmenu1' >织梦教程</a></li>

  <li><a href='http://www.dedexuexi.com/dedemoban/'>织梦摸板</a></li>

  <li><a href='http://www.dedexuexi.com/zmcj/'>织梦插件</a></li>

  <li><a href='http://www.dedexuexi.com/dedetag/'>织梦标签</a></li>

  <li><a href='http://www.dedexuexi.com/wysc/' rel='dropmenu2'>网页素材</a></li>

  <li><a href='http://www.dedexuexi.com/tool/' rel='dropmenu3'>实用工具</a></li>

  <li><a href='http://www.dedexuexi.com/divcss/' rel='dropmenu4'>DIV+CSS</a></li>

  <li><a href='http://www.dedexuexi.com/zz/' rel='dropmenu5'>站长学院</a></li>

  </ul>

  </div>

  没有用任何table,而用的是无序列<li>,整个菜单的效果实现的秘密完全在于id="menu",我们再来看CSS中关于menu的定义:

  (1)首先定义了menu层的主要样式:
  #menu{

  MARGIN: 15px 20px 0px 15px; /*定义层的外边框距离*/

  PADDING:15px; /*定义层的内边框为15px*/

  BACKGROUND: #dfdfdf; /*定义背景颜色*/

  COLOR: #666; /*定义字体颜色*/

  BORDER:#fff 2px solid; /*定义边框为2px白色线条*/

  WIDTH:160px; /*定义内容的宽度为160px*/

  }

  (2)其次定义无序列表的样式:
  #menu ul{

  MARGIN: 0px;

  PADDING: 0px;

  BORDER: medium none; /*不显示边框*/

  LINE-HEIGHT: normal;

  LIST-STYLE-TYPE: none;

  }

  #menu li{

  BORDER-TOP: #FFF 1px solid;

  MARGIN: 0px;

  }

  说明:LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式,即:不显示小圆点(我们后面用自己的图标来代替小圆点)。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。

  (3)定义onmouseover效果
  #menu li a{

  PADDING:5px 0px 5px 15px;

  DISPLAY: block;

  FONT-WEIGHT: bold;

  BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;

  WIDTH: 100%;

  COLOR: #444;

  TEXT-DECORATION: none;

  }

  #menu li a:hover{

  BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;

  COLOR: #fff;

  }

  解释如下:

  • "display:block;"表示将标签a当作块级元素来显示,使得链接变成一个按钮;

  • "BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明,"2px 8px"指定图标的位置是距左边2px,距上边8px。这一句也可以拆分写成四句:"BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"

  • "#menu li a:hover"定义了当鼠标移动到链接上以后的颜色变化和小图标变化。

  ok,不用表格的菜单就这样实现了。大家可以明显感觉到,原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。

  2.不用表格的菜单(横向)

  上面是纵向的菜单,如果要显示横向菜单,用li也可以吗?当然是可以的,下面给出代码,效果就在本页顶部:

  页面代码
  <div id="submenu">

  <ul>

  <li><a href='http://www.dedexuexi.com/dedejiaocheng/' rel='dropmenu1' >织梦教程</a></li>

  <li><a href='http://www.dedexuexi.com/dedemoban/'>织梦摸板</a></li>

  <li><a href='http://www.dedexuexi.com/zmcj/'>织梦插件</a></li>

  <li><a href='http://www.dedexuexi.com/dedetag/'>织梦标签</a></li>

  <li><a href='http://www.dedexuexi.com/wysc/' rel='dropmenu2'>网页素材</a></li>

  <li><a href='http://www.dedexuexi.com/tool/' rel='dropmenu3'>实用工具</a></li>

  <li><a href='http://www.dedexuexi.com/divcss/' rel='dropmenu4'>DIV+CSS</a></li>

  <li><a href='http://www.dedexuexi.com/zz/' rel='dropmenu5'>站长学院</a></li>

  </ul>

  </div>

  样式表代码
  #submenu{

  MARGIN: 0px 8px 0px 8px;

  PADDING: 4px 0px 0px 0px;

  BORDER: #fff 1px solid;

  BACKGROUND: #dfdfdf;

  COLOR: #666;

  HEIGHT:25px;

  }

  #submenu ul{

  CLEAR: left;

  MARGIN: 0px;

  PADDING:0px;

  BORDER: 0px;

  LIST-STYLE-TYPE: none;

  TEXT-ALIGN: center;

  DISPLAY:inline;

  }

  #submenu li{

  FLOAT: left;

  DISPLAY: block;

  MARGIN: 0px;

  PADDING: 0px;

  TEXT-ALIGN: center

  }

  #submenu li a{

  DISPLAY: block;

  PADDING:2px 3px 2px 3px;

  BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;

  FONT-WEIGHT: bold;

  WIDTH: 100%;

  COLOR: #444;

  TEXT-DECORATION: none;

  }

  #submenu li a:hover{

  BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;

  COLOR: #fff;

  }

  #submenu ul li#one A{

  WIDTH: 60px

  }

  #submenu ul li#two A{

  WIDTH: 80px

  }

  #submenu ul li#three A{

  WIDTH: 80px

  }

  #submenu ul li#four A{

  WIDTH: 90px

  }

  #submenu ul li#five A{

  WIDTH: 80px

  }

  #submenu ul li#six A{

  WIDTH: 80px

  }

  #submenu ul li#seven A{

  WIDTH: 60px

  }

  #submenu ul li#eight A{

  WIDTH: 90px

  }

  #submenu ul li#nine A{

  WIDTH: 80px

  }

  以上代码不逐一分析了。横向菜单的关键在于:定义<li>样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递,从对象中删除行,通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度,控制菜单的间隔。好了,你也可以动手试试,用li实现各种各样的菜单样式。

  如果你子菜单的宽度总和大于层的宽度,菜单会自动折行,利用这个原理可以实现单个无序列表的2列或者3列排版,这是原来HTML很难实现的。

本文网址:https://www.dedexuexi.com/divcss/bj/532.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
自适应高度
« 上一篇2015年12月15日
手机端网页的设计尺寸
2015年12月15日下一篇 »
  • CSS Wave滤镜用法示例
    0阅读
    CSS Wave滤镜可能很多朋友并不喜欢用,其实用的好了,可以有不少奇异效果。CSS Wave滤镜可把对象按垂直方向叠加波形样式,使对象年上去像波浪一样。语法示例:filter:wave(add=add,freq=freq,lightst
  • CSS写的简单表格示例
    0阅读
    使用CSS写表格,不要有所怀疑,主要是对html结构进行css样式重定义,大家可以看看效果图,个人感觉还不错,感兴趣的朋友可以参考下 复制代码 代码如下: !DOCTYPE HTML html head meta http-equiv=Conte
  • 纯CSS代码实现翻页
    0阅读
    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=http://www.w3.org/1999/xhtml xml:la...
  • 表格列表偶数列、奇数列的CSS样式示例
    0阅读
    表格列表CSS样式包括:偶数列、奇数列、鼠标经过时样式、标题列等等,在接下来的示例中将为大家完美呈现,感兴趣的朋友不要错过 HTML示例源代码: 复制代码 代码如下: table class=list_table
  • 用CSS3创建一个旋转可变色按钮
    0阅读
    先从HTML: div a class=button旋转按钮/a /div 和现在的CSS: .button { background:#aaa; color:#555; font-weight:bold; font-size:15px; padding:10px 15px; border:none...
 
QQ在线咨询