CSS控制，使用图片作为序列标记

最新推荐文章于 2023-12-08 13:45:29 发布

aibi7414

最新推荐文章于 2023-12-08 13:45:29 发布

阅读量430

点赞数

原文链接：http://www.cnblogs.com/yunxiang-2013/p/5658659.html

版权

本文介绍三种在网页设计中使用图片作为项目标记的方法，包括利用CSS的list-style-image属性、伪元素:before以及背景图片属性background-image。通过实际案例展示如何在不增加额外标记的情况下轻松实现美观的项目列表。

摘要由CSDN通过智能技术生成

今天看以前写的网页设计作业，看见要将图片作为项目标记显示，而我居然使用的是背景图片插入完成了这一效果，觉得我当时的脑回路也是蛮神奇的，现在总结实现的方法，也让自己加深印象吧！

实现效果：

方法一：自然是使用list-style-image属性

#mainContent>li{
list-style-image:url(bullet_blue.png);
}

这个方法用css控制，也比较简单，可是我觉得要给每个标题都添加<li>标记，特别麻烦。后面的有序列表部分不用实现用图片作为标记，选择mainContent部分的直接<li>子类即可。

方法二：使用伪元素:before

#mainContent h3::before{
content:url(bullet_blue.png);

}

这个方法简便，不需要再特意做标记，给标题前面添加上一个图片元素就完成了，只追求效果还是很好地。

方法三：使用背景图片属性background-image，在设置图片的位置和重复性属性就可以完成。

#mainContent h3{
background-image:url(bullet_blue.png);
background-position:0% 50%;
background-repeat:no-repeat;
}*/

设置位置为左端居中对齐，图片不重复。这时图片的效果还与文字重叠，还需在设置padding-left或者是margin-left让文字的位置往后靠，达到最后效果。

整体效果：

网页主体部分内容如下：

<body>

<div id="mainContent">
<h2>欢迎来到三亚体验潜水魅力</h2>

<li><h3>不会游泳也能玩水</h3></li>
<p>自从休闲潜水近年兴起，潜水不再是职业运动员，海洋科学家、摄影师和
其他深海工作者的专利，普通人一样可以享受鱼翔浅底的乐趣。如今，世界各地
分布着数千个潜水俱乐部，流行程度不亚于滑雪。</p>
<p>休闲潜水在比较浅的水域进行（30m深度以内），更看重个人体验，娱乐性和
好奇心的满足，只要掌握一些简单易学的基本功，就可以下水畅游。而且，不会
游泳的人由于没有长期游泳养成的习惯影响，反而更容易掌握潜水的要领。目前，
潜水俱乐部提供不同层次的潜水体验。</p>
<li><h3>如果你想初步体验</h3>
<p>在岸上认真听15分钟注意事项的讲解，学会一些简单的水下交流手势，披挂
上潜水装备，专门的导潜员就带你缓缓下潜，在水底世界开始感官和心理的新鲜体验。
穿梭在多彩的珊瑚、海葵、虾兵蟹将之间、假如热带鱼群的行列，成为绮丽景观的一部分。</p>
<li><h3>如果你想获得潜水证书</h3></li>
<p>任何年满12岁的健康人士，向潜水俱乐部报名，经过20小时的培训（包括4小时的理论
课和16小时的水下实践），掌握下潜、水中静止、水中交流以及上浮等基本功，考试合格后，
即可获得世界通用的CMAS星级潜水员证书，有资格在全球各个潜水俱乐点独立下潜。从此，
海洋对于你的意义将远远超过旅游胜地的沙滩、海浪、椰树和观光客。</p>
<li><h3>危险小于蜜蜂叮咬</h3></li>
<p>潜水并不像许多人想象的那么危险，据统计，每年因潜水事故死亡的人数甚至少于
因蜜蜂叮咬死亡的人数。休闲潜水的运动规则更是将潜水活动限制在安全范围之内。
从设备的穿戴使用、潜水计划的制定实施，到紧急情况的处理，一切都有规章可循。</p>
<li><h3>潜水基本原则</h3></li>
<ol>
<li>遵守二人同行制。</li>
<li>一定要穿救生衣。</li>
<li>配重带最后佩带。</li>
<li>请勿使用耳塞。</li>
<li>调整新潜水衣的浮力。</li>
<li>一定要将面罩内的水除尽。</li>
<li>不要做超呼吸的动作。</li>
<li>完全离水（上岸）后才能拿除蛙鞋、面罩、呼吸管。</li>
</ol>
</div>


</body>
</html>