当前位置:首页>在线课程>网页设计>Div+CSS>CSS3 技术与浏览器兼容性解析(已完结)>设置新闻列表效果

[第24课] 设置新闻列表效果

讲师:李晓斌  长度:4分43秒  软件:Div+CSS  发布日期:2018年03日16日
视频课程:[CSS3 技术与浏览器兼容性解析(已完结)]
视频播放界面 播放按钮
分享到:
课程介绍
  

在CSS样式中专门提供了控制列表样式的属性,通过CSS属性来控制列表,能够从更多方面控制列表的外观,使列表看起来更加整齐和美观,使网站实用性更强。

1.list-style-type属性

列表可分为无序项目列表和有序编号列表,所以在两种列表中list-style-type属性的属性值也是有很大区别的,下面依次介绍。

无序项目列表是网页中运用得非常多的一种列表形式,用于将一组相关的列表项目排列在一起,并且列表中的项目没有特别的先后顺序。无序列表使用<li>标签来罗列各个项目,并且每个项目前面都带有特殊符号。在CSS样式中,list-style-type属性用于控制无序列表项目前面的符号,list-style-type属性的语法格式如下。

list-style-type: disc | circle | square | none;

在设置无序列表时,list-style-type属性的属性值说明如下表所示。

有序列表与无序列表相反,有序列表即具有明确先后顺序的列表,默认情况下,创建的有序列表在每条信息前加上序号1、2、3…。通过CSS样式中的list-style-type属性可以对有序列表进行控制。list-style-type属性的基本语法格式如下。

list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit;

在设置有序列表时,list-style-type属性的属性值说明如下表所示。

2.list-style-position属性

list-style-position属性用于设置列表符号的位置,其语法格式如下。

list-style-position: inside | outside | inherit;

list-style-position属性的属性值说明如下表所示。

3.list-style-image属性

除了可以使用CSS样式中默认提供的列表符号,还可以使用list-style-image属性自定义列表符号,list-style-image属性的基本语法如下。

list-style-image: 图片地址;

在CSS样式中,list-style-image属性用于设置图片作为列表样式,只需输入图片的路径作为属性值即可。

注意事项
-如果您在任何场合索要、传播、出售、租借学设计网出品原创视频教程,我们一律进行封号、封ip等措施处理,请务必珍惜您的帐号。无论传播还是索取,我们都会进行封号处理。
-由于您对视频教程的言论、索要、传播、出售、租借,对学设计网造成的间接或直接经济损失,我们将追究您的法律责任,并有权索回对我们造成的经济损失。
-只要您浏览本网页我们就将视您已经阅读了本注意事项中所有条例,并且同意本事项的所有条例。
-学设计网拥有以上事项的最终解释权。
教程评论

您必须 [ 登录 ] 才能发表评论!

如何观看全部课程
VIP会员399元1年可享受的权限:
观看下载所有视频教程
下载未来一年更新教程
可加入VIP群进行技术讨论
可下载所有资源(源文件和素材)
第二年续费仅为279元

推荐课程

[网页设计] PHP动态网站开发实例教程(持续更新)

讲师:李晓斌

35

课时
推荐图文教程
推荐书籍
首 页在线课程书籍光盘图文教程
点击这里给我发消息47707077
点击这里给我发消息11402485
联系电话

13520020606

联系邮箱
47707077@qq.com
营业执照  |  网上有害信息举报  |  Copyright © 2017 学设计网, All Rights Reserved  |  京ICP备14050932号