bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
历届学生/熊坤/2019-03-14/display.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display</title>
</head>
<body>
<p>我是p标签</p>
<a href="">我是a1标签</a>
<a href="">我是a2标签</a>
</body>
</html>

43
历届学生/熊坤/2019-03-14/float.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>float</title>
<style>
body {
margin: 0;
}
.box-1,
.box-2,
.box-3 {
float: left;
}
.box-1 {
width: 200px;
height: 400px;
background: red;
}
.box-2 {
width: 400px;
height: 400px;
background: yellow;
}
.box-3 {
width: 200px;
height: 400px;
background: black;
}
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</body>
</html>

89
历届学生/熊坤/2019-03-14/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
body {
margin: 0;
}
.box-1 {
width: 150px;
height: 150px;
background: red;
display: inline-block;
/* margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px; */
/* 四个方法同时设置 */
/* margin: 10px; */
/* 上下 左右 */
/* margin: 20px 30px; */
/* 上 左右 下 */
/* margin: 10px 20px 30px; */
/* 上 右 下 左 */
/* margin: 10px 20px 30px 40px; */
/* padding 和margin规律一样 */
/* border: 1px solid #000;
border-left-width: 5px;
border-right-width: 10px;
border-top-width: 15px;
border-bottom-width: 20px;
border-left-style: dashed;
border-right-style: groove;
border-top-style: double;
border-bottom-style: solid;
border-left-color: blue;
border-right-color: burlywood;
border-top-color: aqua;
border-bottom-color: brown; */
border-top: 20px solid #000;
border-right: 20px solid #ff0;
border-bottom: 20px solid #8d8d88;
border-left: 20px solid blue;
}
.box-2 {
width: 150px;
height: 150px;
background: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div class="box-1">
box-1
</div>
<div class="box-2">
box-2
</div>
</body>
</html>

64
历届学生/熊坤/2019-03-14/布局案例.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局案例</title>
<style>
body {
margin: 0;
}
.top {
height: 40px;
background: yellow;
}
.left,
.right{
width: 200px;
height: 500px;
}
.left {
background: #000;
}
.right {
background: red;
}
.content {
width: 600px;
height: 500px;
background: palevioletred;
}
.float-left {
float: left;
}
.bottom {
height: 40px;
width: 100%;
background: #8d8d8d;
clear: both;
}
</style>
</head>
<body>
<div class="main">
<div class="top">头部</div>
<div class="main-center">
<div class="left float-left">左边</div>
<div class="content float-left">中间内容</div>
<div class="right float-left">右边</div>
</div>
<div class="bottom">底部版权</div>
</div>
</body>
</html>

31
历届学生/熊坤/2019-03-14/笔记.txt Normal file
View File

@@ -0,0 +1,31 @@
小知识点：
1：块级标签和行内标签相互转化
块级标签: 可以设置宽高属性
行内标签: 不可以设置宽高属性
display:
1: block 将行内标签元素转换为块标签，可以设置宽高
2: inline 将块标签转换为行内标签，将会失去设置宽高的特性
3: inline-block 让一个元素同时具有 block 和 inline 的所有属性
2： 盒子模型：网页中任何元素都具有盒子模型的特征，
margin 外边距
padding 内边距
border 边框
content 内容
元素的真实宽高 = 你设置的宽高 + (padding + padding) + (border + border)
3：浮动：https://www.cnblogs.com/acorn/p/5249089.html
4：提前预习：
定位：http://www.runoob.com/css/css-positioning.html