CSS快速学习:几种导航条案例

原创 2016年08月29日 13:59:15
<!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多级导航栏

前一段时间再看《精通CSS》的时候,磕磕绊绊的写出了一个纯CSS导航栏,晚上突然想到了这个,把它重写一遍。在这个过程中发现自己比之前有了些许提高,我想应该是之前做的优酷整站练习的功劳吧,这个整站练习中...
  • rabbitter
  • rabbitter
  • 2016年04月11日 20:43
  • 2609

用css实现各种导航栏

基本的垂直导航条 通过HTML创建一个无序列表 home home home home home home 利用css处理样式 ul.nav{ padding:0px; ...
  • charlene0824
  • charlene0824
  • 2015年11月08日 16:44
  • 1546

HTML+CSS实战(一)——导航条菜单的制作

一、垂直导航菜单的制作 1、基本的样式清除: *{margin:0;padding:0} 2、无序列表圆点去除: ul{list-style:none} 3、下划线去除: a{text-deco...
  • mqy1023
  • mqy1023
  • 2016年03月14日 22:34
  • 7013

纯CSS实现下拉菜单导航

用纯CSS实现下拉菜单导航条,当鼠标hover到按钮上时,下方出现4个下拉菜单导航条。...
  • changerous
  • changerous
  • 2016年06月14日 22:15
  • 3789

简单的二级导航页面(纯css实现,运用display属性hover)

html代码 首页 关于我们 公司简介 人才招...
  • lp2659359879
  • lp2659359879
  • 2016年09月14日 11:35
  • 2493

带滑动条的导航栏(上)---CSS实现样式

前言    本系列实现的是带有滑动条的导航栏,效果图如下       我看其它的网站,对比之下还是喜欢这种简洁大方的感觉,于是乎扒拉下来了。 布局层    首先,我新建了一个navigato...
  • mybelief321
  • mybelief321
  • 2015年12月14日 23:11
  • 2572

第六课 head.htm模板制作(Logo和导航条)

这一节课我们来讲一下怎么样制作网站模板中的head.htm模板。分析效果如下图1 图1 头部Head 那么,怎样才能做出上面的效果的呢?先急,我们一步一步来。 首先,我们要设置好整个网站的背景图和网...
  • forest_fire
  • forest_fire
  • 2016年03月21日 10:44
  • 1475

京东商城导航logo---用css

京东css body{ padding:0; font-size:10pt; behavior:u...
  • oHayHay
  • oHayHay
  • 2016年07月13日 21:32
  • 1549

div+css 制作横向导航菜单

好,开始上课!                前三节课,我们知道了什么是“块状元素和内联元素”,以及xHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮...
  • wl_haanel
  • wl_haanel
  • 2014年05月19日 12:44
  • 6429

CSS雪碧图的一个小案列

以前只是听说过雪碧图没用过,然后来了这里做的第一个活儿就涉及到他。因为怕不会用,就用他们原来切的,那个调的费事啊,算那个background-position困难的啊。原因是他们的雪碧图切放在了一起,...
  • u011263845
  • u011263845
  • 2015年05月03日 21:32
  • 2129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS快速学习:几种导航条案例
举报原因:
原因补充:

(最多只允许输入30个字)