clwn.net
当前位置:首页 >> html横向导航栏模板 >>

html横向导航栏模板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=""><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>#nav

先码好导航栏所需要的基本的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

将ul里面的li标签都设置为右浮动即可.如:<ul style="overflow:hidden; display:block"> <li class="float:right; padding:10px;>项目1</li> <li class="float:right; padding:10px;>项目1</li> <li class="float:right; padding:10px;>项目1</li> <li class="float:right; padding:10px;>项目1</li></ul>

a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px;}a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #ecd8db; text-decoration: none; border

<style>ul{list-style:none; height:30px; background-color:#999999;}li{float:left;line-height:30px;text-agin:certer; color:#ffffff}</style><ul><li>123</li><li>456</li><li>789</li><li>012</li></ul>

代码如下: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="

</style></head><body><div id="nav"><ul><li><a href=" http://www.52css.com/">HomePage_extended="true"><li><a href=" http://www.52css.com/">Div+CSS教程</a></li><li><a href=" http://www.52css.com/">CSS布局实例</a></li>

<ul class="nea"> <li><a href="">首页</a></li> <li><a href="">简介</a></li> <li><a href="">帮助</a></li> </ul>

</style></head><body><div id='nav'><a>home</a><a>name</a><a>see</a></div></body></html>

不用给li加width,直接加个 padding: 0 10px;多好!这样即使菜单字数不一样也能很好的显示~此外,使用line-height可以是字在图片垂直方向居中

网站首页 | 网站地图
All rights reserved Powered by www.clwn.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com