美文网首页
HTML 5_CSS 3_JavaScript讲义（十）- 表格

HTML 5_CSS 3_JavaScript讲义（十）- 表格

作者: android小菜鸡一枚 | 来源:发表于2017-12-12 22:24 被阅读0次

（1）.表格相关属性

  • border-collapse: 控制两个单元格的边框是合并在一起还是按照标准的HTML样式分开,如seperate,collapse
  • border-spacing: 设置两个单元格边框之间的间距
  • caption-side: 设置表格标题位于表格哪边
  • empty-cells: 控制单元格没有内容时，是否显示单元格的边框
  • table-layout: 设置表格宽度布局的方法,有auto,fixed
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表格相关属性 </title>
    <style type="text/css">
    table {
        width: 400px;
        border: 1px solid black;
    }
    td {
        background-color:#ccc;
        border: 1px solid black;
    }
    </style>
</head>
<body>
<!-- 表格的单元格边框合并在一起，看起来分割线为单线,并将表格标题放在右边 -->
border-collapse:collapse;caption-side:right;
<table style="border-collapse:collapse;caption-side:right;">
    <caption>表格标题</caption>
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>
<!-- 表格的单元格边框分开，看起来表格分割线为双线，并隐藏空格的边框线 -->
border-collapse:seperate;empty-cells:hide;
<table style="border-collapse:seperate;empty-cells:hide;">
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td></td>
    </tr>
</table>
<!-- 表格的单元格边框分开，看起来表格分割线为双线，并设置两个单元格的间距 -->
border-collapse:seperate;border-spacing:20px;
<table style="border-collapse:seperate;border-spacing:20px">
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>
</body>
</html>
image.png

控制表格布局

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 表格相关属性 </title>
    <style type="text/css">
    table {
        table-layout: fixed;
        border-collapse:collapse;
        border: 1px solid black;
    }
    td {
        background-color:#ccc;
        border: 1px solid black;
    }
    </style>
</head>
<body>
表格的宽度将由两个col元素出来
<table>
    <!-- 表格的宽度将由如下两个col元素计算出来 -->
    <col style="width:240px"/>
    <col style="width:80px"/>
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>
表格的宽度将由如下第一行的单元格的宽度计算出来
<table>
    <tr>
        <!-- 表格的宽度将由如下第一行的单元格的宽度计算出来 -->
        <td style="width:80px">疯狂Java讲义</td>
        <td style="width:300px">轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>
每列将会平均分配该表格的宽度
<!-- 每列将会平均分配该表格的宽度 -->
<table style="width:300px">
    <tr>
        <td>疯狂Java讲义</td>
        <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
        <td>疯狂Android讲义</td>
        <td>经典Java EE企业应用实战</td>
    </tr>
</table>
</body>
</html>
image.png

（2）.列表相关属性

list-type:复合属性
list-style-image:指定作为列表项标记的图片
list-style-position:指定列表项标记出现的位置,outside和inside将标记放在列表内
list-style-type:指定列表项标记的样式

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 列表相关属性 </title>
    <style type="text/css">
        li {
            background-color: #aaa;
        }
    </style>
</head>
<body>
使用图片作为列表项标记
<ul style="list-style-image:url(fl.gif);">
    <li>疯狂Java讲义</li>
    <li>轻量级Java EE企业应用实战</li>
    <li>疯狂Android讲义</li>
    <li>经典Java EE企业应用实战</li>
</ul>
使用大写罗马字母作为列表项标记
<ol style="list-style-type:upper-roman;">
    <li>疯狂Java讲义</li>
    <li>轻量级Java EE企业应用实战</li>
    <li>疯狂Android讲义</li>
    <li>经典Java EE企业应用实战</li>
</ol>
使用表意数组作为列表项标记，并将列表标记放在列表元素内
<ol style="list-style-type:cjk-ideographic;
    list-style-position:inside;">
    <li>疯狂Java讲义</li>
    <li>轻量级Java EE企业应用实战</li>
    <li>疯狂Android讲义</li>
    <li>经典Java EE企业应用实战</li>
</ol>
</body>
</html>
image.png

使用display:list-item把普通元素显示为列表

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 列表相关属性 </title>
    <style type="text/css">
        div>div{
            background-color: #aaa;
            display:list-item;
            list-style-image:url(fl.gif);
            list-style-position:inside;
        }
    </style>
</head>
<body>
使用图片作为列表项标记
<div>
    <div>疯狂Java讲义</div>
    <div>轻量级Java EE企业应用实战</div>
    <div>疯狂Android讲义</div>
    <div>经典Java EE企业应用实战</div>
</div>
</body>
</html>
image.png

