【CSS】 一个简单的导航条
2024-04-01 21:59:23
今天来做一个导航条！
首先写一个坯子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="js/index.js"></script>
<title>导航条</title>
</head> <body>
<div id="topBox">
<ul>
<li><a href="#"><font>首页</font><span>Home</span></a></li>
<li><a href="#"><font>社区</font><span>SNS</span></a></li>
<li><a href="#"><font>知识</font><span>Knowledge</span></a></li>
<li><a href="#"><font>关于</font><span>About</span></a></li>
</ul>
</div>
</body>
</html>
效果：
接下来，我们给几个链接加上边框，除去前面的点和下划线。
<style>
#topBox ul li {
list-style-type: none; //除去前面的点
}
#topBox ul li a {
display: block;
width: 120px;
height: 60px;
border: 1px solid; //加上边框
color: black;
text-decoration: none; //除去下划线
}
</style>
效果：
ps：注意a标签的display:block配置项，由于a标签为行内元素，行内元素只能容纳文本或者其他行内元素，所以如果不将其设置为块级元素，则设置的宽高将不起作用。
随后，我们把文字居中，设定文字的尺寸、边框的样式,我们还可以添加一个阴影，就像一个凸出的按钮。
<style>
#topBox ul li {
list-style-type: none;
}
#topBox ul li a {
display: block;
width: 120px;
height: 60px;
border: 1px solid;
color: black;
text-decoration: none;
text-align: center;
border-radius:15px;
-moz-border-radius:15px; /* Old Firefox */
box-shadow: 6px 6px 3px #888888;
}
#topBox ul li a font {
font-size: 20px;
padding-top: 7px;
display: block;
}
#topBox ul li a span {
font-size: 15px;
display: block;
}
</style>
效果：
我们看到这样还是竖排的，我们将其向左浮动：
#topBox ul li {
list-style-type: none;
float: left;
}
效果：
这里，我们先看看这个导航条在整个界面的方位：
其中的红线为界面中线。
我们发现，导航条靠左，而我们要求的是居中。
这里我们需要用到前面说过的绝对定位和相对定位的知识。
我们分两步走：
第一步：首先把ul块设置为绝对定位，将以窗口左线为基准，向右偏移50%的距离。
#topBox ul {
float: left;
position: absolute;
left: 50%;
}
ps：在这里，我们先把整个ul块向左浮动，再设置绝对定位并向右偏移50%，此时他会以窗口为基准，相对偏移了窗口50%的宽度。
其实这里也可以设置为相对定位，因为上面没有设置id="topBox"的宽度，所以他默认为窗口宽度，这样就和窗口就没区别了，不过如果设置了div的宽度，相对定位就会以其父元素即div设置的宽度计算，这样就达不到效果了。
效果：
第二步：我们将以ul块为父元素，即包含快元素，将其下的li块为偏移块元素，设置为相对定位，并将li向左偏移相对于ul块元素50%宽度的距离。
#topBox ul li {
position: relative;
right: 50%;
float: left;
list-style-type: none;
}
效果：
按理说应该没问题了，不过怎么还有点偏呢？
多方找原因后才发现，这是浏览器默认给元素添加了一定宽度的内边距和外边距的缘故，只要我们人为的设置去除各元素的内外边距，应该就没问题了。
* {
padding:0;
margin:0;
}
*是通配符，这代码表示将所有元素的内外边距均设置为0;
效果：
这样看起来就没问题了！
我们回到导航条本体上来。
基于以上配置，基本上一个导航条就没有问题了，接下来就是如何做得更美观。添加背景，调整间距，一步一步慢慢实现。
<style>
* {
margin: 0px;
padding: 0px;
}
#topBox {
padding-top: 30px;
height: 70px;
}
#topBox ul{
padding-top: 10px;
float: left;
position: relative;
left: 50%;
}
#topBox ul li{
position: relative;
right: 50%;
float: left;
list-style-type: none;
}
#topBox ul li a {
display: block;
width: 120px;
height: 60px;
border: 1px solid;
margin: 0 10px 0 10px;
color: black;
text-decoration: none;
text-align: center;
border-radius:15px;
-moz-border-radius:15px; /* Old Firefox */
box-shadow: 6px 6px 3px #888888;
}
#topBox ul li a font {
font-size: 20px;
padding-top: 7px;
display: block;
}
#topBox ul li a span {
font-size: 18px;
margin-top: 2px;
display: block;
}
</style>
效果：
我们还可以给他添加一个鼠标悬停的效果：
#topBox ul li a:hover {
color: red;
border: none;
}
效果：
附上完整代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="js/index.js"></script>
<title>导航条</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#topBox {
padding-top: 30px;
height: 70px;
}
#topBox ul{
padding-top: 10px;
float: left;
position: relative;
left: 50%;
}
#topBox ul li{
position: relative;
right: 50%;
float: left;
list-style-type: none;
}
#topBox ul li a {
display: block;
width: 120px;
height: 60px;
border: 1px solid;
margin: 0 10px 0 10px;
color: black;
text-decoration: none;
text-align: center;
border-radius:15px;
-moz-border-radius:15px; /* Old Firefox */
box-shadow: 6px 6px 3px #888888;
}
#topBox ul li a font {
font-size: 20px;
padding-top: 12px;
display: block;
}
#topBox ul li a span {
font-size: 18px;
margin-top: 2px;
display: block;
}
#topBox ul li a:hover {
color: red;
border: none;
}
</style>
</head> <body>
<div id="topBox">
<ul>
<li><a href="#"><font>首页</font><span>Home</span></a></li>
<li><a href="#"><font>社区</font><span>SNS</span></a></li>
<li><a href="#"><font>知识</font><span>Knowledge</span></a></li>
<li><a href="#"><font>关于</font><span>About</span></a></li>
</ul>
</div>
</body>
</html>
我们还可以给各个元素添加背景、字体样式、大小、特效等等，最后结果如何，就看个人的审美了。
最新文章
- 【WP开发】JSON数据的读与写
- Java基础学习总结 -- 图形用户界面GUI
- 如何激活win10 win10激活工具下载
- JAVA修饰符
- 使用navicat连接mysql要报10038的错误
- 用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容
- 另一套Oracle SQL练习题,更新参考答案
- leetcode 101 Symmetric Tree ----- java
- NetCore第一步：千里之行 始于环境构筑
- 【学习笔记】【oc】Block
- oracle使用口令文件验证和os验证
- kafkaspout以及kafkabolt的最简实例
- OC金额转大写
- hadoop-eclipse-plugin-2.x.x 插件编译
- 存储引擎-Buffered tree
- Python：数据可视化pyecharts的使用
- String，StringBuilder，tringBuffer
- u3d常用代码小集合
- java 环境安装
- 测试那些事儿—web测试方法之输入框