parent
ffeb23b50b
commit
c027b44058
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>选择器优先级_简单聊</title>
|
||||
<style>
|
||||
/* 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 */
|
||||
|
||||
/* #atguigu {
|
||||
color: red;
|
||||
} */
|
||||
/* h2 {
|
||||
color: orange;
|
||||
} */
|
||||
/* .slogan {
|
||||
color: green;
|
||||
} */
|
||||
/* h2 {
|
||||
color: gray;
|
||||
} */
|
||||
/* * {
|
||||
color: purple;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="slogan" id="atguigu">尚硅谷，让天下没有难学的技术！</h2>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>选择器优先级_详细聊</title>
|
||||
<style>
|
||||
#atguigu {
|
||||
color: orange;
|
||||
}
|
||||
.container span.slogan {
|
||||
color: red;
|
||||
}
|
||||
div>p>span:nth-child(1) {
|
||||
color: green;
|
||||
}
|
||||
.slogan {
|
||||
color: purple !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p>
|
||||
<span class="slogan" id="atguigu" style="color: blue;">尚硅谷，让天下没有难学的技术！</span>
|
||||
<span>欢迎同学们来学习！</span>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS_三大特性</title>
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<style>
|
||||
h2 {
|
||||
color: green;
|
||||
}
|
||||
div {
|
||||
color: red;
|
||||
font-size: 40px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
p {
|
||||
color: purple;
|
||||
background-color: inherit;
|
||||
}
|
||||
* {
|
||||
color: gray;
|
||||
}
|
||||
/* div {} */
|
||||
/* p {} */
|
||||
/* span {} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 id="atguigu">尚硅谷</h2>
|
||||
<hr>
|
||||
<div>
|
||||
我是div中的文字
|
||||
<span>我是span中的文字1</span>
|
||||
<span>我是span中的文字2</span>
|
||||
<span>我是span中的文字3</span>
|
||||
<p>
|
||||
<span>我是span中的文字4</span>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
#atguigu {
|
||||
color: red;
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>像素</title>
|
||||
<style>
|
||||
.atguigu1 {
|
||||
width: 1cm;
|
||||
height: 1cm;
|
||||
background-color: red;
|
||||
}
|
||||
.atguigu2 {
|
||||
width: 1mm;
|
||||
height: 1mm;
|
||||
background-color: green;
|
||||
}
|
||||
.atguigu3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu1"></div>
|
||||
<br>
|
||||
<div class="atguigu2"></div>
|
||||
<br>
|
||||
<div class="atguigu3"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>颜色_第1种表示_颜色名</title>
|
||||
<style>
|
||||
h2 {
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>尚硅谷</h2>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>颜色_第2种表示_rgb或rgba</title>
|
||||
<style>
|
||||
.atguigu1 {
|
||||
color: rgb(255,0,0);
|
||||
}
|
||||
.atguigu2 {
|
||||
color: rgb(0,255,0);
|
||||
}
|
||||
.atguigu3 {
|
||||
color: rgb(0,0,255);
|
||||
}
|
||||
.atguigu4 {
|
||||
color: rgb(138,43,226);
|
||||
}
|
||||
.atguigu5 {
|
||||
color: rgb(100%,0%,0%);
|
||||
}
|
||||
.atguigu6 {
|
||||
color: rgba(255,0,0,0.5);
|
||||
}
|
||||
.atguigu7 {
|
||||
color: rgba(59, 79, 189, 0.505)
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="atguigu1">尚硅谷1</h2>
|
||||
<h2 class="atguigu2">尚硅谷2</h2>
|
||||
<h2 class="atguigu3">尚硅谷3</h2>
|
||||
<h2 class="atguigu4">尚硅谷4</h2>
|
||||
<h2 class="atguigu5">尚硅谷5</h2>
|
||||
<h2 class="atguigu6">尚硅谷6</h2>
|
||||
<h2 class="atguigu7">尚硅谷7</h2>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>颜色_第3种表示_HEX或HEXA</title>
|
||||
<style>
|
||||
.atguigu1 {
|
||||
color: #ff0000;
|
||||
}
|
||||
.atguigu2 {
|
||||
color: #00ff00;
|
||||
}
|
||||
.atguigu3 {
|
||||
color: #0000ff;
|
||||
}
|
||||
.atguigu4 {
|
||||
color: #87ceebff;
|
||||
}
|
||||
.atguigu5 {
|
||||
color: #D41504;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="atguigu1">尚硅谷1</h2>
|
||||
<h2 class="atguigu2">尚硅谷2</h2>
|
||||
<h2 class="atguigu3">尚硅谷3</h2>
|
||||
<h2 class="atguigu4">尚硅谷4</h2>
|
||||
<h2 class="atguigu5">尚硅谷5</h2>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>颜色_第4种表示_HSL或HSLA</title>
|
||||
<style>
|
||||
.atguigu1 {
|
||||
color: hsl(0, 100%, 50%);
|
||||
}
|
||||
.atguigu2 {
|
||||
color: hsl(60, 100%, 50%);
|
||||
}
|
||||
.atguigu3 {
|
||||
color: hsl(120, 100%, 50%);
|
||||
}
|
||||
.atguigu4 {
|
||||
color: hsl(180, 100%, 50%);
|
||||
}
|
||||
.atguigu5 {
|
||||
color: hsl(0, 100%, 50%);
|
||||
}
|
||||
.atguigu6 {
|
||||
color: hsla(0, 100%, 50%, 67.8%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="atguigu1">尚硅谷1</h2>
|
||||
<h2 class="atguigu2">尚硅谷2</h2>
|
||||
<h2 class="atguigu3">尚硅谷3</h2>
|
||||
<h2 class="atguigu4">尚硅谷4</h2>
|
||||
<h2 class="atguigu5">尚硅谷5</h2>
|
||||
<h2 class="atguigu6">尚硅谷6</h2>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>01_字体大小</title>
|
||||
<style>
|
||||
/* body {
|
||||
font-size: 20px;
|
||||
} */
|
||||
.atguigu1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.atguigu2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.atguigu3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.atguigu4 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.atguigu5 {
|
||||
/* 浏览器能够接受的最小字体是12px */
|
||||
font-size: 3px;
|
||||
}
|
||||
.atguigu7 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu1">尚硅谷1</div>
|
||||
<div class="atguigu2">尚硅谷2</div>
|
||||
<div class="atguigu3">尚硅谷3</div>
|
||||
<div class="atguigu4">尚硅谷4</div>
|
||||
<div class="atguigu5">尚硅谷5</div>
|
||||
<div>尚硅谷6</div>
|
||||
<div class="atguigu7">尚硅谷7</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>02_字体族</title>
|
||||
<style>
|
||||
.atguigu1 {
|
||||
font-size: 100px;
|
||||
font-family: "微软雅黑";
|
||||
}
|
||||
.atguigu2 {
|
||||
font-size: 100px;
|
||||
font-family: "楷体";
|
||||
}
|
||||
.atguigu3 {
|
||||
font-size: 100px;
|
||||
font-family: "宋体";
|
||||
}
|
||||
.atguigu4 {
|
||||
font-size: 100px;
|
||||
font-family: "华文彩云";
|
||||
}
|
||||
.atguigu5 {
|
||||
font-size: 100px;
|
||||
font-family: "翩翩体-简","华文彩云","华文琥珀","微软雅黑";
|
||||
}
|
||||
.atguigu6 {
|
||||
font-size: 100px;
|
||||
font-family: "HanziPen SC","STCaiyun","STHupo","Microsoft YaHei",sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu1">尚硅谷1</div>
|
||||
<div class="atguigu2">尚硅谷2</div>
|
||||
<div class="atguigu3">尚硅谷3</div>
|
||||
<div class="atguigu4">尚硅谷4</div>
|
||||
<div class="atguigu5">尚硅谷5</div>
|
||||
<div class="atguigu6">尚硅谷6</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>03_字体风格</title>
|
||||
<style>
|
||||
.atguigu1 {
|
||||
font-size: 100px;
|
||||
font-style: normal;
|
||||
}
|
||||
.atguigu2 {
|
||||
font-size: 100px;
|
||||
font-style: italic;
|
||||
}
|
||||
.atguigu3 {
|
||||
font-size: 100px;
|
||||
font-style: oblique;
|
||||
}
|
||||
em {
|
||||
font-size: 100px;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu1">尚硅谷1</div>
|
||||
<div class="atguigu2">尚硅谷2</div>
|
||||
<div class="atguigu3">尚硅谷3</div>
|
||||
<em>尚硅谷4</em>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>04_字体粗细</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 100px;
|
||||
}
|
||||
.atguigu1 {
|
||||
font-weight: lighter;
|
||||
}
|
||||
.atguigu2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.atguigu3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
.atguigu4 {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.atguigu5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu1">尚硅谷1</div>
|
||||
<div class="atguigu2">尚硅谷2</div>
|
||||
<div class="atguigu3">尚硅谷3</div>
|
||||
<div class="atguigu4">尚硅谷4</div>
|
||||
<div class="atguigu5">尚硅谷5</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>05_字体复合属性</title>
|
||||
<style>
|
||||
.atguigu {
|
||||
font: bold italic 100px "STCaiyun","STHupo",sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu">尚硅谷</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>01_文本颜色</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 90px;
|
||||
}
|
||||
.atguigu1 {
|
||||
color: red;
|
||||
}
|
||||
.atguigu2 {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.atguigu3 {
|
||||
color: rgba(255, 0, 0, .5);
|
||||
}
|
||||
.atguigu4 {
|
||||
color: #00f;
|
||||
}
|
||||
.atguigu5 {
|
||||
color: #00f8;
|
||||
}
|
||||
.atguigu6 {
|
||||
color: hsl(0, 100%, 50%);
|
||||
}
|
||||
.atguigu7 {
|
||||
color: hsla(0, 100%, 50%, .5);
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu1">尚硅谷1</div>
|
||||
<div class="atguigu2">尚硅谷2</div>
|
||||
<div class="atguigu3">尚硅谷3</div>
|
||||
<div class="atguigu4">尚硅谷4</div>
|
||||
<div class="atguigu5">尚硅谷5</div>
|
||||
<div class="atguigu6">尚硅谷6</div>
|
||||
<div class="atguigu7">尚硅谷7</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>02_文本间距</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 30px;
|
||||
}
|
||||
.atguigu2 {
|
||||
/* 字母间距 */
|
||||
letter-spacing: 20px;
|
||||
}
|
||||
.atguigu3 {
|
||||
/* 单词间距 */
|
||||
word-spacing: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>You got a dream, you gotta protect it.尚硅谷1</div>
|
||||
<div class="atguigu2">You got a dream, you gotta protect it.尚硅谷2</div>
|
||||
<div class="atguigu3">You got a dream, you gotta protect it.尚硅谷3</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>03_文本修饰</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 40px;
|
||||
}
|
||||
.atguigu1 {
|
||||
/* 上划的绿色虚线 */
|
||||
text-decoration:overline dotted green;
|
||||
}
|
||||
.atguigu2 {
|
||||
/* 下划的红色波浪线 */
|
||||
text-decoration: underline wavy red;
|
||||
}
|
||||
.atguigu3 {
|
||||
/* 删除线 */
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.atguigu4,ins,del {
|
||||
font-size: 40px;
|
||||
/* 没有各种线 */
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atguigu1">尚硅谷1</div>
|
||||
<div class="atguigu2">尚硅谷2</div>
|
||||
<div class="atguigu3">尚硅谷3</div>
|
||||
<a class="atguigu4" href="https://www.baidu.com">尚硅谷4</a>
|
||||
<ins>测试1</ins>
|
||||
<del>测试2</del>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>04_文本缩进</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 60px;
|
||||
text-indent: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>欢迎来到尚硅谷学习！欢迎来到尚硅谷学习！欢迎来到尚硅谷学习！欢迎来到尚硅谷学习！欢迎来到尚硅谷学习！</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>05_文本对齐_水平</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 40px;
|
||||
background-color: orange;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>尚硅谷</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>06_细说font-size</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 40px;
|
||||
background-color: skyblue;
|
||||
font-family: "翩翩体-简";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>atguigux尚硅谷</div>
|
||||
<span style="font-size: 40px; font-family: 微软雅黑;">尚</span>
|
||||
<span style="font-size: 40px; font-family: 隶书;">尚</span>
|
||||
<span style="font-size: 40px; font-family: 翩翩体-简;">尚</span>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>09_文本对齐_垂直</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 40px;
|
||||
height: 400px;
|
||||
line-height: 745px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>atguigu尚硅谷</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>10_vertical-align</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 100px;
|
||||
height: 300px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
span {
|
||||
font-size: 40px;
|
||||
background-color: orange;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img {
|
||||
height: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.san {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
atguigu尚硅谷x<span>x前端</span>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
atguigu尚硅谷x<img src="../images/我的自拍.jpg">
|
||||
</div>
|
||||
<hr>
|
||||
<table border="1" cellspacing="0">
|
||||
<caption>人员信息</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>年龄</th>
|
||||
<th>性别</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr height="200">
|
||||
<td class="san">张三</td>
|
||||
<td>18</td>
|
||||
<td>男</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李四</td>
|
||||
<td>20</td>
|
||||
<td>女</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>列表相关属性</title>
|
||||
<style>
|
||||
ul {
|
||||
/* 列表符号 */
|
||||
/* list-style-type: decimal; */
|
||||
/* 列表符号的位置 */
|
||||
/* list-style-position: inside; */
|
||||
/* 自定义列表符号 */
|
||||
/* list-style-image: url("../images/video.gif"); */
|
||||
/* 复合属性 */
|
||||
list-style: decimal url("../images/video.gif") inside;
|
||||
}
|
||||
li {
|
||||
background-color: skyblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>《震惊！两男子竟然在教室做出这种事》</li>
|
||||
<li>《一夜暴富指南》</li>
|
||||
<li>《给成功男人的五条建议》</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>01_边框相关属性</title>
|
||||
<style>
|
||||
table {
|
||||
/* border-width: 2px; */
|
||||
/* border-color: green; */
|
||||
/* border-style: solid; */
|
||||
border:2px green solid;
|
||||
}
|
||||
td,th {
|
||||
border:2px orange solid;
|
||||
}
|
||||
h2 {
|
||||
border:3px red solid;
|
||||
}
|
||||
span {
|
||||
border:3px purple dashed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>边框相关的属性，不仅仅是表格能用，其他元素也能用</h2>
|
||||
<span>你要加油呀！</span>
|
||||
<table>
|
||||
<caption>人员信息</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>姓名</th>
|
||||
<th>年龄</th>
|
||||
<th>性别</th>
|
||||
<th>政治面貌</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张三</td>
|
||||
<td>18</td>
|
||||
<td>男</td>
|
||||
<td>党员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李四</td>
|
||||
<td>19</td>
|
||||
<td>女</td>
|
||||
<td>团员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>王五</td>
|
||||
<td>20</td>
|
||||
<td>男</td>
|
||||
<td>群众</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>赵六</td>
|
||||
<td>21</td>
|
||||
<td>女</td>
|
||||
<td>党员</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>02_表格独有属性</title>
|
||||
<style>
|
||||
table {
|
||||
border:2px green solid;
|
||||
width:500px;
|
||||
/* 控制表格的列宽 */
|
||||
table-layout: fixed;
|
||||
/* 控制单元格间距（生效的前提是：不能合并边框） */
|
||||
border-spacing: 10px;
|
||||
/* 合并相邻的单元格的边框 */
|
||||
border-collapse: collapse;
|
||||
/* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */
|
||||
empty-cells: hide;
|
||||
/* 设置表格标题的位置 */
|
||||
caption-side: top;
|
||||
}
|
||||
td,th {
|
||||
border:2px orange solid;
|
||||
}
|
||||
.number {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption>人员信息</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="number">序号</th>
|
||||
<th>姓名</th>
|
||||
<th>年龄</th>
|
||||
<th>性别</th>
|
||||
<th>政治面貌</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>张三</td>
|
||||
<td>18</td>
|
||||
<td>男</td>
|
||||
<td>党员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>李四</td>
|
||||
<td>19</td>
|
||||
<td>女</td>
|
||||
<td>团员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>王五</td>
|
||||
<td>20</td>
|
||||
<td></td>
|
||||
<td>群众</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>赵六</td>
|
||||
<td>21</td>
|
||||
<td>女</td>
|
||||
<td>党员</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>鼠标相关属性</title>
|
||||
<style>
|
||||
div {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: skyblue;
|
||||
cursor: url("../images/arrow.png"),pointer;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
input {
|
||||
cursor: move;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
把鼠标放进来看一看
|
||||
<input type="text">
|
||||
<a href="#">百度</a>
|
||||
<button>点我</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>02_元素的显示模式</title>
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#d1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#d2 {
|
||||
background-color: orange;
|
||||
}
|
||||
#d3 {
|
||||
background-color: green;
|
||||
}
|
||||
.one {
|
||||
background-color: skyblue;
|
||||
}
|
||||
.two {
|
||||
background-color: orange;
|
||||
}
|
||||
span {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="d1">山回路转不见君</div>
|
||||
<div id="d2">雪上空留马行处</div>
|
||||
<div id="d3">风里雨里我在尚硅谷等你</div>
|
||||
<hr>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<span class="one">人之初</span>
|
||||
<span class="two">性本善</span>
|
||||
<hr>
|
||||
<img src="../images/悟空.jpg" alt="悟空">
|
||||
<img src="../images/悟空.jpg" alt="悟空">
|
||||
<img src="../images/悟空.jpg" alt="悟空">
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>03_总结各元素的显示模式</title>
|
||||
<style>
|
||||
#s1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#d2 {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span id="s1">123</span><br><br>
|
||||
<div id="d2">456</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>04_修改元素的显示模式</title>
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
#d1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#d2 {
|
||||
background-color: orange;
|
||||
}
|
||||
#d3 {
|
||||
background-color: green;
|
||||
}
|
||||
a {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
}
|
||||
#s1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
#s2 {
|
||||
background-color: orange;
|
||||
}
|
||||
#s3 {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="d1">你好1</div>
|
||||
<div id="d2">你好2</div>
|
||||
<div id="d3">你好3</div>
|
||||
<hr>
|
||||
<a id="s1" href="https://www.baidu.com">去百度</a>
|
||||
<a id="s2" href="https://www.jd.com">去京东</a>
|
||||
<a id="s3" href="https://www.toutiao.com">去百头条</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>05_盒子模型的组成部分</title>
|
||||
<style>
|
||||
div {
|
||||
/* 内容区的宽 */
|
||||
width: 400px;
|
||||
/* 内容区的高 */
|
||||
height: 400px;
|
||||
/* 内边距，设置的背景颜色会填充内边距区域 */
|
||||
padding: 20px;
|
||||
/* 边框，设置的背景颜色会填充边框区域 */
|
||||
border: 10px solid transparent;
|
||||
/* 外边距 */
|
||||
margin: 50px;
|
||||
|
||||
font-size: 20px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>你好啊</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>07_关于默认宽度</title>
|
||||
<style>
|
||||
div {
|
||||
height: 200px;
|
||||
margin: 50px;
|
||||
border: 5px solid black;
|
||||
padding: 5px;
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>你好啊</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>08_盒子的内边距_padding</title>
|
||||
<style>
|
||||
#d1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
|
||||
/* 左侧内边距 */
|
||||
/* padding-left: 20px; */
|
||||
|
||||
/* 上内边距 */
|
||||
/* padding-top: 30px; */
|
||||
|
||||
/* 右侧内边距 */
|
||||
/* padding-right: 40px; */
|
||||
|
||||
/* 底内边距 */
|
||||
/* padding-bottom: 50px; */
|
||||
|
||||
/* 复合属性，写一个值，含义：四个方向的内边距是一样的 */
|
||||
/* padding: 20px; */
|
||||
|
||||
/* 复合属性，写两个值，含义：上下、左右 */
|
||||
/* padding: 10px 20px; */
|
||||
|
||||
/* 复合属性，写三个值，含义：上、左右、下 */
|
||||
/* padding: 10px 20px 30px; */
|
||||
|
||||
/* 复合属性，写四个值，含义：上、右、下、左 */
|
||||
/* padding: 10px 20px 30px 40px; */
|
||||
|
||||
|
||||
font-size: 20px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
span {
|
||||
background-color: orange;
|
||||
font-size: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
img {
|
||||
width: 200px;
|
||||
padding: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="d1">你好啊</div>
|
||||
<hr>
|
||||
<span>我很好</span>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sint.</div>
|
||||
<hr>
|
||||
<img src="../images/小姐姐.gif" alt="">
|
||||
<div>小姐姐很想你呀</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>09_盒子的边框_border</title>
|
||||
<style>
|
||||
div {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: skyblue;
|
||||
|
||||
border-left-width: 10px;
|
||||
border-right-width: 20px;
|
||||
border-top-width: 30px;
|
||||
border-bottom-width: 40px;
|
||||
|
||||
border-left-color: red;
|
||||
border-right-color: orange;
|
||||
border-top-color: green;
|
||||
border-bottom-color: tomato;
|
||||
|
||||
border-left-style: solid;
|
||||
border-right-style: dashed;
|
||||
border-top-style: double;
|
||||
border-bottom-style: dotted;
|
||||
|
||||
/* border-color: red; */
|
||||
/* border-width: 80px; */
|
||||
/* border-style: dashed; */
|
||||
|
||||
border-left: 50px solid purple;
|
||||
border-right: 60px dashed orange;
|
||||
border-top: 70px double green;
|
||||
border-bottom: 80px dotted gray;
|
||||
|
||||
/* border: 10px solid red; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>你好啊</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>10_盒子的外边距_margin</title>
|
||||
<style>
|
||||
div {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
|
||||
/* margin-left: 10px; */
|
||||
/* margin-right: 20px; */
|
||||
/* margin-top: 30px; */
|
||||
/* margin-bottom: 40px; */
|
||||
|
||||
/* margin: 50px; */
|
||||
/* margin: 10px 20px; */
|
||||
/* margin: 10px 20px 30px; */
|
||||
/* margin: 10px 20px 30px 40px; */
|
||||
|
||||
background-color: skyblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>你好啊</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>11_margin的注意事项1</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
padding: 50px;
|
||||
background-color: gray;
|
||||
}
|
||||
.inner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 100px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 子元素的margin是参考父元素的content计算的。 -->
|
||||
<div class="outer">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>15_margin的注意事项5</title>
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.box1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
.box2 {
|
||||
margin-top: -200px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>16_margin塌陷问题</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 400px;
|
||||
/* height: 400px; */
|
||||
background-color: gray;
|
||||
/* border: 10px solid transparent; */
|
||||
/* padding: 10px; */
|
||||
overflow: hidden;
|
||||
}
|
||||
.inner1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: orange;
|
||||
/* 下面这行代码是有问题的 */
|
||||
margin-top: 50px;
|
||||
}
|
||||
.inner2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner1">inner1</div>
|
||||
<div class="inner2">inner2</div>
|
||||
</div>
|
||||
<div>我是一段测试的文字</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>17_margin合并问题</title>
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.box1 {
|
||||
background-color: deepskyblue;
|
||||
/* margin-bottom: 110px; */
|
||||
}
|
||||
.box2 {
|
||||
background-color: orange;
|
||||
margin-top: 110px;
|
||||
}
|
||||
.test {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
}
|
||||
.testa {
|
||||
background-color: purple;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.testb {
|
||||
background-color: tomato;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
<hr>
|
||||
<div class="test testa">a</div><div class="test testb">b</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>18_处理内容的溢出</title>
|
||||
<style>
|
||||
#d1 {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
background-color: skyblue;
|
||||
overflow: auto;
|
||||
/* overflow-x: visible; */
|
||||
/* overflow-y: hidden; */
|
||||
}
|
||||
#d2 {
|
||||
width: 1000px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="d1">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo accusantium veritatis reiciendis id
|
||||
molestiae magnam aspernatur esse blanditiis est. Maiores reprehenderit porro dignissimos, perspiciatis suscipit
|
||||
<div id="d2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur alias provident quia, reiciendis incidunt rerum, perspiciatis quam nobis omnis quae maxime in esse architecto doloremque numquam tenetur eum quasi velit excepturi ut id inventore. Consequuntur, ad iure velit maiores obcaecati voluptatibus expedita molestiae natus sit mollitia veritatis vero aliquid adipisci?</div>
|
||||
ullam perferendis nam inventore sapiente earum voluptatem dolores ut quae fuga. Itaque delectus cum et illum
|
||||
enim dicta similique nemo pariatur, recusandae molestias. Repellendus ratione recusandae minima ea quis eligendi
|
||||
quae amet. Animi, nulla. Perferendis libero nihil eligendi ea! Accusantium molestias numquam reprehenderit
|
||||
quibusdam delectus, repellat impedit ratione. Iste nam autem vero magni facilis at ex ullam, officiis, corrupti
|
||||
voluptate tempora. Quibusdam, aperiam eveniet illo quidem excepturi, neque, repellat totam beatae in quas
|
||||
provident natus!
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>19_隐藏元素的两种方式</title>
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.box1 {
|
||||
background-color: skyblue;
|
||||
display: none;
|
||||
/* visibility: hidden; */
|
||||
}
|
||||
.box2 {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>20_样式的继承</title>
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<style>
|
||||
/* body {
|
||||
|
||||
} */
|
||||
#d1 {
|
||||
height: 600px;
|
||||
padding: 50px;
|
||||
background-color: gray;
|
||||
}
|
||||
#d2 {
|
||||
height: 400px;
|
||||
padding: 50px;
|
||||
background-color: orange;
|
||||
font-size: 40px;
|
||||
color: yellow;
|
||||
font-weight: bold;
|
||||
}
|
||||
#d3 {
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="d1">
|
||||
<div id="d2">
|
||||
<div id="d3" style="font-family: 隶书;">你好啊</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>21_元素的默认样式</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#d1 {
|
||||
font-size: 50px;
|
||||
color: orange;
|
||||
background-color: gray;
|
||||
}
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="d1">
|
||||
<a href="https://www.baidu.com">去百度</a>
|
||||
<span>你好啊</span>
|
||||
</div>
|
||||
<hr>
|
||||
<h1>一级标题</h1>
|
||||
<h2>二级标题</h2>
|
||||
<hr>
|
||||
<p>我是一个段落</p>
|
||||
<hr>
|
||||
<ul>
|
||||
<li>张三</li>
|
||||
<li>李四</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>22_布局技巧1</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: gray;
|
||||
overflow: hidden;
|
||||
}
|
||||
.inner {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background-color: orange;
|
||||
margin: 0 auto;
|
||||
margin-top: 150px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner">inner</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>23_布局技巧2</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: gray;
|
||||
text-align: center;
|
||||
line-height: 400px;
|
||||
}
|
||||
.inner {
|
||||
background-color: orange;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<span class="inner">出来玩啊？</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>24_布局技巧3</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: gray;
|
||||
text-align: center;
|
||||
line-height: 400px;
|
||||
font-size: 0px;
|
||||
text-indent: 20px;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
font-size: 40px;
|
||||
vertical-align: middle;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<span>出来玩啊？</span>
|
||||
<img src="../images/悟空.jpg" alt="">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>25_元素之间的空白问题</title>
|
||||
<style>
|
||||
div {
|
||||
height: 200px;
|
||||
background-color: gray;
|
||||
font-size: 0px;
|
||||
}
|
||||
.s1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
.s2 {
|
||||
background-color: orange;
|
||||
}
|
||||
.s3 {
|
||||
background-color: green;
|
||||
}
|
||||
span {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<span class="s1">人之初</span>
|
||||
<span class="s2">性本善</span>
|
||||
<span class="s3">性相近</span>
|
||||
<hr>
|
||||
<img src="../images/悟空.jpg" alt="">
|
||||
<img src="../images/悟空.jpg" alt="">
|
||||
<img src="../images/悟空.jpg" alt="">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>26_行内块的幽灵空白问题</title>
|
||||
<style>
|
||||
div {
|
||||
width: 600px;
|
||||
background-color: skyblue;
|
||||
/* font-size: 0; */
|
||||
}
|
||||
img {
|
||||
height: 200px;
|
||||
/* vertical-align: bottom; */
|
||||
/* display: block; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img src="../images/我的自拍.jpg" alt="悟空">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,3 @@
|
||||
#d3 {
|
||||
border:1px solid red;
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>01_浮动_简介</title>
|
||||
<style>
|
||||
div {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background-color: skyblue;
|
||||
}
|
||||
img {
|
||||
width: 200px;
|
||||
float: right;
|
||||
/* margin-right: 0.5em; */
|
||||
}
|
||||
.test::first-letter {
|
||||
font-size: 80px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img src="../images/我的自拍.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, minus magnam accusamus eum laborum ducimus possimus beatae fugit illum molestias odit et asperiores adipisci sunt dolorem qui autem enim excepturi alias ab unde temporibus. Sapiente labore a magnam commodi itaque architecto quos doloribus voluptates perferendis rem, earum consectetur. Tempora inventore ducimus veritatis voluptatem deleniti rem laboriosam. Officiis, impedit explicabo! Impedit labore ea et vero rerum nihil in cum qui, itaque blanditiis eius nemo est? Tempora explicabo voluptates consectetur officia aperiam eos impedit veritatis necessitatibus quidem deleniti ea, in odit cum ex harum voluptas, quos eveniet quae voluptate aspernatur quod! Nostrum?
|
||||
</div>
|
||||
<hr>
|
||||
<div class="test">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptate impedit provident, debitis nostrum cumque iste ab ipsum tempora dicta neque aliquid error in dolorum qui iure. Quibusdam eligendi ea id! Accusamus praesentium vitae quidem iusto placeat provident alias tempore quasi quos, nesciunt rem, molestias quisquam? Quisquam laborum nulla ea veniam, nesciunt, dolores modi officia animi laboriosam minima exercitationem. Reiciendis enim sint at nisi quae obcaecati, vel iusto non libero officia possimus explicabo quis harum inventore sapiente accusantium id quidem cupiditate et expedita maiores perferendis! Reiciendis, distinctio doloribus! Quia harum iste doloremque pariatur obcaecati doloribus quasi iusto minima magnam iure!
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>02_元素浮动后的特点</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
padding: 10px;
|
||||
background-color: gray;
|
||||
text-align: center;
|
||||
}
|
||||
.box {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
.box1 {
|
||||
background-color: skyblue;
|
||||
}
|
||||
.box2 {
|
||||
background-color: orange;
|
||||
float: left;
|
||||
/* width: 200px; */
|
||||
/* height: 200px; */
|
||||
/* margin-left: 20px; */
|
||||
/* margin-right: 20px; */
|
||||
/* margin-top: 20px; */
|
||||
/* margin-bottom: 20px; */
|
||||
}
|
||||
.box3 {
|
||||
background-color: green;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="box box1">盒子1</div>
|
||||
<div class="box box2">盒子2</div>
|
||||
<div class="box box3">盒子3</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>03_浮动的小练习</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 500px;
|
||||
background-color: gray;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: skyblue;
|
||||
border: 1px solid black;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
}
|
||||
.box1 {
|
||||
height: 230px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
<div class="box box3">3</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>04_浮动后的影响</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 500px;
|
||||
background-color: gray;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: skyblue;
|
||||
border: 1px solid black;
|
||||
margin: 10px;
|
||||
}
|
||||
.box1,.box2,.box3 {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
<div class="box box3">3</div>
|
||||
</div>
|
||||
<!-- <div style="background-color:orange">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda expedita rem similique at laboriosam, magnam, ipsam inventore odit odio ipsum ex ad beatae quia, consequuntur quam dolore modi atque? Doloribus libero eos ut consequatur, assumenda amet quidem est quae doloremque maxime id cumque explicabo aliquam. Quas, explicabo illo neque rem dolores impedit aspernatur suscipit vel, dolore incidunt totam aliquam laborum! Fuga in rerum repudiandae suscipit, labore optio iste ratione nobis velit dolorem laborum doloribus perferendis porro enim, sequi, delectus nulla quam? Recusandae quidem nobis voluptatum quam quaerat itaque aliquam reiciendis molestias ratione nesciunt exercitationem quisquam laborum sit error magnam optio atque, debitis tempore. Quibusdam repellendus perspiciatis id consequuntur saepe suscipit enim temporibus, ipsa minima dolores laudantium inventore recusandae nam. Quo harum sunt reprehenderit nisi? Error quia quibusdam possimus tempore incidunt. Doloribus vitae quis nisi quod, aperiam molestias id quibusdam voluptate recusandae iure tempore hic doloremque similique corrupti expedita non odit a natus. Eius, harum iste, dolor omnis, saepe dolore illo aliquid impedit officia explicabo itaque dicta eos exercitationem at tempora perspiciatis voluptate ad eaque mollitia maiores obcaecati numquam. Veniam ex facere fugit ullam est velit officiis a autem perferendis ratione aliquid dolor voluptate magnam, illo alias sequi totam, ab nemo?</div> -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>05_解决浮动后的影响</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 500px;
|
||||
background-color: gray;
|
||||
border: 1px solid black;
|
||||
/* 第一种解决方案 */
|
||||
/* height: 122px; */
|
||||
|
||||
/* 第二种解决方案 */
|
||||
/* float: left; */
|
||||
|
||||
/* 第三种解决方案 */
|
||||
/* overflow: scroll; */
|
||||
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: skyblue;
|
||||
border: 1px solid black;
|
||||
margin: 10px;
|
||||
}
|
||||
.box1,.box2,.box3,.box4 {
|
||||
float: left;
|
||||
}
|
||||
.mofa {
|
||||
/* 第四种解决方案 */
|
||||
clear: both;
|
||||
}
|
||||
/* 第五种解决方案 */
|
||||
.outer::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
<div class="box box3">3</div>
|
||||
<div class="box box4">4</div>
|
||||
<!-- <div class="mofa"></div> -->
|
||||
</div>
|
||||
<div style="background-color:orange">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda expedita rem similique at laboriosam, magnam, ipsam inventore odit odio ipsum ex ad beatae quia, consequuntur quam dolore modi atque? Doloribus libero eos ut consequatur, assumenda amet quidem est quae doloremque maxime id cumque explicabo aliquam. Quas, explicabo illo neque rem dolores impedit aspernatur suscipit vel, dolore incidunt totam aliquam laborum! Fuga in rerum repudiandae suscipit, labore optio iste ratione nobis velit dolorem laborum doloribus perferendis porro enim, sequi, delectus nulla quam? Recusandae quidem nobis voluptatum quam quaerat itaque aliquam reiciendis molestias ratione nesciunt exercitationem quisquam laborum sit error magnam optio atque, debitis tempore. Quibusdam repellendus perspiciatis id consequuntur saepe suscipit enim temporibus, ipsa minima dolores laudantium inventore recusandae nam. Quo harum sunt reprehenderit nisi? Error quia quibusdam possimus tempore incidunt. Doloribus vitae quis nisi quod, aperiam molestias id quibusdam voluptate recusandae iure tempore hic doloremque similique corrupti expedita non odit a natus. Eius, harum iste, dolor omnis, saepe dolore illo aliquid impedit officia explicabo itaque dicta eos exercitationem at tempora perspiciatis voluptate ad eaque mollitia maiores obcaecati numquam. Veniam ex facere fugit ullam est velit officiis a autem perferendis ratione aliquid dolor voluptate magnam, illo alias sequi totam, ab nemo?</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>06_浮动布局小练习</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.leftfix {
|
||||
float: left;
|
||||
}
|
||||
.rightfix {
|
||||
float: right;
|
||||
}
|
||||
.clearfix::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.container {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.logo {
|
||||
width: 200px;
|
||||
}
|
||||
.banner1 {
|
||||
width: 540px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.banner2 {
|
||||
width: 200px;
|
||||
}
|
||||
.logo,.banner1,.banner2 {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.menu {
|
||||
height: 30px;
|
||||
background-color: #ccc;
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.item1,.item2 {
|
||||
width: 368px;
|
||||
height: 198px;
|
||||
line-height: 198px;
|
||||
border: 1px solid black;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.item3,.item4,.item5,.item6 {
|
||||
width: 178px;
|
||||
height: 198px;
|
||||
line-height: 198px;
|
||||
border: 1px solid black;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.item7,.item8,.item9 {
|
||||
width: 198px;
|
||||
height: 128px;
|
||||
line-height: 128px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.item8 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.footer {
|
||||
height: 60px;
|
||||
background-color: #ccc;
|
||||
margin-top: 10px;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<div class="page-header clearfix">
|
||||
<div class="logo leftfix">logo</div>
|
||||
<div class="banner1 leftfix">banner1</div>
|
||||
<div class="banner2 leftfix">banner2</div>
|
||||
</div>
|
||||
<!-- 菜单 -->
|
||||
<div class="menu">菜单</div>
|
||||
<!-- 内容区 -->
|
||||
<div class="content clearfix">
|
||||
<!-- 左侧 -->
|
||||
<div class="left leftfix">
|
||||
<!-- 上 -->
|
||||
<div class="top clearfix">
|
||||
<div class="item1 leftfix">栏目一</div>
|
||||
<div class="item2 leftfix">栏目二</div>
|
||||
</div>
|
||||
<!-- 下 -->
|
||||
<div class="bottom clearfix">
|
||||
<div class="item3 leftfix">栏目三</div>
|
||||
<div class="item4 leftfix">栏目四</div>
|
||||
<div class="item5 leftfix">栏目五</div>
|
||||
<div class="item6 leftfix">栏目六</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right rightfix">
|
||||
<div class="item7">栏目七</div>
|
||||
<div class="item8">栏目八</div>
|
||||
<div class="item9">栏目九</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页脚 -->
|
||||
<div class="footer">页脚</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>01_相对定位</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 500px;
|
||||
background-color: skyblue;
|
||||
border: 1px solid black;
|
||||
padding: 20px;
|
||||
}
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.box1 {
|
||||
background-color: #888;
|
||||
}
|
||||
.box2 {
|
||||
background-color: orange;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
/* left: 100px; */
|
||||
/* margin-left: 50px; */
|
||||
/* float: right; */
|
||||
}
|
||||
.box3 {
|
||||
background-color: green;
|
||||
/* position: relative; */
|
||||
/* top: -50px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
<div class="box box3">3</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>04_粘性定位</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
height: 2000px;
|
||||
}
|
||||
.page-header {
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
background-color: orange;
|
||||
font-size: 20px;
|
||||
}
|
||||
/* .content { */
|
||||
/* height: 200px; */
|
||||
/* overflow: auto; */
|
||||
/* overflow: scroll; */
|
||||
/* } */
|
||||
.item {
|
||||
background-color: gray;
|
||||
}
|
||||
.first {
|
||||
background-color: skyblue;
|
||||
font-size: 40px;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
/* float: right; */
|
||||
/* margin-right: 100px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 头部 -->
|
||||
<div class="page-header">头部</div>
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<!-- 每一项 -->
|
||||
<div class="item">
|
||||
<div class="first">A</div>
|
||||
<h2>A1</h2>
|
||||
<h2>A2</h2>
|
||||
<h2>A3</h2>
|
||||
<h2>A4</h2>
|
||||
<h2>A5</h2>
|
||||
<h2>A6</h2>
|
||||
<h2>A7</h2>
|
||||
<h2>A8</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="first">B</div>
|
||||
<h2>B1</h2>
|
||||
<h2>B2</h2>
|
||||
<h2>B3</h2>
|
||||
<h2>B4</h2>
|
||||
<h2>B5</h2>
|
||||
<h2>B6</h2>
|
||||
<h2>B7</h2>
|
||||
<h2>B8</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="first">C</div>
|
||||
<h2>C1</h2>
|
||||
<h2>C2</h2>
|
||||
<h2>C3</h2>
|
||||
<h2>C4</h2>
|
||||
<h2>C5</h2>
|
||||
<h2>C6</h2>
|
||||
<h2>C7</h2>
|
||||
<h2>C8</h2>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>05_定位的层级</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 500px;
|
||||
background-color: skyblue;
|
||||
border: 1px solid black;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
}
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.box1 {
|
||||
background-color: #888;
|
||||
}
|
||||
.box2 {
|
||||
background-color: orange;
|
||||
position: relative;
|
||||
top: -150px;
|
||||
left: 50px;
|
||||
}
|
||||
.box3 {
|
||||
background-color: green;
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
left: 130px;
|
||||
}
|
||||
.box4 {
|
||||
background-color: red;
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 200px;
|
||||
z-index: 50;
|
||||
}
|
||||
.box5 {
|
||||
background-color: purple;
|
||||
position: fixed;
|
||||
top: 300px;
|
||||
left: 300px;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="box box1">1</div>
|
||||
<div class="box box2">2</div>
|
||||
<div class="box box3">3</div>
|
||||
<div class="box box4">4</div>
|
||||
</div>
|
||||
<div class="box box5">5</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>06_定位可以越过padding</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
padding: 20px;
|
||||
background-color: #888;
|
||||
position: relative;
|
||||
}
|
||||
.inner {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: orange;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>07_定位的特殊应用1</title>
|
||||
<style>
|
||||
.outer {
|
||||
height: 400px;
|
||||
background-color: #888;
|
||||
position: relative;
|
||||
}
|
||||
.inner {
|
||||
background-color: orange;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
border: 10px solid black;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner">你好啊</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.outer {
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
background-color: #888;
|
||||
position: relative;
|
||||
}
|
||||
.inner {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: orange;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
/* 方案一 */
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
|
||||
/* 方案二 */
|
||||
/* left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -200px;
|
||||
margin-top: -50px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner">你好啊</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>01_重置默认样式</title>
|
||||
<!-- <link rel="stylesheet" href="./reset.css"> -->
|
||||
<!-- <link rel="stylesheet" href="./normalize.css"> -->
|
||||
<style>
|
||||
.demo {
|
||||
background-color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo">123</div>
|
||||
<h1>一级标题</h1>
|
||||
<h2>二级标题</h2>
|
||||
<h3>三级标题</h3>
|
||||
<h4>四级标题</h4>
|
||||
<a href="#">去百度</a>
|
||||
<ul>
|
||||
<li>张三</li>
|
||||
<li>李四</li>
|
||||
<li>王五</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
/* 基础设置 */
|
||||
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul,ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
/* 底部留白 */
|
||||
display: block;
|
||||
border:0;
|
||||
}
|
||||
|
||||
b,strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
/* 父元素字号的百分比 */
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
i,em {
|
||||
/* 不倾斜 */
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
u,ins,s,del {
|
||||
/* 去掉中划线和下划线 */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #999;
|
||||
/* 相当于是cellspacing */
|
||||
border-spacing: 0;
|
||||
/* 1px边框 */
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,th {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
input,button {
|
||||
/* 去掉轮廓线 */
|
||||
outline: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
/* 风格设置 */
|
||||
body {
|
||||
font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#DD302D;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.leftfix {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rightfix {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
Loading…
Reference in new issue