首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

HTML5-03

时间：2021-07-01 16:36:54   收藏：0   阅读：0

学习HTML5的第三天：

1.带样式的表格表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格表单</title>
        <style type="text/css">
            tr {
                border: none;
                height: 30px;
                line-height: 30px;
            }

            th {
                border: none;
                text-align: left;
                /* 左对齐 */
                height: 40px;
            }

            td,
            table {
                border: none;
            }

            caption {
                border-bottom: 2px solid red;
                /* 只加下边框 */
                /* padding-bottom: 10px;
                padding-top: 30px; */
                padding: 30px 0px 10px 0px;
                text-align: left;
                /* 左对齐 */
            }

            h2 {
                margin: 0;

            }

            .td1 {
                width: 200px;
            }

            #tdbutton {
                text-align: center;
            }

            #baocun,
            #fanhui {
                background-color: blue;
                color: white;
                width: 60px;
                height: 30px;
                border: none;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <table border="" cellspacing="" cellpadding="">
            <caption>
                <!-- caption语义标签 -->
                <h2>
                    个人信息
                </h2>
            </caption>
            <tr>
                <th colspan="2">修改个人信息（*为必填项）</th>
            </tr>
            <tr>
                <td class="td1">*姓名</td>
                <td><input type="text" name="" id="" value="" /></td>
            </tr>
            <tr>
                <td class="td1">*性别</td>
                <td>
                    <input type="radio" name="sex" id="" value="1" />男
                    <input type="radio" name="sex" id="" value="2" />女
                </td>
            </tr>
            <tr>
                <td class="td1">*出生日期</td>
                <td><input type="date" name="" id="" value="" /></td>
            </tr>
            <tr>
                <td class="td1">*参加工作年份</td>
                <td><select name="">
                        <option value="1">无工作经验</option>
                        <option value="2">2005或更早</option>
                        <option value="3">2006</option>
                        <option value="4">2007</option>
                    </select></td>
            </tr>
            <tr>
                <td class="td1">*户口所在地</td>
                <td>
                    <select name="">
                        <option value="1">沈阳</option>
                        <option value="2">大连</option>
                        <option value="3">营口</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td1">*现居住城市</td>
                <td>
                    <select name="">
                        <option value="1">沈阳</option>
                        <option value="2">大连</option>
                        <option value="3">营口</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td1">*联系方式</td>
                <td><input type="text" name="" id="" value="" />
                    <a href="#">修改</a>
                </td>
            </tr>
            <tr>
                <td class="td1">*电子邮箱</td>
                <td><input type="text" name="" id="" value="" />
                    <a href="#">修改</a>
                </td>
            </tr>
            <tr>
                <td class="td1">婚姻状况</td>
                <td>
                    <input type="radio" name="yihun" id="" value="" />未婚
                    <input type="radio" name="yihun" id="" value="" />已婚
                    <input type="radio" name="liyi" id="" value="" />离异
                </td>
            </tr>
            <tr>
                <td class="td1">国籍</td>
                <td><select name="">
                        <option value="1">中国</option>
                        <option value="2">中国</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td1">有无海外学习经历</td>
                <td>
                    <input type="radio" name="study" id="" value="" />有
                    <input type="radio" name="study" id="" value="" />无
                </td>
            </tr>
            <tr>
                <td class="td1">政治面貌</td>
                <td>
                    <input type="radio" name="" id="" value="" />中共党员
                    <input type="radio" name="" id="" value="" />共青团员
                    <input type="radio" name="" id="" value="" />民主党派
                    <input type="radio" name="" id="" value="" />群众
                </td>
            </tr>
            <tr>
                <td id="tdbutton" colspan="2">
                    <input type="button" name="" id="baocun" value="保存" />
                    <input type="button" name="" id="fanhui" value="返回" />
                </td>
            </tr>
        </table>
    </body>
</html>

2.关于一些标签的默认样式的去除

body标签自带外边距

ul标签自带上下外边距和左内边距以及列表项右边的点

a超链接标签自带文本颜色和下划线   以及一定比例的字号(这个字号好像默认是百分比)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>关于默认样式</title>
        <style type="text/css">
            body{
                border: 1px solid blue;
                margin: 0;
                /* 去掉body自带的默认外边距 */
            }
            html{
                border: 2px solid red;
            }
            div{
                width: 100px;
                height: 100px;
                border: 1px solid green;
            }
            ul{
                border: 3px solid orange;
                /* 干掉上下外边距和左内边距 */
                margin: 0;
                padding: 0;
                /* 去掉无序列表右边的点 */
                list-style: none;
            }
            li{
                border: 01px solid green;
            }
            a{
                /* 超链接有自带的颜色和下划线和一定比例的字号 */
                color: black;
                text-decoration: none;
                font-size: 3px;
            }
        </style>
    </head>
    <body>
        <!-- <div></div> -->
        
        <!-- <ul>
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
        </ul> -->
        
        <!-- <a href="#">超链接</a> -->
    </body>
</html>

3.关于背景图片的设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                border: 1px solid black;
                width: 200px;
                height: 200px;
                background-image: url(img/pic_1.jpg);
                /* 选择背景图片 */
                background-repeat: no-repeat;
                /* 背景图片不填充 */
                background-position: left top;
                /* 背景图片位置 */
                background-size: cover;
                /* 背景图片盖满整个区域 */
            }
        </style>
    </head>
    <body>
        <div id="">
            
        </div>
    </body>
</html>

4.例-音乐列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>例音乐列表</title>
        <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/>
        <link rel="stylesheet" type="text/css" href="css/musiclist.css"/>
    </head>
    <body>
        <ul>
            <li>
                <img src="img/pic_1.jpg" >
                <span>小水果-筷子兄弟</span>
            </li>
            <li>
                <img src="img/pic_2.jpg" >
                <span>匆匆那年-王菲</span>
            </li>
            <li>
                <img src="img/pic_3.jpg" >
                <span>年轮-张碧晨</span>
            </li>
            <li>
                <img src="img/pic_4.jpg" >
                <span>喜欢你-G.E.M.邓紫棋</span>
            </li>
            <li>
                <img src="img/pic_5.jpg" >
                <span>老男孩-筷子兄弟</span>
            </li>
        </ul>
    </body>
</html>

(接下来是音乐列表的两个css)

(首先，清除默认样式，便于之后设置)

/* 用并集选择器 */
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,span{
    /* 去掉默认的外边距 */
    margin: 0;
    /* 去掉默认的内边距 */
    padding: 0;
    /* 去掉所有标签的默认字号，统一设定为12px */
    font-size: 12px;
}
ul{
    list-style: none;
}
a{
    /* 超级链接默认颜色为蓝色，文字颜色需要单独设置 */
    color: black;
    /* 去掉超级链接默认的下划线 */
    text-decoration: none;
    /* 改变超级链接的默认字号 */
    font-size: 12px;
}

(接下来，为网页设置需要的样式)

span{
    font-size: 16px;
}
img{
    vertical-align: middle;
    /* 对齐方式：把此元素放置在父元素的中部。*/
    /* 让span中文字与图片中心位置对齐 */
}
li{
    border-bottom: 2px solid #000000;
    /* 设置下边框 */
    height: 100px;
    width: 600px;
    line-height: 95px;
    /* 调节高度,尽量居中 */
    background-image: url(../img/download.gif);
    /* 设置背景图片 */
    background-repeat: no-repeat ;
    /* 设置背景图片填充样式为不填充 */
    background-position: right;
    /* 设置背景图片右中对齐 */
}
ul{
    width: 530px;
    margin: 4px 0px 0px 8px;
}

 

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！