1、用Dreamweaver新建一个HTML文件
2、按ctrl+s先保存,以防突然断电数据丢失
3、修改title为html+css实现横向导航
4、新建一个div id为“a”,添加ul li标签
5、在li中添加自己想要的文字 并调整好文字间距,按F12预览,如下图所示:
6、首先去掉字体前面的小黑点,代码如下:
7、预览,如图所示:
8、接下来,使文字横向排列,设置代码如下,给li设置左浮动效果;
9、按F12预览,效果如下:
1打开网站后台2找到栏目设置,不同的程序位置有所不同,
3进入栏目设置,吧设计好的栏目导航词条 按顺序填写,排序越小也靠前
4填写完毕,一定要保存,然后生成一下,有的程序不需要生成,伪静态的也不需要生成。
5切换到前台,刷新一下就制作完成。
<style type="text/css">#daohang{ width:900px}
#daohang ul{ list-style:none}
#daohang ul li{ width:100pxdisplay:blockbackground:#999999float:lefttext-align:center}
#daohang ul li:hover{}
#daohang ul li a{text-decoration:nonedisplay:block}
#daohang ul li a:hover{ background:#FF0000color:#000000text-decoration:none}
</style>
<div id="daohang">
<ul>
<li><a href="">菜单一</a></li>
<li><a href="">菜单二</a></li>
<li><a href="">菜单三</a></li>
<li><a href="">菜单四</a></li>
<li><a href="">菜单五</a></li>
<li><a href="">菜单六</a></li>
</ul>
</div>
看看行不行
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)