学习前端第二天（布局和表单）

Klix

已于 2022-07-13 12:17:19 修改

阅读量205

点赞数

分类专栏：暑假学前端文章标签：前端学习

于 2022-07-13 00:40:37 首次发布

本文链接：https://blog.csdn.net/a16696747377/article/details/125754999

版权

暑假学前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

布局

浮动定位：将元素排除在普通流，且不占据页面空间！浮动元素位于在包含框内，且位于包含框的左边或者右边。

语法：float：none|left|right

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>myDiv</title>
    </head>
    <body>
        <div style="background-color: antiquewhite; height: 100px; width: 500px;"></div>
        <div>
            <div style="background-color: saddlebrown; height: 200px; width: 250px;float: left;"></div>
            <div style="background-color: rgb(156, 108, 201); height: 200px; width: 250px;float: left;"></div>
        </div>
        <div style="background-color: rgb(14, 2, 26); height: 200px;clear: both; width: 250px;"></div>
    </body>
</html>

运行效果：

代码中共有3个大的div,第二个div里又有两个子div，这两个子div进行了浮动定位。

第三个div的属性里有一个 clear:both，如果不设置这个，第三个div的起始位置会在第二个div那一行，因为float定位（浮动定位）会脱离文档流，不占据页面空间。

设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响

表单

<!DOCTYPE html>
<html>
    <hea>
        <meta charset="utf-8">
        <title>klix</title>
    </head>

    <body>
        <!-- 表单默认提交方式为get -->
        <form method="GET">
            Username:<input type="text" name="user"><br>
            Password:<input type="password" name="pass"><br>
            <!-- 单选框,name要一致 -->
            <input type="radio" name="sex" value="male">男<br>      
            <input type="radio" name="sex" value="female">女<br>
            <!-- 复选框，name要一致 -->
            <input type="checkbox" name="jiaotong" value="zixingce">自行车<br>
            <input type="checkbox" name="jiaotong" value="汽车">汽车<br>
            <!-- 下拉框 -->
            <select name="cars">
                <option value="">无</option>
                <option value="比亚迪">比亚迪</option>
                <option value="大众">大众</option>
                <option value="北京现代">北京现代</option>
            </select>
            <br>
            <!-- 提交 -->
            <input type="submit" value="submit">
        </form>
    </body>
</html>

Klix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端第二天（布局和表单）

浮动定位(float)：将元素排除在普通流，且不占据页面空间！浮动元素位于在包含框内，且位于包含框的左边或者右边。设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响.........
复制链接

扫一扫