A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 不二晨 金牌黑马   /  2019-1-18 09:52  /  535 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

完善

子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素
使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠

解决父子元素的外边距重叠
                .box1:before{
                        content: "";
                        display:table可以将一个元素设置为表格显示
                        display: table;
                }
解决父元素高度塌陷
                .clearfix:after{
                        content: "";
                        display: block;
                        clear: both;
                }


<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>完善clearfix</title>
        <style type="text/css">
                .box1{
                        width: 300px;
                        height: 300px;
                        background-color: #bfa;
                }
                .box2{
                        width: 200px;
                        height: 200px;
                        background-color: yellow;
                        /*
                        子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素
                        使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠
                        */
                        margin-top: 100px;
                }
                .box3{
                        border: 10px red solid;
                }
                .box4{
                        width: 100px;
                        height: 100px;
                        background-color: blue;
                        float: left;
                }
                /*解决父子元素的外边距重叠*/
                /*.box1:before{
                        content: "";*/
                        /*display:table可以将一个元素设置为表格显示*/
                        /*display: table;
                }*/
                /*解决父元素高度塌陷*/
                /*.clearfix:after{
                        content: "";
                        display: block;
                        clear: both;
                }*/

                /*
                经过修改后的clearfix是一个多功能的样式,既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠
                */
                .clearfix:before,
                .clearfix:after{
                        content: "";
                        display: table;
                        clear: both;
                }
                .clearfix{
                        zoom: 1;
                }
        </style>
</head>
<body>
        <div class="box3 clearfix">
                <div class="box4"></div>
        </div>

        <div class="box1 clearfix">
                <div class="box2"></div>
        </div>
</body>
</html>

表单

表单的作用就是用来将用户信息提交给服务器的
        比如:百度的搜索框 注册 登录这些操作都需要填写表单

        使用form标签创建一个表单
                form标签中必须指定一个action属性,该属性指向的是一个服务器的地址
                当我们提交表单时将会提交到action属性对应的地址

设置请求方式:method="post"
需要上传文件时要加属性: enctype="multipart/form-data"

使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项
在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中

在fieldset可以使用legend子标签,来指定组名

使用input来创建一个文本框,它的type属性是text
如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name属性
name表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
格式:
        属性名=属性值&属性名=属性值&属性名=属性值&……
        在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示
        在html中还为我们提供了一个专门用来选中表单中的提示文字的label标签
        该标签可以指定一个for属性,该属性的值需要指定一个表单项的id值

value是默认值,
                提示信息用:placeholder="用户名/邮箱/手机号"
                autocomplete="off"不保存缓存记录

密码框
                使用input创建一个密码框,它的type属性值是password

单选按钮
                        - 使用input来创建一个单选按钮,它的type属性使用radio
                        - 单选按钮通过name属性进行分组,name属性相同是一组按钮
                        - 像这种需要用户选择但是不需要用户直接填写内容的表单项,还必须指定一个value属性,这样被选中的表单项的value属性值将会最终提交给服务器

                        如果希望在单选按钮或者是多选框中指定默认选中的选项,则可以在希望选中的项中添加checked="checked"属性

多选框
                        - 使用input创建一个多选框,它的type属性使用checkbox

下拉列表
                - 使用select来创建一个下拉列表
                下拉列表的name属性需要指定给select,而value属性需要指定给option
                可以通过在option中添加selected="selected"来将选项设置为默认选中
                当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表

在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字

在下拉列表中使用option标签来创建一个一个列表项

提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮,它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字

<input type="reset">可以创建一个重置按钮,点击重置按钮以后表单中内容将会恢复为默认值

使用input type=button可以用来创建一个单纯的按钮,这个按钮没有任何功能,只能被点击

除了使用input,也可以使用button标签来创建按钮
这种方式和使用input类似,只不过由于它是成对出现的标签,使用起来更加的灵活

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

        </style>
        <script type="text/javascript">
                /*
                window.onload = function(){
                        var qq = document.getElementById('qq');
                        qq.onfocus = function(){
                                this.placeholder='';
                        }
                        qq.onblur = function(){
                                if(qq.value == ""){
                                        this.placeholder='邮箱/手机号/QQ号';
                                }
                        }
                }
                */
        </script>
