landaiqing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
landaiqing
2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Html-Css/.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"liveServer.settings.multiRootWorkspaceName": "Html-Css"
}

45
Html-Css/00-css写法.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>Document </title>
<!-- No.3
rel="stylesheet"
引入外部文件
作用范围：被引入文件
href 各种路径都可以
-->
<link rel="stylesheet" href="./Html-Css/style.css">
<!-- No.2
内部样式
范围：当前文件
-->
<style>
p {
color: salmon;
}
</style>
</head>
<body>
<p><span>【第一章】</span>人之初,性本善。性相近,习相远。苟不教,性乃迁。教之道,贵以专。昔孟母,择邻处。
子不学,断机杼。窦燕山,有义方。教五子,名俱扬。养不教,父之过。教不严,师之惰。
</p>
<!-- No.1
行内样式
范围：当前标签
-->
<div style="color: pink;">【第一章】人之初,性本善。性相近,习相远。苟不教,性乃迁。教之道,贵以专。昔孟母,择邻处。
子不学,断机杼。窦燕山,有义方。教五子,名俱扬。养不教,父之过。教不严,师之惰。
</div>
</body>
</html>

65
Html-Css/01-选择器.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 选择器 { css代码 } */
/* div {
color: salmon;
} */
/* 00- 基础选择器 */
/* 标签选择器 */
/* 标签名 { css代码 } */
/* div {
color: salmon;
} */
/* 类选择器 | class选择器 */
/* .class名 { css代码 } */
/* .app {
color: salmon;
} */
/* id选择器 */
/* #id名 { css代码 } */
/* #divid {
color: salmon;
} */
/* 通配符选择器 */
/* * {
color: salmon;
} */
</style>
</head>
<body>
<p><span>【第五章】</span> 天地不仁,以万物为刍狗,圣人不仁,以百姓为刍狗。天地之间,其犹橐龠
乎,虚而不屈,动而愈出。多言数,穷,不如守中。 〖译文〗</p>
<!-- No.1
行内样式
范围: 当前标签
-->
<div class="app app2" id="divid">
【第五章】天地不仁,以万物为刍狗,圣人不仁,以百姓为刍狗。天地之间,其犹橐龠
乎,虚而不屈,动而愈出。多言数穷,不如守中。 〖译文〗
</div>
</body>
</html>

77
Html-Css/02-选择器进阶.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器进阶</title>
<!-- 基于基本选择器 -->
<style>
/* 子元素选择器 */
/* 父>子>子的子... { css代码 } */
/* #app>.top>p {
color: salmon;
} */
/* 后代选择器 */
/* 父 子(只要是父的后代)... { css代码 } */
/* #app p {
color: salmon;
} */
/* 组合选择器 */
/* 选择器1, 选择器2 { css代码 } */
/* .top,
#app>.bottom {
color: salmon;
} */
/* 复合选择器 (天选之子) */
div.top p.top-p.tp#ip {
color: salmon;
}
/* css3添加的 */
/* 正 */
/* ul li:nth-child(4){
color: salmon;
} */
/* 倒 */
/* ul li:nth-last-child(1) {
color: salmon;
} */
</style>
</head>
<body>
<div id="app">
<div class="top">
<p class="top-p tp" id="ip"> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
</div>
<div class="bottom">
<p> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
</div>
<p> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
</div>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
</body>
</html>

52
Html-Css/03-伪类.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>伪类 </title>
<style>
#app {
height: 100px;
width: 100px;
background-color: salmon;
transition: all 0.3s; /*只针对数值的变化*/
/* 动画过渡 */
}
/* 鼠标悬停 */
#app:hover {
width: 200px;
height: 200px;
background-color: seagreen;
}
/* 在盒子最后面生成一个盒子 */
#app::after {
content: "后浪";
}
/* 在盒子最前面生成一个盒子 */
#app::before {
content: "前浪";
}
</style>
</head>
<body>
<div id="app">
--我是app正常内容--
</div>
</body>
</html>

BIN
Html-Css/04-选择器权重.html Normal file
View File

