HTML5表格和布局

于 2017-06-04 17:16:22 发布
阅读量2.6k 收藏 6
点赞数 1
分类专栏： html5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Mr_White01/article/details/72860113
版权

1.雪碧图，精灵图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1,.div2{
                border: 1px solid cornflowerblue;
                background: url(img/camera_new_5606e8f.png) no-repeat right;
                height: 25px;           
                width: 700px;
                margin: 20px;
            }
            .div1{
                background-position-y: 5px;             
            }
            .div2{
                background-position-y:-17px ;
            }
            .div1:hover{
                background-position-y: -17px;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

2.表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                font-family: "微软雅黑";
                border: 1px solid cornflowerblue;
                border-collapse: collapse;
                /*去掉间隙*/
            }
            th,td{
                border: 1px solid cornflowerblue;
            }
            /*table分为thead tbody tfoot
             行  tr
             表头 th
             单元格 td
             th td最好设置宽度
             rowspan 列合并
             colspan 行合并*/
        </style>
    </head>
    <body>
        <!--表格-->
        <table>
            <thead>
                <tr>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                </tr>
                <tr>
                    <td rowspan="2">数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                </tr>
                <tr>
                    <!--<td>自然</td>-->
                    <td>自然</td>
                    <td>自然</td>
                    <td>自然</td>
                    <td>自然</td>
                </tr>
                <tr>
                    <td>体育</td>
                    <td>体育</td>
                    <td>体育</td>
                    <td>体育</td>
                    <td>体育</td>
                </tr>   
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">自动</td>
                    <!--<td>自动</td>
                    <td>自动</td>
                    <td>自动</td>
                    <td>自动</td>-->
                </tr>
            </tfoot>
        </table>
    </body>
</html>

3.表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--<form action="" method="">
            form标签是各种表单标签的父级
            action：引号中间写数据提交的地址
            method：提交方式
                get直接提交：value会在提交的地址后以字符串拼接的方式显示
                post：先把数据打包，然后在传送到地址，地址栏不会显示提交的内容
        </form>-->
        <form action="http://www.baidu.com" method="post">
            用户名：<input type="text" name="wd" id="wd" value="" /></br>
            密码：<input type="password" name="ps" id="ps" value="123456" /></br>
            男：<input type="radio" name="X3" id="X3" value="" /></br>
            女：<input type="radio" name="X3" id="X3" value="" /></br>
            <!--定义的name一样就是单选 ，name不一样就可以双选-->
            兴趣爱好：LOL <input type="checkbox" name="a4"/>
            DOTA <input type="checkbox" name="a4"/>
            HTML <input type="checkbox" name="a4"/>
            SHOPPING <input type="checkbox" name="a4"/><br />
            <input type="button" name="" id="" value="别点我" /><br />
            <select name="">
                <option value="武汉">武汉</option>
                <option value="河北">河北</option>
                <option selected="selected" value="湖南">湖南</option>
                <!--selected="selected"设置默认选择-->
            </select><br />
            <textarea name="" rows="20" cols="40" style="resize: vertical;">
                resizi:none 用户无法调整元素尺寸
                both：用户可以调整宽高
                horizontal：调整宽度
                vertical:调整高度
            </textarea><br />
            <input type="file" name="" id="" value="" /><br />
            <input type="submit" name="" id="" value="提交" />
        </form>
    </body>
</html>

4.多媒体标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--audio一定要加上controls否则不向用户展示播放按钮，界面上不显示任何内容-->
        <!--存在兼容性问题，不同的浏览器之间支持的格式不统一，目前推荐使用ogg格式-->
        <audio controls="controls" src="video/bgm.mp3"></audio>
        <audio src="video/haha.ogg" controls="controls"></audio>
        <video controls="controls" width="600px" height="500px" src="video/video.mp4">          
        </video>

    </body>
</html>

5.自适应布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .all{
                border: 1px solid cornflowerblue;
                width: 800px;
                margin: 0 auto;
            }
            .div1,.div5{
                height: 200px;
                width: 800px;
                background: greenyellow;
            }
            .div2,.div3,.div4{
                display: inline-block;
                /*几行放到一行上*/
            }
            .div2,.div4{
                width: 200px;
                height: 400px;
                background: cyan;
            }
            .div3{
                height: 400px;
                width: 380px;
                background: orangered;
            }
            @media only screen and (max-width:800px ) {
                .div4{display: none;}
                .div1,.div5{
                    width: 600px;
                }
                .all{
                    width: 600px;
                }
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="div1">div1</div>
            <div class="div2">div2</div>
            <div class="div3">div3</div>
            <div class="div4">div4</div>
            <div class="div5">div5</div>
        </div>
    </body>
</html>

6.响应式布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height: 100px;
                margin-top: 20px;
                border: 1px solid;
            }
            @media (min-width: 900px),(max-width:700px){
                .div1{
                    background-color: green;
                }
                .div2{
                    background-color: red;
                    display: none;
                }
            }
            /*@media (min-width: 100px) and (max-width:400px){
                .div1{
                    background-color: red;
                }
                .div2{
                    background-color: yellow;
                }
            }
            @media only screen and (min-width: 601px ) {
                .div1{
                    background-color: yellow;
                }
                .div2{
                    background-color: red;
                }


            }*/
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
        <div class="div5">div5</div>
    </body>
</html>

7.css3边框设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            div{
                width: 225px;
                padding: 20px 0;
                background: pink;
                border: 5px dashed;
                text-align: center;
                background-image: url(img/72S58PICuyH_1024.jpg);
            }
            .border-box{
                /*background-clip: border-box;*/
                background-origin: border-box;
            }
            .padding-box{
                /*background-clip: padding-box;*/
                background-origin: padding-box;
            }
            .content-box{
                /*background-clip: content-box;*/
                background-origin: content-box;
            }
        </style>
        <!--background-clip:指定背景可以覆盖到什么范围-->
        <!--background-origin:指定背景从什么位置开始-->
    </head>
    <body>
        <h2>background-clip:border-box</h2>
        <div class="border-box">
            实例1
        </div>
        <h2>background-clip:padding-box</h2>
        <div class="padding-box">
            实例2
        </div>
        <h2>background-clip:content-box</h2>
        <div class="content-box">
            实例3
        </div>
    </body>
</html>

具体代码实现的现象，请用火狐浏览器打开查看。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值