导航栏的构建
程序员文章站
2022-07-11 10:52:19
...
导航栏是我们在浏览器中最常见的页面构成,导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用。
构建导航栏的标签:ul li ol
ul li
无序列表的定义:
(网页中显示默认一般形式为:每个li标签前面都有一个圆点)
ol li
有序列表的定义
(在网页中显示的默认样式一般为:每项 li 前都自带一个序号,序号默认从1开始)
以上两种列表均为纵向排列。
制作导航栏:
第一步:
去掉ul-li标签上带有的小圆点
ul{
list-style-type:none;
}
第二步:
让li标签浮动起来,一般向左浮动
li{
float:left;
}
第三步:
美化导航栏添加背景颜色
设置字体大小、颜色
设置分界线
ul{
background-color:red;
font-size:18px;
color:green;
margin-left:1px;
}
第四步:
使用a标签给你的导航加上链接
第五步:
加上一个鼠标事件,鼠标移动到导航单元改变背景色和文本颜色
补充鼠标事件
未被访问的链接:
鼠标移动到链接上:
构建导航栏的标签:ul li ol
ul li
无序列表的定义:
(网页中显示默认一般形式为:每个li标签前面都有一个圆点)
<ul> <li>文本</li> <li>文本</li> </ul>
ol li
有序列表的定义
(在网页中显示的默认样式一般为:每项 li 前都自带一个序号,序号默认从1开始)
<ol> <li>文本</li> <li>文本</li> </ol>
以上两种列表均为纵向排列。
制作导航栏:
第一步:
去掉ul-li标签上带有的小圆点
ul{
list-style-type:none;
}
第二步:
让li标签浮动起来,一般向左浮动
li{
float:left;
}
第三步:
美化导航栏添加背景颜色
设置字体大小、颜色
设置分界线
ul{
background-color:red;
font-size:18px;
color:green;
margin-left:1px;
}
第四步:
使用a标签给你的导航加上链接
<li><a href="#">首 页</a></li> //#表示空链接网址,你可以加上想要的链接
第五步:
加上一个鼠标事件,鼠标移动到导航单元改变背景色和文本颜色
li a:hover { background-color: #e151ff; color: #efefef; }
补充鼠标事件
未被访问的链接:
a:link{color:#000;}
鼠标移动到链接上:
a:hover{ color:white; background-color:#f00; }
推荐阅读
-
详解利用Dockerfile构建mysql镜像并实现数据的初始化及权限设置
-
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
-
MyEclipse项目中的构建路径和类路径lib的问题分享
-
Win10标题栏颜色怎么修改?win10修改标题栏颜色的方法
-
C#实现WinForm禁止最大化、最小化、双击标题栏、双击图标等操作的方法
-
用sqlalchemy构建Django连接池的实例
-
怎么注册微信公共账号构建与读者之间更好的沟通
-
详解在iOS App中自定义和隐藏状态栏的方法
-
360浏览器ctrl+b实现文字加粗的设置方法(默认显示或隐藏收藏栏)
-
浏览器地址栏右侧的360安全卫士图标的小技巧