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

4
历届学生/front-end-team-10/每天课程/2023-02-08/index.css Normal file
View File

@@ -0,0 +1,4 @@
.two {
color: green !important;
}

39
历届学生/front-end-team-10/每天课程/2023-02-08/index.html Normal file
View File

@@ -0,0 +1,39 @@
<!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>css 学习</title>
<link rel="stylesheet" href="index.css">
<style>
.two {
color: blue;
}
</style>
</head>
<body>
<p id="one">这是红色文字</p>
<p class="two" style="color: brown;">这是蓝色文字</p>
<h2 class="three">哈哈哈</h2>
<input type="text" placeholder="用户名">
<h1>你好</h1>
<p>你好少时诵诗书所</p>
<div class="test">
<p>你好</p>
</div>
</body>
</html>

141
历届学生/front-end-team-10/每天课程/2023-02-08/index2.html Normal file
View File

@@ -0,0 +1,141 @@
<!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>css 属性练习</title>
<style>
body {
height: 3000px;
}
@font-face {
font-family: "test";
src: url("./shangshouzhaocaimaoti.ttf");
}
.font {
font-size: 30px;
font-family: "test";
}
.demo {
width: 200px;
height: 200px;
background: red;
text-align: center;
line-height: 200px;
}
.demo2 {
width: 80px;
height: 80px;
background: blue;
vertical-align: middle;
display: inline-block;
box-shadow: 7px 4px 6px #000;
}
.demo2+p {
display: inline-block;
text-shadow: 13px 6px 2px #f00;
}
a {
text-decoration: none;
}
.back {
width: 300px;
height: 300px;
background-image: url("https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp");
background-repeat: no-repeat;
background-color: #8d8d8d;
background-position: 31px 33px;
background-size: cover;
}
.banner {
height: 400px;
background-image: url("https://sqimg.qq.com/qq_product_operations/im/2015/fisrtbg.jpg");
background-attachment: fixed;
}
.roll {
height: 300px;
width: 400px;
background: #8d8d8d;
overflow-y: scroll;
}
</style>
</head>
<body>
<p class="font">你好 aaaa 00001123344</p>
<div class="demo">
你好啊
</div>
<a href="">你哈哈哈啊啊哈</a>
<div class="demo2"></div>
<p>用户昵称</p>
<div class="back"></div>
<div class="banner">
</div>
<div class="roll">
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<p>文字4</p>
<p>文字5</p>
<p>文字6</p>
<p>文字7</p>
<p>文字8</p>
<p>文字9</p>
<p>文字10</p>
<p>文字11</p>
<p>文字12</p>
<p>文字13</p>
<p>文字14</p>
<p>文字15</p>
<p>文字16</p>
<p>文字17</p>
<p>文字18</p>
<p>文字19</p>
<p>文字20</p>
<p>文字21</p>
<p>文字22</p>
<p>文字23</p>
<p>文字24</p>
<p>文字25</p>
<p>文字26</p>
<p>文字27</p>
<p>文字28</p>
<p>文字29</p>
<p>文字30</p>
<p>文字31</p>
<p>文字32</p>
<p>文字33</p>
<p>文字34</p>
<p>文字35</p>
<p>文字36</p>
<p>文字37</p>
<p>文字38</p>
<p>文字39</p>
<p>文字40</p>
<p>文字41</p>
<p>文字42</p>
<p>文字43</p>
<p>文字44</p>
<p>文字45</p>
<p>文字46</p>
<p>文字47</p>
<p>文字48</p>
<p>文字49</p>
<p>文字50</p>
</div>
</body>
</html>

BIN
历届学生/front-end-team-10/每天课程/2023-02-08/shangshouzhaocaimaoti.ttf Normal file
View File

Binary file not shown.

94
历届学生/front-end-team-10/每天课程/2023-02-08/笔记.txt Normal file
View File

@@ -0,0 +1,94 @@
css 写法
三种：
内部写法（写在开始标签内部的）
<p style="color: blue;">这是测试文字</p>
优先级最高
!important 提示css属性的优先级
内联写法（写在head里面的）
外链写法（单独一个css文件）
基本写法：
选择器 {
属性名: 属性值 （可选 !important）
}
组合写法：
选择1 选择器2: 选择 标签1 中 的 标签2 简写：嵌套关系
选择1 > 选择器2: 选择 父标签为1 中 的 2标签 简写：嵌套关系
选择1,选择器2: 同时选中 标签1和2
选择1+选择器2: 选中 紧跟在 标签1 后面 的标签2
选择器: 找人的一种方式
标签选择器
给标签取个名字
类选择器 class （简写 . ）
id选择器 简写 #
这个名字是这个网页唯一的
* 通配符选择器
一般用来清除 标签 的 默认样式
伪类选择器
:hover
:focus
:before
:after
路径写法：
绝对路径
相对距离
./ 当前路径开始寻找
../ 从当前位置返回上一级开始寻找
/ 从当前路径的开始位置开始寻找
css属性学习：
display: 可以隐藏显示元素，将块 和 行 进行 相互转换
inline-block 同时具有 行标签 放在一行的特性，还具有块标签可以设置宽高的特殊
inline 行标签
block 块标签
none 隐藏元素
text-decoration: none; 清除下划线
text-shadow：13px 6px 2px #f00 文字加阴影
font-size: 30px; 设置字体大小
font-weight: bold; 加错
color: red; 设置颜色
background: red; 设置背景色
text-align: center; 文字在父元素的宽度内部居中
opacity: 0 ~ 1; 设置透明度
line-height 垂直居中 数值和父元素的高度一样
注意：只针对单行文字
父元素内部子元素的居中方式
vertical-align 垂直居中
letter-spacing: 3px; 字符之间的间距（x轴）

49
历届学生/front-end-team-10/每天课程/2023-02-08/菜单.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
.menu>li {
float: left;
position: relative;
}
.dorp_menu {
display: none;
position: absolute;
left: 0;
width: 76px;
}
.menu>li:hover .dorp_menu{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>
菜单3
<ul class="dorp_menu">
<li>菜单3-1</li>
<li>菜单3-2</li>
<li>菜单3-3</li>
</ul>
</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
</ul>
</body>
</html>