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>

这是效果图

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

前端案例--仿京东商城楼梯式导航定位菜单

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find()、parent()、offset()、scroll()等jQ函数,请自觉复习各种函数!p

web前端-CSS 导航栏 -024

导航栏熟练使用导航栏,对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。导航栏=链接列表作为标准的HTML基础一个导航栏是必须的 。在我们的例子中我们将建立一个...

javascript实现页面滚屏效果

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个...

canvas综合应用绘制哆啦A梦

HTML5中canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.通过这一元素,我们可以在画布上画出各种图形,线条,矩形,圆形,椭圆,字体,渐变等,当然可以自己设计组合绘制自...

H5炫酷特效系列1——canvas满屏幕变换爱心示例

啥都不说,先上效果图,同志们觉得满意就继续看,不中意直接过。 效果为满屏幕的红心到处乱窜,红心自动变换大小和透明度,代码也不多,同志们直接复制就可以运行查看。 满屏幕红...

H5炫酷特效系列3——瀑布流水特效

这个案例模拟瀑布流水的效果,有点类似喷泉,粒子模拟的水滴会一层一层的下落,很是漂亮。 效果看上去很是炫酷,代码并不是很多,几十行代码搞定,同志们直接复制运行就可以查看效果。 瀑布流水...

微信小程序架构分析

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...

canvas绘制精细走动时钟

这里简单了利用canvas做了一个时钟,能够实现分针和时针较精确的走动,没有太多难点,重点的是要实现分针和时针走动,角度的计算,笔者在下面进行说明。先看效果图: 颜色单配的比较难看,读者谅解。请...

车牌号专用键盘设计和正则验证

在做和汽车相关的项目的时候,可能会遇到自定义车牌键盘的情况,我们知道,汽车车牌有省份简称和后面的字母数字构成,而且现在新兴的新能源汽车的车牌和传统车牌还有些差距,如果需要对车牌号进行输入校验,需要的正...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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