Binary file not shown.

86
Html-Css/05-选择器权重进阶.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>选择器权重</title>
<style>
#ip {
color: blue !important;
}
div .top p {
color: salmon !important;
}
p {
color: lightblue !important;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<p class="top-p tp" id="ip"> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
</div>
<div class="bottom">
<p> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
</div>
<p> <span>天地不仁</span> ,以万物为刍狗,圣人不仁,以百姓为刍狗。 </p>
</div>
</body>
</html>
<!--之前已证：
继承的样式的权重 < 通配符选择器的权重 < 标签选择器的权重 < class 选择器的权重 < id选择器的权重 < !important
!important 给个最高权重
-->
<!-- 每种权重 都会有当前权重的值
继承的样式的权重 0
通配符选择器的权重 01
标签选择器的权重 001
class 选择器的权重 0001
id选择器的权重 00001
!important 0000000001
计算权重：
1.肯定不能进位
2.同选择器相加
3.倒着逐一判断大小
提一：
#ip
div .top p p p p p...n (n>10)
计算：
00001
00(n>10)10
题二: 权重等于
A. #app .top-P p
B. .top-p p #ip
题三：权重A>B
A: #app .top-p div p
B: .top-p p #ip
-->

72
Html-Css/06-盒模型.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>盒模型 </title>
<style>
#app {
/* 盒子的大小
宽：
块：没设置宽 默认时父盒子宽
行：没有设置宽 默认时类容宽
高：
块，行 都一样，有内容决定发宽高 ,且无法设置宽高的
*/
width: 100px;
height: 100px;
background-color: salmon;
/* 内边距
会改变原有盒子的大小
*/
/* padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px; */
/* 边框
会改变原有盒子的大小
*/
/* border: style color width; */
border: solid pink 20px;
/* border-top-style: dashed;
border-top-width: 6px;
border-top-color: orangered; */
/* 外边框
盒子和盒子之间的额距离
块:
上下的margin会重合,如果一大一小(以大的为主)
行:margin 不会重合
*/
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div id="app">
</div>
<div id="app">
</div>
<div id="app">
</div>
</body>
</html>

50
Html-Css/07-外边距.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>外边距 </title>
<style>
#app {
width: 300px;
height: 300px;
background-color: orangered;
/* No.1 设置内边距*/
padding-top: 1px;
/* No.2 边框 */
border: solid 1px pink;
}
.box {
width: 100px;
height: 100px;
background-color: lightseagreen;
margin-top: 100px;
/* 块盒子的margin上下穿透问题 , 左右不存在*/
}
</style>
</head>
<body>
<div id="app">
123
<div class="box"> </div>
</div>
</body>
</html>

45
Html-Css/08-盒子溢出.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>盒子溢出 </title>
<style>
#app {
width: 100px;
height: 100px;
background-color: orangered;
/* 盒子内容溢出
hidden 溢出隐藏
scroll 显示滚动条
auto 自动
*/
overflow: auto;
/* overflow-y: scroll; */
}
</style>
</head>
<body>
<div id="app">
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</div>
<hr>
<div id="app">
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</div>
</body>
</html>

38
Html-Css/09-怪异盒模型.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>怪异盒模型 </title>
<style>
#app {
width: 100px;
height: 100px;
background-color: orangered;
/* 怪异盒模型 */
box-sizing: border-box;
padding: 20px;
/* 边框 和 内边距 都不会改变盒子的大小
注意 边框 边距 不能大于盒子本身的大小
*/
}
</style>
</head>
<body>
<div id="app">
</div>
</body>
</html>

52
Html-Css/10-字体样式.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>字体样式 </title>
<style>
/* 字体颜色 颜色单词 16进制 rgb() rgba()*/
p {
color:rgba(236, 15, 89, 0.3) ;
/* 字体大小 */
font-size: 20px;
/* 文字粗细 500是正常*/
font-weight: 600;
/* 字体 */
font-family: "微软雅黑","宋体";
/* 字体倾斜
normal 默认
italic 倾斜
oblique 强制倾斜
*/
font-style: oblique;
/* 行高 */
line-height: 50px;
}
</style>
</head>
<body>
<p>
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</p>
</body>
</html>