（3）.控制光标的属性

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 光标相关属性 </title>
    <style type="text/css">
        div {
            display: inline-block;
            border: 1px solid black;
            width: 160px;
            height: 70px;
        }
    </style>
</head>
<body>
<div style="cursor:all-scroll;">十字箭头光标</div>
<div style="cursor:col-resize;">水平拖动线光标</div>
<div style="cursor:crosshair;">十字线光标</div>
<div style="cursor:move;">代表移动十字箭头光标</div>
<div style="cursor:help;">带问号的箭头光标</div>
<div style="cursor:no-drop;">禁止光标</div>
<div style="cursor:not-allowed">禁止光标</div>
<div style="cursor:pointer;">手型光标</div>
<div style="cursor:progress;">带沙漏的箭头光标</div>
<div style="cursor:row-resize;">垂直拖动线光标</div>
<div style="cursor:text;">文本编辑光标</div>
<div style="cursor:vertical-text;">垂直文本编辑光标</div>
<div style="cursor:wait;">沙漏光标</div>
<div style="cursor:n-resize;">可向上拖动的光标</div>
<div style="cursor:ne-resize;">上、右可拖动的光标</div>
<div style="cursor:se-resize;">下、右可拖动的光标</div>
</body>
</html>
image.png

（4）.media query功能

1.media query语法

@media not|only 设备类型 [and 设备特性]

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 针对浏览器宽度调整布局 </title>
    <style type="text/css">
        /* 设置默认的CSS样式 */
        #container{
            text-align: center;
            margin: auto;
            width: 750px;
        }
        #container>div {
            border: 1px solid #aaf;
            text-align: left;
            /* 设置HTML组件的width属性包括边框 */
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            background-color: #ffc;
            padding: 5px;
        }
        div#left {
            width: 300px;
            height: 230px;
            float: left;
        }
        div#main {
            width: 450px;
            height: 230px;
            float: left;
            /* 让该元素的右边不能出现float组件，即让后面的元素换行 */
            clear: right;
        }
        div#right {
            width: 750px;
            float: left;
        }
        /* 设置当浏览器宽度大于920px时的CSS样式 */
        @media screen and (min-width:1000px) {
            #container{
                text-align: center;
                margin: auto;
                width: 960px;
            }
            #container>div {
                border: 1px solid #aaf;
                /* 设置HTML组件的width属性包括边框 */
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                border-radius: 12px 12px 0px 0px;
                background-color: #ffc;
                padding: 5px;
            }
            div#left {
                width: 240px;
                float: left;
                height: 240px;
            }
            div#main {
                width: 460px;
                float: left;
                height: 240px;
                /* 让左右两边都可以出现float组件 */
                clear: none;
            }
            div#right {
                width: 260px;
                float: left;
                height: 240px;
            }
        }
        /* 设置当浏览器宽度小于480px时的CSS样式 */
        @media screen and (max-width:480px) {
            #container{
                text-align: center;
                margin: auto;
                width: 450px;
            }
            #container>div {
                border: 1px solid #aaf;
                /* 设置HTML组件的width属性包括边框 */
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                border-radius: 12px 12px 0px 0px;
                background-color: #ffc;
                padding: 5px;
            }
            div#left {
                width: 450px;
                float: left;
                height: 140px;
            }
            div#main {
                width: 450px;
                float: left;
                height: 220px;
                /* 让左右两边都不能出现float组件 */
                clear: both;
            }
            div#right {
                width: 450px;
                float: left;
                height: 160px;
            }
        }
    </style>
</head>
<body>
<div id="container">
    <div id="left">
        <h2>疯狂软件开班信息</h2>
        <ul>
            <li>2011年11月10日&nbsp;已满已开班</li>
            <li>2011年12月02日&nbsp;爆满已开班</li>
            <li>2012年02月08日&nbsp;已满已开班</li>
        </ul>
    </div>
    <div id="main">
        <h2>疯狂软件介绍</h2>
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
        &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、李韩飞、黄勇、陈辉等老师将带给广大学习者“非一般”的疯狂。
    </div>
    <div id="right">
        <h2>公司动态</h2>
        <ul>
            <li>《疯狂Java讲义》(第2版)上市</li>
            <li>泰豪电网软件公司来校召开现场招聘会</li>
            <li>疯狂学子赴武汉光谷软件园入职</li>
            <li>新华南方来校现场招聘</li>
        </ul>
    </div>
</div>
</body>
</html>
浏览器宽度大于1000时的效果
浏览器宽度大于480小于1000时效果
浏览器宽度小于480时效果

相关文章

网友评论

      本文标题：HTML 5_CSS 3_JavaScript讲义（十）- 表格

      本文链接：https://www.haomeiwen.com/subject/krloixtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|HTML 5_CSS 3_JavaScript讲义（十）- 表格|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！