前言:
目前各位老铁们对“csshover导航”都比较珍视,看官们都需要剖析一些“csshover导航”的相关文章。那么小编同时在网络上网罗了一些有关“csshover导航””的相关文章,希望同学们能喜欢,你们快快来学习一下吧!导航栏效果图:
导航栏功能模块图
图书管理功能包4括大模块 ,16个子模块。
导航栏布局结构分析
1. 制作方式: 列表<ul><li>制作。
四大模块:用一个<ul><li></li></ul>列表制作出来,每个模块下面的四个子模块用同样的<ul><li></li></ul>列表嵌套出来。
具体格式如下:
<ul> <li>模块1 <ul> <li>模块1.1</li> <li>模块1.2</li> <li>模块1.3</li> <li>模块1.4</li> </ul> </li> <li>模块2 <ul> <li>模块2.1</li> <li>模块2.2</li> <li>模块2.3</li> <li>模块2.4</li> </ul> </li>..........</ul>
2.导航标签<a>:都是一个超链接,通过点击链接到相应的导航页面。
所以在每个列表选项中,都应该加入超链接<a>标签。
<ul><li><a href="javascript:;" >用户管理</a></li>...</ul>
3.导航框的修饰:CSS样式表
3.1 样式表接入方式:
行内样式 内嵌样式链接式 导入式
一般用链接式<link >,运用高内聚,低耦合的思想。
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
3.2标签选择器
行内选择器>id选择器>class选择器>标签选择器
常用到的为 id选择器、class选择器、标签选择器。
例如:
<ul> <li class="litems"><a href="javascript:;">用户管理</a> <ul class="uitems"> <li><a href="javascript:;">添加用户</a></li> </ul> </li></ul>
具体用法见:HTML/CSS中可直接输数据的表格
4.导航栏的框框
模块标签特点:
背景色background-color :暗红色;形状:长方块block 、宽width、高height,左边有突出小方块样式, 分析为内边距padding。内容:字体font-family、字体颜色color、字体大小font-size, 垂直居中line-height=height边框:border:solid 1px #ff0;
litems类标签 中 <a>标签的样式如下:
.litems>a{ background-color:#990020; /*背景色*/ height:30px; display:block; /*块显示*/ line-height:30px; /*垂直居中*/ border-left: solid 12px #711515; /*边框*/ padding-left:5px; /*左边距*/}
5.鼠标悬浮变化--- a:hover 属性
特点:鼠标悬浮时,字体变为黄色。
a:hover{ color:#FF0;}
制作一个简单的导航栏,常用的就是列表格式。通过列表的嵌套和样式的修改,即可建立一个简约得体的导航列表。
以下附带部分样式源码:
CSS样式表源码:
*{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif;}body{ background-color:#C19F12;}a{ color:#FFF; text-decoration:none;}a:hover{ color:#FF0;}.litems{ width:200px;}.litems>a{ background-color:#990020; height:30px; display:block; line-height:30px; border-left: solid 12px #711515; padding-left:5px;}.litems >a:hover{ background-color:#990020;}.uitems li{ border:solid 1px #ED9F9F;}.uitems a { background-color:#E85070; height:30px; display:block; line-height:30px; border-left:solid 29px #A71F1F; padding-left:5px;}.uitems >a:hover{ background-color:#C2425D;}
标签: #csshover导航