93
Html-Css/11-文本样式.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>文本样式 </title>
<style>
p {
/* 水平对齐方式 */
/* text-align: right;
text-align: center; */
/*text-align: justify; *//* 两端对齐*/
/* 首行缩进 */
/* text-indent: 2em; */
/* 首行缩进*/
/* 文本线 */
/* text-decoration: none; 无文本线 */
/* text-decoration: underline; */
/* 下划线 */
/* text-decoration: line-through; */
/* 中划线 */
/* text-decoration: overline; */
/* 上划线 */
/* text-decoration-color: black; */
/* 设置线的颜色 */
/* text-decoration-style: dotted; */
/* 设置线的样式 */
/* 换行方式 */
/* white-space:normal; */
/* 换行 */
/* white-space:nowrap; */
/*不换行 */
/* text溢出方式 */
/* text-overflow: clip; */
/* 裁剪 */
/* text-overflow: ellipsis; */
/* 隐藏显示 */
/* 文本对齐方式 */
vertical-align: 100px;
color: salmon;
}
a {
color: aqua;
text-decoration: none;
}
</style>
</head>
<body>
<p>
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</p>
<p>
<a href="">
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</a>
</p>
</body>
</html>

41
Html-Css/12-文本溢出隐藏.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>文本溢出隐藏 </title>
<style>
p {
color: sandybrown;
/* 文本溢出隐藏 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
人之初，性本善，性相近，习相远。
苟不教，性乃迁。教之道，贵以专。
</p>
</body>
</html>

78
Html-Css/13-背景属性.html Normal file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>背景</title>
<style>
html,body {
margin: 0;
min-height: 100vh;
/* 背景色 */
background-color: seagreen;
/* 背景图 */
background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.UM6yunmzITekW0TVUOwSLAHaLl?w=114&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7);
/* 背景图是否平铺 */
background-repeat: no-repeat;
/* 不平铺 */
/* background-repeat: repeat; 平铺 */
/* background-repeat: repeat-x;
background-repeat: repeat-y; */
/* 平铺某个方向 */
/* 背景定位 */
/* background-position: x y; */
/* background-position: 100px 200px; */
/* background-position: right top;
background-position: right bottom; */
/* background-position: center;
background-position: left top;
background-position:left bottom;
background-position: left center; */
/* 注意: 如果你只给一个值 那么另一个为center */
/* 精灵图 就是用定位这中方式实现的 */
/* 背景图的大小 */
/* background-size:w h; */
/* background-size: auto 600px; */
/* background-size: cover; */
/* 图片一定会沾满容器(盒子), but图片不一定显示的全 */
/* background-size: contain; */
/* 图片一定会显示完整,但是不一定沾满整个容器(盒子) */
/* 背景固定 */
/* background-attachment: fixed; */
/* 固定 */
/* background-attachment: scroll; */
/* 滚动 */
}
</style>
</head>
<body>
</body>
</html>

71
Html-Css/14-精灵图.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>精灵图</title>
<style>
.ico0,
.ico1,
.ico2,
.ico3,
.ico4
{
/*将行类标签转成行内块标签 */
display: inline-block;
width: 105px;
height: 32px;
background-color: #EEEE ;
background-image: url(./jlt.png);
background-position-x: -205px;
background-repeat: no-repeat;
}
.ico1 {
/* baclground-position: ; */
background-position-y: -37px;
}
.ico2 {
/* baclground-position: ; */
background-position-y: -74px;
}
.ico3 {
/* baclground-position: ; */
background-position-y: -111px;
}
.ico4 {
/* baclground-position: ; */
background-position-y: -148px;
}
</style>
</head>
<body>
<div>
<span class="ico0"></span>
1
<span class="ic1"></span>
2
<span class="ico2"></span>
3
<span class="ico3"></span>
4
<span class="ico4"></span>
5
</div>
</body>
</html>

