疯狂H5笔记 - 表格、列表相关属性及media query

最新推荐文章于 2024-05-04 17:54:50 发布

19年，重新开始写

最新推荐文章于 2024-05-04 17:54:50 发布

阅读量412

点赞数

分类专栏： html5+css3

本文链接：https://blog.csdn.net/qq_27905183/article/details/53104745

版权

html5+css3 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

1.表格相关属性：

border-collapse：设置表格里的行和单元格边框的显示方式，有两个属性值：
    seperate：单元格的分割线为双线
    collapse：单元格的分割线为单线
border-spacing：当设置单元格的分割线为双线seperate时，该属性用于设置单元格边框之间的间距
caption-side：设置表格标题位于表格哪边，有四个属性值：top/right/bottom/left
empty-cells：当设置单元格的分割线为双线seperate时，该属性用于设置是否显示没有内容的单元格。有两个属性值：show/hide
table-layout：设置表格宽度的布局方法，有两个属性值：auto/fixed

2.列表相关属性

list-style：这是一个复合属性，可以同时指定list-style-image/list-style-positon/list-style-type
list-style-image：指定作为列表项标记的图片
list-style-position：指定列表项标记出现的位置
list-style-type：指定列表项标记的样式。属性值太多这里就不列举了

3.控制鼠标的光标样式的属性：cursor：该属性可以改变光标在目标组件上的形状

4.media query功能用于设计对媒体类型、媒体分辨率、像素等细节进行匹配的CSS样式。

1.media query语法：@media not|only 设备类型  and (设备特性)

2.media query支持的设备类型如下：
    all：适用于所有的设备类型
    aural：适用于语音和音频合成器
    braille：适用于触觉反馈设备
    embossed：适用于盲文印刷设备
    handheld：适用于小型或手提设备
    print：适用于打印机
    projection：适用于投影图像，例如幻灯片
    screen：适用于计算机显示器
    tty：适用于使用固定间距字符格的设备
    tv：适用于电视类设备

3.media query支持的设备特性如下：
    width、height：支持min/max前缀，匹配浏览器窗口的宽度和高度
    aspect-ratio：支持min/max前缀，匹配浏览器窗口的宽度和高度的比例
    device-width：、device-height：支持min/max前缀，匹配设备分辨率的宽度和高度
    device-aspect-ratio：支持min/max前缀，匹配浏览器分辨率的宽度和高度的比率
    color：支持min/max前缀，为一个整数值，匹配设备使用的多少位的色深，真彩色为32，彩色设备为0
    color-index：支持min/max前缀，为一个整数值，匹配色彩表中的颜色数
    resolution：支持min/max前缀，匹配设备的物理分辨率
    scan：不支持前缀，属性值为progressive/interlace，匹配设备的扫描方式，progressive代表逐行扫描，interlace代表隔行扫描
    grid：不支持前缀，属性值为0/1，匹配设备是否基于栅格，1代表基于，0代表不基于栅格系统

media query小例子：

<!Doctype html>
<html>
    <head>
        <title>media query css style</title>
        <meta http-equiv="author" content="chengxi" />
        <meta http-equiv="keyword" content="media" />
    </head>
    <body>
        <style>
            /*设置当浏览器宽度大于1000px时的CSS样式*/
            @media screen and (min-width：1000px){
                #contain{
                    text-align: center;
                    margin: auto;
                    width: 900px;
                }
                #contain>div{
                    border: 1px solid green;
                    box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    -o-box-sizing: border-box;
                    -ms-box-sizing: border-box;
                    background-color: #ffc;
                    padding: 5px;
                }
            }
        </style>
        <div id="contain">
            <div id="left">
                content...
            </div>
            <div id="main">
                content...
            </div>
            <div id="right">
                content...
            </div>
        </div>
    </body>
</html>