css样式给ul还是li

html-css016

css样式给ul还是li,第1张

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就可以无论分页多少始终居中了。

直接上个实例吧:

第一步,打开软件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>

要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。

HTML代码具体示例:

<div id="links">

<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>

</div>

注意:如果UL没有设置宽度,用margin:0 autl是没有用的,因为它默认了100%,给它一个宽度,实际宽度或者width:auto都可以。

扩展资料:

在HTML中,有两种类型的列表:无序列表 - 列表项标记用特殊图形(如小黑点、小方框等);有序列表 - 列表项的标记有数字或字母。使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

用CSS设置UL标签的列表符号是不需要去设置的,因为ul默认就是标签符号的,如果使用了这个list-style:none;去掉了这个属性,然后又想有的话,就给这个ul一个id或者是class,然后在css中list-style-type:disc !important,这样就又有序号了。

参考资料:UL_百度百科