63
Html-Css/15-补充内容.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>补充</title>
<style>
#app {
width: 300px;
height: 300px;
background-color: salmon;
/* 边框 */
border: #ccc solid 10px;
/* 边框居中 */
/* margin-right:auto ;
margin-left:auto ; */
/* 边距 - 内 */
padding:20px ; /*上下左右 都为20px*/
padding:20px 40px ;/*上下20px, 左右为40px*/
padding:20px 40px 60px;/*上20px 左右40px 下60px*/
padding:20px 40px 60px 80px;/*上20px 左40px 下60px 右80px*/
/* 边距 -外 :与内边距使用一致 */
/* margin: 20px; */
/* border: #ccc solid 1px; */
/* border-width: 1px;
border-style: solid;
border-color: #ccc; */
/* 背景复合写法 */
/* background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.UM6yunmzITekW0TVUOwSLAHaLl?w=114&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7) no-repeat; */
/* 字体 */
/* font: ; */
}
</style>
</head>
<body>
<div id="app" contenteditable="true">
</div>
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
<!-- contenteditable="true" 将盒子变为可编辑状态 -->
</body>
</html>

95
Html-Css/16-盒子类型display.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>display</title>
<style>
body {
}
div {
background-color: lightblue;
width: 100px;
height: 100px;
/* 块标签->行内标签 */
display: inline;
/* 块-> 行内块标签*/
display: inline-block;
vertical-align: middle;
/* 中线对齐 */
}
span {
background-color: salmon;
width: 100px;
height: 100px;
/* 行内标签->块 */
display: block;
}
img {
width: 300px;
vertical-align: middle;
/* 中线对齐 */
cursor:pointer ;
/* 鼠标悬停样式 */
display: none;
/* 关闭盒子 */
}
</style>
</head>
<body>
<div>
我是div
</div>
<div>
我是div
</div>
<span>
我是span
</span>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.43Hx8xXHGxUiVTllqgR0XQHaKK?w=182&h=250&c=7&r=0&o=5&dpr=1.25&pid=1.7">
</body>
</html>
<!--
块标签
1.独占一行
2.他的宽度为父盒子内容宽度
行内标签
1.内容有空间就横着排，没有控件就换行 (可被文本样式更改)
2.宽高有内容决定，设置宽高无效
行内快标签（img）
1.宽高默认由内容决定，可以自定以宽高
2.他有行内的性质
-->

47
Html-Css/17-切换图片.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>切换图片</title>
<style>
#img1 , #img2 {
width: 200px;
height: 300px;
vertical-align: middle;
}
#app {
background-color: lightblue;
width: 200px;
height: 300px;
}
#img2 {
display: none;
}
#app:hover #img1 {
display: none;
}
#app:hover #img2 {
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<img id="img1" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img id="img2" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
</body>
</html>

