一、html骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--注释--ctrl+/>
</body>
</html>二、标签
1.标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<!-- 标题标签 h1-h6逐渐变小-->
<h1>我是标题</h1>
<h2>我是标题</h2>
</body>
</html>2.段落标签
<!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>
<!-- 段落标签 p 段落间空一行-->
<p>段落</p>
</body>
</html>3.换行标签、水平线标签
<!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>
<!-- 换行标签 -->
<br/>
<!-- 水平线标签 -->
<hr/>
</body>
</html>4.文本格式化标签
<!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>
<!-- 下划线 -->
<ins>身带穷气，一眼便知</ins>
<u>身带穷气，一眼便知</u>
<!-- 删除号 -->
<del>2999</del>
9.9
<s>11.0</s>
11.0
</body>
</html>5.无语义标签
<!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>
<!-- 容器，独占一行 多用于布局-->
<div>
</div>
<!-- span一行可存在多个 -->
<span></span>
</body>
</html>6.图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- src指向图片位置 alt：图片地址发生错误时，用来提示的字
title：鼠标经过时，显示的文字
border：边框
width：宽度
height：高度
-->
<img src="" alt="" title="" width="" height="" border="">
</body>
</html>7.视频标签
<!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>
<!-- controls:控件
autoplay:自动播放
muted:静音播放
poster:等待加载时的显示图片
-->
<video src="" controls="controls" autoplay muted loop>
</body>
</html>8.音频标签
<!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>
<audio src="" controls></audio>
</body>
</html>- <audio> 标签不支持
width/height属性 — 由于其并没有视觉部件，也就没有可以设置width/height的内容。 - 同时也不支持
poster属性 — 同样，没有视觉部件。
9.链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 默认当前窗口打开
href:跳转的位置
target:打开方式 默认_self 新窗口打开_blank
-->
<a href="" target="_blank">去欧鹏</a>
</body>
</html>10.锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#one">个人经历</a>
<!-- id属性 身份证号 -->
<div id="one">个人经历</div>
</body>
</html>11.特殊字符
<!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>
<div>
<!--
  空格
