CSS布局实例 个非常棒的DIV+CSS导航条效果！

最新推荐文章于 2020-06-05 23:54:50 发布
最新推荐文章于 2020-06-05 23:54:50 发布
阅读量970 收藏 2
点赞数
分类专栏： div+css教程 文章标签： css div border xhtml float url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ucshng/article/details/1614220
版权
<style>
* {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-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(http://shanghai.kijiji.cn/cg_img/home_r_bg2.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>

 

 

 

 

<!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(http://shanghai.kijiji.cn/cg_img/home_r_bg1.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(http://shanghai.kijiji.cn/cg_img/home_r_bg2.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>

ucshng
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS+ DIV布局
努力发光呀
12-06 673
CSS+DIV 基本介绍：html 是用来在浏览器显示的，css是用来控制html 样式的，使HTML样式和内容分离，div 是html 里的一个元素，div 可定义文档中的分区或节，div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。用CSS来任意控制其位置，实现定位。块元素和行内元素行内元素，又叫内联元素，内联元素只能容纳文本或者其他内联元素。
DIV CSS 布局定位 实例 菜单导航 详解
eagleking012的专栏
09-22 9493
为什么要用Div Css可以简单的作如下解释： 当时创造WEB的那个人也发明了用TABLE布局，当TABLE布局泛滥之后，然后他说:我创造了WEB也毁了WEB，TABLE布局会给一个网页带来大量无意义的语句难以阅读。TABLE是来干什么的，TABLE是表格,从来都
一个简单的网页布局案例(DIV+CSS)
04-26
网页布局简单案例 通过简单的更改几行样式实现通篇布局的调整
一个DIV+CSS代码布局的简单导航条
laligela2013的专栏
07-08 1284
简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例，本CSS小实例，采用DIV CSS实现。同时不用图片做背景，直接使用背景色实现，鼠标经过悬停对应栏目名称是对应背景蓝色变深。 导航条部分效果截图 导航条部分效果截图 一般导航条采用ul li列表布局，这里也不例外DIVCSS5实例也采用列表标签ul li + CSS布局。 一、布局思维思考   -   TOP
DIV CSS网页布局实例：十步学会用CSS建站
J_JAKE（陆冷飞）的专栏
03-23 3476
DIV CSS网页布局实例：十步学会用CSS建站作者：jorux　    出处：网页教学网-CSS教程     2007年06月20日Update:本篇已得到原作者Steve Dennis的翻译准予，在此Jorux表示感谢！本教程主要参考Creating a CSS Layout from scratch，由Jorux翻译，以意译为主，其间加入了不少Jorux的个人观点，省略了一些
CSS 导航条 10个实例
匣子疯子
03-28 452
CSS 导航条 10个实例
DIVCSS布局实例:各种2栏3栏布局实例(附下载)
zgqtxwd的专栏
04-30 705
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
仿客齐集首页导航条DIV+CSS+JS [代码实例]
10-30
本示例中的“仿客齐集首页导航条”是通过结合HTML的`<div>`、CSS样式以及JavaScript实现的一个功能与视觉效果兼备的导航条。下面我们将详细探讨这个实例中的各个知识点。 首先，HTML结构是构建导航条的基础。在这个...
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于jQuery带时间轴宽屏图片切换源码 93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用...
CSS_精美导航23例_含有各种各样的导航菜单样式
06-25
CSS_精美导航23例_含有各种各样的导航菜单样式,该实例本人已亲自使用过,感觉非常不错,现在分享给大家,希望可以帮助更多的朋友!
css+div网页布局实例40例
11-24
css+div网页布局实例40例,有图形,有html源文件.学习div+css布局经典.各位朋友给个评论啊,我都无赏奉献了,让我增加点积分吧...
CSS仿淘宝首页导航条布局效果
10-31
CSS仿淘宝首页导航条布局效果
div+css单页布局实例dw模板下载
04-02
CSS在单页布局中起到关键作用，它允许我们精确控制每个div元素的位置、大小、颜色、字体等视觉属性，实现灵活多变的布局效果。例如，我们可以使用定位（positioning）属性（如static、relative、absolute、fixed）来...
经典网站Div+CSS布局实例
12-21
通过分析这个实例，你可以了解如何处理大型网站的多层次导航，可能涉及到嵌套Div、CSS Flexbox或Grid布局，以及复杂的交互效果，如下拉菜单和动画过渡。 "赛我网head"这部分可能是关于网站头部的设计，包括logo、...
css小案例:导航栏特效
weixin_33868027的博客
05-24 240
css小案例:导航栏特效，实现如下图所示效果； 首先可以将html代码写出： 1 <nav class="cl-effect-1"> 2 <a href="#">Umbrella</a> 3 <a href="#">Ineffable</a> 4 <a href="#">...
CSS 4-01 简单导航栏案例 总结
Write less，do more
06-05 545
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> 1.变化样式 有大小 有一行
详解学习DIV+CSS之二-导航栏实例
chenshizero的专栏
10-10 748
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" c
12种常见的div+css布局实例
passport_daizi的博客
04-01 7242
图示： 源码参考国外的一个网站： http://www.mycelly.com/
Div+CSS布局基础教程与实例代码
这个代码示例展示了如何通过Div和CSS实现基本的网页布局，包括居中内容、固定宽度的多列布局以及浮动元素的使用。对于初学者来说，这是一个很好的起点，可以通过调整这些参数来理解Div+CSS布局的工作原理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值