73
Html-Css/18-布局-浮动.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>浮动</title>
<style>
.parent {
width: 800px;
/* height: 400px; */
border: 10px solid blue;
}
.parent::after {
/* 利用伪类清除父盒子的浮动 */
content: "";
display: block;
clear: both;
}
.box1 {
float: left;
width: 250px;
height: 80px;
background-color: #ed7d31;
}
.box2 {
width: 400px;
height: 100px;
background-color: #70ad47;
}
.box3 {
width: 200px;
height: 100px;
background-color: #7030a0;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div style="clear: both;"></div>
<!-- 清除父盒子浮动 -->
</div>
</body>
</html>
<!--
文档流
浮动
1.浮动单元 处于浮动
2.不会遮挡内容(文本内容)
3.要会想象有个眼睛
4.不占原有文档流的位置(可以给父盒子清除浮动)
-->

41
Html-Css/19-flex布局.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>flex</title>
<style>
#app {
/* 变flex容器 */
display: flex;
height: 200px;
background-color: lightcoral;
}
.box {
background-color: lightgreen;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="box"><span>1</span></div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>

83
Html-Css/20-flex布局-2.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>flex</title>
<style>
#app {
/* 变flex容器 */
display: flex;
height: 200px;
width: 300px;
background-color: lightcoral;
/* 水平轴的方向控制 */
flex-direction: row;
/* 正常轴 左右 */
/* flex-direction: row-reverse; */
/* 右左 */
/* flex-direction: column; */
/* 上下 */
/* flex-direction: column-reverse; */
/* 下上 */
/* 如果项目在容器中挤不下,它也不会换行 */
/* flex-wrap: wrap; */
/* 换行 */
/* flex-wrap: nowrap; */
/* 不换行 */
/* 主轴对齐方式 */
/* justify-content: flex-start; */
/* 开始方向对齐 */
/* justify-content: flex-end; */
/* 结束方向对齐 */
/* justify-content:space-around ; */
/* 空余空间平均分配 */
/* justify-content: space-between; */
/* 两边靠边其余空间平均分配 */
/* 垂直交叉轴对齐方式 */
/* align-items: center; */
/* 居中 */
/* align-items: flex-start; */
/* 开始对齐 */
/* align-items: flex-end; */
/* 结束对齐 */
/* align-items: baseline; */
/* 文字基于一条线对齐 */
/* align-items: stretch; */
/* 其他标签 */
}
.box {
background-color: lightgreen;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="box"><span>1</span></div>
<div class="box" style="height: 150px; font-size: 30px;">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>

62
Html-Css/21-flex布局-3.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>flex</title>
<style>
#app {
/* 变flex容器 */
display: flex;
height: 60px;
background-color: lightcoral;
align-items: center;
padding: 0 15px;
}
.input {
width: 100%;
height: 40px;
border-radius: 15px;
background-color: lightgrey;
}
span,
b {
/* 项目的缩放
0: 不缩放
*/
flex-shrink: 0;
margin: 0 15px;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="app">
<span>logo</span>
<div class="input">
</div>
<b>登陆</b>
</div>
</body>
</html>

114
Html-Css/22-定位.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>定位</title>
<style>
body {
height: 100px;
}
p {
background-color: blue;
}
#app {
background-color: coral;
width: 400px;
height: 400px;
/* 相对定位 */ /* 正常布局不会影响文档流的布局 */
/* position: relative; */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box1 {
background-color:blue;
width: 100px;
height: 100px;
/* 绝对定位 */
/* position: absolute; */
/* top: 0; */
/* bottom: 0; */
/* left: 0; */
/* right: 0; */
}
.fixed {
/* 固定定位 */
position: fixed;
background-color: aqua;
width: 400px;
height: 400px;
padding: 20px;
bottom: 100px;
right: 100px;
}
.fixed span {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="fixed">
小广告
<a href="www.baidu.com">X</a>
</div>
<div id="app">
<div class="box1"></div>
<p>我是p标签</p>
</div>
<p>我是p标签</p>
<!--
相对定位
1.不会改变正常文档流的布局
2.相对的是盒子本身的四个角进行定位
绝对定位
1.脱离了正常的文本流
2.找o点
1.父盒子有定位属性:四个角是绝对定位的四个o点
2父盒子没有定位属性,那他就会往上找有定位属性的祖宗盒子,
如果有祖宗盒子有定位属性,即相对这个祖宗盒子的四个角.
3.如果他的父亲和祖宗都没有定位属性的盒子,那么就相对于html盒子的四个角为o点(可视化窗口)
固定定位
1.
注意:
所有定位的盒子,属性均会变成 行内块的类型
定位偏移量
top,bottom , left, right
不能同时使用相对方向
-->
</body>
</html>

67
Html-Css/22-定位层级.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>定位层级</title>
<style>
#app,#app2 {
background-color: salmon;
width: 400px;
height: 400px;
position: relative;
z-index: 0;
}
#app {
z-index: 99;
}
.box {
width: 100px;
height: 100px;
}
.box1 {
height: 150px;
background-color: rgb(255, 0, 0);
position: absolute;
z-index: 1;
}
.box2 {
width: 150px;
background-color: antiquewhite;
position: absolute;
z-index: 0;
}
#app2 .box1 {
top: -249px;
}
#app .box2 {
top: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
<div id="app2">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
<!-- 子绝父相 -->
</body>
</html>