°摄氏度
-->
我最喜欢的大明星是 法外狂徒张三
31°
</div>
</body>
</html>三、列表
1.有序列表
<!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>
<!-- 有序列表 -->
喜欢的食物
<ol>
<li>榴莲</li>
<li>臭豆腐</li>
</body>
</html>2.无序列表
<!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>
你喜欢的明星是?
<ul>
<li>丁真</li>
</body>
</html>3.自定义列表
<!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>
<dl>
<dt>
你们喜欢的明星是?
</dt>
<dd>张三</dd>
<dd>李四</dd>
</body>
</html>四、iframe框架
<!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>
这是我的主页面
<iframe src="https://www.baidu.com" width="900px" height="600px"></iframe>
<a href="https://www.taobao.com" target="nn">去淘宝</a>
<iframe name="nn" width="300px"height="200px"></iframe>
</body>
</html>五、元素显示模式
<!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>
<!-- 元素显示模式
块元素：独占一行 div 宽高、内外边距可以设置
行内元素：一行可以存在多个 span 宽高、内外边距不可以设置
行内块元素：一行可以存在多个 input 宽高、内外边距可以设置
-->
<div></div>
<span></span>
</body>
</html>六、表格
1.表格标签
<!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>
<table>
<!-- 标题 -->
<caption>学生信息</caption>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>民族</td>
<td>政治面貌</td>
</tr>
</tbody>
<!-- 脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计四人</td>
</tr>
</tfoot>
</table>
</body>
</html> 2.表格标签属性
<!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>
<table border="1px" width="900px" height="400px" cellspacing="0">
<!-- 表头
table：border（只控制最外围大小）、width、height（tbody 值是底线，只高不低）、cellspacing（单元格与单元格之间的距离）
caption:通过css更改
thead、tr、tbody、tfoot:height\align(水平)\valign(垂直)
-->
<caption >学生信息</caption>
<thead height="200px" align="center" valign="middle">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="600px" align="center" valign="middle">
<tr height="400px" align="center" valign="middle">
<td>张三</td>
<td>男</td>
<td>18</td>
<td>民族</td>
<td>政治面貌</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计四人</td>
</tr>
</tfoot>
</table>
</body>
</html>3.单元格合并
<!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>
<!--td 跨行：rowspan
跨列：colspan
-->
<table border="1px" width="800px" cellspacing="0">
<!-- 表头 -->
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">张三</td>
<td>男</td>
<td>18</td>
<td>民族</td>
<td>政治面貌</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
<td>民族</td>
<td>政治面貌</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计四人</td>
</tr>
</tfoot>
</table>
</body>
</html>七、details 详情
<!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>
<!-- details：详情标签
配合summary使用
-->
<details>
<summary>有志青年</summary>
我们都是有志青年
</details>
</body>
</html>八、tabindex
<!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>
<!--
tabindex：让本不能tab遍历获取焦点 可以为负数（不获取）、0、正数（优先获取）
-->
<input type="text">
<a herf="#">去百度</a>
<div>我是第一个盒子</div>
<div tabindex="1">我是第2个盒子</div>
<div>我是第3个盒子</div>
<div>我是第4个盒子</div>
</body>
</html>九、表单
1.表单的基本结构
<!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>
<!--表单：网页交互区，收集用户信息
action:将数据交给谁处理
name：必有属性
method：提交方式 ajax
-->
<form action="https://www.baidu.com/s" method="get/post">
<input type="text" name="wd">
<button>提交</button>
</form>
</body>
</html>2.常见的表单元素
<!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="#">
<!-- 文本框 -->
用户名：<input type="text" name="user" value="" placeholder="请输入用户名：" maxlength="4"><br/>
<!-- 密码框 -->
密码：<input type="password" name="pwd">
<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br/>
<!-- 多选框 label标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<input type="checkbox" name="food">吃臭豆腐
<!-- 默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="大海的是啊">
<!-- 确认按钮 -->
<input type="submit">
<button type="submit"></button>
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="提交">
<!-- 文本域 -->
<textarea cols="20" rows="10">
</textarea><br/>
<!-- 下拉菜单 -->
<select name="jiguan" id="">
<option value="南京">南京</option>
<!--下拉菜单的默认选中 -->
<option value="北京" selected>北京</option>
<option value="西安">西安</option>
</select>
</form>
</body>
</html>十、附加
1.html全局属性
<!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>
<!-- id身份证号，在一个页面中只能出现一次 -->
<div id="one"></div>
<!-- class 一类 可以出现多个-->
<div class="pink" style="font-size: medium;">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<div class="pink">我是一个盒子</div>
<!-- accesskey 设置快捷键 -->
<form action="#">
<input type="text" name="a">
<button accesskey="s">提交</button>
</form>
<!-- style -->
<!-- data-*自定义属性 -->
</body>
</html>2.语义标签
<!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>
<div class="head"></div>
<header></header>
<nav></nav>
</body>
</html>3.h5表单
<!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="#">
<!-- 验证时必须添加form表单域 点提交验证表单 -->
<input type="url">
<input type="number">
<button>提交</button>
</form>
</body>
</html>十一、css
1.css体现
<!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>
div{
width:300px;
background-color: pink;
}
</style>
</head>
<body>
<div>我是盒子1</div>
</body>
</html>2.css的三种引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 -->
<link rel="stylesheet" href="./14-样式.css"
<!-- 内部样式 -->
<style>
/* css基本结构
选择器{
属性名：属性值；
属性名：属性值；
}
*/
.box1{
width:300px;
height:300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">我是一个盒子</div>
<!-- 行内样式，不推荐 -->
<div style="width: 300px;height: 300px; background-color: aliceblue;"></div>
<div class="box2">我是box2</div>
</body>
</html>3.选择器
①基本选择器
<!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>
/* 标签选择器 选中所有的p标签*/
p{
color: aqua;
}
/* id选择器 */
#box1{
color: pink;
}
/* 类选择器 */
.box2{
color: blueviolet;
}
/* 通配符选择器 */
*{
background-color:pink;
}
</style>
</head>
<body>
<p>我是一段文字</p>
<p>我是一段文字</p>
<div id="box1">我是一个盒子</div>
<div class="box2">我是一个盒子</div>
</body>
</html>②包含选择器
<!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>
/* 子代选择器 选中亲生儿子*/
.a>li{
background-color: pink;
}
/* 后代选择器 找到后代所有要找的元素*/
.a li{
color: aqua;
}
</style>
</head>
<body>
<div>
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</ul>
</div>
</body>
</html>③复合选择器
<!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>
/* 复合选择器 */
div,
p,
span{
color:red;
}
</style>
</head>
<body>
<div>asdasfaf</div>
<p>safafewaaf</p>
<span>rgewgwq</span>
<ul>
<li>拆的花朵</li>
</ul>
</body>
</html>④属性选择器
<!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>
input[type="password"]{
background-color: aquamarine;
}
div[id]{
width: 200px;
height: 300px;
background-color: black;
}
/* type^="te" 以te开头 */
input[type^="te"]{
background-color: aquamarine;
}
/* type$="l" 以l结尾*/
input[type$="l"]{
background-color: green;
}
/* type*="e" type值里包含e的*/
input[type*="e"]{
background-color: green;
}
</style>
</head>
<body>
<input type="text"> <br/>
<input type="password"> <br/>
<input type="search"> <br/>
<input type="url"> <br/>
<input type="number"> <br/>
<div id="aquamarine">1</div>
</body>
</html>4.字体样式
<!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>
div{
/* 字体大小 */
font-size: 20px;
/* 字体粗细
100-900 400===normal 800==bold 100-900越来越粗
*/
font-weight: 700;
/* 字体是否倾斜 */
font-style:italic;
font-family: "微软雅黑";
font:italic 900 70px "宋体";
}
</style>
</head>
<body>
<div>
我是兔兔小淘气
</div>
</body>
</html>5.首行缩进
<!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>
p{
/* em当前字体大小 */
text-indent: 2em;
font: size 20px;
}
</style>
</head>
<body>
<p>
2023年7月6日至7月8日，世界人工智能大会如期在上海举行。在大会的开幕式上，特斯拉CEO埃隆·马斯克以视频形式发表演讲，带来了他对未来的独特见解和预期。他的言论不仅对人工智能领域产生了深远影响，也揭示了他对机器人发展的宏大愿景。
马斯克表示，现在可能是人类历史上最深刻的一个时期。这个判断来自于他对科技进步的深刻理解，尤其是人工智能的飞速发展。在他眼中，我们正在面对的是一个充满无限可能的未来。
特斯拉公司一直在致力于开发人形机器人。这些机器人不仅具有高度的智能化，而且还有足够的学习和适应能力，可以胜任各种复杂的任务。然而，尽管这些机器人的开发已经取得了显著的进展，但目前仍处于比较早期的阶段。这些机器人未来的发展还有很长的路要走，也需要持续的研发和改进。
</p>
</body>
</html>⑤（结构）伪类选择器
伪类
<!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>
a:link{
color:pink;
}
a:visited{
color:black；
}
/* hover 鼠标悬停 */
a:hover{
/* 鼠标样式 */
cursor:cell;
font-size:40px;
}
/* 长按 */
a:active{
font-size:70px;
}
a:hover+div{
/* 元素消失 */
display: none;
}
</style>
</head>
<body>
<a href="#">去百度</a>
<div> </div>
</body>
</html>结构伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 父元素 子元素：nth-child(n):父元素第n个子元素 -->
<style>
ul li:first-child{
background-color: pink;
}
ul li:last-child{
background-color: green;
}
ul li:nth-child(4){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html><!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>
ul li:nth-child(2){
background-color: pink;
}
ul li:nth-of-type(2){
background-color: green;
}
</style>
</head>
<body>
<ul>
<p>我是一段文字</p>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>⑥伪元素选择器
<!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>
ul li::before{
/* content 必有属性 */
content: "~";
}
ul li::after{
content: "<";
}
/* 表单提示词 */
input::placeholder{
color:red;
}
/* selection 选中时 */
ul li:nth-child(4)::selection {
color: pink;
}
</style>
</head>
<body>
用户名：<input type="text" name="user" value="" placeholder="请输入用户名：" maxlength="4">
<ul>
<li>asfafs</li>
<li>gegsg</li>
<li>asfafs</li>
<li>hdrrhd</li>
</ul>
</body>
</html>6.list
<!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>
/* css具有层叠性，后面的覆盖前面的 */
ul li{
height: 30px;
list-style: none;
list-style: circle;
}
</style>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
</ul>
</body>
</html>7.元素显示模式转换
<!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>
.box{
width: 300px;
height: 300px;
background-color: pink;
}
span{
/* 行内元素无法设置宽高 如需设置转化为行内块元素
display： none；隐藏元素
inline-block行内块
inline行内
block块
*/
display: inline-block;
width: 300px;
height: 300px;
background-color:green;
}
</style>
</head>
<body>
<div class="box">11111</div>
<span>asdasfaf</span>
</body>
</html>8.背景
<!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>
body{
height: 4000px;
background-color: pink;
background-image: url(../day1/image/1688718590174.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background: fixed url(../day1/image/1688718590174.jpg) no-repeat;
}
</style>
</head>
<body>
</body>9.边框
<!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>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 边框宽度 */
border-width: 2px;
border-style:dashed;
border-color: black;
/* 边框弧度 */
border-radius: 5%;
border-top-left-radius: 40%;
}
</style>
</head>
<body>
<div>
我是一个盒子
</div>
</body>
</html>合并相邻边框
<!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>
table{
/* 合并相邻边框 */
border-collapse: collapse;
}
td{
border:5px solid red;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td>asdasfaf</td>
<td>asdasfaf</td>
<td>asdasfaf</td>
</tr>
</table>
</body>
</html>10.阴影
<!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>
div{
width: 300px;
height: 300px;
background-color: pink;
box-shadow: 20px 20px 10px 10px black;
p{
text-shadow:blue -1px -3px;
}
}
</style>
</head>
<body>
<div>
afaefafg
</div><br/>
<p>safagqegf</p>
</body>
</html>11.轮廓线
<!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>
input[type="text"]{
outline: none;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<input type="password" name="" id="">
</body>
</html>12.防拖拽
<!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>
textarea{
/* 防止文本拖拽 */
resize:none;
/* 改变与文字的对齐方式 */
vertical-align:top;
/* vertical-align:middle; */
/* vertical-align:bottom; */
}
</style>
</head>
<body>
<span>请输入个人简历：</span>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>13隐藏元素
<!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>
div{
width: 300px;
height: 300px;
}
.box1{
/* display: none; 脱离文档流 位置不保留 */
display: none;
/* visibility: hidden; 元素隐藏，位置保留 */
visibility: hidden;
/* 可见度 */
opacity: 0;
background-color: pink;
}
.box2{
background-color: green;
}
</style>
</head>
<body>
<div class="box1">111</div>
<div class="box2">111</div>
</body>
</html>14.定位
①绝对定位
<!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>
.grandfather{
width: 1200px;
height: 1200px;
background-color: aquamarine;
}
.father{
position: relative;
width: 600px;
height: 600px;
background-color: pink;
margin: 400px;
}
.son{
/* position: absolute; 绝对定位：不保留原来位置 子绝父相
父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动
如果都没有找到，则相对浏览器进行移动
*/
position: absolute;
top:600px;
left: 500px;
width: 100px;
height: 100px;
background-color:aqua;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>②固定定位
<!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>
body{
height: 4000px;
}
div{
/* 固定定位：相对于可视区域 */
position: fixed;
right: 40px;
top:50%;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
小妲己
</div>
</body>
</html>③粘性定位
<!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>
body{
height: 4000px;
}
.one{
position: sticky;
top:10px;
background-color: pink;
}
</style>
</head>
<body>
<p>
2023年7月6日至7月8日，世界人工智能大会如期在上海举行。在大会的开幕式上，特斯拉CEO埃隆·马斯克以视频形式发表演讲，带来了他对未来的独特见解和预期。他的言论不仅对人工智能领域产生了深远影响，也揭示了他对机器人发展的宏大愿景。</p>
<p class="one">马斯克表示，现在可能是人类历史上最深刻的一个时期。这个判断来自于他对科技进步的深刻理解，尤其是人工智能的飞速发展。在他眼中，我们正在面对的是一个充满无限可能的未来。
特斯拉公司一直在致力于开发人形机器人。这些机器人不仅具有高度的智能化，而且还有足够的学习和适应能力，可以胜任各种复杂的任务。然而，尽管这些机器人的开发已经取得了显著的进展，但目前仍处于比较早期的阶段。这些机器人未来的发展还有很长的路要走，也需要持续的研发和改进。
</p>
</body>
</html>④定位补充
<!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>
.father{
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
}
.son1{
position: absolute;
/* 定位时元素重叠 显示的优先级 数字越大越优先*/
z-index: 5;
top: 100px;
left: 50px;
background-color: aqua;
}
.son2{
position: absolute;
top: 110px;
left:80px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="father">
<div class="son "></div>
<div class="son"></div>
</div>
</body>
</html>15.盒子模型
<!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>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 内边距 */
padding: 4px;
border: 3px solid red;
margin: 50px;
}
</style>
</head>
<body>
<div>
asfasfasfaf
</div>
</body>
</html>①内边距
<!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>
div{
width: 300px;
height: 300px;
background-color: pink;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
/* 全改 */
/* padding: 30px; */
/* 上下 左右 */
/* padding: 30px 50px; */
/* 上 左右 下*/
/* padding: 30px 50px 60px; */
/* 上 右 下 左 */
/* padding: 30px 50px 60px 70px; */
}
</style>
</head>
<body>
<div>asfafaegaegagfedfghsjhfhb fgxcxccccccccccccc cccccccccccccccccccccccc</div>
</body>
</html>②外边距
<!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>
ul li{
list-style: none;
background-color: pink;
margin-bottom: 30px;
}
span{
display: inline-block;
width: 50px;
background-color: pink;
margin-right: 5px;
margin:40px;
margin:40px 30px;
margin:40px;
margin:40px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</body>
</html>③外边距塌陷
<!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>
.father{
width: 800px;
height: 800px;
background-color: aquamarine;
/*第一种 border:1px solid red; */
/*或 padding: 5px; */
}
.son{
width: 100px;
height: 100px;
background-color: pink;
/* margin-bottom: 20px; */
}
.son2{
margin-top: 10px;
}
/* margin塌陷问题 父元素的第一个子元素margin-top值会被父元素抢走
解决方法：
1.给父元素添加边框
2.overflow:hidden
*/
.son1{
margin-top: 300px;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
</body>
</html>④文本溢出
<!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>
div{
width: 800px;
height: 800px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, ipsam porro! Veritatis temporibus, tenetur dolorum cupiditate odit fugiat autem eius explicabo? Nisi explicabo ex praesentium mollitia ab accusantium nesciunt dolor!
Provident ducimus, amet facilis architecto rem perspiciatis, accusamus nulla molestiae suscipit tempore voluptas? Maxime mollitia earum nam a minima iste nisi eius deserunt quae harum officiis magni, nostrum suscipit est!
Laborum delectus non doloremque suscipit dolor, animi ducimus quis ea nulla ullam placeat optio illum ut, at autem perferendis nemo! Similique facere at iste tenetur quaerat, nam deserunt consequuntur optio.
Odit voluptatem, ipsa ullam vitae fugit reiciendis consectetur temporibus quis asperiores facere cumque beatae quae veniam quisquam, officiis totam quos laborum, culpa debitis aspernatur nobis saepe. Ipsum optio numquam suscipit?
Voluptate fuga qui deleniti in adipisci hic atque eaque sequi nemo mollitia! Beatae sapiente magni laboriosam explicabo sunt omnis, consectetur excepturi error neque deleniti eveniet voluptatem, rerum cumque fuga quis.
Odit molestiae inventore aliquam atque! Animi, debitis quas recusandae sapiente quisquam aut? Vitae voluptatibus voluptate repellat provident aut dolore asperiores ipsa, harum voluptas perspiciatis temporibus quos. Accusamus sint consequuntur totam?
Eaque aperiam officiis eius fugit totam harum. Deserunt doloribus quidem rem quisquam culpa hic possimus explicabo aliquid blanditiis minus adipisci quaerat laudantium omnis numquam quasi, pariatur quas eius! Sequi, libero.
Magnam, nostrum corrupti illo expedita aspernatur qui laudantium nulla molestias? Aspernatur quo minus molestias non, saepe, excepturi vel voluptatem itaque expedita quibusdam omnis quae sint vero quasi possimus libero eligendi.
Eius sit fugiat maxime ducimus vel aut, nobis delectus ipsum atque adipisci asperiores, corrupti obcaecati molestiae dolor neque doloremque praesentium fuga non ratione unde earum fugit illo minima eos? Ea.
Dolore, culpa. Perferendis tenetur error nihil perspiciatis at odio sit, magnam culpa voluptas iste repellendus dicta totam sunt nobis ab inventore tempore deserunt delectus voluptate rem, quasi nostrum. Optio, suscipit!
Ab nisi harum quia incidunt eos dicta assumenda officiis voluptatem beatae, labore eligendi nam quibusdam in, facere quod modi aliquam. Placeat quod, quisquam aperiam illo corrupti voluptate iure possimus accusamus.
Perferendis soluta laudantium facilis quo itaque recusandae ab numquam voluptatibus consequuntur corrupti temporibus totam mollitia aut blanditiis, optio magnam, architecto consectetur fuga. Ipsa tempora delectus iusto. Id accusamus hic quod.
Iusto earum eos harum quae eveniet, illo, voluptas cumque nostrum quidem, obcaecati non fuga consectetur dolores blanditiis quod facere itaque cupiditate culpa accusantium architecto neque recusandae velit voluptatibus? Neque, vel?
Asperiores eaque laudantium sint consequatur, laborum nam quia iure impedit sequi autem nulla repellendus amet repudiandae doloremque saepe? Nobis doloremque molestiae obcaecati, impedit eos laudantium ratione voluptates illo at consequuntur!
Excepturi earum rerum quas qui placeat veritatis atque, voluptas ipsum rem quidem officia distinctio dolorum. Autem nisi, ratione et dolore nulla porro debitis eum ab libero, quas nesciunt harum dicta?
Adipisci maxime, ipsum molestiae vitae fugit facilis rerum dolorem, quasi veritatis non quaerat deleniti ea modi corporis cumque architecto porro quo soluta itaque quas autem, beatae laudantium. Sint, ratione error?
Nulla rerum perspiciatis, rem sequi est expedita adipisci consequatur vitae tempora similique ullam? Nostrum id unde sapiente voluptate esse est dolorum facere, consequatur minima ipsum nobis possimus alias corporis odio.
Numquam quisquam architecto, reprehenderit earum perspiciatis est ea animi accusamus quas assumenda doloremque? Quos, sunt delectus eveniet animi optio architecto minus cum incidunt alias, possimus mollitia exercitationem iusto. Modi, totam?
Et minima voluptates beatae quo, mollitia delectus reiciendis enim totam libero neque voluptatum deleniti ipsum assumenda quasi aliquam quae, laborum suscipit inventore qui itaque sed nisi adipisci necessitatibus! Consectetur, quam.
Reprehenderit optio provident quod, distinctio neque quibusdam eaque sequi autem veritatis odio dolorem est quasi vero nobis nulla, voluptas quia numquam assumenda in minima iusto qui officia. Fuga, voluptatem architecto.
Obcaecati exercitationem, rem autem modi expedita explicabo, numquam nam consectetur saepe dolor reprehenderit veniam quisquam magnam consequuntur qui labore ipsam. Cumque tempore commodi excepturi saepe maxime neque accusantium, alias odio?
Nisi eius at hic dicta totam porro sit a debitis incidunt tempora harum optio impedit placeat quis, laboriosam commodi quo adipisci eos voluptatum tempore ratione modi perferendis amet ut. Numquam!
Quo, ab? Qui, sint id ad at earum sed tenetur vero voluptatem, eligendi quisquam optio aspernatur minima sunt a quod dolorum harum unde! Rerum, voluptate libero tenetur cupiditate assumenda sequi.
Suscipit soluta ex eaque sequi veniam, rem, sit nemo laudantium porro velit earum nesciunt architecto, nihil quae! Impedit quidem dolorem libero fugit accusamus blanditiis, iure eos labore, reprehenderit dolores sequi?
Veritatis earum consequatur facilis deleniti. Non minima debitis blanditiis ullam. Nulla sapiente facere maxime ratione vero, perspiciatis nesciunt dicta architecto nihil explicabo aspernatur, nisi, doloremque quos minima odio eligendi culpa.
Recusandae eos unde error pariatur ullam, ad, odit magni at dolorum corrupti similique in ducimus. Repellendus, vitae tempora. Blanditiis, repellendus neque possimus reprehenderit quam explicabo ex impedit sed rem aspernatur!
Sequi velit suscipit non at! Quisquam pariatur culpa beatae quos eveniet? Consequatur facere quasi expedita. Assumenda ab magni vel rem. Sequi doloribus, repudiandae dolorum soluta qui nobis dolor sint inventore?
Tempora dolor dolores nemo dolorem asperiores cupiditate, voluptas illum optio porro quis alias hic earum, voluptatibus enim beatae neque in reprehenderit suscipit odio! Officia ratione alias officiis omnis recusandae dignissimos.
Odio voluptas vel, reprehenderit velit culpa quidem voluptates minima veniam vitae enim impedit voluptatem, consectetur deleniti suscipit quibusdam dolore officia ipsa quisquam. Commodi sapiente quam, aliquam minima repudiandae praesentium excepturi.
Quasi officia aliquid tenetur voluptates quos nobis, culpa voluptatibus temporibus repellat. Quaerat nesciunt esse nobis eveniet architecto fuga temporibus, dolores provident laboriosam dolorum aspernatur natus tempora quod voluptatem! Suscipit, cumque!
Nesciunt nemo harum veniam, tempora earum, dignissimos esse aperiam iure a qui quas est consequuntur? Dolor, non nobis qui eius nesciunt, eligendi rerum expedita at voluptate magnam quisquam quia consequatur.
Officia veniam, nostrum, quo delectus similique magni quisquam id aliquid sint, placeat eum. Consequatur, laborum modi alias repellendus vitae et, voluptas quasi veniam ipsa explicabo recusandae, architecto consectetur natus nostrum.
Nobis consequuntur ut error ratione quasi, fuga iure ullam at. Asperiores, minus amet. Ipsa accusantium recusandae mollitia, quos cupiditate soluta aspernatur, officiis nobis, corporis quasi excepturi delectus odio voluptas facilis.
Provident dicta distinctio totam quo qui quasi magni odio sequi illum pariatur? Expedita corporis reiciendis ab deserunt quas eligendi adipisci dolores dolor pariatur dicta. Voluptatem quos eos magnam assumenda minus!
Itaque perspiciatis distinctio, blanditiis vel dicta quos vitae beatae, id labore reiciendis provident rem numquam placeat vero facilis nisi in, ab autem veniam. Facilis omnis libero dolorem laborum, eos similique?
Aspernatur, id dignissimos! Nihil vitae repellat quis nemo distinctio repellendus consectetur quas nisi quam tempore maxime quos eligendi doloremque esse sit vero in non ad sed, veniam unde sequi totam!
Quibusdam accusantium voluptatibus beatae explicabo soluta officia voluptates eligendi, architecto necessitatibus obcaecati, voluptate rem esse quo enim in eos blanditiis rerum praesentium sapiente eveniet? Nobis fugiat facilis sed minus voluptatibus.
Libero consequuntur perspiciatis voluptate alias sint dolor quam eos doloribus ipsam? Omnis facere possimus dicta saepe praesentium, illum nostrum quo neque enim blanditiis cumque, delectus voluptatibus velit minima quae eligendi!
Dolores quia minima suscipit libero earum nam sed ab, sunt dolore laudantium voluptatibus, placeat tenetur labore nesciunt nulla officiis maiores facere eius voluptate debitis quaerat eaque. Reiciendis nihil esse vitae.
Iusto dignissimos quisquam, impedit atque ullam voluptatem tempora labore consequatur eaque, mollitia, voluptatibus possimus inventore beatae dolore reprehenderit maiores. Excepturi non perferendis placeat, aperiam inventore similique. Fugiat necessitatibus accusamus tenetur.
Explicabo expedita repellat quia unde? Fugit dolorem atque at fuga consequatur debitis placeat, totam ipsam possimus aut vitae aliquam facilis delectus, exercitationem suscipit cum quidem adipisci odit a? Explicabo, nihil?
Soluta corporis impedit, voluptatum dicta dolores in enim pariatur dignissimos quis autem neque ex praesentium et saepe illo eius fugiat culpa repellendus blanditiis. Quia laborum autem nihil in eaque doloribus!
Corrupti, quidem consequatur quisquam non quibusdam minima, voluptatibus eos possimus quos minus odio maiores! Modi esse tempora saepe, tenetur distinctio error doloribus aliquid delectus quos, libero, temporibus magnam corrupti aliquam.
Neque nisi, deserunt excepturi quae repudiandae esse doloribus laborum. At corporis sapiente, libero ab ipsa, mollitia beatae vel quidem maiores vitae officia. Voluptatibus sequi voluptate vero molestiae deserunt doloremque amet.
Quibusdam ea sit, quis hic aperiam consectetur quaerat recusandae, ullam expedita repellat amet illum doloribus dolor temporibus fuga enim voluptate quas velit quisquam corporis aspernatur. Dicta dignissimos dolorum commodi quas.
Modi, dolores voluptas cumque voluptate corrupti mollitia illum eaque perspiciatis porro? Odit eius quam temporibus, facere voluptas velit illum, libero at porro deleniti quas provident nesciunt harum iusto suscipit. Totam?
Architecto sint iste temporibus. Dolores officiis nisi aspernatur temporibus quibusdam, aut corrupti quod natus dolorum non error officia cupiditate esse illo veritatis expedita deleniti omnis libero minus. Autem, a facilis.
Eveniet magnam dolores repellat ipsa eum provident mollitia laboriosam nulla? Eveniet aperiam maiores similique, animi voluptate officia sequi, rem corporis totam architecto nihil possimus nostrum quis sunt quae enim optio.
Suscipit sunt enim facilis esse soluta ratione nobis illum, delectus consectetur dignissimos similique impedit temporibus, nesciunt recusandae, nulla eaque. Delectus expedita nulla enim asperiores ducimus nostrum quia sint fugiat cupiditate.
Ab voluptate ut eius eos in fugit quisquam laboriosam ipsum ratione, consequatur vel corrupti recusandae rerum blanditiis distinctio quos ex hic aspernatur quod. Quod quas sed similique et. Odit, rem!
Qui illo, earum quisquam architecto delectus itaque consequuntur molestias ipsa accusantium aut placeat voluptate, praesentium odio eaque sunt repellat deserunt distinctio dicta nesciunt. Dicta in adipisci eius reiciendis quasi ipsam.
Architecto modi ipsam sed porro aperiam repellendus neque enim magni. Rem libero iste explicabo saepe. Fugit eius perspiciatis consectetur eligendi explicabo labore, repellat neque quas asperiores quasi sint libero. Ipsam!
Deserunt aliquam quod minus magni facilis ex voluptas commodi dignissimos est natus odit dicta recusandae unde voluptate exercitationem quisquam, eum voluptates necessitatibus id? Quos mollitia neque iusto. Aut, tempora incidunt.
Quae enim ut quaerat, cumque, totam voluptas, laudantium hic porro necessitatibus fugiat velit odio saepe debitis. Aut ut, rem deleniti blanditiis eligendi odio, minus voluptatem amet dolore repudiandae, similique repellendus?
Quasi libero nesciunt exercitationem repellat impedit nobis id iure, dicta ullam suscipit enim voluptatem quisquam saepe, nulla ea vero beatae nam, ut officiis distinctio? Veniam quasi incidunt soluta accusantium cumque?
Repellat quod illum ad, praesentium sunt alias nam, dignissimos natus nobis libero, dolorum ducimus soluta nulla reprehenderit itaque deserunt aperiam. Quam ab rerum itaque eaque ut iusto corrupti unde? Aliquid!
Soluta rem adipisci inventore cupiditate fuga eligendi ex id mollitia nemo voluptatum assumenda ratione blanditiis, quo alias illo amet expedita accusantium. Ullam expedita autem sapiente, quaerat cum perspiciatis rerum harum?
Commodi quam consequatur harum laboriosam omnis quisquam fugiat ex obcaecati architecto dignissimos, voluptatibus nemo magni odio magnam quidem error eos in? Suscipit porro maiores id perferendis, nesciunt amet quos placeat.
Laboriosam, modi nesciunt! Quis tempora maiores possimus velit ex officiis corporis perferendis laboriosam quam, facilis libero qui doloremque doloribus quae harum voluptatem atque debitis quo dolores sunt nihil in! Et.
Neque modi praesentium quam dolores laborum provident adipisci dolore iste et, assumenda vel rerum tempora sed quod quasi earum necessitatibus a ex atque explicabo. Nam, enim. Eveniet in officiis fuga.
Quas ipsam ex iusto illo rem consequatur sint repellendus expedita blanditiis corrupti, reiciendis et pariatur alias, odio nesciunt doloribus consequuntur nemo. Temporibus in id fugiat dolor facilis, explicabo error odit.
Placeat, quasi illum. Accusantium beatae maiores quasi perspiciatis, repudiandae dolore commodi quod dicta rerum atque reprehenderit corrupti amet, voluptas est nihil ipsum ad saepe magnam? Ullam architecto molestias nesciunt adipisci.
Similique, quasi eaque! Velit molestias deserunt nisi! Nesciunt eveniet, nemo tempore sunt autem magni culpa, fugiat officiis porro tempora ipsum. Rerum, magnam a exercitationem molestias nobis modi vero tempore natus.
Quis eligendi soluta in laborum assumenda molestias vero, reprehenderit dolorum. Tenetur hic molestiae asperiores qui. Sed ducimus in accusantium accusamus adipisci magni dolores, architecto dicta ipsum nostrum. Doloribus, dolorem odio.
Laboriosam autem saepe id eum possimus, sequi enim. Itaque, cum! Ea delectus praesentium voluptates facilis suscipit ab at quam beatae, est magni cumque nihil deserunt, odio quis nesciunt fuga. Expedita.
Exercitationem dignissimos sit officia officiis. Dignissimos corrupti sunt sed ipsam culpa saepe est at officia illo omnis, sint reiciendis ea doloribus mollitia ab id veritatis ratione maiores impedit libero debitis.
Unde repellendus maiores molestias sit, ab, explicabo quam ipsa libero impedit saepe officia nemo corrupti aperiam cum eveniet iure earum omnis quod delectus illo excepturi, assumenda laudantium. Illo, et fugiat.
Illo voluptates nesciunt, tempore harum beatae dignissimos, possimus delectus vel dolorem eligendi facilis? Repellendus iusto, odit expedita culpa rem distinctio. Labore, quis. Consectetur saepe eaque et quibusdam dicta excepturi dolorem.
Natus dicta nam exercitationem incidunt officiis necessitatibus architecto illo ratione magni aliquid officia tenetur aliquam libero, ducimus consectetur consequuntur quam voluptatibus atque assumenda at alias neque reprehenderit. Voluptates, mollitia laudantium.
Laudantium, neque quaerat sit nulla, molestias labore eveniet eum explicabo nihil odio atque? Assumenda optio illum omnis sit quae, commodi dolore doloribus molestias? Saepe laborum vitae commodi sapiente rerum praesentium.
Ipsa doloremque quidem fugiat alias magnam ratione cum repellendus explicabo, maxime aliquam delectus qui recusandae nesciunt quaerat velit nobis eius obcaecati aut dolores distinctio minus quae quas eveniet! Voluptatibus, aliquid.
Voluptatem, aliquid nisi. In omnis consequuntur, explicabo assumenda quas hic eligendi sint eius nemo? Quod placeat veritatis numquam unde at pariatur soluta maxime omnis dolor! Ab totam nemo in rem!
Architecto modi dignissimos rerum omnis at quae! Distinctio beatae molestias reprehenderit, labore quia laudantium quos deleniti eligendi eveniet expedita, temporibus similique id. Quidem, omnis consectetur vitae sequi adipisci aut? Quasi!
Dolorem odio dolore impedit quod quos molestiae aliquam, eligendi architecto vitae pariatur exercitationem ipsam doloremque excepturi aut deserunt distinctio, sit repellat facilis cumque tenetur asperiores maiores. Quam, maiores distinctio! Ea!
Ex unde sapiente adipisci blanditiis eius, provident a illum sunt voluptas, quis officia quasi! Aliquam culpa accusantium, laborum cumque nostrum quis explicabo molestiae perferendis iste ad ut aliquid natus ipsum?
Dolor accusamus labore minima, soluta, pariatur obcaecati eveniet culpa cupiditate totam, non deserunt nam blanditiis. Corporis, tempore amet, iure ipsum nulla eum doloremque quod placeat, quisquam iste vero eligendi molestias.
Quisquam neque eaque maiores a nostrum quam ex maxime eveniet reprehenderit ipsum similique beatae sed obcaecati, mollitia id, exercitationem laudantium assumenda? Maiores esse amet similique quasi repellat perferendis quam vel.
Soluta ratione autem eius consequuntur minima sit, maxime eligendi nulla dolorum quisquam dolorem tempora, voluptatibus distinctio! Provident impedit doloremque perspiciatis pariatur, itaque aliquam sequi aut blanditiis, incidunt obcaecati repellendus laboriosam?
Aliquid tenetur similique soluta vel earum quas molestiae. At, dolor cum aliquid in nihil debitis architecto accusamus, minima explicabo, ipsa suscipit culpa deserunt libero? Ea omnis sapiente voluptatibus optio molestias.
Obcaecati nihil adipisci quibusdam nesciunt culpa ratione voluptatibus placeat vero odit, aspernatur nulla. Asperiores itaque voluptate necessitatibus sit quam laudantium ex nulla doloribus. Atque explicabo doloribus laborum illum at tempore.
Dolore ipsam deserunt, ex commodi cumque neque at mollitia aspernatur cum numquam perspiciatis facere veniam blanditiis nisi dolores error eius nam soluta officiis facilis exercitationem, molestiae illum! Laborum, quae corporis.
Odit aperiam voluptas voluptatem, iure totam cum, illo magnam fugit illum quia voluptatibus obcaecati temporibus earum amet veniam error possimus ipsum consequatur ratione vel. Ex dolorum unde cumque exercitationem aliquid?
Aperiam quam exercitationem saepe libero laudantium esse rem cupiditate magnam veritatis architecto quis eligendi pariatur voluptatum voluptas minus quas quia itaque eum facilis amet, placeat ratione quasi autem? Dignissimos, reiciendis.
Similique animi illo at nisi inventore enim numquam reprehenderit! Doloribus unde quis voluptatem animi amet nisi quasi veniam quo culpa reiciendis quaerat et officiis excepturi, rerum, placeat sed fugiat asperiores.
Harum explicabo praesentium quae totam sit pariatur repellendus, alias eum incidunt assumenda nobis expedita veniam tenetur rerum molestias! Voluptatibus animi quae tempora accusamus eos iusto non sequi asperiores, maiores dicta.
Magnam repudiandae architecto cupiditate quia, veniam unde consectetur excepturi exercitationem doloribus enim alias explicabo asperiores cumque quas magni aspernatur dicta officia? Beatae optio praesentium impedit, rem ipsam perferendis sequi voluptatum?
Neque, soluta amet. Ab quis accusamus aperiam, suscipit necessitatibus commodi praesentium minima. Dicta in est inventore at qui ut fugiat temporibus corrupti ipsum, excepturi, explicabo officia rem libero quisquam beatae!
Libero accusamus deserunt minima cumque ad repudiandae aliquid possimus ex repellat doloremque corporis, esse assumenda, eos nesciunt. Provident porro beatae iusto mollitia omnis fugit, sed commodi, asperiores tempora deleniti incidunt?
Commodi, error inventore quibusdam voluptatum ratione tempore nisi dolor, accusantium explicabo illum exercitationem et blanditiis voluptatibus laboriosam? Temporibus, eius doloribus! Possimus architecto aliquid corporis asperiores cumque dolores accusamus obcaecati labore.
Ab beatae, adipisci architecto optio debitis voluptatem harum accusantium omnis porro dolorum! Assumenda totam at magni quod consequatur, accusantium ex repudiandae voluptate voluptatem provident rerum odio delectus. Sit, impedit asperiores!
Maiores neque quae inventore quam ab. Natus fugiat quis architecto distinctio maiores? Odio delectus blanditiis, adipisci in eveniet rerum sed voluptas non veritatis alias maiores atque, necessitatibus aut eaque inventore?
Quisquam excepturi nam debitis reprehenderit quasi modi, quis eos. Quidem, quam dignissimos. Repudiandae, vel sint culpa quasi voluptatibus recusandae tempore nesciunt ratione? Tempore cupiditate, praesentium officia nam ducimus dolor distinctio!
Tenetur a atque deserunt excepturi. Officia impedit optio illum cupiditate reprehenderit vel ab atque est ad inventore corrupti, dolorem, beatae mollitia, saepe ducimus? Iure nobis fugit deleniti optio aperiam ea.
Dolore beatae nulla, vero ducimus laboriosam recusandae quas repellat praesentium perspiciatis obcaecati distinctio aperiam officiis. Cum placeat culpa quisquam in laudantium sed reiciendis veritatis delectus? Unde nostrum laborum esse sapiente.
Odit ipsum consequuntur nobis, fuga quas dolores, consequatur debitis exercitationem eum consectetur facilis, nihil vel optio cupiditate earum reprehenderit? Atque voluptatum cumque quibusdam alias dolore. Optio mollitia doloremque nostrum id.
Provident debitis minima eius tenetur, inventore aliquid in fugit. Libero reprehenderit exercitationem minima ullam praesentium deserunt consectetur quisquam cumque excepturi, similique quae aut dolorem asperiores optio odio quam deleniti blanditiis!
Ea ullam cum recusandae consectetur accusantium aliquid saepe. Porro modi explicabo totam perspiciatis accusantium magnam necessitatibus numquam quia libero? Eveniet alias recusandae sequi vero labore corporis laudantium necessitatibus aperiam neque?
Minima laborum saepe officia quas minus rem dolor sequi accusamus ab exercitationem et omnis eum, ducimus reiciendis optio. Minus excepturi ut doloribus distinctio, odit quia mollitia molestiae optio dicta cupiditate!
Temporibus et est maxime impedit provident doloribus sint amet eius, pariatur reprehenderit quasi harum! Recusandae dolore similique exercitationem ut autem, laudantium, dolor dolores dignissimos eveniet nemo illum amet, porro dolorem!
Quos quam possimus repudiandae minus cum, perferendis ex autem sapiente at animi ducimus, debitis ratione laudantium est eveniet totam voluptate placeat ipsa, assumenda itaque voluptas doloribus eum exercitationem. Cumque, ex.
</div>
</body>
</html>⑤样式继承
<!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>
a{
text-decoration: none;
}
/* div,
div span,
div a{
font-size: 40px;
} */
div{
font-size: 50px;
color:aliceblue;
padding: 13px;
}
</style>
<!-- css样式的继承性
不是所有样式都继承，只有改变之后对布局无影响的
a链接最好在自身更改样式
-->
</head>
<body>
<div>
safagihighf<br>
<span>我暑假是发发发</span><br>
<a href="#">gsddhdfghg</a>
</div>
</body>
</html>⑥解决padding影响盒子大小问题
<!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>
div{
width: 300px;
height: 300px;
background-color: pink;
padding: 40px;
border:2px solid rebeccapurple;
/* 解决padding border影响盒子问题 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fuga laborum, est maiores velit nulla repellendus nam porro itaque quibusdam, architecto dolore iure consequatur cupiditate, vitae beatae dolor corrupti. Ab!
</div>
</body>
</html>⑦默认内外边距
<!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>
hfjhjcviyf
</body>
</html>16.flex布局
<!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>
.father{
width: 800px;
height: 800px;
background-color: pink;
display: flex;
/* 排列方式 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
/* 让flex布局变为多行 */
flex-wrap: wrap;
/* 主轴上的布局 */
justify-content: center;
justify-content: end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
/* 侧轴上的布局 */
align-items: center;
align-items: end;
align-items: start;
align-content: start;
align-content: space-around;
}
.son{
width: 170px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">1</div>
<div class="son">1</div>
<div class="son">1</div>
<div class="son">1</div>
<div class="son">1</div>
<div class="son">1</div>
<div class="son">1</div>
<div class="son">1</div>
</div>
</body>
</html><!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>
.father{
display: flex;
width: 800px;
height: 800px;
background-color:aqua;
}
.son{
width: 300px;
background-color: pink;
}
/* /* .son1{
flex: 1;
} */
.son2{
flex: 1;
/*order 值越小，排列在越靠前 */
order:-3;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son">1</div>
<div class="son2 son">2</div>
<div class="son3 son">3</div>
</div>
</body>
</html>17.浮动
<!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>
</style>
</head>
<body>
<img src="../day3/images/images/code.jpg" alt="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem saepe, dolorum ad corporis voluptates, nemo provident nobis vel enim accusantium ducimus in corrupti nam soluta, nostrum sint animi architecto labore?
Saepe eveniet, tempore dolores aperiam sunt laborum nostrum tempora debitis aut ut voluptatibus voluptatum deserunt adipisci labore quas dolorum, laudantium maxime consequuntur, minima ab illum veniam repellat numquam porro? Placeat!
Quas tempore est, nemo illum non sint beatae inventore quis, quae iste, laboriosam debitis esse aperiam magnam amet! Consequuntur sint nihil, temporibus voluptas error atque exercitationem molestiae dignissimos quam sunt.
Expedita minima laborum minus, et consectetur rem praesentium ipsa quia veniam! Corporis, rerum minima fugit aut iure expedita aliquid in blanditiis doloribus, aperiam similique cumque veritatis ut accusamus eligendi ad.
Illum necessitatibus ex cupiditate tempore. Ad adipisci facere expedita, aliquid fuga sequi exercitationem rerum vel repellendus maiores vero fugit in est consequuntur earum eaque porro alias sed? Pariatur, saepe nulla!
Cum expedita accusantium consequatur soluta facilis ipsum. Illum tempore impedit velit iusto ratione obcaecati necessitatibus maxime ipsam, laudantium, recusandae dicta, perferendis in eaque. Sequi illum harum, reiciendis ab cum nulla?
Suscipit debitis nam exercitationem sequi? Dicta animi labore maxime numquam aperiam. Aspernatur ad quae deleniti harum, eius odio voluptatibus reiciendis cupiditate quaerat dignissimos asperiores dicta recusandae accusantium iure temporibus maxime?
Iste odio placeat voluptatem accusamus, consequatur voluptatum voluptates esse! Dolorum doloremque beatae sunt totam, ratione natus fugit omnis sapiente quod, laborum libero optio molestias quaerat illo consectetur ab minus possimus.
Sed optio numquam aliquid in ratione quos veritatis, suscipit esse, illo deleniti voluptate repellat cum maiores atque reiciendis error nobis doloremque? Itaque sit ducimus, enim et qui deleniti quae! Cumque.
Velit quidem ad, alias, veritatis nemo fugiat, earum mollitia voluptates saepe voluptatibus reiciendis atque magni facere corporis hic necessitatibus consectetur fuga sequi perspiciatis nesciunt beatae ab! Odit nobis perspiciatis placeat?
Accusamus illum cum rem asperiores est in ipsam hic blanditiis libero, aliquam beatae delectus aliquid dolore architecto ipsum saepe quia quis incidunt sint soluta. Minus laborum at quam vitae illo?
Et, illo commodi debitis ratione fugit error vel tenetur numquam dicta quae tempora voluptatibus repellendus quisquam eligendi deleniti assumenda dignissimos dolor accusamus provident beatae delectus sapiente, nulla libero sed? Non.
Est vitae, officiis culpa esse sequi eveniet nulla error ratione reiciendis eligendi dicta sit quam in, atque veniam ipsa distinctio. Eos doloribus ipsa, adipisci cumque asperiores quidem qui corporis dolorum!
Doloribus illum soluta, nisi sit enim praesentium rem exercitationem, voluptas laboriosam optio nulla, architecto voluptate? Accusantium voluptas sunt nobis explicabo hic quasi consequatur error aperiam repellendus dolorem reiciendis, accusamus labore.
Sed sint earum, accusantium velit odio beatae quasi, eligendi magni provident obcaecati ex illo dolores aspernatur nam facere distinctio molestias culpa praesentium alias saepe enim animi repudiandae atque dignissimos! Vel.
Ratione dolores quidem quod quasi ab, iure totam? Facere sit quas quae reiciendis, numquam itaque libero? Neque eveniet debitis aspernatur rerum, delectus, velit laudantium provident nesciunt possimus, sed quis eos.
Minima accusantium quasi atque minus ducimus magni in veniam perspiciatis! Id ipsum culpa mollitia nostrum earum natus ratione tempore optio? Ipsum quas perferendis sapiente facere accusamus, incidunt qui distinctio quod.
Repellendus mollitia fugiat nulla. In aliquam eos eveniet quia, cumque nisi debitis assumenda minima neque accusamus facilis expedita sunt velit officiis quasi possimus inventore, vero laboriosam eius, excepturi cum perspiciatis.
Aliquid, inventore mollitia. Sunt, placeat? Facere quam nobis fugit facilis nam reprehenderit similique possimus aut eos suscipit numquam, neque nesciunt voluptatum natus reiciendis debitis pariatur quia, quisquam tempore molestiae excepturi.
Vel quis quae dignissimos sed, incidunt voluptatem obcaecati, repellendus minus aspernatur provident laudantium rem tempore officia asperiores? Laborum sit, sapiente doloremque provident dignissimos, maiores quis aliquam qui obcaecati officiis facilis.
Nisi, voluptate dolorem inventore consequuntur libero iusto ex totam ab rem doloribus quas laborum quo, reiciendis quisquam excepturi? Dolor nostrum quasi reprehenderit soluta ipsa sint ratione? Quis provident totam corporis!
Aperiam sequi cum ex debitis delectus repellendus quos praesentium error cumque cupiditate inventore eos tenetur laborum tempora, numquam eius natus dolorum nobis at, aliquid deleniti! Magni doloribus cum distinctio quas?
Quae vitae facilis voluptatibus illo est, quam labore nesciunt nostrum, nulla reiciendis consequuntur ut reprehenderit ullam. Molestiae, maiores. Nobis quam sapiente soluta delectus minima asperiores expedita facere voluptatum dolorum iusto!
Officia, hic placeat. Reiciendis rem reprehenderit voluptatum! Dolorum soluta, cum culpa adipisci odio veniam iste mollitia sequi repellendus labore dicta dolores aliquam eaque id animi consequuntur eius eum ea officia.
Iure reprehenderit, deserunt veritatis distinctio quas cum architecto at exercitationem fugiat autem voluptatibus nemo tempora. Numquam eveniet repellat, quo hic ipsum iusto ratione officia, suscipit labore aspernatur, distinctio doloribus eos?
Expedita amet, doloremque praesentium tempora consequuntur eius animi. Animi, fugiat nemo temporibus non excepturi, ipsa inventore libero blanditiis maiores sunt repellendus totam natus iusto provident doloribus facilis aspernatur maxime. Odio.
Consectetur ex voluptate quaerat eos odio aut tempore deleniti error non. Delectus dolor iure quos laborum illum ratione natus ducimus doloribus harum soluta. Ad, dolores delectus at quo commodi perferendis?
Consectetur error odit veritatis? Dicta aperiam illo quod quo harum quam eius inventore, officiis nesciunt assumenda optio voluptatibus quidem quis laborum temporibus possimus natus molestias porro omnis, dolores dignissimos magnam?
Commodi adipisci nam maxime excepturi, saepe natus soluta velit, rem explicabo aut nostrum placeat quibusdam necessitatibus aliquam enim repudiandae aliquid obcaecati repellat ea quod similique animi corporis eaque quo. Dicta.
Maiores doloribus sit vel, aspernatur, obcaecati similique illo quasi debitis quaerat hic modi consequatur accusamus porro est? Laudantium cum mollitia adipisci aliquid! Eaque dolore at ea consequatur dolorum placeat commodi!
Voluptas nam est dolor, dolore doloribus eos voluptatem corporis blanditiis molestias nisi eaque molestiae cupiditate doloremque error eius, impedit quasi ea facere excepturi, iure omnis ipsum rem rerum. Delectus, laudantium?
Doloremque autem nesciunt suscipit iste itaque facere maiores laborum deserunt? Provident sint asperiores error alias quidem, recusandae optio explicabo saepe voluptatum consequuntur? Sit hic eos saepe quos facere iusto labore!
Ea deleniti necessitatibus iste atque sit recusandae reiciendis dolor quis omnis cum maxime unde, temporibus eos assumenda, fugit sunt porro asperiores quidem dolorem ab a velit veniam. Deserunt, voluptatum sequi!
Eum corporis voluptatum alias quasi natus, eius rerum repellat id nam odit ducimus libero totam sequi cum. Ut obcaecati quisquam assumenda molestias perferendis, explicabo non dolor harum asperiores ipsa. Cumque?
Doloribus dolore tempore adipisci recusandae possimus dignissimos quo veniam? Ipsa, officia maiores vitae voluptate modi ut cumque asperiores quod maxime, voluptatem rem! Ipsum hic minima a molestias id corrupti animi?
Quasi sapiente nobis deserunt molestias quis mollitia dolorum libero nam obcaecati vero, illum nisi voluptates, explicabo tempore. Mollitia ea consequuntur ad totam accusantium, fuga vitae fugit quaerat laudantium deleniti voluptas.
Tenetur impedit hic saepe, facilis omnis aperiam inventore velit ipsam? Neque explicabo natus temporibus officiis obcaecati labore, necessitatibus, maxime, quaerat fugit voluptates inventore aliquam suscipit iusto? Nisi tempora commodi aliquam?
Recusandae dignissimos accusamus ut modi assumenda fugit delectus enim quaerat iusto obcaecati, temporibus amet qui voluptatum quia vero corporis, ipsa dolorem. Inventore consectetur quibusdam, aliquam quasi sint omnis illum accusantium!
Exercitationem aliquam illo amet quo ab corrupti. Voluptatibus praesentium accusantium aliquid quasi, aliquam modi assumenda consequatur ipsa nihil quo corporis eligendi ab temporibus ratione recusandae odio non voluptas, sunt excepturi?
Blanditiis, recusandae. Suscipit sapiente velit eveniet explicabo quasi, ratione fugiat iure sequi voluptatem? Dolor quaerat deleniti ullam nihil vitae sit qui necessitatibus, voluptates obcaecati, maiores quis veritatis saepe quisquam inventore?
Autem eveniet ipsam debitis doloribus qui. Molestias esse mollitia maxime iusto quos nesciunt doloribus saepe similique voluptatum quidem cumque excepturi animi, recusandae, dicta iure perferendis reiciendis quia quibusdam possimus nihil.
Ipsum, sit inventore. Corrupti excepturi voluptatibus eligendi officia quisquam, sequi tempora tenetur minus ad facere reiciendis? Veniam tempora a, ea incidunt dolorum, officiis voluptate, dicta deserunt quos eaque porro perspiciatis.
Itaque optio explicabo cupiditate totam ratione quod qui voluptas natus ducimus aspernatur, ipsam expedita repudiandae excepturi quibusdam nam, ex fugit corporis est sequi voluptatem vitae accusantium. Qui tenetur molestiae vero.
Laborum odio aspernatur fugiat incidunt modi eum tempora error molestias ex nemo cum delectus, culpa, labore non iure, alias ab. Repudiandae eveniet harum libero labore sint ex pariatur ad magni.
Pariatur quas rerum tenetur excepturi deserunt ab quia suscipit dolores molestiae mollitia voluptatum, eum magni, aliquam consequuntur velit. Vel temporibus illo ipsam repellendus at expedita eaque doloribus id voluptatibus sed.
Est animi praesentium consectetur eius quae ipsam minus ad quo laboriosam unde hic amet sit deleniti molestias, architecto quos doloremque omnis expedita recusandae perspiciatis deserunt? Iure libero animi similique expedita!
Dolores reiciendis minus quasi repudiandae harum! Maxime, hic, aperiam odio explicabo obcaecati eius adipisci facere placeat fugiat cupiditate rem at consequatur iusto provident molestiae dignissimos? Veritatis alias nemo odit iste!
Illo nostrum facere facilis laborum modi quo itaque soluta impedit dignissimos aliquam earum dolorem optio, cum enim dicta vitae placeat accusamus praesentium magnam velit ipsam. Optio ducimus hic aliquam amet!
Consectetur, quod! Eius quo quod culpa dolores nihil ea quia sunt cum saepe rerum nam reprehenderit, illum fuga! Tempore, reiciendis quibusdam. Obcaecati reprehenderit repellendus velit praesentium expedita vel, odit distinctio?
Neque molestiae impedit, nostrum optio nam recusandae, rem amet repudiandae ratione magni perspiciatis modi accusamus deleniti ipsa? Vero officiis dolor voluptate aliquid veniam, aperiam, architecto repudiandae animi repellat natus quaerat!
Soluta, rem doloremque! Aliquam voluptatibus repellat consequuntur cumque iste provident nihil modi asperiores nesciunt perspiciatis laborum et officia necessitatibus ipsum error rem debitis, earum deleniti, explicabo laboriosam. Harum, dolorum aliquam.
Fugit voluptas dolor harum, commodi aperiam dolore qui dignissimos iusto, ullam et doloremque rem id velit ipsam illum itaque minima provident vitae totam sint aut quod! Amet, cum. Quasi, sapiente.
Repudiandae veritatis deserunt dolore ad. Maiores nemo quaerat totam, voluptatum consequuntur iure praesentium id ab voluptate dignissimos qui amet at, nam blanditiis tempore est. Doloremque soluta suscipit minus dolorem nostrum!
Vitae vero, tempora in, nobis repellendus aut esse aliquam voluptates voluptate nemo debitis eos dicta et, voluptatem sed. Non adipisci, ad illo maxime rerum placeat autem pariatur assumenda iure beatae.
Vel reprehenderit odit consectetur debitis tenetur vitae error quibusdam ipsum magnam recusandae eaque tempora blanditiis autem nemo eveniet non assumenda explicabo suscipit, consequuntur impedit reiciendis aspernatur maiores. Vero, nobis blanditiis.
Qui vero veritatis, ea ipsa exercitationem facere. Ea iste cumque reiciendis placeat quia provident quaerat cupiditate, a explicabo dolores facere officia blanditiis, atque vel. Maxime, consectetur explicabo? Sunt, debitis ducimus!
Ut, debitis. Dolorum sequi magnam earum asperiores sint temporibus voluptas totam, in, corrupti eveniet molestias incidunt, fugiat tempore accusantium nihil consequatur recusandae placeat magni inventore quos quisquam quas quia labore?
Deserunt amet accusamus porro obcaecati quibusdam placeat eligendi, excepturi commodi tenetur fuga enim quas, non totam rem eveniet! Aperiam sapiente pariatur repellat autem fuga rem, consectetur exercitationem temporibus! Quod, ipsam?
Quod, quae magnam aperiam, rem nam inventore placeat illum, in autem delectus dolores totam ratione dolorum nesciunt architecto. Doloribus architecto nisi assumenda distinctio quos eum veritatis rerum nam culpa dolor.
Harum quod vero doloremque distinctio unde aperiam pariatur fuga hic provident ratione quis earum ipsa doloribus facere quo facilis a excepturi nihil ullam, quas perspiciatis explicabo iste! Libero, cum nostrum.
Ipsum, tenetur dignissimos facere officiis consectetur ea corporis enim aliquid aut voluptate amet eius in sequi aperiam velit id voluptatibus ullam! Distinctio harum, dolore aut fugit quam dolores ratione libero.
Mollitia eveniet cumque deserunt aliquid molestiae nostrum perferendis voluptate ad suscipit, est iste nobis ab necessitatibus eum, exercitationem magni asperiores aperiam debitis repellat quia! Veritatis id ducimus error deleniti consequatur.
Reiciendis placeat nam voluptatem, in velit harum laborum repellendus inventore, nisi impedit earum alias veniam possimus nulla aspernatur molestiae cumque magnam cum modi? Voluptatem aliquam explicabo earum vitae nesciunt vero?
Aut inventore totam perferendis mollitia animi eligendi dolores. Accusamus ab itaque molestias, doloremque at quaerat hic provident doloribus sit repellat quae nisi, ipsum incidunt illum sunt earum dolore commodi nesciunt!
Repellendus voluptatum ducimus mollitia itaque voluptatem voluptate maxime quibusdam minus iure sunt recusandae sint inventore ipsam in distinctio dolore commodi animi neque suscipit quis dicta fugit sed, deleniti aspernatur! Sint.
Voluptate commodi nobis qui voluptas ipsa recusandae maiores, pariatur autem. Adipisci saepe, obcaecati repudiandae voluptate beatae aliquid dolore minus, voluptatum neque sed dicta pariatur architecto distinctio ipsam natus qui! Dolores!
Natus quam esse autem! Hic aut inventore, accusantium doloremque consectetur molestiae iure molestias quam deleniti ad placeat itaque earum? Laborum nobis, corrupti nesciunt quos laboriosam corporis ipsa perferendis minima suscipit!
Iste esse atque minus, officiis suscipit consectetur labore debitis impedit perspiciatis nostrum vero optio ex in corrupti incidunt, doloribus aliquam eum a. Amet dolorum cupiditate omnis suscipit laudantium, nihil at.
Aperiam voluptatibus ab nihil ipsum, doloremque illo perspiciatis? Exercitationem delectus necessitatibus minus rem, tempora totam adipisci expedita. Amet, quo quos. Esse autem quos placeat explicabo optio, quas nostrum repellendus ex!
Pariatur beatae ab id earum? Exercitationem error expedita, praesentium atque est tempora, magnam dolores voluptatibus recusandae maiores iusto, facilis libero dolore autem? Quis ipsam explicabo porro fugit nobis doloribus sint?
Et iure ipsam architecto ad veniam dolore dignissimos officiis, commodi ex vero vel soluta, distinctio tenetur aperiam magnam ullam dolorum ea sapiente provident quos quasi natus. In nesciunt facilis voluptates.
Perferendis atque cum culpa error quibusdam corporis quisquam deserunt debitis vero iste! Fuga dolor sunt a repellendus, eligendi itaque est saepe odio qui aspernatur aliquid, repudiandae doloremque repellat iusto veritatis!
Iste, voluptas sapiente placeat rerum nihil ut et veniam iusto architecto in quos vitae necessitatibus facilis illo aperiam consequatur, voluptatibus ipsa! Corporis cupiditate quam quis non quidem modi praesentium saepe.
Consequuntur rem nesciunt facere sunt obcaecati atque explicabo. Ratione esse fuga itaque modi, officia in consequatur ex, corporis sequi voluptas ipsa minima laboriosam ipsum sint iste! Provident incidunt sed veritatis!
In reprehenderit id distinctio error. Quod quaerat cumque nulla aut nostrum ullam rerum aperiam esse vitae soluta voluptatem non illo aliquam porro nemo est assumenda, dicta excepturi optio inventore debitis.
Voluptatibus fugiat iusto deleniti ducimus facilis. Corporis officiis a et voluptate suscipit repellendus dolorum laborum repellat magni ducimus nesciunt, quis enim labore, doloremque autem rerum provident. Assumenda ipsam dignissimos impedit.
Tempore voluptate quas in aspernatur rem natus voluptatibus quo, tempora a beatae nesciunt possimus aperiam praesentium quis! Dignissimos, accusantium! Amet voluptate necessitatibus voluptates ipsam dolorem, provident alias soluta vero deleniti.
Similique, delectus libero. Optio, provident accusantium. Aliquid temporibus exercitationem aliquam reprehenderit eligendi eaque culpa eveniet impedit voluptatem, laborum ullam tempore error ut adipisci eius hic earum tempora sit? Saepe, maxime.
Minima perferendis doloremque facilis nam ut nihil ab accusantium reprehenderit hic aliquam perspiciatis, ducimus id mollitia rem expedita, ipsa quaerat quas aperiam? Reiciendis nulla debitis corporis assumenda, quia temporibus saepe!
Reiciendis tempora corrupti consequatur asperiores maiores nostrum vero repudiandae, iste exercitationem cupiditate quis earum esse quam illum a eligendi quibusdam quae molestiae unde placeat fuga vel? Quas doloremque dolorum laudantium.
Error est, quis cum vel officia eum illo. Aperiam animi dolores voluptas obcaecati accusantium suscipit quod nostrum eum repellendus repellat nihil impedit atque consectetur, quae eligendi tempora perferendis laudantium blanditiis!
Beatae asperiores omnis cupiditate vel facere autem. Possimus at laudantium accusamus deserunt maiores architecto obcaecati quam libero atque, tenetur perferendis quasi eos ea, quod maxime. Aliquam debitis tempore nulla inventore!
Id temporibus eveniet corporis. Maiores optio incidunt perferendis porro ipsam quasi architecto, asperiores alias voluptate, vitae suscipit culpa similique possimus exercitationem a totam quod delectus consequatur libero eaque officia? Doloremque?
Ut aliquam dolorem eaque numquam nostrum, tempora eligendi temporibus totam error odio alias ullam quae nulla rem culpa ipsam laboriosam saepe iusto. Impedit debitis expedita reprehenderit possimus odio obcaecati laboriosam?
Vero eligendi nemo quasi pariatur quidem a id tenetur, ab aspernatur quam consequuntur inventore maiores, possimus ipsam ullam ex vitae autem sit numquam excepturi sequi temporibus quae. Quod, a nihil.
Illo ipsa, voluptate autem animi, assumenda itaque modi dolores ipsam veritatis repellat mollitia, blanditiis deserunt quaerat? Obcaecati similique rem voluptates quasi perferendis quos quo, ducimus quis, soluta temporibus quibusdam vitae.
Accusamus est nostrum fugit modi nesciunt ipsa, magnam voluptatibus magni error, in quidem aspernatur nisi tempore obcaecati dolores eum amet excepturi autem cumque qui sit hic maxime exercitationem dolorum. Sequi.
Veritatis aperiam eos labore dolorem tempore ullam nesciunt odio repudiandae similique consequatur excepturi veniam ex, numquam accusantium blanditiis voluptate, dolores quas quae placeat cumque sunt omnis libero voluptatem! Earum, explicabo.
Error mollitia exercitationem eaque quam non sed dolorem assumenda, voluptate nobis inventore nisi in totam id, vitae commodi rem minus enim veritatis aperiam cumque qui. Perferendis qui officia delectus velit?
Nemo, cupiditate itaque, velit accusamus repudiandae ducimus facere provident hic dolorem atque minus reprehenderit sit voluptatem, ullam officia sint perspiciatis natus. Eveniet, architecto necessitatibus quos autem aliquam eum? Consectetur, itaque!
Fuga sint repellat quis similique commodi aspernatur facilis, explicabo nobis nostrum! Perspiciatis tempora recusandae voluptates iste. Recusandae doloremque iste provident cupiditate, hic unde voluptas illum enim vel earum, soluta impedit.
Ipsam ducimus aliquid corporis tempore, aut corrupti veritatis reprehenderit ad esse architecto consequuntur tempora laboriosam nisi nostrum, animi veniam ratione recusandae iste ipsa nobis vero deleniti amet quaerat saepe. Cum!
Deleniti ullam repellendus incidunt porro maiores, aliquid cupiditate quod dolore aspernatur accusamus similique veritatis tempora sunt debitis placeat, harum assumenda nesciunt facere ipsam itaque nemo ex cum sequi! Error, praesentium.
Velit quas explicabo unde id facilis perspiciatis provident distinctio animi voluptate quos eveniet praesentium placeat libero exercitationem quidem laborum reprehenderit, voluptatum dolorum fugiat cupiditate natus similique. Maiores harum quod incidunt?
Qui id magni, velit voluptas veritatis excepturi aperiam numquam cumque officia cum! Ab perspiciatis explicabo a quis commodi perferendis facere neque ullam molestiae reiciendis iste, recusandae fugit aperiam at distinctio?
Officiis alias repudiandae pariatur quos sit adipisci, sint suscipit id laboriosam vel ducimus rem doloremque recusandae fuga! Qui labore quidem veritatis assumenda atque itaque tempore quibusdam, a ullam porro reiciendis?
Quam iusto maiores eveniet sit? In consequuntur minima cupiditate et quidem eos distinctio dolore harum nisi odit provident tempore optio tenetur quaerat, nobis expedita atque voluptatum animi quo voluptatem! Commodi!
Laudantium voluptatibus animi fugiat officiis, perferendis quis vero consectetur accusantium a aut iusto architecto cupiditate aliquid, ut incidunt mollitia, eaque possimus. Architecto repellendus perspiciatis illum voluptatibus vel tempora laborum excepturi.
Porro sequi doloremque itaque deserunt quod consequatur blanditiis quam praesentium accusantium, mollitia cumque ullam neque ratione ducimus quae nulla in commodi ipsum, at nostrum officiis libero quibusdam? Pariatur, quaerat dignissimos!
Exercitationem atque voluptas totam ut? Delectus praesentium et, non minus officia cupiditate unde deserunt consequuntur vero aliquid? Assumenda dolor nostrum totam error id magni, ex sunt explicabo maxime reiciendis molestiae?
</body>
</html>①float讲解
<!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>
.father{
width: 1000px;
height: 1000px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color: aqua;
}
.son2{
background-color: blue;
float: left;
/* 浮动会脱离文档流 不再保留原来位置
会造成在其下方的兄弟元素位置发生变化 */
/* 当子元素发生浮动时 其父元素的高度发生塌陷 脱离文档流 无法将父元素撑开*/
}
.son3{
width: 400px;
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
<div class="son son3"></div>
</div>
</body>
</html>②floa问题解决办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
ul{
height: 300px;
}
ul li{
float:left;
list-style: none;
margin-right: 20px;
}
div{
/* 清除浮动 */
clear: both;
}
</style>
</head>
<body>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<div></div>
<p>我不想动位置</p>
</ul>
</body>
</html>18.渐变
<!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>
div{
width: 400px;
height: 800px;
background-image: linear-gradient(green,pink);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>19.字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./图标/iconfont.css">
<style>
span{
color:pink;
font-size: 40px;
}
.xe6b6{
font: size 400px;
}
</style>
</head>
<body>
<span class="iconfont" xe6b6></span>
</body>
</html>20.媒体查询
<!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>
div{
background-color: pink;
}
@media only screen and(min-width: 320px){
div{
background-color:green;
}
}
</style>
</head>
<body>
<div>asfasfasfaf</div>
</body>
</html>21.转换
①2d
<!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>
.father{
width: 300px;
height: 300px;
border:1px solid black;
margin: 0 auto;
}
.son{
width: 300px;
height: 300px;
background-color: pink;
/* 平移 */
transform: translate(40px, 40px);
transform: translateX(70px);
transform: translateY(-60px);
/* 旋转 */
transform: rotateZ(40deg);
/* 符合写法 旋转永远放在最后 */
transform: translate(100px) rotateZ(45deg);
/*缩放 */
transform: scale(2);
transform: scaleX(3);
transform: scaleY(1.5);
}
</style>
</head>
<div class="father">
<div class="son"></div>
</div>
<body>
</body>
</html>②3d
<!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>
.father{
width: 300px;
height: 300px;
border: 1px auto;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px;更改观察点 */
}
.son{
width: 300px;
height: 300px;
background-color: pink;
transform: translateZ(200px);
transform: rotateX(45deg);
transform: rotate(1, 1 ,30deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">
22222
</div>
</div>
</body>
</html>③过渡
<!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>
.father{
width: 300px;
height: 300px;
border: 1px auto;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px;更改观察点 */
}
.son{
transition: 5s;
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(200px); */
/* transform: rotateX(45deg); */
/* transform: rotate(1, 1 ,30deg); */
}
.son:hover{
transform: rotateX(45deg);
/* width: 200px; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">
22222
</div>
</div>
</body>
</html>④动画
<!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>
@keyframes myMovie{
from{
width: 200px;
background-color: pink;
}
to{
width: 800px;
background-color: aqua;
}
}
div{
width: 200px;
height: 50px;
background-color: aqua;
/* infinite 循环
alternate 反向 */
animation: myMovie 5s linear 2s infinite alternate;
}
</style>
</head>
<body>
<div>
asfasfasfaf
</div>
</body>
</html>
扫一扫
1532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
