世界超算排行榜:太湖之光!

IT教程学习网

网站建设

横向导航栏源代码与设计讲解

文章来源:深腾网   作者:静岳   浏览量:

横向导航栏设计原理

  在本篇横向导航栏的设计中,我们采用DIV+CSS架构来设计一个横向导航栏。首先我们选择一个DIV标签来进行横向满屏布局,这里宽度我们设置为100%(<div class=”daohang”></div>。CSS属性为(.daohang {width:100%;height:30px;margin:120px;auto})。
  Div标签中使用<ul>来进行实际宽度的设置和定位,并包含在div中。Html代码为:(<div class=”daohang”><ul class=”w1003”></ul></div>),设置ul的属性为:.w1003 {height:30px;width:1003px;margin:0px auto;}。
  我们把导航栏的链接放在<li>标签中,进行浮动,便可以组成块级元素li的横向排列:<li><a href=”#”>首页</a></li>。这样便组成了一个简单的div架构的导航栏。

横向导航栏的美化

  经过上述的设置,已经基本可以看到一个横向导航样,但是这样的效果交不是我们最终想要的结果,我们还需要对导航栏进行一定的美化和简单的动态设计,使网页中的导航栏起到醒目和点睛的作用。
  我们这里给导航栏设置深绿色的背景,链接的颜色为白色。链接的属性改为块显示(a {display:block;},这样做的目的是鼠标放在li的块内时便可以点击进行链接。经过这一步的设计,导航栏已经有基本的颜色,我们再进一步给导航栏增加动态效果。这里的方案是当鼠标经过li标签时,背景的颜色改为雅黑色,实现的方法使用CSS伪类来实现。

横向导航栏源代码

横向导航栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>横向导航栏设计</title>
<style type="text/css">
body,ul,li {list-style-type:none;margin:0px;padding:0px;}
a {text-decoration:none;}
.daohang {width:100%;height:40px;margin:120px auto;background-color:#119955;line-height:40px;}
 
.daohang .w1003 {width:600px;height:40px;margin:0px auto;}
 
.daohang .w1003 li {width:120px;float:left;}
.daohang .w1003 li:hover {background-color:#444;}
 
.daohang .w1003 li a {width:120px;display:block;color:#fff;font-weight:bold;text-align:center;}
</style>
</head>
<body>
<div class="daohang">
<ul class="w1003">
<li><a href="#">首页</a></li>
<li><a href="http://www.inalls.com">建站基础</a></li>
<li><a href="#">
网站UI设计</a></li>
<li><a href="#">网站配色设计</a></li>
<li><a href="#">MYSQL教程</a></li>
</ul>
</div>
</body>
</html>

分享到:

  • 上一篇:web标准div+css与块模型讲解
  • 下一篇:没有了
  • Copyright © 2014-2026 深腾网 版权所有:静岳互联网咨询工作室
  • 冀ICP备16020878-1