li为列表项 display:list-item;
今天误把它当成了块级元素,之后设置了li { display:block;},这种情况下,由于样式表中在前面使用的时候把li{ list-style:none;},此时要想显示li前面的列表项标志(默认为disc;),即使写上 li{ list-style:disc;},li前面的列表项标志 圆点依旧不会显示。
li显示前面的圆点,方法有三种:
1) li{ list-style-type:disc;};此时列表项标志的大小随文字大小改变而改变。
2) 把li前面的小圆点切图,之后把图片放入到li之中,如下所示:
<li><a href="#"><img src="images/personal_info_07.jpg" />Faq</a></li>
之后对图片设置填充,调整位置即可,今天的例子中用到的是img{ padding-right:5px; padding-bottom:3px;},但 是不知道本方法能不能兼容各个浏览器;而且,img在不写width,height时,加载时不占位。
3)把li前面的小圆点切图,之后用背景图来设置前面的圆点,使用背景图考虑的是浏览器的兼容性问题。
li中内容正常写,<li><a href="#">Faq</a></li>
之后在样式表中设置列表项标志的显示形式,li{ background:url(images/personal_info_07.jpg) left no-repeat;}
今天误把它当成了块级元素,之后设置了li { display:block;},这种情况下,由于样式表中在前面使用的时候把li{ list-style:none;},此时要想显示li前面的列表项标志(默认为disc;),即使写上 li{ list-style:disc;},li前面的列表项标志 圆点依旧不会显示。
li显示前面的圆点,方法有三种:
1) li{ list-style-type:disc;};此时列表项标志的大小随文字大小改变而改变。
2) 把li前面的小圆点切图,之后把图片放入到li之中,如下所示:
<li><a href="#"><img src="images/personal_info_07.jpg" />Faq</a></li>
之后对图片设置填充,调整位置即可,今天的例子中用到的是img{ padding-right:5px; padding-bottom:3px;},但 是不知道本方法能不能兼容各个浏览器;而且,img在不写width,height时,加载时不占位。
3)把li前面的小圆点切图,之后用背景图来设置前面的圆点,使用背景图考虑的是浏览器的兼容性问题。
li中内容正常写,<li><a href="#">Faq</a></li>
之后在样式表中设置列表项标志的显示形式,li{ background:url(images/personal_info_07.jpg) left no-repeat;}
此时借助于<a>标签的padding-left属性,定位列表项标志的位置:a{ padding-left:10px;}
方法2,3需要设置li的列表项标志,li{ list-style:none;}