【CSS】 一个简单的导航条
今天来做一个导航条！
首先写一个坯子：
<!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>
我们还可以给各个元素添加背景、字体样式、大小、特效等等，最后结果如何，就看个人的审美了。
【CSS】 一个简单的导航条的更多相关文章
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- jq+css+html简单实现导航下拉菜单
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...
- Python——一个简单的进度条的实现
import math def process_bar(total_work,work_index,length): times = total_work / length # 长度倍数,用来缩放或扩 ...
- Linux中实现一个简单的进度条【转】
转自:http://blog.csdn.net/yuehailin/article/details/53999288 说起进度条,其实大家常常见到,比如说你在下载视频或文件的时候,提示你当前下载进度的 ...
- css实现京东顶部导航条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- css制作简单的导航栏
//css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...
随机推荐
- CentOS 7.2安装gitlab-ce
国内网络原因,gitlab-ce安装包可以在清华大学开源网站镜像站下载:https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/ [root@gitlab ~]# ...
- delphi 中封装的VCl窗体Tab键响应问题
在DLL中的子窗体不会响应Tab按键的,这个时候就需要手动去指定Tab键的操作,但是前提是主窗体要向这个窗体发送一个消息,一个Tab键按下的消息.基本顺序是这样的: 1. 主窗体用Hook技术捕获Ta ...
- [leetcode] 3. Pascal's Triangle
第三道还是帕斯卡三角,这个是要求正常输出,题目如下: Given numRows, generate the first numRows of Pascal's triangle. For examp ...
- [LeetCode 题解]: UniquePaths
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- Windows上编译OpenEXR
注意一定要使用1.0.1版本的ilmbase和1.6.1版本的openexr,其它版本的我测试过,OpenImageIO会编译失败. 解压ilmbase 1.0.1到[工作目录]/openexr/il ...
- 使用 dlv 调试go 程序
目录 使用 dlv 调试smartraiden 一 正常启动 smartraiden 二 dlv 调试 三 dlv attach 使用 dlv 调试smartraiden by 白振轩 使用 dlv ...
- orcal exists
Oracle使用了一个复杂的自平衡B-tree结构.通常,通过索引查询数据比全表扫描要快.当 Oracle找出执行查询和Update语句的最好路径时,Oracle优化器将使用索引.同样在联结多个表时使 ...
- 如何安全地运行用户的 JavaScript 脚本
本文来自网易云社区,转载务必请注明出处. 有时候我们需要运行用户输入的 JavaScript 脚本(以下简称脚本).对于我们来说,这些脚本是不可信任的,如果在当前的 Context 中运行这些脚本,它 ...
- Ionic2实战——按模块划分app 创建多module
http://www.jianshu.com/p/d94324b722af 背景 用ionic2开发过一两个小功能的朋友都会发现,每新建一个页面都需要在\src\app\app.module.ts中添 ...
- 百度地图 Infowidow 内容(content 下标签) 点击事件
需要监听 infowindow 的打开事件 ,查看InfoWindow API 实现 html 点击效果 代码 var infoWindow = that.createDangerInfoWindo ...