day07前端学习html与css

最新推荐文章于 2023-12-25 14:12:41 发布

残·影

最新推荐文章于 2023-12-25 14:12:41 发布

阅读量340

点赞数

分类专栏： # 前端

原文链接：https://www.jianshu.com/p/d9373a86b748/

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

弹性盒子布局

本部分笔记参考别人的笔记，为转载，原地址：https://www.jianshu.com/p/d9373a86b748/

	display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。
	是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。
	目前，它已经得到了所有浏览器的支持。
	Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
	设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

在这里插入图片描述

弹性盒子模型布局一大优点就是会把整个区域内所有的div都对齐，会把下边框拉到同一个水平
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> 
        div#contener{
            display: flex;
            width: 960px;
            text-align: center;
        }
        #contener>div{
            border: 1px solid #aaaaff;
            box-sizing: border-box;
            padding: 5px;
        }
        div#contener2{
            width: 960px;
            overflow: hidden;
        }
        #contener2>div{
            border: 1px solid #aaaaff;
            box-sizing: border-box;
            padding: 5px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="contener">
        <div style="width: 220px;">
            <h1>我是第一个div</h1>
            <h1>我最瘦</h1>
        </div>
        <div style="width: 500px;">
            <h1>我是第二个div</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
        </div>
        <div style="width: 240px;">
            <h1>我是第三个div</h1>
            <h1>我最帅</h1>
            <h1>我最帅</h1>
            <h1>我最帅</h1>
            <h1>我最帅</h1>
        </div>
    </div>
    <div id="contener2">
        <div style="width: 220px;">
            <h1>我是第一个div</h1>
            <h1>我最瘦</h1>
        </div>
        <div style="width: 500px;">
            <h1>我是第二个div</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
            <h1>我最胖</h1>
        </div>
        <div style="width: 240px;">
            <h1>我是第三个div</h1>
            <h1>我最帅</h1>
            <h1>我最帅</h1>
            <h1>我最帅</h1>
            <h1>我最帅</h1>
        </div>
    </div>
</body>
</html>

效果图示：
在这里插入图片描述
上半部分为弹性盒子布局，下半部分为浮动布局

flex的六个属性

一、flex-direction 容器内元素的排列方向(默认横向排列)

在这里插入图片描述
1：flex-direction:row; 沿水平主轴让元素从左向右排列

2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

3：flex-direction:row-reverse;沿水平主轴让元素从右向左排列
在这里插入图片描述

二、flex-wrap 容器内元素的换行(默认不换行)

1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
在这里插入图片描述

三、justify-content 元素在主轴（页面）上的排列

1：justify-content : center;元素在主轴（页面）上居中排列。空白会均匀放到两侧
在这里插入图片描述
2：justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列，空白放到右边

3.justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列，空白放到左边

4：justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列，空白放到元素中间
在这里插入图片描述
5：justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。空白放到元素两侧

四、align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

1：align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
在这里插入图片描述
2：align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

3：align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

1536043373(1).png

4：align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）尽量靠上对齐，但是以内容的第一行下侧为基准线，而不是上面的边
在这里插入图片描述

