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

107
历届学生/逯帅帅/每日课程/2021-02-25/css.html Normal file
View File

@@ -0,0 +1,107 @@
<!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>
<!-- <link rel="stylesheet" href="test.css"> -->
<style>
/* p {
color: yellow;
} */
.red {
color: red;
}
.blue, .yellow {
color: blue;
}
* {
margin: 0;
}
.box span {
color: rosybrown;
}
.box span+p {
color: sandybrown;
}
input[type="text"] {
width: 100px;
}
input[type="number"] {
width: 200px;
}
input[type="number"]:focus {
width: 400px;
background: red;
}
.zhangsan:hover {
background: green;
}
/* .aaa li:nth-child(2n+1) {
color: red;
} */
.aaa li:last-child {
color: red;
}
.aadsdd::before{
content: "测试";
}
.aadsdd::after{
content: "测试1";
}
</style>
</head>
<body>
<p class="red">212222</p>
<p class="blue">wededew</p>
<p class="yellow">黄色</p>
<div class="box">
<span>ddddd</span>
<p>ddddd</p>
<p>ddddd2</p>
</div>
<div class="login">
<input type="text">
<input type="number">
</div>
<p class="zhangsan">dwqdewdweq</p>
<ul class="aaa">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<p class="aadsdd">
测试文字
</p>
</body>
</html>

102
历届学生/逯帅帅/每日课程/2021-02-25/index.html Normal file
View File

@@ -0,0 +1,102 @@
<html>
<head>
<title>1111</title>
<meta charset="utf-8">
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<p>段落</p>
<p>wqdwq</p>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表1</li>
<li>有序列表1</li>
</ol>
<a href="https://www.baidu.com/" target="_blank">超链接</a>
<a href="tel:15155145354">拨打电话</a>
<img src="https://img2.zol.com.cn/product/12_501x2000/103/cerrC02hYbLxM.jpgsss" alt="图片无法显示"/>
<video
controls
autoplay
muted
loop
src="https://www.runoob.com/try/demo_source/movie.mp4">
</video>
<input type="text" placeholder="请输入用户名" value="张三">
<input type="number" placeholder="请输入手机号">
<input type="password" placeholder="请输入密码">
<input type="button" value="点我">
<input type="submit" value="点我">
<button>点我</button>
<input type="radio" name="qqqq">
<input type="radio" name="qqqq">
<input type="radio" name="qqqq">
<input type="color">
<input type="date">
<form action="http://127.0.0.1/login.php" method="post">
<input required type="text" name="u" placeholder="用户名">
<input required type="password" name="p" placeholder="密码">
<input disabled type="submit" value="登 录">
<input type="reset" value="清空">
</form>
<select name="" id="">
<option value="null">请选择</option>
<option value="1">合肥</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select>
<textarea name="" id="" placeholder="输入评价内容"></textarea>
<pre>
你好
我是是是是
的的哇
</pre>
<p>
3C°
</p>
<p>
<strong> &lt;section&gt; </strong> 标签 <b>定义</b> 文档中<big>的节</big> （ <small>section、区段</small> ）。比如章节、页眉、页脚或 <del>文档中</del> 的其他部分。
</p>
<div>qdqwdfqw</div>
<div>qdqwdfqw</div>
<a href="">qqq</a>
<a href="">333</a>
</body>
</html>

3
历届学生/逯帅帅/每日课程/2021-02-25/test.css Normal file
View File

@@ -0,0 +1,3 @@
p {
color: blue !important;
}

68
历届学生/逯帅帅/每日课程/2021-02-25/定位.html Normal file
View File

@@ -0,0 +1,68 @@
<!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>
<style>
.box {
width: 100px;
height: 100px;
background: blue;
border: 5px solid red;
padding: 5px;
box-sizing: border-box;
position: relative;
left: 24px;
}
.box_1 {
width: 100px;
height: 100px;
background: brown;
}
.box_2 {
width: 100px;
height: 100px;
background: chartreuse;
}
.float {
float: left;
}
.box_3 {
width: 70px;
height: 70px;
background: palevioletred;
}
.box_4 {
width: 40px;
height: 40px;
background: sandybrown;
}
.box_2 {
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="float box"></div>
<div class="float box_1">
<div class="box_3">
<div class="box_4"></div>
</div>
</div>
<div class="float box_2"></div>
</body>
</html>

47
历届学生/逯帅帅/每日课程/2021-02-25/盒子模型.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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: blue;
border: 5px solid red;
padding: 5px;
box-sizing: border-box;
}
.box_1 {
width: 100px;
height: 100px;
background: brown;
}
.box_2 {
width: 100px;
height: 100px;
background: chartreuse;
}
.float {
float: right;
}
</style>
</head>
<body>
<div class="float box"></div>
<div class="float box_1"></div>
<div class="box_2"></div>
</body>
</html>

165
历届学生/逯帅帅/每日课程/2021-02-25/笔记.txt Normal file
View File

@@ -0,0 +1,165 @@
前端（）
页面仔，切图仔 美工 的年代（jquery）
web开发方式：
后端渲染 80% 1万
前端 20% 3千
过渡的年代（mvc）
mvvm （react，vue，angular）
前端
html （骨骼 写网页的结构）
css （皮肤外貌 主要对 html进行美化的）
JavaScript js （人的思想 可以实现对html和css的控制）
屌丝年代：一般表单验证，弹窗，特效
高富帅年代：做后端开发，操作系统，桌面开发，移动端（app），pc，h5
前端 + 后端（数据库，服务器）
html
<> </>
谷歌浏览器
百度
请求方式
get
www.baidu.com?name=zhangsan&pwd=11111&d=111
表示从服务器获取一个资源
post
表示向服务器提交一条数据
put
表示向服务器更新一条数据
delet
表示向服务器删除一条数据
div 作用？
主要是用来实现网页布局划分的
标签分类：
作用：
1：块标签 div p ul h1
独占一行的标签
可以设置宽高
2：行标签 a img input
不独占一行的标签
可以设置宽高
css （层叠样式表）
写样式做美化
3中写法：
1：内联写法
<p style="color: blue;">212222</p>
2：内部写法
3：外链写法
!important; 改变css的权重
选择器
选择器类型 {
属性名: 属性值;
}
1：标签选择器
2：属性选择器
3：id选择器 表示这个类名是唯一的 （基本没啥用）
要求：在用id的时候最好不要出现重复
场景：
用来和js进行交互
#名称 {
}
4：class选择器
.名称 {
}
5：全局选择器 * （基本没啥用）
清除浏览器默认样式的
6：伪类选择器
盒子模型
就是现实生活中的 盒子
外边距 margin
内边距 padding
边框 border
内容 content
计算规则：
最终的宽高 = 你写的宽 + 左右边框 + 左右内边距
你写的高 + 上下边框 + 上下内边距
box-sizing: border-box;
定位
让元素固定在某个位置
相对定位
1: 如果元素被甚至了相对定位，元素会脱离文档流，原本所在位置不会删除
定位参考对象：
参考以前位置
绝对定位（墙头草）.
如果元素被设置了绝对定位，元素会脱离文档流，原本所在位置会删除
是否有父容器，是否定位
定位了：
参考父容器
没有定位：
参考body来定位
固定定位
如果元素被设置了固定定位，元素会脱离文档流，原本所在位置会删除
参考浏览器来定位