<html>
<head>
<meta >先码好导航栏所需要的基本的HTML代码
这个就不必多说具体的代码如下：
<html>
<head>
<title>横向导航栏</title>
<style>
<!---->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
</ul>
</div>
</body>
</html>
下面我们通过CSS 来改变他的样式。
首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！
现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。
方法是在<style></style>之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。
<style>
<!--
nav ul{
width:980px;/设置元素宽度为980px/
border:1px solid #000;/设置一个颜色为#000，宽度为1px的边框/
}
-->
</style>
接下来我们让他居中。我们在样式中加入以下代码。
nav ul{
width:980px;/设置元素宽度为980px/
border:1px solid #000;/设置一个颜色为#000，宽度为1px的边框/
margin:0px auto 0px auto;/也可以简写为margin:0 auto/
}
因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。
nav ul li{
float:left;/让li元素左浮动/
}
我们看到测试结果如图4。
边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或nav加上高度。
接下来，我们通过给元素<a>添加样式，让他更美观。加入以下代码。
nav ul li a{
width:80px;/设置元素宽为80px/
height:28px;/设置高度为28px/
line-height:28px;/设置行距为28px，让文字在每行的中间位置/
background:red;/设置元素的背景为红色/
color:#FFF;/文字颜色是白色/
margin:5px 10px;
font-size:12px;/用12号字/
display:block;/这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了/
text-align:center;/让文本居中/
text-decoration:none; /去掉下划线/
}
我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。
nav ul li a:hover{ /这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
最后稍微整理一下代码
nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
nav ul li{
float:left;
}
nav ul li a{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px 10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
看看效果，成功没？
思路就是这样的，其中还可以再加一些自己的元素，比如背景之类，效果就更好了。插入table！先插入一个1行13列的table!内容竖线内容竖线内容竖线内容竖线内容竖线内容竖线内容然后在内容上写上你的菜单，竖线上写上你的竖线！内容上的超链接就定义好超链接颜色！例如：a{ text-decoration:none; color:#000000;}a:hover{ text-decoration:underline; color:#FF0000;}至于每个菜单之间的距离，你在td上面定义，如果定义线颜色，也可以在td上面定义！高度用height,颜色如果在样式上写就color,直接写就用font-color吧！PS：你补习下Html的基本知识吧，很多东西很难说！制作就用dreamweaver吧，容易上手 <答案非本人所写，但愿能帮到你》是百度空间吧？
我估计是这样：
这一张就把那五个词包含了。
导航栏原本的字实际颜色为透明。
然后就是导航栏竖排问题。
这个，最简单的方法就是：
header {width:100px} /header宽度100px
tab a {width:60px} /单一按钮宽度，只要两个按钮宽度和超过100就行
这只是一个举例。为了与上的字完全合衬上，你得一遍遍试验。用CSS来做圆角的话是使用
box-radius属性，比如四个角都是半径5像素的圆角: box-radius:5px;
这时CSS3的属性，只有IE9、火狐、chrome、safari等现代浏览器才识别。
鼠标经过变色也是使用css的hover伪类实现
a:hover { color:red; }
这句话的意思是，鼠标经过a链接的时候文字颜色变成红色。按照标准的写法，应该是每个li都有背景，且背景的位置为right、top，右侧顶部。当然，你还需要为最后一个设置为无背景。使用：
#nav ul lilast,#nav ul li:last-child {background:none;}
last-child是标准的伪类写法，而lilast则是使用js来修正的，你需要使用js（或交给程序，他也可以判断输出的）给予最后一个li一个指定的class即可。
还有其他的写法，如，逐个输出空的li元素，并命名为lisplit 分隔。最后一次不输出（需要程序人员配合）。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）