<div class="a1"><ul></ul></div>
如果你想定义这个ul的样式,可以直接ul
例如: ul {list-style-type: disc}
但是这样定义太广泛了,这个是让所有的ul行开始符都变成个点。
如果这个页面还有其他ul,也会受到影响
为了精确的定义这个div下的ul,你需要这样定义
.a1 ul {list-style-type: disc}
这样的意思就是类a1下的ul样式是个点,这样不会影响到其他ul的样式
很明显,这个命名规则是这样,在你要定义的样式前加上父级的类名,来相信的指认你定义的样式是属于哪的。 你可以在前面加上无数个父级类名来区分你设置的样式。
那么根据你的代码ul ul {list-style-type: disc}
意思就是ul下的ul样式是list-style-type: disc
另一个ul ul ul {list-style-type : square}的意思是
ul下的ul下的ul样式是list-style-type : square
如果html是这样
<ul class=u1><ul class=u2><ul class=u3></ul></ul></ul>
ul ul {list-style-type: disc}等同于.u2{list-style-type: disc}
ul ul ul {list-style-type : square}等同于.u3{list-style-type : square}
直接上个实例吧:
第一步,打开软件Adobe Dreamweave CS6,创建一个新的HTML。
第二步,在工作区域(body)用标签 ul 和 li 输入导航的内容。
第三,编辑样式CSS。在标签<head></head>之间写入样式表。,
第四,紧接上一步。由于无线序列具有默认样式,前面的圆点(),所以先写去除默认样式的样式。样式为:ul,li { list-style:nonelist-style-type:nonepadding:0margin:0} /*清除ul,li的默认样式*/
第五,由于默认的无序列表是竖排的,所以需要为其添加浮动,同时编辑宽度和距离等样式。添加样式为: ul li { float:leftwidth:80pxheight:30pxbackground:#900line-height:30pxtext-align:centermargin-right:2pxcolor:#fff} 效果,
第六,如果需要为导航添加链接(),同时获得鼠标滑过效果,即需要对 "a"为标签编写样式。样式为: ul li a { display:blockheight:30pxtext-decoration:nonecolor:#fff} ul li a:hover { background:#999}
最终预览效果。
完整代码:
<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style> ul,li { list-style:none list-style-type:none padding:0 margin:0} /*清除ul,li的默认样式*/
ul li { float:leftwidth:100px height:30px background:#900 line-height:30px text-align:center margin-right:2px }
ul li a { display:block height:30px text-decoration:none color:#fff} ul li a:hover { background:#999}
</style></head>
<body> <ul>
<li><a href="#">导航一</a></li> <li><a href="#">导航二</a></li> <li><a href="#">导航三</a></li> <li><a href="#">导航四</a></li> <li><a href="#">导航五</a></li> </ul></body></html>
css样式给li。1.文字居中定义文字居中始终是要的,所以首先给予ul外层div一个text-align(文本对齐:居中),还可以给一个“溢位:隐藏(overflow: hidden)”,当然也可以定义一下高和宽。
2.ul定义ul不能定义宽度,我们只能给一个定位,类型为相对(position: relative),置入左为50%(left: 50%),当然也可以给一个浮动。请注意,ul千万不能用溢位:隐藏(overflow: hidden),这样,部分li就无法显示。
3.li定义li的定义跟ul差不多,宽度不固定,同样给一个定位,类型为相对(position: relative),置入右为50%(right: 50%),恰恰和ul相反,这样定义后li就可以无论分页多少始终居中了。