ulli/li/ul有序
新乡网站建设公司创新互联建站,新乡网站设计制作,有大型网站制作公司丰富经验。已为新乡上千提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱,请找那个售后服务好的新乡做网站的公司定做!
ullo/lo/ul无序
属性:list-style
list-style-type:设置列表项标志的类型(none就是前面没有小圆点)
list-style-image:将图象设置为列表项标志。
list-style-position:设置列表中列表项标志的位置
举一个简单的ul,li的列表例子,实现如下效果:
常规写法(使用last-child选择器):
写法2(使用not选择器):
写法2(使用+选择器):
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
style
.item{font-size:12px;width:260px;}
.item:after{height:0;content:'';display:block;visibility:hidden;clear:both;}
.list-item{background:url(小列表图片地址) left center no-repeat;padding-left:25px;height:24px;line-height:24px;color:#6d7174;width:180px;}
.list-date{float:right;height:24px;line-height:24px;color:#ba333a;}
/style
div class="item"
div class="list-item"白宫发表声明称 奥巴马总统将/div
div class="list-date"04-17/div
/div
div class="item"
div class="list-item"[多图]如果你能站上去 - WAVEp/div
div class="list-date"04-17/div
/div
效果如图所示:
如果觉得间隔有些大,可以减少item的宽度为255,注意list-item中的url为列表小图片相对于此文件的地址。