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

BIN
历届学生/熊坤/2019-03-15/img/back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
历届学生/熊坤/2019-03-15/img/touxiang.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

79
历届学生/熊坤/2019-03-15/下拉菜单.html Normal file
View File

@@ -0,0 +1,79 @@
<!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,ul {
padding: 0;
margin: 0;
}
body {
margin-top: 40px;
}
/* ul li {
list-style: none;
display: inline-block;
width: 160px;
text-align: center;
} */
ul li {
list-style: none;
float: left;
width: 160px;
text-align: center;
}
.dropdown {
display: none;
}
.hover-item:hover .dropdown {
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li class="hover-item">
HTML 学习
<ul class="dropdown">
<li>基础标签学习</li>
<li>块级标签学习</li>
<li>图片标签学习</li>
</ul>
</li>
<li class="hover-item">
CSS 学习
<ul class="dropdown">
<li>定位学习</li>
<li>浮动学习</li>
<li>基础样式学习</li>
</ul>
</li>
<li class="hover-item">
JS 学习
<ul class="dropdown">
<li>函数学习</li>
<li>语法学习</li>
<li>算法学习</li>
</ul>
</li>
</ul>
</body>
</html>

72
历届学生/熊坤/2019-03-15/定位学习.html Normal file
View File

@@ -0,0 +1,72 @@
<!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>css定位</title>
<style>
body {
margin: 0;
height: 2000px;
}
.box-1,
.box-2,
.box-3,
.box-4 {
width: 150px;
height: 150px;
float: left;
}
.box-1 {
background: yellow;
}
.box-2 {
background: black;
position: relative;
left: 40px;
top: 50px;
z-index: -5;
}
.box-3 {
background: blueviolet;
position: relative;
}
.box-3-1 {
width: 80px;
height: 80px;
background: green;
position: absolute;
left: 17px;
top: 107px;
z-index: -2;
}
.box-4 {
background: red;
}
.box-4:hover {
background: rgb(18, 185, 60);
}
.box-5 {
background: #8d8d8d;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3">
<div class="box-3-1"></div>
</div>
<div class="box-4"></div>
<div class="box-5">
<img src="https://tpc.googlesyndication.com/simgad/4802151631125041737/downsize_200k_v1?w=400&h=209" alt="" srcset="">
</div>
</body>
</html>

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

@@ -0,0 +1,31 @@
css 定位(position)：通过几种方式让你能够在网页上按照你喜欢的方式来布局页面
1: relative 相对定位 : 标签被设置relative后，元素将会从文档流中脱离出来，但是他原本的位置还在，不会被删除
所谓的相对，其实是相对他原本的位置来进行移动。
2: fixed 固定定位 :
3: absolute 绝对定位 :
1: 被设置绝对定位的元素，他原本的位置将会从文档流中删除。
参考对象：
1：如果被设置绝对定位的元素具有父元素，而且父元素如果已经进行定位，那么参考父容器来进行定位
父元素可以进行的定位有：
fixed
relative
absolute
2：如果被设置绝对定位的元素具有父元素，但是父元素没有进行定位，那么将会参考浏览器边框。
设置 ul li，或者 ol li 的样式：list-style: none;
选择器：hover 鼠标悬浮莫个元素的时候触发莫个代码
预习：css3过渡属性：http://www.runoob.com/css3/css3-transitions.html

64
历届学生/熊坤/2019-03-15/遮罩层 重点.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>Document</title>
<style>
body {
margin: 0;
}
.zhezhao {
width: 436px;
height: 300px;
border: 1px solid #000;
background-image: url("./img/back.jpg");
position: relative;
}
.user {
width: 436px;
height: 70px;
background: #0000003b;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.user img {
width: 54px;
border-radius: 100%;
float: left;
margin-top: 10px;
margin-left: 18px;
}
.user p {
color: white;
display: inline-block;
margin: 0;
margin-top: 26px;
margin-left: 14px;
}
.zhezhao:hover .user {
display: inline-block;
}
</style>
</head>
<body>
<div class="zhezhao">
<div class="user">
<img src="img/touxiang.jpg" alt="" srcset="">
<p>熊坤</p>
</div>
</div>
</body>
</html>