标签:span http bsp htm link logs lin 标题 技术分享
学习前端有一段时间了,发觉想要学好前端要学的东西实在是太多太多,防止学过的太久不用会忘记,在这里回顾、记录和总结自己的疑点,查漏补缺!
就任何浏览器而言,导航栏都非常重要,熟练使用CSS可以转换好看的导航栏而不再是枯燥的HTML菜单!
导航栏的本质:
导航栏本质上是一个链接列表:导航栏=链接列表
由于导航栏本质是链接列表,首先介绍一下链接和列表。
链接---作为内联元素,有四种状态:a:link --未访问过的链接
a:visited --用户已访问过的链接
a:hover --用户鼠标放在链接上时
a:active --链接被点击时
当设置链接状态样式时,须遵循的顺序:
a:hover必须在a:link和a:visited后面
a:active必须在a:hover后面
列表---分为无序列表、有序列表和自定义列表
无序列表
浏览器效果图
有序列表
浏览器效果图
自定义列表
浏览器效果
总结:ul li,ol li和dl dt dd都是组合标签,不能分开单独使用。并且li的直属父级必须是ul或者ol,dt和dd是同级标签他们的直属父级是dl。另外,dl dt dd组合标签又称为表格,标题型标签+列表型标签 与table有相同的用法,可以做表格。大家可以试着写一下,改天补个例子! 言归正传,终于到导航栏了。
正因为导航栏本质是链接列表,实际上用CSS主要来设置列表和链接。给出标准导航栏实例,从简单的垂直导航栏到需要少量定位的导航栏来介绍。
1.垂直导航栏
使用CSS设置链接列表:
list-style-type:none;导航栏不需要列表标记,清除标记。
去掉浏览器默认的边距和填充。
浏览器效果图:
2.水平导航栏
建立水平导航栏有两种方式:内联和浮动
内联方式
浏览器效果图:
内联方式建立水平导航栏,可以看出它的缺陷,链接大小不相同,要做到链接大小相同则需要用浮动。
浮动方式
浏览器效果图:
3.水平导航栏扩展
浏览器效果图
标签:span http bsp htm link logs lin 标题 技术分享
原文地址:http://www.cnblogs.com/eugene0/p/6828227.html