几种纯css布局的导航栏

1.垂直导航栏

页面效果

 

 

<ul class="nav"><li><a href="home.htm">Home</a></li><li><a href="about.htm">About</a></li><li><a href="services.htm">Services</a></li><li><a href="work.htm">Our Work</a></li><li><a href="news.htm">News</a></li><li><a href="contact.htm">Contact</a></li>
</ul>
html代码
ul.nav {margin: 0;padding: 0;list-style-type: none;width: 8em;background-color: #8BD400;border: 1px solid #486B02;}ul.nav a {display: block;color: #2B3F00;text-decoration: none;border-top: 1px solid #E4FFD3;border-bottom: 1px solid #486B02;background: url(arrow.gif) no-repeat 5% 50%;padding: 0.3em 2em;}ul.nav .last a {border-bottom: 0;}ul.nav a:hover,ul.nav a:focus,ul.nav .selected a {color: #E4FFD3;background-color: #6DA203;}
css样式

2.水平导航栏

页面效果

<ul class="nav-bar"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="news.html">News</a></li><li><a href="products.html">Products</a></li><li><a href="services.html">Services</a></li><li><a href="clients.html">Clients</a></li><li><a href="case-studies.html">Case Studies</a></li></ul>
水平导航html
 ul.nav-bar{margin:0;padding:0;list-style: none;width:70em;overflow: hidden;background: #FAA819 url(mainNavBg.gif) repeat-x;}ul.nav-bar li{float: left;}ul.nav-bar a{display: block;padding:0 3em;line-height:2.1em;text-decoration: none;color: #fff;background: url("divider.gif") repeat-y left top;}ul.nav-bar.first a{background-image: none;}ul.nav-bar li:frist-child a{background: none;}ul.nav-bar a:hover,ul.nav-bar a:focus{color: #333;}
水平导航栏样式

3.简化的滑动门标签页导航

页面效果

 <ul class="nav-4"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="news.html">News</a></li><li><a href="products.html">Products</a></li><li><a href="services.html">Services</a></li><li><a href="clients.html">Clients</a></li><li><a href="case-studies.html">Case Studies</a></li></ul>
html
ul.nav-4{margin:0;padding:0;list-style: none;width:72em;overflow: hidden;}ul.nav-4 li {float: left;background: url(tab-right.gif) no-repeat right top;}ul.nav-4 li a {display: block;padding:0 2em;line-height:2.5em;background: url("tab-left.gif") no-repeat left top;text-decoration: none;float: left;}ul.nav-4 a:hover,ul.nav-4 a:focus{color: #333;}
css

4.简化的下拉菜单导航

页面效果

<ul class="nav-5"><li><a href="/home/">Home</a></li><li><a href="/products/">Products</a><ul><li><a href="/products/silverback">Silverback</a></li><li><a href="/products/fontdeck">Font Deck</a></li></ul></li><li><a href="/services/">Services</a><ul><li><a href="/services/design/">Design</a></li><li><a href="/services/development/">Development</a></li><li><a href="/services/consultancy/">Consultancy</a></li></ul></li><li><a href="/content/">Content Us</a></li></ul>
html
 1 ul.nav-5,ul.nav-5 ul{
 2             margin:0;
 3             padding:0;
 4             list-style-type: none;
 5             float: left;
 6             border:1px solid #486B02;
 7             background-color: #8bd400;
 8         }
 9         ul.nav-5 li{
10             float: left;
11             width:8em;
12             background-color: #8bd400;
13         }
14         ul.nav-5 li ul{
15             width:8em;
16             position: absolute;
17             left:-999em;
18         }
19         .nav-5 li:hover ul{
20             left:auto;
21         }
22         ul.nav-5 a{
23             display: block;
24             color: #2B3F00;
25             text-decoration: none;
26             padding:0.3em 1em;
27             border-right:1px solid #486B02;
28             border-left:1px solid #E4FFD3;
29         }
30         ul.nav-5 li li a{
31             border-top:1px solid #E4FFD3;
32             border-bottom:1px solid #486B02;
33             border-left:0;
34             border-right:0;
35         }
36         ul.nav-5 li:list-child a{
37             border-right: 0;
38             border-bottom:0;
39         }
40         ul a:hover,
41         ul a:focus{
42             color: #E4FFD3;
43             background-color: #6DA203;
44         }
css

第一次写博文,内容来自CSS Mastery Advanced Web Standards Solutions (Second Edition).

转载于:https://www.cnblogs.com/Onlybiao/p/5670590.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457617.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

poi获取有效单元格个数_EXCEL利用SUM函数和FREQUENCY函数数组公式统计不同区间数据个数...

EXCEL函数公式大全之利用FREQUENCY函数数组公式统计不同区间数据个数。EXCEL函数与公式在工作中使用非常的频繁&#xff0c;会不会使用公式直接决定了我们的工作效率&#xff0c;今天我们来学习一下提高我们工作效率的函数FREQUENCY函数和数组公式。今天我们的例子是统计学生在…

洛谷 P2735 电网 Electric Fences Label:计算几何--皮克定理

题目描述 在本题中&#xff0c;格点是指横纵坐标皆为整数的点。 为了圈养他的牛&#xff0c;农夫约翰&#xff08;Farmer John)建造了一个三角形的电网。他从原点&#xff08;0,0&#xff09;牵出一根通电的电线&#xff0c;连接格点(n,m)&#xff08;0<n<32000,0<m&l…

word文档打印 自动编码_办公室文件打印有哪些技巧 办公室文件打印技巧介绍【图文】...

办公室文件打印实用技巧三则一. 打印文件直接装订——逆序打印相信使用Word打印过长篇文档的朋友一定都清楚&#xff0c;打印完成后的装订一直是个麻烦事儿&#xff0c;因为文件由打印机打出时&#xff0c;第一页肯定会在最下面&#xff0c;装订之前总要费时费力的把纸张按顺序…

Strategy 策略模式

意图 定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。本模式使得算法可独立于使用它的客户而变化。 动机 策略模式为了适应不同的需求&#xff0c;只把变化点封装了&#xff0c;这个变化点就是实现不同需求的算法&#xff0c;但是&#xff0c;用户需要知道各种…

用 Flask 来写个轻博客 (1) — 创建项目

目录 目录前言扩展阅读部署开发环境创建 Github 项目前言 一步一步的实现一个 Flask 轻博客项目启动&#xff0c;最新的代码会上传到 Github。 扩展阅读 欢迎使用 Flask — virtualenv 部署开发环境 连接 GitHubhostnamectl set-hostname flask-dev # 设置 hostname ssh-keyg…

java后期发展方向_Java程序员的4个职业发展方向,该如何把握黄金5年?

在Java程序界流行着一种默认的说法叫“黄金5年”&#xff0c;意思是说&#xff0c;一个Java程序员从入职的时候算起&#xff0c;前五年我选择直接影响着整个职业生涯的发展方向和薪资走向。而这5年&#xff0c;也决定了一个程序员能否成为职业大牛的可能。那么&#xff0c;在这…

sourcetree不好做到的一些git操作

2019独角兽企业重金招聘Python工程师标准>>> 日常中我们有很多操作通过sourcetree就可以实现界面化操作&#xff0c;但是有一些场景不好去实现&#xff0c;这里总结下&#xff1a; 场景1&#xff1a;我们有个A分支&#xff0c;需要跟master分支合并等待上线&#xf…

vb.net 窗体接收键盘事件_(十五)C#WinFrom自定义控件系列-键盘(二)

前提入行已经7,8年了&#xff0c;一直想做一套漂亮点的自定义控件&#xff0c;于是就有了本系列文章。本系列文章将讲解各种控件的开发及思路&#xff0c;欢迎各位批评指正。此系列控件开发教程将全部在原生控件基础上进行重绘开发&#xff0c;目标的扁平化、漂亮、支持触屏。如…

centos下cmake安装

步骤一、安装gcc等必备程序包&#xff08;已安装则略过此步&#xff0c;用gcc -v检测&#xff09; yum install -y gcc gcc-c make automake 步骤二、安装wget &#xff08;已安装则略过此步&#xff09; yum install -y wget 步骤三、获取CMake源码包 wget http://www.cmake.…

恩智浦智能车大赛2020_内蒙古科技大学第九届智能车大赛校内公开赛总决赛

为了激发学生的创新意识&#xff0c;提高学生的动手能力&#xff0c;培养团队合作意识&#xff0c;秉承“实践源于真知&#xff0c;创新放飞梦想”的思想。2020年12月6日&#xff0c;内蒙古科技大学第九届智能车大赛总决赛如约而至。本次大赛有来自各院系的223支队伍报名参加了…

解读直播连麦与点播加密

近年来&#xff0c;直播热潮持续升温。有需求就会有变革&#xff0c;直播的相关技术也在不断更新&#xff0c;为直播行业带来更好地服务。如&#xff1a;直播连麦与点播加密技术等。 直播连麦&#xff0c;即主播与连麦者通过互动直播中心进行实时互动&#xff0c;信息在云端混流…

血红蛋白判断access程序答案_普渡大学开发智能手机应用程序 帮助评估贫血症情况...

医生诊断贫血疾病的方法之一&#xff0c;就是通过观察患者的眼皮&#xff0c;判断眼皮是否发红&#xff0c;从而判断红细胞的数量。但对医生来说&#xff0c;面临的挑战是&#xff0c;这种简单的测试不够精确&#xff0c;无法不从患者身上抽取血样就能给出诊断。美国普渡大学的…

学习笔记:AC自动机

话说AC自动机有什么用......我想要自动AC机 AC自动机简介&#xff1a; 首先简要介绍一下AC自动机&#xff1a;Aho-Corasick automation&#xff0c;该算法在1975年产生于贝尔实验室&#xff0c;是著名的多模匹配算法之一。一个常见的例子就是给出n个单词&#xff0c;再给出一段…

thinkphp一句话疑难解决笔记

URL_PATHINFO_DEPR, depr表示 网页路径"分隔符",用"-", 有利于seo,注意是从 sername/index.php(开始的)/home-user-login-var-value开始的,pathinfo也支持普通的参数传值(仅仅支持参数...). 在thinkphp中,有两个地方使用depr,另一个就是tpl的文件目录组织分…

SQL中的多表查询,以及JOIN的顺序重要么?

说法是&#xff0c;一般来说&#xff0c;JOIN的顺序不重要&#xff0c;除非你要自己定制driving table。 示例&#xff1a; SELECT a.account_id, c.fed_id, e.fname, e.lname-> FROM account AS a INNER JOIN customer AS c-> ON a.cust_id c.cust_id-> INNER JOIN …

字节跳动 设计模式 pdf_凭这份pdf我拿下了美团、字节跳动、阿里、小米等大厂的offer...

关于程序员&#xff0c;除了做项目来提高自身的技术之外&#xff0c;还有一种提升自己的专业技能就是&#xff1a;多&#xff01;看&#xff01;书&#xff01;小编整理出一篇Java进阶架构师之路的核心知识&#xff0c;同时也是面试时面试官必问的知识点&#xff0c;篇章也是包…

android 音频播放总结 soundlPool,MediaPlay

soundlPool 用于小音频的播放多个同时播放。 使用步骤&#xff1a; 步骤一&#xff1a; 首先下载音频文件可以将其放入assets文件夹下或者res下的raw文件夹下&#xff0c;区别在于assets下可以再新建文件夹而raw不行&#xff0c;assets内部单个文件超过1m时可能存在bug而raw不会…

文本分析软件_十大针对机器学习的文本注释工具与服务,你选哪个?

房地产和键【51CTO.com快译】目前&#xff0c;从搜索引擎与情感分析&#xff0c;到虚拟助手与聊天机器人&#xff0c;机器学习应用场景中的许多研究领域&#xff0c;都需要通过文本注释工具与服务来提供准确性。在AI研究与开发行业中&#xff0c;发现或创建可注释的数据对于项目…

python 垃圾回收机制

DAY 18. python垃圾回收机制 python GC主要有三种方式 引用计数标记清除分代回收 其中&#xff0c;以引用计数为主。 18.1 引用计数&#xff08;Reference Counting&#xff09; 《寻梦环游记》中说&#xff0c;人一生会经历两次死亡&#xff0c;一次是肉体死的时候&#…

曲线连接线_荷重位移曲线仪操作使用注意事项-荷重位移曲线仪厂家

荷重位移曲线仪广泛适用于各种按键及开关、DOME片、按键、微力弹片、硅胶按键、汽车开关之荷重-行程测定&#xff1b;Windows中英文双语软件&#xff0c;操作简单方便&#xff0c;软件流畅稳定&#xff0c;所有测试资料(测试条件&#xff0c;曲线&#xff0c;数据结果&#xff…