表单表格的小练习与rem的使用

最新推荐文章于 2023-06-27 21:45:00 发布

junlingshiwo

最新推荐文章于 2023-06-27 21:45:00 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/weixin_45722135/article/details/106043099

版权

一:remd的使用

1:rem(font size of the element)是指相对于根元素的字体大小单位。一旦根节点 html定义的 fine-size变化，那么整个网页用到rem的也会随之变化。

2:看上图用相同颜色的箭头和线段标记的. 两个box调整它的大小位置，就用根节点html来定义的;我用的是1rem=10px,这样是为了好计算。

3:黄色的箭头与线段就是对文本大小的改变。直接可以在<style>中完成,设置文本rem .

二：表格表单的练习：

学习这就是为搭建登录页面，

为的就是创建登录页面，这图中像性别我们使用：

<select>
    <option value="男">男</option>
    <option value="女">女</option>
</select>

像图中创建新用户使用了：

对表格表单就小小的练习，下面是自己敲的代码，可以欣赏下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #app{
            margin: 50px auto;
            width: 600px;
        }
        fieldset{
            border: 1px solid orangered;
            margin-bottom: 20px;
        }
        fieldset input{
            height: 30px;
            width: 200px;
            margin: 10px 0;
        }
        table{
            width: 100%;
            border: 2px solid orangered;
            text-align: center;
        }
        table thead{
            background-color: orangered;
            color: #fff;
        }
        table tr{
            line-height: 40px;
        }

    </style>
</head>
<body>
<div id="app">
    <!--第一部分-->
    <!--分组名称-->
    <fieldset>
        <legend>撩课学生录入系统</legend>
        <div>
            <span>姓名：</span>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div>
            <span>年龄：</span>
            <input type="number" placeholder="请输入年龄">
        </div>
        <div>
            <span>性别：</span>
            <select>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <span>手机：</span>
            <input type="text" placeholder="请输入手机号码">
        </div>
        <input type="submit" value="创建新用户">
    </fieldset>
    <!--第二部分-->
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>周杰伦</td>
            <td>男</td>
            <td>35</td>
            <td>1883779899</td>
            <td>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td>周杰伦</td>
            <td>男</td>
            <td>35</td>
            <td>1883779899</td>
            <td>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td>周杰伦</td>
            <td>男</td>
            <td>35</td>
            <td>1883779899</td>
            <td>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td>周杰伦</td>
            <td>男</td>
            <td>35</td>
            <td>1883779899</td>
            <td>
                <button>删除</button>
            </td>
        </tr>
        </tbody>
    </table>

</div>
</body>
</html>

第四天，加油！ 70——71