4
Html-Css/css/style.css Normal file
View File

@@ -0,0 +1,4 @@
/* <20><><EFBFBD>÷<EFBFBD>Χ<EFBFBD><CEA7>˭<EFBFBD><CBAD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˭ */
span {
color: red;
}

110
Html-Css/homework/05-作业.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>作业</title>
<style>
#app {
box-sizing: border-box;
border: 1px solid #ccc;
padding: 15px;
width: 300px;
margin: 0 auto;
}
#app .header h1 {
font-size: 18px;
border-bottom:solid 1px #ccc ;
padding-bottom: 10px;
}
#app .header h1 span {
padding-left: 15px;
color: rgba(200, 200,2000, .6);
}
ul {
padding-left: 0;
}
ul li {
list-style: none;
/* display: flex; */
align-items: center;
margin: 10px 0;
/* 文本溢出隐藏 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul li::before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
padding-right: 10px 0;
padding-top: 3px;
background-image: url(https://static.zzhitong.com/lesson-files/html/img/7-3.png);
background-repeat: no-repeat;
background-position: 0px 5px;
}
ul li:nth-child(2)::before {
background-position: 0px -24px;
}
ul li:nth-child(3)::before {
background-position: 0px -52px;
}
ul li:nth-child(4)::before {
background-position: 0px -84px;
}
ul li:nth-child(5)::before {
background-position: 0px -115px;
}
ul li:nth-child(6)::before {
background-position: 0px calc(-115px + -32px);
}
ul li:nth-child(7)::before {
background-position: 0px calc(-115px + -32px + -30px);
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<h1>潮流排行 <span>Most Read</span></h1>
</div>
<div class="content">
<ul>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
<li>秋冬拗造型 你也需要一款时髦</li>
</ul>
</div>
</div>
</body>
</html>

103
Html-Css/homework/06-作业.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<title>作业</title>
<style>
/* 预留样式 */
.border-right {
border-right:solid 1px #ccc ;
}
.border-bottom {
border-bottom:solid 1px #ccc ;
}
.flex {
display: flex;
}
img {
display: block;
}
/* 外壳 */
#app {
box-sizing: border-box;
width: 1200px;
margin: 0 auto;
border: solid 1px #ccc;
padding: 10px ;
}
/* 上面的样式 */
#app .top {
display: flex;
justify-content:center;
}
#app .top span {
border-right: solid 2px #ccc;
padding: 0 20px;
}
#app .top span:nth-child(1) {
border-right:none ;
padding: 0 20px;
}
/* 下面样式 */
.bottom {
margin: top 15px; ;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<span>护肤</span>
<span>彩妆</span>
<span>美发</span>
<span>美体</span>
<span>香氛</span>
<span>肌肤</span>
<span>产品</span>
<span>唇部</span>
<span>精华</span>
<span>修护</span>
</div>
<div class="bottom flex">
<!-- left -->
<div class="flex ">
<img class="border-right" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<div class="border-right">
<img class="border-bottom" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.C38tPmdN8_amlKOTvKp45AHaNK?w=182&h=324&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
</div>
<!-- right -->
<div class="flex">
<div class="border-right">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
<div>
<div class="flex">
<img class="border-right border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
<img class="border-bottom" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Ca5vPlfNKm2z_DCvMe4QqwHaLi?w=182&h=284&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
</div>
</div>
</div>
</div>
</body>
</html>

BIN
Html-Css/jlt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

40
Html-Css/怪异盒子练习.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>怪异盒子练习</title>
<style>
div{
width: 234px;
height: 460px;
background-color: #2e233e;
padding: 20px 0px;
box-sizing: border-box;
}
div li{
font-size: 14px;
height: 42px;
line-height: 42px;
padding-left: 30px;
}
a{color: white}
li:hover{background-color: #ff6700;}
</style>
</head>
<body>
<div>
<ul>
<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>
<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>
</body>
</html>