列表导航栏实例(01)
【步骤1】无样式
一、效果
二、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>列表与导航栏</title>
</head>
<body><ul><li><a href="#">home</a></li><li><a href="#">about us</a></li><li><a href="#">products</a></li><li><a href="#">services</a></li><li><a href="#">contact</a></li></ul>
</body>
</html>
【步骤2】基本样式
一、效果
二、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>列表与导航栏</title><link href="css/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body><ul><li><a href="#">home</a></li><li><a href="#">about us</a></li><li><a href="#">products</a></li><li><a href="#">services</a></li><li><a href="#">contact</a></li></ul>
</body>
</html>
三、CSS
*{margin:0; padding:0;}
body{font:11px Verdana, Geneva, sans-serif; background:#666;}
ul{list-style:none;}
【步骤3】横向导航条
一、效果
二、HTML
<ul id="nav"><li><a href="#">home</a></li><li><a href="#">about us</a></li><li><a href="#">products</a></li><li><a href="#">services</a></li><li><a href="#">contact</a></li>
</ul>
三、CSS
#nav
{
margin-top: 50px;
overflow: hidden;
height: 1%;
background: url(../images/nav-bg.png) repeat-x;
text-transform: capitalize;
}
#nav li
{
float: left;
background: url(../images/line.gif) no-repeat center right;
padding-right: 1px;
}
#nav li a
{
display: block;
height: 30px;
line-height: 30px;
padding: 0 20px;
color: black;
text-decoration: none;
}
#nav li a:hover
{
background: url(../images/nav-bg.png) repeat-x left bottom;
color: white;
}
【说明】
margin-top: 50px;
导航条与页面顶端距离50px;
overflow: hidden;
内容会被修剪,并且其余内容是不可见的
height: 1%;
高度是父元素的1%,父元素未设置高度值时,不起作用,实际高度由内部元素a决定。在这里,与overflow: hidden;联用,消除IE低版本的某些bug吧。
background: url(../images/line.gif) no-repeat center right;
竖线分隔图片右侧居中
padding-right: 1px;
右侧内部填充1px,这是给竖线分隔图片留下的位置
background: url(../images/nav-bg.png) repeat-x left bottom;
left bottom相当于0 -30px
【技术要点】
列表导航栏的大小由三层标签决定,最里层标签是a,高度是30px,宽度=20px+文字宽度+20px;第二层是li,宽度=a的宽度+1px,高度30px是由a决定的;最外一层是<ul id="nav">宽度100%,高度30px是由li决定的。
【附图】
line.gif
nav-bg.png
转载于:https://www.cnblogs.com/WestGarden/archive/2012/09/01/3138333.html
列表导航栏实例(01)相关推荐
- 列表导航栏实例(02)——精美电子商务网站赏析
出处:http://www.gabbardhatchingeggs.com/ [准备工作] 一.如图示,创建网站框架: 二.reset.css文件参考内容: /*YUI的CSS Reset http: ...
- 列表导航栏实例(04)——精美模板赏析
[出处]http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/ 一.效果 二.HTML < ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- CSS3:有雪花的导航栏实例
1.CSS3中带有渐变色背景色处理:(根据不同的) 参考链接:http://www.cnblogs.com/luckly-hf/archive/2011/11/14/2248149.html 2.带雪 ...
- CSS技能点--垂直导航栏实例
点此查看 所有教程.项目.源码导航 文章目录 1. 背景 2. 实现过程 2.1 创建ul导航栏 2.2 优化列表样式 2.3 设置导航栏整体风格 2.4 优化超级链接样式 2.5 添加图标 2.6 ...
- CSS导航栏实例详解
效果: 代码: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; mar ...
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"><text wx:for="{{na ...
- css垂直+水平导航栏代码实例
第一种:垂直导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
最新文章
- python中函数的括号使用
- Shiro集成SpringBoot时出现 not eligible for auto-proxying
- P1477-[NOI2008]假面舞会【构图,dfs,gcd】
- jdk1.8配置(自我速成)
- linux修改文件权限和用户组管理小结
- Pentium II Pentium III架构/微架构/流水线 (7) - 微架构框图
- 关于操作系统I/O的一些基础知识
- hdu-1242 dfs+各种剪枝
- html游戏开源代码是什么,怎么运行html5游戏的源代码
- Qt实现音视频播放器
- 若依最详细的配置(零基础,小白版)
- python迷宫地图代码_用Python代码来解图片迷宫的方法整理
- 模拟退huo算法的特点_模拟退火算法(有完整实例源代码)
- 完美解决小爱同学蓝牙音箱(包括触屏版)连接电脑后找不到音频设备问题
- 计算机弹奏两只老虎爱跳舞,原神风物之诗琴乐谱
- 【071】张大妈计算器-工资计算器及各地薪资报告
- 桌面智能分析产品+“智同211”计划,永洪科技打造数据价值生态圈!
- java http data chunk_HTTP协议之chunk编码(分块传输编码)
- matlab确定分段函数的间断点,分段函数必有间断点( )
- C_Primer第12章 存储类型、链接和内存管理
热门文章
- Zookeeper学习总结2
- 2017qcon大会的一点想法(安全人才如何不被淘汰?)
- int/double/string使用
- android phonegap插件开发方法 plugin
- android开发 BaseAdapter中getView()里的3个参数是什么意思
- Replication--使用MSlogreader_history查看日志读起的延迟和事务命令
- 维护人员的VMware日常工作
- SerialPort实现对串口COM的操作(有些纠结)
- ModelBasedCompressiveSensing
- Mac无损音乐播放器Audirvana plus