`

一个导航条的效果DIV+CSS

CSS.net脚本工作 
阅读更多

<style>
* {margin:0; padding:0; list-style:none;}
body{font-size:12px; margin:100px;}
#info{border:1px solid #BCFF1D; width:348px; background:#D6FF8C url(/upload/200732411541374.gif) no-repeat left top; float:left; }
#info ul{ margin:5px;width:338px}
#info li{ width:33%; height:40px; float:left;}
#info li a{ font-size:12px; font-weight:normal; line-height:35px; display:block;color:#000; text-decoration:none; padding-left:40px;background:url(/upload/200732411542811.gif) no-repeat;}
#info li a:link,#info li a:visited{background-position:center top}
#info li a:hover,#info li a:active{background-position:center bottom}
</style>
</head>
<body>
<div id="info">
<ul>
<li></li>
<li><a href="http://www.jb51.net" target="_blank">找工作</a></li>
<li><a href="http://www.jb51.net" target="_blank">找房子</a></li>
<li><a href="http://www.jb51.net" target="_blank">自行车买卖</a></li>
<li><a href="http://www.jb51.net" target="_blank">带车求职</a></li>
<li><a href="http://www.jb51.net" target="_blank">拼车上下班</a></li>
<li><a href="http://www.jb51.net" target="_blank">技能交换</a></li>
<li><a href="http://www.jb51.net" target="_blank">物品交换</a></li>
<li><a href="http://www.jb51.net" target="_blank">语言交换</a></li>
</ul>
</div>
</body>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/8798.htm

分享到：
| CSS 首字母大写代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    网页导航条-div+css+js

    网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js

    DIV+CSS网页导航条

    这里的`id="nav"`是为整个导航条设置一个唯一的标识，方便我们在CSS中引用。每个链接（`&lt;a&gt;`元素）都添加了`class="nav-item"`，这样可以为所有导航项应用相同的样式。 接下来，我们编写CSS来实现鼠标滑过的效果： ...

    div+css页面布局，新手入门教材，2天学会div+css

    9. **头部设计**：网站头部通常包含Logo和导航条，设计时要考虑其视觉效果和交互性，如按钮特效。 10. **页脚设置**：页脚包含版权信息和其他链接，通过CSS调整其位置和样式。 11. **导航条制作**：导航条是网站的...

    MAC风格的水平导航条(DIV+CSS)

    MAC风格的水平导航条(DIV+CSS)

    蓝色网站导航源码！div+css样式导航条！

    这个导航条源码是www.020fphs.com网址更新的一部分，体现了优秀的网页设计实践，特别适合学习和应用CSS+Div技术。 首先，让我们深入了解“div+css”是什么。Div（Division）是HTML中的一个块级元素，常用来对网页...

    几个经典的导航条，css+div+js写的，个人收集

    本资源集合了几个使用CSS（层叠样式表）和HTML（超文本标记语言）以及JavaScript编写的经典导航条实例，这些都是个人精心收集的。下面将详细讲解这些技术以及它们在创建导航条中的应用。 首先，CSS是用于控制网页...

    div+css布局制作横向带箭头步骤流程样式

    通过以上步骤，我们可以成功地使用`div+css`布局创建一个横向带箭头的步骤流程样式。这不仅有助于用户理解流程，还能提升网站的视觉吸引力和用户体验。在实际项目中，还可以根据具体需求进行定制和优化，如添加动画...

    不错的DIV+CSS框架

    Bootstrap的网格系统、导航条、下拉菜单、模态框、表单控件等功能，都是基于DIV+CSS的实现，符合题目描述的框架特征。 Bootstrap的核心特性包括： 1. 响应式布局：自动适应不同设备屏幕大小，确保在手机、平板电脑...

    div+css设计页面框架

    在本案例中，我们看到的文件名如w.gif、h.gif、f.gif等可能代表不同用途的动态图片，比如w.gif可能用于导航栏的滑动效果，h.gif可能是滚动条或提示信息的动态效果，而f.gif可能用于按钮的鼠标悬停状态。 此外，文件...

    第23章 基于DIV+CSS的个人网站

    前面介绍了Web标准的基本概念，及其实现的基本方法。采用DIV+CSS可以很快实现页面布局，而且在页面设计和维护时都带来了极大的...本章将使用一个简单的实例，介绍DIV+CSS页面方式的简单设计过程，希望借此能抛砖引玉。

    DIV+CSS 仿猪八戒导航条

    【DIV+CSS 仿猪八戒导航条】是一种常见的网页设计技术，主要目的是利用HTML的`&lt;div&gt;`元素和CSS（层叠样式表）来构建类似www.zhubajie.com网站上的导航栏。这个技术的核心在于利用这两种语言的特性来实现布局、样式...

    DIV+CSS实现的MAC风格的水平导航条

    本教程将介绍如何使用DIV和CSS来创建一个模仿MAC操作系统风格的水平导航条。这种导航条设计的特点在于其简洁而优雅，通常使用一张背景图片来实现各种视觉效果。 【描述】：“很普通的一个导航条，不同之处是只采用...

    DIV+CSS规范命名大全集合

    ### DIV+CSS规范命名大全集合 #### CSS规范命名与实践指南 在网页设计与开发过程中，DIV+CSS的布局方式已经成为了业界的标准做法之一。合理的命名规则不仅能够提高代码的可读性和可维护性，还能有效提升团队协作...

    用div+css布局十步入门

    1. **Main Navigation**：导航条，具有动态效果，宽度760px，高度50px。 2. **Header**：包含网站logo和名称的头部，宽度760px，高度150px。 3. **Content**：网站主要内容区域，宽度480px，高度根据内容变化。 4. *...

    div+css的导航条脚本代码

    本文将通过分析一个具体的div+css导航条实例代码，深入探讨其实现原理和技术要点。 #### 二、基础知识回顾 ##### 1. HTML (HyperText Markup Language) HTML 是一种标记语言，用于定义网页结构。在构建导航条时，...

    DIV+CSS仿京东商城导航条.rar

    本教程主要聚焦于如何使用`DIV+CSS`技术来仿制京东商城的导航条，这是网页设计中一个重要的组成部分，它能提供清晰的网站导航，帮助用户快速找到所需信息。 首先，`DIV`是HTML中的一个块级元素，它可以容纳其他HTML...

    左侧导航（js+div+css）

    你可以通过定义div元素的样式，如宽度、高度、颜色、边框、背景等，来设计导航条的基本外观。同时，利用CSS的浮动、定位和层叠特性，可以实现导航菜单在页面左侧固定的效果。例如，可以使用`position: fixed`让导航...

Magicbox
Global site tag (gtag.js) - Google Analytics