CSS快速学习：几种导航条案例
2024-04-04 11:14:14
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<style type="text/css">
* {margin:0; padding:0;}
ul li {list-style:none;}
body {background:#000;}
a {color:#333; font-size:14px; text-decoration:none;}.nav1 {width:800px; overflow:hidden; margin:0 auto 50px; background:url(images/nav1_bg.jpg) repeat-x left bottom; padding-left:10px;}.nav1 li {float:left;}.nav1 li a {display:block; width:77px; height:37px; text-align:center; line-height:37px; margin-top:6px;}.nav1 li a:hover {height:43px; background:url(images/nav1_bgh.jpg) repeat-x; margin-top:0;}.nav2 {width:800px; height:39px; margin:0 auto 50px; border-bottom:1px #a0a0a0 solid;}.nav2 li {float:left; margin-right:20px;}.nav2 li a {display:block; width:72px; height:34px; background:#f7f7f7; margin-top:4px; border:1px #d4d4d4 solid; border-bottom:0; text-align:center; line-height:34px;}.nav2 li a:hover {height:39px; border:1px #a0a0a0 solid; border-bottom:0; background:#fff; margin-top:0;}
.nav3 {width:800px; height:37px; border-bottom:4px #fdaf17 solid; background:url(images/nav3_bg.jpg) repeat-x; margin:0 auto 50px;}.nav3 li {float:left; background:url(images/nav3_line.jpg) no-repeat right center; padding-right:2px;}.nav3 li a {display:block; height:37px; padding:0 20px; line-height:37px;}.nav3 li a:hover {background:#fdaf17;}
.nav4 {width:800px; border-bottom:8px #df4c16 solid; margin:0 auto 50px; overflow:hidden;}.nav4 li {float:left; margin-right:1px;}.nav4 li a {display:block; width:80px; height:20px; background:#dfdfdf; font-size:12px; text-align:center; line-height:20px;}.nav4 li a:hover {background:#df4c16; color:#fff;}.nav4 li a strong {display:none;}.nav4 li a:hover b {display:none;}.nav4 li a:hover strong {display:block;}
.nav5 {width:980px; height:54px; margin:0 auto; background:url(images/nav5_bg.jpg) repeat-x; overflow:hidden;}.nav5 ul {width:710px; float:left; overflow:hidden;}.nav5 ul li {float:left; background:url(images/nav5_line.jpg) no-repeat right top; padding-right:1px;}.nav5 ul li a {display:block; height:54px; padding:0 20px; font:16px/54px Arial;}.nav5 ul li a:hover {background:url(images/nav5_bgh.jpg) repeat-x;}.nav5 ul li.last {background:none;}.nav5 form {width:170px; height:24px; float:right; margin-top:11px; margin-right:12px;}.inpt {width:127px; height:24px; background:url(images/bg_inpt.jpg); border:0; float:left;}.inpb {width:37px; height:24px; background:url(images/bg_inpb.jpg); border:0; float:right;}
</style>
</head><body>
<ul class="nav1"><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li>
</ul>
<ul class="nav2"><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li>
</ul>
<ul class="nav3"><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li><li><a href="#">Sample</a></li>
</ul>
<ul class="nav4"><li><a href="#"><b>home</b><strong>首页</strong></a></li><li><a href="#"><b>home</b><strong>首页</strong></a></li><li><a href="#"><b>home</b><strong>首页</strong></a></li><li><a href="#"><b>home</b><strong>首页</strong></a></li><li><a href="#"><b>home</b><strong>首页</strong></a></li>
</ul>
<div class="nav5"><ul><li><a href="#">Home</a></li><li><a href="#">About us</a></li><li><a href="#">Services</a></li><li><a href="#">Clients</a></li><li><a href="#">Portfolio</a></li><li class="last"><a href="#">Contact us</a></li></ul><form name="search" method="post" action=""><input type="text" class="inpt" /><input type="button" class="inpb" /></form>
</div>
</body>
</html>
CSS快速学习：几种导航条案例相关推荐
- bootstrap制作导航条案例
bootstrap制作导航条案例 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- 【荐】DIV+CSS仿360buy京东商城导航条
代码简介: [荐]DIV+CSS仿360buy京东商城导航条 ,很棒的,赶快来试试. 代码内容: <html xmlns="http://www.w3.org/1999/xhtml&q ...
- html中 导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图 通常导航条接纳ul ...
- 一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...
- 用html和css制作一个简单的导航条
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>导 ...
- html5 箭头形状导航条,css实现带箭头的导航条
要实现这种导航条,首先要知道箭头是怎么做出来. http://www.cnblogs.com/daxiong/articles/3158630.html 这里说了用css做箭头的原理和实现. ...
- 吐血整理 | 快速学习大厂们的软件案例经验
大家好,我是煎鱼. 前几天,很怕冷的煎鱼去了趟北京,参加了为期三天的全球软件案例研究峰会(TOP 100). 同时记了大量笔记,整理后分享出来,希望对大家有所帮助,拓展眼界非常重要. 内容比较多(已经 ...
- CSS快速学习（2021.2.7-15）
注意: 这波是赶作业,所以看的速成视频.(从win32到electron到html和css,假期过大半东西还没做出来555) 仍旧是众所周知的学习网站:b站,找到了DasAutoooo老师的视频. 学 ...
- CSS快速学习8：圆角切图、滚动条和图片整合技术
圆角切图 1.css 书写 border-radius:左上角 右上角 右下角 左下角 border-radius:左上角右下角 右上角左下角(对角线) border-top- ...
最新文章
- Android XML pull 解析器
- leetcode--链表的设计--python
- 告别深度学习炼丹术！谷歌大脑提出“权重无关”神经网络
- 阿里达摩院再造AI抗疫技术：20秒判读CT影像，识别准确率达96%
- JQuery插件开发学习
- LeetCode 696. 计数二进制子串
- opencv中，c和c++版本区别体验
- %3cphp和%3c php_phpcmsv9后台登录绕过
- 百度 ERNIE 在 GLUE 大赛中击败了微软和谷歌
- VS 2005 命令行cl编译配置 Notepad++设置
- 背景颜色、字体等的不透明区别 （opacity、transparent以及rgba的区别）
- 关于利用Unity制作游戏登陆界面这件事
- 2018校招笔试真题汇总 精
- 腾讯6W月薪架构师能力曝光！微信架构为什么是史上最值钱的IM架构？
- 大家之言 | 谈“网络安全终身教育”
- Matlab 语言基础知识输入命令之ans
- 制作在线单词测试的软件,Test Your Vocabulary：号称是最准的英语词汇量测试网站...
- Python---20行代码爬取斗鱼平台房间数据（下）
- RedHat上面部署iObjects C++
- 多个视频剪辑成一个视频要怎么操作？