</head>
<body>
        <!--
        表单的作用就是用来将用户信息提交给服务器的
        比如:百度的搜索框 注册 登录这些操作都需要填写表单

        使用form标签创建一个表单
                form标签中必须指定一个action属性,该属性指向的是一个服务器的地址
                当我们提交表单时将会提交到action属性对应的地址
         -->
        <!--  设置请求方式:method="post" -->
        <!--  需要上传文件时要加属性: enctype="multipart/form-data" -->
        <form action="demo075_target.html">
                <!--
                使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项
                -->

                <!--
                在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中
                -->
                <fieldset>
                        <!-- 在fieldset可以使用legend子标签,来指定组名 -->
                        <legend>用户信息</legend>

                        <!--
                        使用input来创建一个文本框,它的type属性是text
                                如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name属性
                                name表示提交内容的名字

                        用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
                                url地址?查询字符串
                        格式:
                                属性名=属性值&属性名=属性值&属性名=属性值&……
                        在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示
                         -->
                        <!--
                        在html中还为我们提供了一个专门用来选中表单中的提示文字的label标签
                        该标签可以指定一个for属性,该属性的值需要指定一个表单项的id值
                         -->
                        <label for="um">用户名</label>
                        <!--
                                value是默认值,
                                提示信息用:placeholder="用户名/邮箱/手机号"
                                autocomplete="off"不保存缓存记录
                         -->
                        <input id="um" type="text" name="username" value="我是value" autocomplete="off"><br><br>
                        <label for="qq">账号</label>
                        <input id="qq" type="text" name="loginName" placeholder="邮箱/手机号/QQ号"><br><br>

                        <!--
                        密码框
                                使用input创建一个密码框,它的type属性值是password
                         -->
                        <label for="pwd">密码</label>
                        <input id="pwd" type="password" name="password"><br><br>

                       
                </fieldset>

                <fieldset>
                        <legend>用户爱好</legend>

                        <!--
                        单选按钮
                                - 使用input来创建一个单选按钮,它的type属性使用radio
                                - 单选按钮通过name属性进行分组,name属性相同是一组按钮
                                - 像这种需要用户选择但是不需要用户直接填写内容的表单项,还必须指定一个value属性,这样被选中的表单项的value属性值将会最终提交给服务器

                                如果希望在单选按钮或者是多选框中指定默认选中的选项,则可以在希望选中的项中添加checked="checked"属性
                         -->
                        性别<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
                                <input type="radio" name="gender" value="female" checked="checked" id="female"><label for="female">女</label>
                                <br><br>

                        <!--
                        多选框
                                - 使用input创建一个多选框,它的type属性使用checkbox
                         -->
                        爱好<input type="checkbox" name="hobby" value="zq">足球
                                <input type="checkbox" name="hobby" value="lq">篮球
                                <input type="checkbox" name="hobby" value="ymq" checked="checked">羽毛球
                                <input type="checkbox" name="hobby" value="ppq" checked="checked">乒乓球
                                <br><br>
                </fieldset>
                <!--
                下拉列表
                        - 使用select来创建一个下拉列表
                        下拉列表的name属性需要指定给select,而value属性需要指定给option

                        可以通过在option中添加selected="selected"来将选项设置为默认选中

                        当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表
                 -->
                你喜欢的明星
                <select name="start">
                        <!--
                        在select中可以使用optgroup对选项进行分组
                        同一个optgroup中的选项是一组
                        可以通过label属性来指定分组的名字
                         -->
                        <optgroup label="女明星">
                                <!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
                                <option value="fbb">范冰冰</option>
                                <option value="lxr">林心如</option>
                                <option value="zw">赵薇</option>
                        </optgroup>
                        <optgroup label="男明星">
                                <option value="zbs" selected="selected">赵本山</option>
                                <option value="ldh">刘德华</option>
                                <option value="zjl">周杰伦</option>
                        </optgroup>
                </select>
                <br><br>

                <!-- 使用textarea创建一个文本域 -->
                自我介绍<textarea name="info"></textarea>
                <br><br>

                <!--
                提交按钮可以将表单中的信息提交给服务器
                使用input创建一个提交按钮,它的type属性值是submit
                在提交按钮中可以通过value属性来指定按钮上的文字
                -->
                <input type="submit" value="注册" />

                <!-- <input type="reset">可以创建一个重置按钮,点击重置按钮以后表单中内容将会恢复为默认值 -->
                <input type="reset">

                <!-- 使用input type=button可以用来创建一个单纯的按钮,这个按钮没有任何功能,只能被点击 -->
                <input type="button" value="按钮">
                <br><br>

                <!--
                除了使用input,也可以使用button标签来创建按钮
                这种方式和使用input类似,只不过由于它是成对出现的标签,使用起来更加的灵活
                 -->
                <button type="submit">提交</button>
                <button type="reset">重置</button>
                <button type="button">按钮</button>
        </form>
</body>
</html>
---------------------
【转载,仅作分享,侵删】
作者:YRyr.*
原文:https://blog.csdn.net/weixin_43152725/article/details/85537811


2 个回复

倒序浏览
奈斯,感谢分享
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马