首页 > 其他分享 >3. CSS 列表和表格相关属性

3. CSS 列表和表格相关属性

时间:2024-03-25 22:55:20浏览次数:21  
标签:style 表格 单元格 列表 border CSS 属性

列表相关属性

ul、ol、li标签中使用

    <style>
        ul{
            list-style-type: lower-roman; /*列表符号,常用值:none*/
            list-style-position: inside; /*列表符号位置*/
            list-style-image: url("路径");/*自定义列表符号*/
            list-style: decimal inside url("路径");/*上面三个可以写道一个里面,变成复合属性*/
        }
    </style>

边框相关属性

    <style>
        table{
            border-width: 3px;       /*边宽*/
            border-color: green;     /*边色*/
            border-style: solid;     /*边样*/
            border: 2px green dashed; /*复合属性*/
        }
    </style>

边框相关属性不仅表格使用,其他元素也可以

表格的独有属性

下方属性只有

标签才能使用

  • 控制表格的列宽:table-layout:fixed;
    • 属性值:auto、fixed(固定列宽)
  • 控制单元格间距: border-spacing: 10px;
  • 合并相邻的单元格边框:border-collapse: collapse;
    • collapse(合并)
    • separate(不合并)
  • 隐藏没有内容的单元格:empty-cells: hide;
    • hide
    • show(显示)
  • 设置单元格标题:caption-side: top;
    • top
    • bottom(在表格下面)
      ps:控制单元格间距、隐藏没有内容的单元格生效的前提是没有合并相邻单元格

标签:style,表格,单元格,列表,border,CSS,属性
From: https://www.cnblogs.com/BY1314/p/18095438

相关文章

  • 03-python函数和列表
    函数定义def函数名():执行内容#当函数需要返回值时,return,没有返回值默认返回NonereturnxxxNone的使用场景函数返回值上if判断中,None为False定义变量时,用作变量声明,暂时变量不需要具体值global关键字(提升局部变量为全局变量)nn=100defhello():......
  • CSS
    CSS层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化CSS能够对网页中元素位置的排版进行像素......
  • 33.html+css网页设计实例/“个人”博客主题介绍/web前端期末大作业/
    前言本文以“个人”博客为主题设计,本实例应用html+css。包括音频、点击事件、留言、登录页面等,供大家参考。【关注作者互关|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,有兴趣的联系我交流分享!3Q!一、网页效果二......
  • 【CSS】CSS基础1(CSS基本介绍+常见样式设计)
    目录什么是CSS? 语法规范常见样式例子代码展示什么是CSS? 点击以下链接了解更多:​​​​​​​ ​​​​​https://baike.baidu.com/item/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/524980?fromModule=lemma_inlink(英文全称:CascadingStyleSheets)是一种用......
  • vue中导出excel表格, Workbook 导出的表格的单元格格式设置为文本
    <template><button@click="exportExcel">导出Excel</button></template><script>importXLSXfrom'xlsx';exportdefault{methods:{exportExcel(){//创建Workbook和工作表constworkbook=......
  • 基于vue+element ui实现下拉表格选择组件
    一:前言本文属于转载;二:正文1:示例展示单选多选index.vue<template><el-selectref="select"v-model="defaultValue":title="isNeedTitle?getTitle():null":clearable="false":multiple="multiple"......
  • 原生JavaScript写个表格版的日历
    如图:简单、易懂、写着玩儿的……代码如下:<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document&l......
  • 纯CSS 毛玻璃效果
    在一个复杂的背景上添加文字,文字能清晰展示,并尽可能的保留原背景的话,使用毛玻璃的效果去处理是非常合适的。一、背景图毛玻璃在 PhotoShop 中,毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。在 CSS 中,想要实现模糊效果,可以使用 滤镜 。背景通常设置成黑色、灰......
  • 变形元素旋转css阴影
    一、css3transform变换translate(x,y)设置盒子的位移scale(x,y)设置盒子缩放roate(dog)设置盒子的旋转skew(x-angle,y-angle)设置盒子的斜切perspective 设置透视距离transform-styoleflat:preserved-3d设置盒子是否按3d空间显示translateXtranslateYtranslateZ设......
  • css复建
    最近写了好多个界面的css,大部分是抄的然后在一段一段研究代码的时候发现,好多作者的思路很巧妙,翻译成人话就是我看不懂作者是怎么实现的。为了学习css,搞些好玩的界面,看来css要重新学习一遍了先说说css的选择器和他们的优先级,要想用好css,他们的优先级是必须必须要搞清楚的总体来......