简述
前端内容：
1. HTML
2. CSS
3. JavaScript
学习计划：
1. HTML + CSS
2. JavaScript
3. jQuery和Bootstrap(Vue)
- 今日内容
HTML
C/S --> B/S (基于浏览器做业务)FTP: "PUT|sexart.avi|2014" ---> 同理浏览器作为一个客户端和服务端通信也要遵循一个协议（HTTP）
HTML本质上就是一个规则。
学习HTML主要学习标签。
HTML标签的分类：
1. 块儿级标签 默认独占一行（整个浏览器的宽度） 可以设置长和高
2. 行内标签（内联标签） 长度由自己的内容来决定的。无法设置长和高HTML嵌套的规则：
1. 块儿级标签可以嵌套行内标签 （div标签可以嵌套div标签）
2. p标签不能嵌套div标签form表单系列：
注意事项：
1. form 不是 from
2. input标签 必须要带一个name属性
3. 如果form里面有文件提交的话 必须加一个属性：enctype="multipart/form-data"， 同时使用post方式提交
4. 提交按钮必须是input标签 1. text 2. password 3. submit 4. radio 5. checkbox 6. file select下拉框 1. 普通下拉框 2. 多选下拉框 multiple 3. 分组的下拉框 optgroup textarea (大段文本)
- CSS（改变网页的外观效果）
前提
如何在HTML文件中使用（引入）CSS？
三种方式
1. 直接在标签里通过style属性来定义CSS样式
2. 在head标签中通过 style来定义
3. 把样式（CSS）文件单独写在一个.css文件中，然后通过 link标签来与HTML文件建立联系CSS语法：
选择器 {
样式1：值1;
样式2：值2;
...
}找标签
CSS选择器
1. 基本查找
1. 标签选择器 （改所有/设置默认样式）
2. ID选择器 （针对某一个特定的标签修改样式）
3. 类选择器 (根据需求修改某一类标签的样式)
2. 通用（全选）
1. *
3. 组合选择器(HTML标签的层级关系)
1. 后代选择器 （从x的子子孙孙找y标签）--> x y
2. 儿子选择器 (x的儿子y标签) --> x>y
3. 毗邻选择器 (紧挨在x下面的y标签) --> x+y
4. 弟弟选择器 (下面所有的xx标签) --> x~y↑上面常用 4. 属性选择器 更多用于找input[type="text"] 5. 分组和嵌套 1. 分组 （减少重复的CSS样式代码） 逗号分隔的两个选择器 2. 上面的选择器都支持混搭使用 6. 伪类选择器 1. div:hover { color: red;} 7. 伪元素选择器 1. p:before {} 在内容前面加 2. p:after {} 在内容后面加CSS选择器的优先级：
0. 继承的优先级最低
1. 当选择器相同的时候，谁靠近标签谁样式生效
2. 当选择器不同的时候，我们按照权重计算公式来判断哪个样式生效
（内联样式1000>ID选择器100>类选择器10>元素选择器1）不常用也不推荐使用的 !import改样式(CSS属性)
- 字体相关
- color 修改字体颜色
- font-size 字体大小
- 文本
- color 字体颜色
- text-align 对齐方式
- text-decoration 文字装饰 (去掉a标签的下划线 text-decoration: none;)
- 背景相关属性
- background-color
- bakground-image
- 把很多小图片合并成一张大图片
- 鼠标滚动 背景不动（姑娘一直在看着你）
- 边框
- border: 1px solid red;
- 画圆：border-radius=宽/高的一半
- display
- block 显示成块级标签
- inline 显示成行内标签
- inline-block 既有块儿标签右有行内标签的特点
- none 隐藏
CSS盒子模型
由内到外：
1. content 内容
2. padding 内填充 （用于调整内容和边框之间的距离，撑大标签）
3. border 边框
4. margin 外边距 （用于调整标签和标签之间的距离）float 浮动（失去原来的位置）
- left 往左浮
- right 往右浮
- none 不浮（默认值）
浮动的规则：
1. 无论什么标签 一旦浮动就变成了块儿级标签（可以设置宽高）
2. 浮动的标签总是浮向前一个浮动的标签，如果摆不下就挪到下一行开始- left 往左浮
- 清除浮动 clear --> 指的是清除浮动带来的负面效果
- left 我的左边不能有浮动元素
- right 我的右边不能有浮动元素
- both 我的两边不能有浮动元素
最常见应用：
.clearfix {
content: "";
display: "block";
clear："both"
} - 定位
- 相对定位 relative （相当于标签原来所在的位置来定位）
- 绝对定位 absolute (相对于已经定位过的祖先标签来定位) 失去原来的位置
- 固定定位 fixed （固定在屏幕的某个位置) 失去原来的位置
- 字体相关
HTML CSS
01.基本介绍
<h1>hello s20</h1>
<a href="http://www.sogo.com">sogo</a>
<img src="http://img01.sogoucdn.com/app/a/100520093/4abb143c81046d05-2ce49f14414deb25-bf71c00025166d42b977adbaad80a5e6.jpg">02PyCharm模板示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标签介绍</title>
</head>
<body>
<h1 id="i1" name="s20" s20="hao" muitiple>海燕啊</h1>
<h1 id="i2" name="s20" s20="hao">海燕啊</h1>
<!-- 顶部导航条 开始-->
<!-- 顶部导航条 结束-->
<!-- 搜索框 开始-->
<!-- 搜索框 结束-->
</body>
</html>第一个HTML页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个HTML文件</title>
</head>
<body>
<!-- 这里是注释 -->
<h1>hello s20</h1>
<a href="http://www.sogo.com">sogo</a>
<img src="http://img01.sogoucdn.com/app/a/100520093/4abb143c81046d05-2ce49f14414deb25-bf71c00025166d42b977adbaad80a5e6.jpg">
</body>
</html>03基本标签示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基本标签示例</title>
</head>
<body>
我是一段普通文本
<s>我是一个s标签</s>
<u>我是一个u标签</u>
<b>我是一个b标签</b>
<i>我是一个i标签</i>
<p>海燕，<br>在苍茫的大海上，<br>狂风卷积着乌云，<br>海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云</p>
<p>海燕，在苍茫的大海上，狂风卷积着乌云，海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云</p>
<p>海燕，在苍茫的大海上，狂风卷积着乌云，海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云海燕，在苍茫的大海上，狂风卷积着乌云</p>
<hr>
<
>
©
®
¥
<h1>标 题1</h1>
<h2>标 题2</h2>
<h3>标 题3</h3>
<h4>标 题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<hr>
<div>div</div>
<div>div</div>
<span>span我很长</span>
<span>span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<!--标签的嵌套-->
<div>
<span>我是嵌套在div中的span标签</span>
</div>
<div>
<div>我是嵌套在div中的div</div>
</div>
<p>
<div>我是嵌套在p标签中的div</div>
</p>
</body>
</html>04img标签和a标签
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>img和a</title>
</head>
<body>
<img src="https://mx.360buyimg.com/babel/jfs/t17893/239/637260795/100280/d9fd6379/5a9e1186N3cffb5da.jpg" alt="不要着急，图片马上就好">
<img src="04.jpg" title="这是从jd拿来的一张图片" width="100">
<a href="http://www.sogo.com" target="_blank">点我去搜狗</a>
<a href="#d1">点击跳转到ID值是d1的那个标签</a>
<div style="height: 1000px;background-color: red"></div>
<div id="d1">我是id值为d1的div标签</div>
</body>
</html>05列表示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列表示例</title>
</head>
<body>
<ul type="none">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol type="A" start="28">
<li>xxx</li>
<li>yyy</li>
<li>zzz</li>
</ol>
<dl>
<dt>北京市</dt>
<dd>朝阳区</dd>
<dd>海淀区</dd>
<dd>昌平区</dd>
<dt>上海市</dt>
<dd>黄浦区</dd>
<dd>浦东区</dd>
<dd>浦东新区</dd>
</dl>
</body>
</html>06表格示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格示例</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
<td>9000</td>
<td rowspan="2">吹牛逼</td>
</tr>
<tr>
<td colspan="2">Egon</td>
<!--<td>18</td>-->
<!--<td>喊麦</td>-->
</tr>
</tbody>
</table>
</body>
</html>07form表单系列
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>form表单系列</title>
</head>
<body>
<form novalidate autocomplete="off" action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data">
<p>
<label for="i1">用户名：</label>
<input id="i1" disabled name="username" type="text">
</p>
<p>
密码：
<input name="password" type="password">
</p>
<p>邮箱：
<input name="email" type="email">
</p>
<p>日期：
<input name="join_date" type="date">
</p>
<p>
<label for="r1">男</label>
<input id="r1" name="gender" type="radio" value="1">
<label>女
<input name="gender" type="radio" value="0">
</label>
<input checked name="gender" type="radio" value="2">保密
</p>
<p>爱好：
<input name="hobby" type="checkbox" value="basketball">篮球
<input name="hobby" type="checkbox" value="football">足球
<input checked name="hobby" type="checkbox" value="doublecolorball">双色球
</p>
<p>从哪儿来：
<select name="addr" multiple>
<option value="010">北京</option>
<option value="021">上海</option>
<option selected value="0631">威海</option>
</select>
<select name="addr2">
<!--select分组形式-->
<optgroup label="北京市">
<option value="">朝阳区</option>
<option value="">海淀区</option>
<option value="">昌平区</option>
</optgroup>
<option value="021">上海</option>
<option value="0631">威海</option>
</select>
</p>
<p>上传头像：
<input name="head_img" type="file">
</p>
<p>个人简介：
<textarea name="memo" cols="30" rows="10">
</textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="清空">
<input type="hidden" value="隐藏的按钮">
<input type="button" value="普通按钮">
<button>普通按钮</button>
</p>
<!--{"username": "alex", "password": "alexdasgabi", "gender": 1, "hobby": ["basketball", "football"]}-->
</form>
</body>
</html>08CSS选择器示例
# 08CSS选择器示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>选择器示例</title>
<!--<style>-->
<!--p {-->
<!--color: red;-->
<!--}-->
<!--</style>-->
<link rel="stylesheet" href="./08.css">
</head>
<body>
<div>div标签1</div>
<div id="d2">div标签2</div>
<p class="c1">p标签</p>
<span class="c1">我是span标签</span>
<span>我是span2号</span>
</body>
</html>
########CSS#########
/*p {*/
/*color: green;*/
/*}*/
/*标签选择器*/
/*div {color: blue;font-size: 24px}*/
/*ID选择器*/
/*#d2 {*/
/*color: yellow;*/
/*}*/
/*类选择器*/
/*.c1 {*/
/*color: blue;*/
/*}*/
/*通用（全选）*/
* {
color: deeppink;
}09组合选择器示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组合选择器示例</title>
<style>
/*后代选择器*/
/*div a {*/
/*color: red;*/
/*}*/
/*儿子选择器*/
/*div>a {*/
/*color: green;*/
/*}*/
/*毗邻选择器*/
/*a+span {*/
/*color: blue;*/
/*}*/
/*弟弟选择器*/
a~span {
color: chocolate;
}
.c1 a {
}
</style>
</head>
<body>
<div id="d1" class="c1">
<p>
<a>我是孙子a标签</a>
</p>
<span>我是a前面的span标签</span>
<a>我是儿子a标签</a>
<span>我是span标签1号</span>
<span>我是span标签2号</span>
</div>
</body>
</html>10属性选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>属性选择器</title>
<style>
/*[s20] {*/
/*color: red;*/
/*}*/
/*[s20="hao"] {*/
/*color: red;*/
/*}*/
#d3,
p {
color: red;
}
/*p {*/
/*color: red;*/
/*}*/
</style>
</head>
<body>
<div s20>111</div>
<div s20="hao">222</div>
<div id="d3">333</div>
<p>第1个p标签</p>
<p>第2个p标签</p>
</body>
</html>11伪类和伪元素选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>伪类和伪元素选择器</title>
<style>
a:link {
color: green;
}
a:visited {
color: black;
}
a:active {
color: deeppink;
}
#d1:hover {
color: chocolate;
}
input:focus {
outline: none;
background-color: red;
}
p:before {
content: "*"; /*使用CSS添加的内容*/
color: red; /*该内容应用的样式*/
}
p:after {
content: "[?]";
color: blue;
}
</style>
</head>
<body>
<a href="http://www.sogo.com">sogo</a>
<a href="http://www.sogoba.com">sogoba</a>
<div id="d1">div</div>
<input type="text">
<p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间</p>
<p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间</p>
<p>海燕，在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间</p>
<p>高傲的飞翔。。。</p>
</body>
</html>12选择器的优先级
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>选择器的优先级</title>
<style>
body {
color: chocolate;
}
/*我的权重是100＋１*/
div#d1 {
color: green;
}
</style>
<link rel="stylesheet" href="12.css">
</head>
<body>
<div id="d1" class="c1">我是div标签</div>
<p class="c1">我是p标签</p>
</body>
</html>
#######css#########
/*权重是10 +１*/
div.c1 {
color: blue;
}13字体和文本相关属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>字体和文本相关属性</title>
<style>
p {
/*font-size: 48px;*/
/*font-family: "Arial", "Microsoft YaHei", "微软雅黑", "sans serif";*/
/*color: red;*/
/*color: #FF0000;*/
/*color: rgb(0,255,0);*/
/*color: rgba(0,255,0,0.3);*/
}
#p1 {
/*w文本的居中方式*/
text-align: justify;
/*给文本加下划线*/
text-decoration: underline;
text-indent: 28px;
}
/*去掉a标签默认的下划线*/
a {
text-decoration: none;
}
</style>
</head>
<body>
<p style="font-weight: 100">在苍茫的大海上，狂风卷积着乌云。</p>
<p>在苍茫的大海上，狂风卷积着乌云。</p>
<p style="font-weight: 900">在苍茫的大海上，狂风卷积着乌云。</p>
<p id="p1">在苍茫的大海上，狂风卷积着乌云。海上，狂风卷积着乌云。
海上，狂风卷积着乌云。海上，狂风卷积着乌云。
海上，狂风卷积着乌云。
海上，狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。狂风卷积着乌云。
海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。海上，狂风卷积着乌云。
</p>
<a href="http://www.sogo.com">sogo</a>
</body>
</html>14背景相关属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>背景相关属性</title>
<style>
div {
height: 600px;
width: 600px;
/*background-color: red;*/
background: url("./hulu.png") no-repeat 200px 200px;
}
.c1 {
height: 500px;
width: 100%;
background-color: red;
}
.c2 {
height: 500px;
width: 100%;
background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat fixed center center;
}
.c3 {
height: 500px;
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>15边框相关属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>边框相关属性</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/*border-style: solid;*/
/*border-color: green;*/
/*border-width: 5px;*/
/*border: 5px solid green;*/
/*border-right: 5px solid green;*/
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>16display属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>display属性</title>
<style>
div {
background-color:red;
width: 1000px;
display: inline;
}
a {
/*display: block;*/
/*display: none;*/
visibility: hidden;
width: 1000px;
}
</style>
</head>
<body>
<div>div</div>
<a href="">a1</a>
<a href="">a2</a>
<div>div2</div>
</body>
</html>17CSS盒子模型
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS盒子模型</title>
<style>
.c1 {
height: 200px;
width: 200px;
background-color: red;
border: 5px solid green;
/*padding-top: 5px;*/
/*padding-right: 10px;*/
/*padding-bottom: 15px;*/
/*padding-left: 20px;*/
/*同时设置多个值 推荐使用简写*/
/*padding: 5px 10px 15px 20px; !*上 右 下 左*!*/
/*padding: 5px 10px 20px; !* 上 左右 下*!*/
/*padding: 10px 20px; !*上下 左右*!*/
padding: 20px; /*上下左右*/
/*padding: 20px;*/
/*margin-top: 100px;*/
margin: 5px 10px 15px 20px;
}
button {
padding: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<button>按钮</button>
</body>
</html>18float示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>float示例</title>
<style>
* {
margin: 0;
}
.nav {
background-color: black;
/*height: 50px;*/
}
ul {
list-style-type: none;
padding: 0;
}
ul.nav-left>li {
float: left;
/*width: 100px;*/
padding: 15px;
}
ul.nav-right>li {
float: right;
/*width: 100px;*/
padding: 15px;
}
ul a {
color: #eee;
text-decoration: none;
}
ul a:hover {
color: red;
}
/*清除浮动的副作用*/
.clearfix:after {
content: "";
display: block;
clear: left; /*我这个标签 左边不能有浮动的元素*/
}
.container {
width: 1028px;
margin: 0 auto;
}
</style>
</head>
<body>
<!--顶部导航栏 开始-->
<div class="nav clearfix">
<div class="container clearfix">
<ul class="nav-left">
<li><a href="">玉米商城</a></li>
<li><a href="">大米</a></li>
<li><a href="">小米</a></li>
<li><a href="">黑米</a></li>
<li><a href="">红米</a></li>
</ul>
<!--<div class="c2"></div>-->
<ul class="nav-right">
<li><a href="">购物车</a></li>
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
</div>
</div>
<!--顶部导航栏 结束-->
<div></div>
</body>
</html>19overflow属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>overflow属性</title>
<style>
.c1 {
width: 100px;
height: 200px;
border: 1px solid black;
/*overflow: auto;*/
overflow-y: scroll;
}
.head-img {
width: 128px;
height: 128px;
border-radius: 64px;
border: 3px solid yellow;
overflow: hidden;
}
.head-img img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="c1">
海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！海燕啊，你可长点心吧！
</div>
<div class="head-img">
<img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" >
</div>
</body>
</html>20定位属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定位属性</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1,
.c2,
.c3,
.cc{
height: 100px;
width: 100px;
}
.c1 {
background-color: red;
}
.c2 {
background-color: blue;
/*position: relative; !*相对定位*!*/
position: absolute;
left: 100px;
top: 100px;
}
.c3 {
background-color: green;
}
.cc {
position: relative; /*光写一个relative 不会改变位置 但是它变成了已经定位的标签*/
background-color: deeppink;
}
.sc {
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="cc">
<div class="c2"></div>
</div>
<div class="c3"></div>
<button class="sc">返回顶部</button>
</body>
</html>