一个DIV+CSS导航条效果

最新推荐文章于 2021-08-04 01:13:35 发布
最新推荐文章于 2021-08-04 01:13:35 发布
阅读量569 收藏
点赞数
分类专栏： CSS设计 文章标签： css div xhtml float html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juhengfei/article/details/2827776
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<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/remotpic/200753002538620.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/remotpic/200753002538160.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://pages.kijiji.cn/landing/job/" target="_blank">找工作</a></li>
<li><a href=" http://pages.kijiji.cn/landing/house/" target="_blank">找房子</a></li>
<li><a href=" http://sweater.kijiji.cn/m.php?no=27008" target="_blank">自行车买卖</a></li>
<li><a href=" http://sweater.kijiji.cn/m.php?no=27006" target="_blank">带车求职</a></li>
<li><a href=" http://sweater.kijiji.cn/m.php?no=27004" target="_blank">拼车上下班</a></li>
<li><a href=" http://sweater.kijiji.cn/m.php?no=21013" target="_blank">技能交换</a></li>
<li><a href=" http://sweater.kijiji.cn/m.php?no=23001" target="_blank">物品交换</a></li>
<li><a href=" http://sweater.kijiji.cn/m.php?no=26008" target="_blank">语言交换</a></li>
</ul>
</div>
</body>
</html>
juhengfei
关注
专栏目录
CSS+DIV制作导航条
05-02
<body> <div class="cd"> <ul><!--导航条--> <li><a href="#">A</a></li> <!---------------------------------------------> <li><a href="#">B</a><!--二级--> <ul> <li><a href="#">B1</a><!--3级--> <ul> <li><a href="#">B12</a></li> </ul> </li> <li><a href="#">B2</a> <ul> <li><a href="#">b22</a></li> </ul> </li> </ul> </li><!--二级结束--> <!---------------------------------------------> <li><a href="#">C</a></li> </ul><!--导航条结束--> </div> </body> </html>
DIV+CSS导航栏
代码存档
06-16 3049
HTML文件 &lt;div id="header"&gt; &lt;h1&gt;Your Website&lt;/h1&gt; &lt;h2&gt;catchy slogan...&lt;/h2&gt; &lt;/div&gt; &lt;div id="navigation"&gt; &lt;ul&gt; &lt;li&a
CSS布局实例 个非常棒的DIV+CSS导航条效果！
~缘份天空~
05-18 971
* {margin:0; padding:0; list-style:none;}body{font-size:12px; margin:100px;}#info{border:1px solid #BCFF1D; width:348px; background:#D6FF8C url(http://shanghai.kijiji.cn/cg_img/home_r_bg1.gif) no-repe
一个DIV+CSS代码布局的简单导航条
laligela2013的专栏
07-08 1288
简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例，本CSS小实例，采用DIV CSS实现。同时不用图片做背景，直接使用背景色实现，鼠标经过悬停对应栏目名称是对应背景蓝色变深。 导航条部分效果截图 导航条部分效果截图 一般导航条采用ul li列表布局，这里也不例外DIVCSS5实例也采用列表标签ul li + CSS布局。 一、布局思维思考   -   TOP
div+css 顶部导航效果
Sunnyyou2011
05-29 1183
实现导航效果  #mydiv{   margin:2px,4px,2px,4px;   padding:2px,0px,2px,0px;   border: #fff 1px solid;   background: #dfdfdf;   height:25px;   text-align:center;  }  #mydiv ul{   display:inline;
比较漂亮的一个导航条的效果DIV+CSS
10-30
根据提供的文件信息，本文将详细解析“比较漂亮的一个导航条的效果DIV+CSS”中的关键知识点。这主要包括HTML结构设计、CSS样式布局以及整体效果呈现。 ### HTML结构设计 #### 结构概览 在HTML部分，我们可以看到一...
DIV+CSS实现的MAC风格的水平导航条
05-18
本教程将介绍如何使用DIV和CSS来创建一个模仿MAC操作系统风格的水平导航条。这种导航条设计的特点在于其简洁而优雅，通常使用一张背景图片来实现各种视觉效果。 【描述】：“很普通的一个导航条，不同之处是只采用...
仿客齐集首页导航条DIV+CSS+JS [代码实例]
10-30
本示例中的“仿客齐集首页导航条”是通过结合HTML的`<div>`、CSS样式以及JavaScript实现的一个功能与视觉效果兼备的导航条。下面我们将详细探讨这个实例中的各个知识点。 首先，HTML结构是构建导航条的基础。在这个...
利用css和DiV怎样创建导航条,cssdiv做导航条（Cssdiv makes navigation bars）.doc
weixin_42188512的博客
08-03 294
cssdiv做导航条(Cssdiv makes navigation bars)cssdiv做导航条(Cssdiv makes navigation bars)In fact, do this navigation very easy, you just need to move the mouse knock on the keyboard, with KwooJan do it, ha ha[...
CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
03-31
NULL 博文链接：https://m635674608.iteye.com/blog/1356277
一个非常棒的DIV+CSS导航条效果！
weixin_30786657的博客
09-28 64
<style> *{margin:0;padding:0;list-style:none;} body{font-size:12px;margin:100px;} #info{border:1pxsolid#BCFF1D;width:348px;background:#D6FF8Curl(http://shanghai.kijiji.cn/cg_img...
css+div实现导航栏
L_Y_J_21的博客
10-08 4839
css+div实现导航栏 把页面分成两个部分，用div装起来 &lt;body&gt; &lt;div class="one1"&gt; &lt;h1&gt;SYROS&lt;/h1&gt; &lt;/div&gt; &lt;div class="one2"&gt; &lt;/div&gt; 用&lt;link rel=&q
CSS+DIV设计导航条源代码
Allen
11-02 4698
HTML代码： "http://www.w3.org/TR/html4/loose.dtd"> DIV+CSS商品分类下拉导航菜单  全部商品分类   各地名优茶 热门 西湖龙井 金骏眉 大红袍 铁观音  名茶 红茶 绿茶 乌龙茶 黑茶 白茶
网页设计css导航链接怎么做,如何用DIV+CSS制作导航条
weixin_42110070的博客
08-04 2684
一个蓝色主题的导航条布局案例，本CSS小实例，采用DIV CSS实现。同时不用图片做背景，直接使用背景色实现，鼠标经过悬停对应栏目名称是对应背景蓝色变深。一般导航条采用ul li列表布局，这里也不例外DIVCSS5实例也采用列表标签ul li + CSS布局。这样的导航条有以下二部分代码组成。1、CSS代码：ul#nav{ width:100%; height:60px; background:#...
div+css 制作横向导航菜单
热门推荐
wl_haanel的专栏
05-19 3万+
好，开始上课！                前三节课，我们知道了什么是“块状元素和内联元素”，以及xHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以在它的基础上演变而来~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航
导航条，进度条效果三种
fdsal的博客
01-06 550
导航条案例 鼠标悬浮，进度条高度变化，并且深色背景逐渐覆盖进度条 鼠标离开，进度条恢复原状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title
通过div+css做出好看的横排导航栏
u014340533的专栏
12-18 1万+
第一次写博客，希望大家支持，如果有什么不严谨或者写错的地方，望大家批评矫正。希望论坛大牛多指点，菜鸟一只，最近在学前端布局，因为自己刚学会的，所以分享出来给大家，希望对像我一样的菜鸟有所帮助！ 1.首先写好基本的HTML代码，这个就不必多加解释了，代码如下： 无标题文档 标题1 标题2 标题3 子标题1 子标题2 标题4 标
html有形状导航栏制作,div css制作导航栏
weixin_32938207的博客
06-03 3069
如何用DIV+CSS做漂亮的横排导航栏先码好导航栏所需要的基本的HTML代码 这个就不必多说具体的代码如下： 横向导航栏 首页 导航1 导航2 导航3 导航4 导航5 导航6 下面我们通过CSS 来改变他的样式。 首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度。如何使用div+css 实现简单的导航栏li{list-style-type:none; } a{text-decora...
使用DIV+CSS仿京东商城动态导航条教程
"这篇文章主要讲解如何使用DIV+CSS技术来创建一个类似京东商城的导航条效果，涵盖了网页布局、CSS样式以及JavaScript的onmouseout事件在动态切换中的应用。" 在网页设计中，导航条是至关重要的组成部分，它帮助用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值