css零基础自学教程(六)css属性 第三部分

  • 时间:2018-07-08 22:59 作者:极客饕餮 来源:极客饕餮 阅读:313
  • 扫一扫,手机访问
摘要:一 css列表样式css列表属性允许我们设置不同的列表项标记.在html中,有两种类型的列表:●无序列表():列表项目使用项目符号标记.●有序列表():列表项目使用数字或者字母标记.用css,列表能进一步风格化,图像能使用做列表项标记.其中一种方法是用list-style-type属性,能设置为:c
css零基础自学教程(六)css属性 第三部分

一 css列表样式

css列表属性允许我们设置不同的列表项标记.在html中,有两种类型的列表:

●无序列表(

    ):列表项目使用项目符号标记.

    ●有序列表(

      ):列表项目使用数字或者字母标记.

      用css,列表能进一步风格化,图像能使用做列表项标记.

      其中一种方法是用list-style-type属性,能设置为:circle(。),square(■),decimal(十进制数字),disc(●),lower-alpha(小写字母)等

      html代码:

      1. 美是恋人的赠品
      2. 生活有度,人生添寿
      3. 成功的秘籍在于恒心

      • 人生如画,岁月如歌
      • 爱的匆忙,散得也快
      • 生活便是寻求新的知识

      • 时间和潮流永不待人
      • 爱情是两个人的利己主义
      • 自信和自靠是坚强的柱石

      • 青年时鲁莽,老年时悔恨
      • 爱情是生命的盐
      • 只有登上山顶,才可以看到那边的风光

      css代码:

      ol.lower-alpha{list-style-type:lower-alpha; }

      ul.circle{ list-style-type:circle;}

      ul.square{list-style-type: square;}

      ul.disc{list-style-type: disc;}

      效果如下:

      css零基础自学教程(六)css属性 第三部分

      还有其余列表属性,如:

      ●list-style-image:指定要使用作列表项标记的图像.

      ●list-style-position:指定标记框的位置(inside,outside)

      在下面的示例中,我们用图像作为列表项标记,并指定位置在内容流中.

      html代码:

      以下列表用list-style-position:inside属性.

      • 假如能重活一次,每个人都将是成功者
      • 改变自我,挑战自我,从此刻开始
      • 挫折其实就是迈向成功应该交的学费

      css代码:

      ul.inside{ list-style-image:url("inside");list-style-position:inside; }

      效果如下:

      css零基础自学教程(六)css属性 第三部分

      list-style-position:outside是默认值.

      list-style属性是设置list-style-image,list-style-type,list-style-position的简写属性.它使用于在一个公告中设置所有的列表属性.

      ul{list-style:square outside none;}

      下方是未简化版本:

      ul{list-style-type:square;list-style-position:outside; list-style-image:none;}

      list-style其中的某个值假如未传入,则该值会用默认值

      二 css表格样式

      用css能大大提高html表格的外观

      border-collapse属性指定表格边框能否折叠为单个边框或者默认分开.假如边框分开的,则能用border-spacing属性来更改间距

      html代码:

      共同加油
      一起进步

      css代码:

      table{border-collapse:separate;border-spacing:20px 40px; }

      效果如下:

      css零基础自学教程(六)css属性 第三部分

      caption-side属性指定表标题的位置.值能设置为top或者bottom

      在下面的例子中,我们指定顶部表格标题的位置

      html代码:

      成绩单
      course namelessonsquizzes
      c++81363
      Javascript48144
      HTML38119
      css70174

      css代码:

      caption{caption-side:top;}

      效果如下:

      css零基础自学教程(六)css属性 第三部分

      empty-cells属性指定能否在表格中的空单元格上显示边框和背景.

      参数值能是:

      show:呈现空单元格的边框

      hide:隐藏空单元格的边框

      以下是使用于隐藏元素中空单元格边框的空单元格属性

      html代码:

      HTMLCSS
      JavaScript

      css代码:

      table.empty-cells{border-collapse:separate;empty-cells:hide; }

      效果如下:

      css零基础自学教程(六)css属性 第三部分

      table-layout属性指定如何计算表格列的宽度

      参数值能是:

      auto-当列或者单元格宽度未明确设置时,列宽将与组成列的单元格中的内容量成比例

      fixed-当列或者单元格宽度未明确设置时,列宽将不受列的单元格中的内容数量的影响.

      表格布局默认设置为auto

      下面的例子显示auto和fixed的区别.

      html代码:

      Table-Layout is set to auto

      500.000.000.000.00020.000

      Table-Layout is set to fixed

      500.000.000.000.000

      20.000

      css代码:

      table{ border-collapse:separate; width:100%; border:5px solid green; }

      td{ border:3px solid red; }

      table.auto{ table-layout:auto; }

      table.fixed{table-layout: fixed; }

      效果如下:

      css零基础自学教程(六)css属性 第三部分

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
【系统环境|windows】初识webRTC(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部