24.CSS表格与列表

24.CSS表格与列表

大家好,又见面了,我是全栈君。

                                            第十八掌  CSS表格与列表

一、表格样式

          属性                            说明              CSS版本

      border-collapse    边框样式     相邻单元格的边框样式      2

      border-spacing     长度值       相邻单元格边框间距        2

      caption-side       位置名称     表格标题位置              2

      empty-cells        显示值       空单元格是否显示边框      2

      table-layout       布局样式     指定表格的布局样式        2

 

   1border-collapse

                         说明                  CSS版本

     1separate : 默认值,单元格边框独立       2        //单元格边框是空心的   

     2collapse : 单元格相邻边框被合并         2        //单元格边框是实心的,一条黑线。

   2border-spacing  

     1)长度值   : 表示间距,其他使用CSS长度值      2    //单元格边框线空心的间距

   3caption-side    

     1top     :  默认值,标题在上方          2

     2bottom  :  标题在下方                  2

   4empty-cells     

     1show  :默认值,显示边框           2       

     2hide  :不显示边框                 2        //如果单元格内没有内容,则不显示边框。

   5table-layout    

     1auto  : 默认值,内容过长时,拉伸整个单元格       2

     2fixed : 内容过长时,不拉伸整个单元格             2

二、列表样式

   列表有四种独有样式

   1list-style-type:

     1)、none        : 没有标记        1

     2)、disc        : 实心圆          1

     3)、circle      : 空心圆          1

     4)、square      : 实心方块        1

     5)、decimal     : 阿拉伯数字      1

     6)、lower-roman : 小写罗马数字    1

     7)、upper-roman : 大写罗马数字    1

     8)、lower-alpha : 小写英文字母    1

     9)、upper-roman : 大写英文字母    1

     例、·张三

         ·李四   //变化的是前方到实心圆

         ·王五

         ·马六

   2lise-type-position

     1outside    默认值,标记位于内容框外部     1

     2inside     标记位于内容框内部             1            

     例、(1):·张三,是一个       (2):·张三,是一个

                  好青年                    好青年

                ·李四                      ·李四

                ·王五                      ·王五

   3list-type-image

      1none  不使用图像          1  

      2url   通过url使用图像     1

   4list-style (简写形式)

         ul{

              list-stylelower-alpha inside urlbullet.png;

         }

三、其他功能

     <table><td>单元格,我们可以使用text-align属性水平对齐,但是垂直对齐就无法操作了。CSS为我们提供了vertical-align属性用于垂直对齐。

                       说明            CSS版本

     baseline      内容对象与基线对齐      1

     top           内容对象与顶端对齐      1

     middle        内容对象与中部对齐      1

     bottom        内容对象与底部对齐      1

    //内容在表格中实现移动   例如内容紧贴上边框。

     

     sub           垂直对齐文本下标      1

     super         垂直对齐文本上标      1

    //脚标

  

     长度值        设置上下值的偏移量    1

     百分比        同上                  1

                                          

 

转载于:https://www.cnblogs.com/keshuai752100461/p/8485189.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107693.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 使用C语言实现字符串分割

    使用C语言实现字符串分割之前分享了一篇使用C++(std::string作为容器)进行字符串分割的博文:https://blog.csdn.net/r5014/article/details/82802664 现在又想用C语言做一个字符串分割的函数,大概功能是这样:需要分割的字符串“  thisisacharactor raw.  ”使用”分割分割之后会返回一个char**…

  • 面向对象程序设计的基本原理_面向对象程序设计c++答案

    面向对象程序设计的基本原理_面向对象程序设计c++答案Java程序设计(面向对象)- 设计原理

  • Python sorted 函数

    Python sorted 函数Pythonsorted函数sorted可以对所有可迭代的对象进行排序操作,sorted方法返回的是一个新的list,而不是在原来的基础上进行的操作。从新排序列表。sorted语法:

  • 【详细教程·本人亲测】解决win10家庭版系统C:\Users用户名中有中文,更改为英文的问题

    【详细教程·本人亲测】解决win10家庭版系统C:\Users用户名中有中文,更改为英文的问题【本人亲测】解决win10家庭版系统C:\Users用户名更改的问题【前言】新电脑刚买来,自带win10系统,激活时注册用户名和密码,为了方便记忆把用户名设为中文。随着后来学习和工作软件越装越多,在学习软件开发才发现Users必须为英文,此时重装系统成本极大!因此本人花了大量时间在网上寻找解决方案。但是基本上不适合win10家庭版。终于最后搜到一个方案解决,深知不易,特分享给各位。<第一…

  • python中删除列表中重复元素

    python中删除列表中重复元素在面试中,很可能遇到给定一个含有重复元素的列表,删除其中重复的元素,下边给出三种方法来实现这个功能。1.使用内置函数setlists=[1,1,2,3,4,6,6,2,2,9]lists=list(set(lists))先将列表转换为集合,因为集合是不重复的,故直接删除重复元素,而且输出结果为排序后的2.使用del函数或者remove函数lists=[1,1…

  • 五大创意礼品网站_实用礼品

    五大创意礼品网站_实用礼品朋友、父母过生,经常苦于不知道送啥好,送一般的显得没有新意,想送个有创意的吧,又不知道到哪选。为此,小编我特意调研了国内的创意礼品网站,给出前十位的网站,供大家参考。礼意久久送礼网:www.liyi99.com  成立于09年的礼意久久送礼网是目前国内领先的在线礼品销售网站,礼品门类齐全,有自己的呼叫中心,同时也接受过央视的采访。  优点:礼品种类齐全,同时全国免运费;…

    2022年10月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号