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语言从入门到精通开发资源库_php源码建站∶一品资源

    c语言从入门到精通开发资源库_php源码建站∶一品资源NET学习从入门到精通100+源代码大放送 专辑中全部是源码资源,有基础学习源码,也有从网上需要购买的源码,现在全部免积分供大家学习参考专辑地址为:http://download.csdn.net/album/detail/3364具体包括    客户关系管理系统CRM源码        租房网(三层+MVC4)管理系统源        在线考试系统源码

  • centOS 重启 php-fpm

    centOS 重启 php-fpm

    2021年10月19日
  • Mqtt开发笔记:Mqtt服务器搭建

    Mqtt开发笔记:Mqtt服务器搭建若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062本文章博客地址:各位读者,知识无穷而人力有穷,要么改需求,要么找专业人士,要么自己研究红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中…(点击传送门

  • android okio使用方法,Android 开源框架 Okio 原理剖析「建议收藏」

    android okio使用方法,Android 开源框架 Okio 原理剖析「建议收藏」Retrofit,OkHttp,Okio是Square团队开源的安卓平台网络层三板斧,它们逐层分工,非常优雅地解决我们对网络请求甚至更广泛的I/O操作的需求。其中最底层的Okio堪称小而美,功能也更基础,应用更广泛。这次我们就对它进行一个详细的分析。本文的分析基于Okio截至2016.8.4的最新源码,非常建议大家下载Okio源码之后,跟着本文,过一遍源码。1,概览和分析…

  • angular面试问题_kafka面试题

    angular面试问题_kafka面试题Angularv8+面试系列Angular面试题汇总1-基本知识Angular面试题汇总2-Component/Service目录Angular中的测试有哪些种,基于哪些测试框架什么是Karma?在Angular中有什么作用?什么是Jasmine?在Angular中有什么用?什么是protractor?单元测试UnitTest什么是Angular中的单元测试?AngularUT的最佳实践测试Service时,有其他依赖如何处理?端到端测试(e2e)Angular中的测试有哪些.

发表回复

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

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