好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

DIV+CSS?菜鸟分享学习心得!导航篇_html/css_WEB-ITnose

1、 常见实用的水平导航条

新建一个html文件:

代码:

常用水平导航制作方式

#globallink{

margin:0px; padding:0px; /*边界、填充均为0*/

clear:both; /*清除浮动*/

}

#globallink ul{

list-style:none; /*不显示列表图象,默认实心圆等*/

padding:0px; margin:0px;

display:inline; /*内联对象的默认值。用该值将从对象中删除行 */

}

#globallink li{

float:left; /*这是关键语句,li不换行 实现横向排列*/

text-align:center; /* 文字居中对齐*/

width:100px; /*每个连接块的宽度为100px*/

}

#globallink li a{

display:block; /*当然块级元素来显示,使得链接变成一个按钮 */

padding:9px 6px 11px 6px; /*填充上、右、下 、左*/

margin:0px; /*边界为0px*/

}

#globallink li a:link, #globallink li a:visited{

color:#FFF; /*字体颜色设置为白色,在css中可以缩写 例如:#f98与ff9988是一样的*/

font-size:17px; /*字体大小为17px值*/

text-decoration:none; /*不显示下划线*/

background-color:#3366CC; /*设置导航条背景色为蓝色*/

}

#globallink li a:hover{ /*设置对象在其鼠标悬停时的样式表属性*/

background-color:#ff9933; /*改变背景颜色*/

text-decoration:underline; /*加上下划线*/

font-size:20px; /*鼠标悬停时字体放大为20px*/

}

首页

网上校园

管理培训

网上课堂

我要报名

文化沙龙

学院论坛

关于我们

查看更多关于DIV+CSS?菜鸟分享学习心得!导航篇_html/css_WEB-ITnose的详细内容...

  阅读:32次