ydzf.net
当前位置:首页 >> html制作横向导航菜单 >>

html制作横向导航菜单

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

将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>

这里有一个js的多级联动下拉菜单 可以自定义位置和样式 比较实用 里面有教程和源码

首先要建立一个div,为其命名为“nav”,在div中建立一个无序列表,导航共有几个栏目,就为列表添加几个的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面.然后设置css样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:ul {width:宽度值;height:高度值; list-style:none;} 如果是横向导航,还需为里面的列表项标签设置左浮动的样式,代码为:li {float:left;} 每个栏目之间分隔的距离可通过margin(外边距)属性来设置.

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

HTML部分: <ul> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</li> <li>菜单项4</li> </ul> CSS部分: ul { list-style:none; } li { float:left; } 这是最基本的方式

<!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

<!DOCTYPE html><html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style> .menu { position: relative; width: 150px; height: 100px; background-color: #ccccff; text-align: center; font-

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> body{ text-align: center; } ul{ overflow: hidden; background: #f00; margin: 0 auto; display: inline-block; padding-

</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>

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