一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条
一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现。同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深。
导航条部分效果截图
一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局。
一、布局思维思考 - TOP
在实际DIV+CSS布局项目中,一般不会只使用一次ul li列表,避免干扰其他地方使用ul li布局,避免对ul li设置样式影响其他地方,所以特地这里对ul设置一个#nav命名(一般导航条以nav或menu为CSS命名,这里选择nav),假如导航条背景宽度100%全屏或固定宽度均可,这里就由ul#nav控制,这里就设置100%全屏宽度蓝色背景。
这里一个技术点,对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排,从而让li并排布局。
然后需要对ul li里的a标签设置display:block的,但a父级li不设置具体宽度,所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。
具体布局高度、颜色值、栏目间距距离均需要通过软件获得(相信参加DIVCSS5培训同学都能使用软件获得准确严谨的样式值)
二、具体案例div css代码 - TOP
在引人DIVCSS5初始化模板基础上进行案例代码布局。
新增各代码如下:
1、CSS代码:
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:'\5FAE\8F6F\96C5\9ED1'; font-size:16px}
ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/
这里ul和#nav紧贴没有空格,代表#nav只针对ul标签设置,标签只有ul标签使用id=”nav”设置样式才能生效。
以上代码没有在ul外再设置DIV,这样可以节约一个DIV实现同样布局。
2、HTML代码
首页a>li>HTML教程a>li>CSS基础a>li>CSS开发工具a>li>CSS特效a>li>CSS问题a>li>
ul>
3、效果截图
CSS+DIV布局简单大方实用通用导航条在浏览器中效果截图
>
小小简单大方通用导航条 DIVCSS5实例title>
head>
首页a>li>HTML教程a>li>CSS基础a>li>CSS开发工具a>li>CSS特效a>li>CSS问题a>li>
ul>
body>
html>
5、完整CSS源代码:
@charset 'utf-8';
/* DIVCSS5-CSS初始化模板-www.divcss5.com */
body, div, ul, li{margin:0; padding:0;font-style: normal;font:12px/22px '\5B8B\4F53',Arial, Helvetica, sans-serif}
/* \5B8B\4F53 代表 宋体,更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul ,li{list-style:none}
img {border: 0; vertical-align:middle}
body{color:#000000;background:#FFF; text-align:center}
.clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px}
a{color:#000000;text-decoration:none}
a:hover{color:#BA2636}
.red ,.red a{ color:#F00}
.lan ,.lan a{ color:#1E51A2}
.pd5{ padding-top:5px}
.dis{display:block}
.undis{display:none}
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:'\5FAE\8F6F\96C5\9ED1'; font-size:16px}
ul#nav li a:hover{background:#0095BB}
三、在线演示与下载 - TOP
1、查看案例
2、打包下载
下载HTML+CSS文件
下载PSD美工图
DIVCSS5为您推荐的相关联教程
一个完美的导航条html,一个DIV CSS代码布局的简单导航条相关推荐
- html中 导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图 通常导航条接纳ul ...
- 【荐】DIV+CSS仿360buy京东商城导航条
代码简介: [荐]DIV+CSS仿360buy京东商城导航条 ,很棒的,赶快来试试. 代码内容: <html xmlns="http://www.w3.org/1999/xhtml&q ...
- 导航居中分布css,导航居中背景色通栏显示 DIV + CSS 代码
有时候我们用到导航栏居中显示,但是有通栏背景色的效果,比如本站现在(2017年12月)的导航栏就是通栏背景的.经过调试,发现了一个非常简单的通栏背景的 DIV + CSS 代码,首先看 CSS 代码: ...
- Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
- DIV+CSS网页布局(新手必备)
文章目录 一:网页布局的目的 二:如何布局 (1):确定"版心" (2):分析模块 三:页面元素的定位机制 (1)流式布局 (2)浮动-float (3)绝对定位(position ...
- html css网页布局实例简单,Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)...
网页的基本结构 新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
- web前端 --- CSS(04) -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- [html] 使用div+css进行布局有什么好处?
[html] 使用div+css进行布局有什么好处? 我记得刚学的是时候,说最一开始用的是table去实现布局的.HTML语义标签还是挺多的,就是div打发好啊 个人简介 我是歌谣,欢迎和大家一起交流 ...
- Div+CSS网页布局对网站搜索引擎优化的影响
Div+CSS网页布局对网站搜索引擎优化的影响 我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...
最新文章
- 【Pandas库】(4) 索引操作--重新生成索引
- 开启Windows 2003 最大内存支持
- Java线程中wait、await、sleep、yield、join用法总结
- Linux学习之CentOS(三十)--SELinux安全系统基础
- 智慧政务解决方案(28页)pdf_智慧政务解决方案在政务服务大厅中的应用
- learnpythonthehardway下载_LearnPythonTheHardWay学习笔记1:学习环境搭建
- 局域网 服务器禁止共享文件夹,一键设置局域网共享文件夹权限,禁止他人打印...
- 070002 《设计心理学》读后感
- Windows / Linux dir 命令
- 《SteamVR2.2.0传送机制(Teleport)=快速入门大结局》(Yanlz+Unity+XR+SteamVR+Interaction+Teleport+Valve+立钻哥哥++ok++)
- DELL R730xd 安装PCIE SSD 后风扇转速增高的解决方案
- 记一次src挖洞实战——逻辑漏洞
- python3下载m3u8转mp4_Python3.6:根据m3u8下载mp4视频
- 海康三维视频融合监控软件系统免费版,支持移动侦测告警
- 使用Excel制作一个动态计划表
- 低成本佐川泽川圣安变频器设计方案ZC600量产VF80源代码原理图PCB
- 【微信小程序】shiro安全登录界面实现
- 鸿蒙系统可以跟ios媲美吗,任正非再次确认:不需要2年,鸿蒙系统就可以媲美ios系统...
- 40vf什么意思_LED 的基本术语VF、IV、WL、IR 解释及光通量换算...
- 今天专科明天海归之美国留学