开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS的ul与li样式学习

简介:
+关注继续查看
ul和li列表是使用CSS布局页面时常用的元素。在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。

  一、list-style-type属性
  list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:(列举一些常用的属性值)
  list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
  list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。
  • none:不使用项目符号。
  • disc:实心圆。
  • circle:空心圆。
  • square:实心方块。
  • demical:阿拉伯数字。
  • lower-alpha:小写英文字母。
  • upper-alpha:大写英文字母。
  • lower-roman:小写罗马数字。
  • upper-roman:大写罗马数字。
  使用list-style-type属性的示例代码如下:
li{
    list-style-type:square;}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>
  该样式应用到页面的效果如下图所示。
  二、list-style-image属性
  list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:
  list-style-image:none/url
  list-style-image属性可以取两个值:
  • none:没有替换的图片。
  • url:要替换图片的路径。
  来看一段代码:
li{
    list-style-image:url(images/bg03.gif);}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>
  效果如下图。
  三、list-style-position属性
  list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:
  list-style-position:inside/outside
  • inside:项目符号放置在文本以内。
  • outside:项目符号放置在文本以外。
  使用list-style-position属性的示例如下:
li{
    list-style-type:square;
    list-style-position:outside;}
<ul>
    <li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>
  效果如下图所示。
  再来看一下属性值为inside的样式。
li{
    list-style-type:square;
    list-style-position:inside;}
<ul>
    <li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>
  四、list-style属性
  list-style属性是综合设置li样式的属性,也是一个可以继承的属性,语法结构如下:
  li-style:list-style-type/list-style-image/list-style-position
  各个值的位置可以交换。比如:
li{
    list-style:url(images/bg03.gif) inside;}
<ul>
    <li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
</ul>
  可以看一下应用到页面的效果。


==========================
如何调整ul,li的间距?
   对li添加样式margin-top:0px(这样li之间的上间距为0px)。而我想要的效果是li的左边空格太多了,那么设置margin-left: 5px;

如何进行分层?
   在li里面再添加ul,li:
<ul> 
<li>第1层 
        <ul> 
        <li>1.1</li> 
        <li>1.2</li> 
        </ul> 
</li> 
<li>第2层</li> 
</ul>

效果:
  • 第1层
    • 1.1
    • 1.2
  • 第2层

本文转自 Icansoft 51CTO博客,原文链接: http://blog.51cto.com/android/541029

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML之文本格式化、链接、头部、CSS(笔记小结)
HTML之文本格式化、链接、头部、CSS(笔记小结)
0 0
【前端】css布局html页面之inline-block布局错位解决方法
本篇文章中,主要讲讲前端布局的情况 对于,对于刚接触前端开发的小伙伴来说,布局是一个比较重要的知识点,如果知识点理解不到位,那么很容易出现布局错位的情况
0 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
0 0
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
前端三要素:HTML、CSS、JavaScript介绍以及三者的关系理解
0 0
用HTML+CSS构建一个绚丽的登录页面
自动切换背景,登录页面,水滴效果,绚丽的登录页面
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
实训-利用HTML+CSS制作某米官网首页(二)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS制作某米官网首页(一)
实训-利用HTML+CSS制作某米官网首页
0 0
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载