css列表属性代码

05.20 22:15:34发布

SEO技术 / 网站建设
871 0 0
举报

使用列表属性可以设置列表项的样式，包括符号、缩进等。


列表符号 list-style-type

使用列表符号属性可以设置列表项所使用的符号类型。


语法：list-style-type:值


实例：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>列表符号</title>
<style type="text/css">
<!--
.l {
    font-size: 12px;
}
ol {
    list-style-type: disc;
}
-->
</style>
</head>
<body>
<ol class="l">
    <li>水晶婚庆婚礼灯光舞美</li>
    <li>水晶婚庆的花艺服务</li>
    <li>水晶婚庆的婚礼化妆</li>
    <li>水晶婚庆婚礼摄影摄像 </li>
    <li>水晶婚庆婚礼仪式督</li>
    <li>水晶婚庆婚礼策划</li>
    <li>婚庆婚礼顾问服务流程</li>
</ol>
</body>
</html>

在代码中 ol{list-style-type: disc;}标记用来设置列表符号为实心圆，在浏览器中浏览效果，

有序列表

图像符号 list-style-image

图像符号属性是指使用图像作为列表符号，以便美化网页。


语法：list-style-image:none | url（图像地址）

none表示不指定图像；

url则使用绝对或相对地址作为符号的图像。


实例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>图像符号</title>
<style type="text/css">
<!--
.l {
    font-size: 12px;
}
ol {
    list-style-type: circle;
    list-style-image: url(dot.gif);
}
-->
</style>
</head>
<body>
<ol class="l">
    
    <li>水晶婚庆婚礼灯光舞美</li>
    <li>水晶婚庆的花艺服务</li>
    <li>水晶婚庆的婚礼化妆</li>
    <li>水晶婚庆婚礼摄影摄像 </li>
    <li>水晶婚庆婚礼仪式督导</li>
    <li>水晶婚庆婚礼策划</li>
    <li>婚庆婚礼顾问服务流程</li>
</ol>
</body>
</html>


在代码中 list-style-image: url(images/icon_01.gif)标记用来设置图像符号，在浏览器中浏览效果，

无序列表实例

列表缩进 list-style-position

使用列表缩进属性可以设置列表缩进的程度。


语法：list-style-position:outside | inside


说明：

outside表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐；

inside表示列表项目标记放置在文本以内，且环绕文本根据标记对齐。


实例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>列表缩进</title>
<style type="text/css">
<!--
.l {
    font-size: 12px;
}
ol {
    list-style-type: circle;
    list-style-image: url(dot.gif);
    list-style-position: inside;
}
-->
</style>
</head>
<body>
<ol class="l">
    
    <li>玉米油的营养价值 </li>
    <li>国家粮油信息中心：食用油市场可</li>
    <li>粮油加工业：食用油步入涨价通道</li>
    <li>农产品价格回落7月CPI或降温</li>
</ol>
</body>
</html>

在代码中list-style-position:inside标记用来设置列表缩进，在浏览器中浏览效果。

列表缩进

TAG标签： css url
登录 后发表评论
0条评论
还没有人评论过~
seo培训
  • 关于我们
  • 燃灯学习 照亮未来！
  • 湖南燃灯教育SEO搜索学院，是一群拥有14年SEO搜索引擎行业背景的导师组成
  • SEO技术研发始于2009-2022，导师均为行业知名大咖，带过的学生超4万多名。
联系我们

官方微信号

解答老师微信

Copyright © 2009-2021 湖南燃灯教育科技有限公司 版权所有 湘ICP备19023095号-1 湘公网安备 43010402000980号 问答XML地图 文章xml地图