【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: ...
随机推荐
- 使用 FireMonkey 构建优秀专业 Android 应用的10点提示
原文链接:http://www.firemonkeyx.com/ten-tips-for-building-stunning-professional-android-apps-with-firemo ...
- [leetcode] 1. Valid Palindrome
leetcode的第一题,回文数判断. 原题如下: For example, "A man, a plan, a canal: Panama" is a palindrome. & ...
- VMware+Linux更改磁盘配额(使用gparted LiveCd) 实用!!!
转载:http://blog.csdn.net/microad_liy/article/details/7667670 写这篇文章的原因: 最近要给服务器Centos上的ruby版本升级,由于是第一次 ...
- ES6—— iterator和for-of循环
Iterator 遍历器的作用:为各种数据结构,提供一个同意的,简便的访问接口.是的数据结构的成员能够按某种次序排列.ES6 新增了遍历命令 for...of 循环,Iterator接口主要供 for ...
- 手把手带你打造一个 Android 热修复框架
本文来自网易云社区 作者:王晨彦 Application 处理 上面我们已经对所有 class 文件插入了 Hack 的引用,而插入 dex 是在 Application 中,Application ...
- 【QTP小技巧】02_QTP中Complete Word 实现（转载）
相信做过开发或者写过JAVA的朋友都应该对Complete Word这个词语不陌生吧~ 对~~~它就是开发脚本过程中的催化剂 有了它我们就可以不用去死记硬背 有了它我们就不会出现某个代码少一个字母 有 ...
- bzoj 2780: [Spoj]8093 Sevenk Love Oimaster（广义SAM）
题目大意:给出n个原串,再给出m个查询串.求每个查询串出现在了多少原串中. 题解 直接对原串建一个广义SAM,然后把每一个原串放到SAM上跑一跑,记录一下每一个状态属于多少个原串,用$size$表示. ...
- 一步一步带你安装史上最难安装的 vim 插件 —— YouCompleteMe
YouCompleteMe is a fast, as-you-type, fuzzy-search code completion engine for Vim.参考: https://github ...
- CF960G Bandit Blues 分治+NTT（第一类斯特林数）
$ \color{#0066ff}{ 题目描述 }$ 给你三个正整数 \(n\),\(a\),\(b\),定义 \(A\) 为一个排列中是前缀最大值的数的个数,定义 \(B\) 为一个排列中是后缀最大 ...
- css ie浏览器兼容问题
第一,IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大 解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如0px. 1 height: 4px; 2 _font- ...