网页导航栏制作:如何为网页添加导航栏

网页导航栏制作:如何为网页添加导航栏,第1张

制作一个放导航栏的容器

制作一个放导航栏的容器,容器名为nav,容器宽为1000px,高为30px,背景颜

色为灰色,相关代码如下:

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

<div id="nav"></div>

显示结果

在浏览器中显示的结果为下图所示:

在容器中放入一些导航栏

导航栏代码如下:

<ul>

<li>模块一</li>

<li>模块二</li>

<li>模块三</li>

<li>模块四</li>

<li>模块五</li>

<li>模块六</li>

</ul>

为导航栏添加一些属性

<style type="text/css">

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

#nav ul

{

width:960px

height:35px

}

#nav ul li

{

float:left

width:100px

float:left

list-style:none

background:yellow

line-height:35px

}

</style>

导航栏在浏览器页面的显示结果如下图所示:

一、添加网站菜单(一级导航:例如“关于我们”)

1. *** 作:合规网站→网站设置→ 网站菜单 →右上角“添加导航”→输入一级菜单名称→选择相对应内容读取→确定

二、添加网站二级菜单(二级导航:例如“公司简介”)

1. *** 作:合规网站→网站设置→ 网站菜单 →在一级菜单右侧点击添加→输入二级菜单名称→选择相对应内容读取→确定

三、隐藏/删除菜单

1.隐藏菜单

*** 作:合规网站→网站设置→ 网站菜单 →选择要隐藏的导航后点击“修改”→选择“隐藏”→确定

1.删除菜单

*** 作:合规网站→网站设置→ 网站菜单 →选择要删除的导航前打勾→点击左下角批量删除→确定


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7943770.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存