五：stretch：拉伸子元素，让它们占满父容器
在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div#container{
            border: 2px solid red;
            padding: 5px;
            width: 600px;
            height: 600px;
            display: flex;

        }
        div>div{
            border: 1px solid #aaf;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div style=" font-size:15px">栏目一</div>
        <div style=" font-size:25px">栏目二</div>
        <div style=" font-size:35px">栏目三</div>
    </div>
    <button οnclick="change(this.innerHTML);">flex-start</button>
    <button οnclick="change(this.innerHTML);">flex-end</button>
    <button οnclick="change(this.innerHTML);">center</button>
    <button οnclick="change(this.innerHTML);">baseline</button>
    <button οnclick="change(this.innerHTML);">stretch</button>
    <script type="text/javascript">
        function change(val){
            document.getElementById('container').style.alignItems=val;
        }
    </script>
</body>
</html>

四、align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

1：align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。

1536046493(1).png

2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

1536046542(1).png

3:align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

1536046654(1).png

4:align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。

1536046771(1).png

5:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

1536046899(1).png

6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。

1536047051(1).png

补充

在这里插入图片描述

意义：把除了三个div之外的剩余空白部分分成六份，分给栏目一一份，栏目二两份，栏目三三份。

html中form表单

在这里插入图片描述

input标签

在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="www.baidu.com">
        单行文本框: <input type="text" id="username" name="username"><br>
        不能编辑的文本框：<input type="text" id="username2" name="username" readonly="readonly"><br>
        密码框：<input type="password" name="password" id="password"><br>
        隐藏域：<input type="hidden" id="hidden" name="hidden"><br>
        第一组单选框：<br>
        红：<input  id="color" name="color" type="radio" value="red">
        绿：<input type="radio" id="color2" name="color" value="green">
        蓝：<input type="radio" name="color" id="color3" value="blue"><br>
        第二组单选框: <br>
        男性： <input type="radio" name="gender" id="gender" value="male">
        女性： <input type="radio" name="gender" id="gender2" value="female">
        <br>
        两个复选框：<br>
        <input type="checkbox" name="website" id="website" value="leegang.org">
        
        <input type="checkbox" name="website" id="website2" value="crazyit.org">
        <br>
        文件上传域: <input type="file" name="file" id="file"><br>
        图像域：<input type="image" src="index1.jpg" alt="疯狂java联盟" width="27" height="31">
        <br>
        下面是四个按钮<br>
        <input type="submit" name="ok" id="ok" value="提交">
        <input type="submit" name="dis" id="dis" value="提交" disabled>
        <input type="reset" name="cancel" id="cancel" value="重填">
        <input type="button" name="no" id="no" value="无动作">
    </form>
</body>
</html>

代码效果
在这里插入图片描述

label标签

在这里插入图片描述
当鼠标点击文本框前面的文字的时候，文本框会获得焦点，用户体验更好

button标签

在这里插入图片描述

select标签与option标签

在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="GET">
        下面是简单下拉菜单：<br>
        <select name="skills" id="skills">
            <option value="java">java语言</option>
            <option value="c">C语言</option>
            <option value="ruby">Ruby语言</option>
        </select>
        <br>
        <br>
        <br>
        下面是允许多选的列表框：<br>
        <!-- size表示一次性显示出几个来  -->
        <!-- multiple表示是单选下拉列表还是多选列表框  -->
        <select name="books" id="books" multiple="multiple" size="4">
            <option value="java"> 疯狂java讲义</option>
            <option value="android">疯狂Android讲义</option>
            <option value="ee">轻量级javaEE企业应用实战</option>
        </select><br>
        下面是允许多选的列表框：<br>
        <select name="leegang" id="leegang" multiple size="2">
            <optgroup label="疯狂java体系图书">
                <option value="java">疯狂java讲义</option>
                <option value="android">疯狂Android讲义</option>
                <option value="ee">轻量级javaEE企业应用实战</option>
            </optgroup>
            <optgroup label="其他图书">
                <option value="struts">Struts 2.1权威指南</option>
                <option value="ror">ror敏捷开发最佳实践</option>
            </optgroup>
        </select><br>
        <button type="submit">
            <b>提交</b>
        </button>
        <br>
    </form>
</body>
</html>

效果图
在这里插入图片描述

textarea标签

在这里插入图片描述

fieldset与legend

在这里插入图片描述

代码示例：

<form action="" method="GET">
        <fieldset>
            <legend>基本信息</legend>
            用户名: <input type="text" id="username" name="username"><br>
            密码：<input type="password" name="password" id="password"><br>
        </fieldset>
        <fieldset>
            <legend>附加信息</legend>
            身高: <input type="text" id="height" name="height"><br>
            出生地: <input type="text" id="birth" name="birth"><br>
            毕业学校: <input type="text" id="school" name="school"><br>
        </fieldset>
        <input type="submit" value="提交" id="ok" name="ok">
        <br>
    </form>

效果图示：
在这里插入图片描述

html新增form属性

在这里插入图片描述

formaction属性

在这里插入图片描述
使用该属性不用给form加action，给提交按钮单独加即可

formxxx属性

在这里插入图片描述

autofocus属性

自动获得焦点属性
在这里插入图片描述

placeholder属性

文本框提示语
在这里插入图片描述

list属性

在这里插入图片描述
代码实现：

<form action="" method="POST">
        请输入图书：<input type="text" name="name" list="books">
        <input type="submit" value="购买">
    </form>
    <datalist id="books">
        <option value="java">疯狂java讲义</option>
        <option value="ee">轻量级javaEE企业应用实战</option>
        <option value="android">疯狂Android讲义</option>
    </datalist>

效果图示：
在这里插入图片描述

自动完成属性：autocomplete属性

在这里插入图片描述

label的control属性

在这里插入图片描述

h5新增的input元素

在这里插入图片描述

meter属性

在这里插入图片描述

使用校验属性进行校验

指定某文本框必须填写，符合什么格式等等，日期，价格在什么范围之内
在这里插入图片描述

代码实现：

	
	<form action="" method="POST">
        图书名:<input type="text" name="name" required><br>
        图书ISBN:<input type="text" name="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}"><br>
        图书价格：<input type="number" value="" name="price" min="20" max="150" step="5">
        <input type="submit" value="购买">
    </form>

效果图示：
在这里插入图片描述

调用checkValidity方法进行校验

用js来实现弹窗提示输入错误
在这里插入图片描述

代码实现：

<form action="" method="POST">
        生日:<input type="date" name="birth" id="birth"><br>
        邮件地址:<input type="email" name="email" id="email"><br>
        <input type="submit" value="提交" οnclick="return check();">
    </form>
    <script type="text/javascript">
        var check =function(){
            return commonCheck("birth","生日","字段必须是有效日期！") && commonCheck("email","邮件地址","字段必须符合电子邮件的格式！");
        }
        var commonCheck =function(field,fieldName,tip){
            var targetEle = document.getElementById(field);
            if(targetEle.value.trim() == ""){
                alert(fieldName+"字段必须填写！");
                return false;
            }
            else if (!targetEle.checkValidity()){
                alert(fieldName+tip);
                return false;
            }
            return true;
        }
    </script>

效果图示：
在这里插入图片描述

自定义错误提示

在这里插入图片描述

代码实现：

	<form action="" method="POST">
        图书名:<input type="text" name="name" id="name" required><br>
        图书ISBN:<input type="text" name="isbn" id="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}"><br>
        图书价格：<input type="number" value="" id="price" name="price" min="20" max="150" step="5">
        <input type="submit" value="购买" οnclick="check();">
    </form>
    <script type="text/javascript">
        var check = function(){
            if (!document.getElementById("name").checkValidity()) {
                document.getElementById("name").setCustomValidity("图书名是必填的！");
            }
            if (!document.getElementById("isbn").checkValidity()) {
                document.getElementById("isbn").setCustomValidity("图书ISBN必须填写，"+"\n而且必须符合xxx-x-xxx-xxxxx的格式（其中x代表数字）。");
            }
            if (!document.getElementById("price").checkValidity()) {
                document.getElementById("price").setCustomValidity("图书价格必须填写，"+"\n而且必须在20-150之间，且是5的倍数。");
            }
        };
    </script>

效果图示：
在这里插入图片描述

关闭校验

在这里插入图片描述

使用audio和video属性

在这里插入图片描述

残·影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day07前端学习html与css

弹性盒子布局本部分笔记参考别人的笔记，为转载，原地址：https://www.jianshu.com/p/d9373a86b748/ display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"...
复制链接

扫一扫