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

21
历届学生/罗朝/2019-04-01/class.html Normal file
View File

@@ -0,0 +1,21 @@
<!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>
</head>
<body>
<p>我是p</p>
<h2>我是h2</h2>
<a href="">超链接1</a>
<strong>我是 strong</strong>
</body>
</html>

79
历届学生/罗朝/2019-04-01/css.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>css 学习</title>
<!-- <link rel="stylesheet" href="css/index.css"> -->
<style>
* {
color: #8d8d8d;
}
.blue {
color: blue;
}
.red {
color: green;
}
.green {
color: green;
}
.header h2,
.footer h2{
font-size: 100px;
}
.font14 {
font-size: 14px;
}
.colorGreen {
color: green;
}
a {
color: chocolate;
}
a:hover {
color: yellow;
font-size: 24px;
}
.ser {
width: 100px;
transition: all 1s ease-in;
}
.ser:focus {
width: 200px;
}
</style>
</head>
<body>
<!-- <p class="blue">我是p标签1</p>
<p class="red">我是p标签2</p>
<p class="green">我是p标签3</p>
<p class="red">张三</p>
<p id="UserName">你好1</p>
<h2>dddd</h2>
<a href="">dddd</a> -->
<div class="header colorGreen font14">
<h2>我是头部</h2>
</div>
<div class="footer font14">
<h2 class="font14">我是版权</h2>
</div>
<a href="">hover悬浮</a>
<input class="ser" type="text" placeholder="请输入用户名">
</body>
</html>

3
历届学生/罗朝/2019-04-01/css/index.css Normal file
View File

@@ -0,0 +1,3 @@
p {
color:red;
}

58
历届学生/罗朝/2019-04-01/index.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>
</head>
<body>
请选择你的爱好：
<select name="">
<option value="0">--请选择--</option>
<option value="1">编程</option>
<option value="2">骑车</option>
<option value="3">游泳</option>
<option value="4">跑步</option>
</select>
<table>
<tr>
<th>价格</th>
<th>品牌</th>
</tr>
<tr>
<td>100</td>
<td>小米</td>
</tr>
<tr>
<td>200</td>
<td>魅族</td>
</tr>
</table>
<p>
<strong>1. doctype 声明是不区分大小写的</strong> , 用来告知 Web 浏览器页面使用了哪种 HTML 版本。
<big>在HTML</big> 4.01 中，<!DOCTYPE> 声 <small>明需引</small> 用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML，因此不要求引用 DTD。
2. 对于 <del>中文网页</del> 需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。
</p>
<pre>
function loggingDecorator(wrapped) {
return function() {
console.log('Starting');
const result = wrapped.apply(this, arguments);
console.log('Finished');
return result;
}
}
</pre>
</body>
</html>

84
历届学生/罗朝/2019-04-01/笔记.txt Normal file
View File

@@ -0,0 +1,84 @@
html 标签分类
1：块级标签
在浏览器里面会独占一行的标签
块级标签 具有宽高属性，也就是说可以通过css代码对标签进行宽高的设置
2：行内标签
不会独占一行的标签，元素宽度由内容决定
行内标签 不具有宽高属性，也就是说无法通过css代码对标签进行宽高的设置
作用：
为了实现网页中更加自由的布局
css 三种写法
1：内联语法
<p style="color:red;font-size: 14px;">我是p标签</p>
2：内部写法
选择器 {
属性名: 属性值;
}
3: 外链写法
创建一个 xxx.css 文件，这里面放css代码
在html里面
<link rel="stylesheet" href="css/index.css"/>
优先权：
1 > 2 > 3
!important 提升某条css属性的优先权
选择器：
1：标签选择器(标签名字)
2：class 选择器 ( " .名称 " ), 可以取多个名字，xxx xxx xxx
class 选择器在网页中取的名字可以无限次重复并使用
3：id 选择器 ( " #名称 " )
一般通过id取的名字，在网页是唯一的，不推荐重复使用。
为什么？
一般通过id取名字的元素是给js来使用, 所以不应该重复
4：* 通配符选择
5: 父元素 子元素 选中父元素内部的子元素
6：
父元素 子元素,
父元素 子元素
同时对 规则 1 和 2 设置相同的css代码
7: hover 监听元素的鼠标悬浮事件
8: focus 监听input输入框获得焦点的事件
预习任务：
课下学习更多的css属性
http://css.doyoe.com/
1：css属性学习
2：css定位，盒子模型，浮动
3：写一些网页效果
4：弹性布局 + 媒体查询 + rem
5：各种造网站（pc网站 + 手机网站）