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

来源：互联网发布：手机淘宝联盟编辑：程序博客网时间：2024/05/18 10:10

1.表格相关属性：

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

2.列表相关属性

list-style：这是一个复合属性，可以同时指定list-style-image/list-style-positon/list-style-typelist-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>

0 0