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

93
历届学生/font-end-nine/项目练习/学生项目/张婷/练习/html和cs/active&foreach.html Normal file
View File

@@ -0,0 +1,93 @@
<!-- 案例一： 激活态菜单和内容的切换（foreach循环） -->
<!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>
</head>
<style>
.title{
display: flex;
list-style: none;
}
.title .active{
color: red;
}
.title li{
margin-right: 30px;
}
.content{
display: flex;
list-style: none;
}
.content .active{
display: block;
}
.content li{
margin-right: 30px;
display: none;
}
</style>
<body>
<ul class="title">
<li class="active">推荐</li>
<li>电视剧</li>
<li>电影</li>
<li>综艺</li>
</ul>
<ul class="content">
<li class="active">推荐内容</li>
<li>电视剧内容</li>
<li>电影内容</li>
<li>综艺内容</li>
</ul>
</body>
<script>
// 步骤：1读取事件2绑定事件3事件处理函数
// 有很多个li 所以是数组
// 数组的循环 用foreach
var title_li = document.querySelectorAll(".title li")
var content_li = document.querySelectorAll(".content li")
// 循环解读：外——中——内
// 首先读取到第一个li的dom节点，然后对
// (最外层： 读取dom节点，得到每个li标签存储的内容)
title_li.forEach(function(item, index){
// 中间层： 给被点击到的li标签添加激活态
// console.log('title_li',item,index);
item.onclick = function(e){
// 最内层： 清楚所有li标签的激活态
console.log('e',e.target.className);
title_li.forEach(function(t,i){
t.className = ''
content_li[i].className = ''
})
// e.target.className = 'active'
// 下标从0开始循环，且目录和内容的下标相同，因此激活态实现同步
item.className = 'active'
content_li[index].className = 'active'
}
})
// for (var i = 0; i < titleLi.length; i++) {
// console.log(titleLi[i]);
// }
// NodeList.prototype.forLb = function(callback) {
// for (let i = 0; i < this.length; i++) {
// callback(this[i], i, this)
// }
// }
</script>
</html>

64
历届学生/font-end-nine/项目练习/学生项目/张婷/练习/html和cs/css.html Normal file
View File

@@ -0,0 +1,64 @@
<!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>
/* 鼠标悬浮改变效果 */
.one:hover {
color: red;
}
/* 平滑过渡（由一种状态到另一种状态） */
.two {
width: 200px;
transition: all ease 1s ;
}
/* 聚焦 */
.two:focus {
width: 500px;
}
.far{
display: flex;
height: 200px;
width: 200px;
border: 1px solid;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>
</head>
<body>
<!-- <div class="one">
<p>hahahaha</p>
</div>
<input class="two" type="text" placeholder="输入">
<input class="three" type="text" placeholder="输入">
<input class="four" type="text" placeholder="输入"> -->
<div class="far">
<span>1</span>
<p>2</p>
<div>3</div>
</div>
</body>
</html>

252
历届学生/font-end-nine/项目练习/学生项目/张婷/练习/html和cs/index.html Normal file
View File

@@ -0,0 +1,252 @@
<!-- <HTML>标签练习</HTML> -->
<!-- <!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>
</head>
<body>
<ul style="list-style: none;">
<li>王一鸣是1猪</li>
<li>王一鸣是2猪</li>
<li>王一鸣是3猪</li>
</ul>
<div>
<div class="item">王一鸣是1猪</div>
<div class="item">王一鸣是2猪</div>
<div class="item">王一鸣是3猪</div>
</div>
<form action="">
<input type="password" placeholder="请输入密码">
<input type="button" value="登录">
<button>登录</button>
<input type="submit" value="登录">
<input type="reset" value="登录">
</form>
<select name="城市" id="地点">
<option value="">-请选择-</option>
<option value="">四川</option>
<option value="">成都</option>
<option value="">猪头</option>
</select>
<textarea name="" id="" cols="30" rows="10" placeholder="听到滴声请留言"></textarea>
<video src="视频地址" autoplay loop muted controls poster="图片地址"></video>
<audio src="音乐地址" 其他属性相同></audio>
</body>
</html> -->
<!-- css标签练习 -->
<!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>
/* 所属 */
/* .one > a {
color: aqua;
} */
/* 嵌套（所有a） */
/* .one a {
color: blue;
} */
/* 同时选中 */
/* .one h1 , .one h2 {
color: blueviolet;
} */
/* 同一级别 效果作用于第二个a*/
/* .one a + a {
color: blueviolet;
} */
/* 先写默认再写过程 */
/* 例如：h2默认隐藏，然后再写出经过（悬浮h1）后得到的结果（显现h2） */
/* .one h2 {
display: none;
} */
/* 在h1悬浮的同时作用于同级的h2，并对h2设置实现效果 */
/* .one h1:hover+h2 {
display: block;
} */
/* （网页格式 手动格式化） */
/* html {
font-size: 0;
} */
/* .one , .two{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
} */
/* 本地的插入有格式+在线的直接复制粘贴即可 */
/* .one{
width: 1000px;
height: 1000px;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.fengjinwei.com%2F2021%2F08%2F20210813100136196.png&refer=http%3A%2F%2Fimg.fengjinwei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656683650&t=cc2cda93b3071d8088c022782456e231');
}
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu {
width: 100%;
height: 38px;
background-color: blueviolet;
}
.menu ul {
margin: 0 auto;
}
.menu ul li {
float: left;
}
</style>
</head>
<body>
<!-- <img src="地址" alt="出现问题的时候，设置字体"> -->
<!-- <div class="one">
<h1>111111111111</h1>
<h2>222222222222</h2>
<a href="">333333333333</a>
<a href="">4444444444444</a>
<div class="two">
<h3>55555555555555</h3>
<a href="">666666666</a>
</div>
</div> -->
<div class="one">
</div>
<!-- <div class="one">
</div>
<div class="two">
</div> -->
<!-- 实体字符练习 -->
<!-- 1、空格 -->
<div>好好学习&nbsp&nbsp&nbsp&nbsp&nbsp天天向上</div>
<!-- 大于 -->
<div>好好学习&gt&gt&gt&gt&gt&gt天天向上</div>
<!-- 小于 -->
<div>好好学习&lt&lt&lt&lt&lt天天向上</div>
<!-- emmet语法练习 -->
<!-- >后代节点：下一级（所属关系） -->
<!-- 写作:.one>.two>.three -->
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
<!-- >兄弟节点：同一级别（并列关系） -->
<!-- 写作:.top>.one+.two+.three -->
<div class="top">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<!-- 上级节点^：返回上一级别 -->
<!-- 写作：.top>.top1>.one>.two^.top2 -->
<div class="top">
<div class="top1">
<div class="one">
<div class="two"></div>
</div>
<div class="top2"></div>
</div>
</div>
<!-- 浮动练习 -->
<div class="menu">
<ul>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
</div>
</body>
</html>

135
历届学生/font-end-nine/项目练习/学生项目/张婷/练习/html和cs/js.html Normal file
View File

@@ -0,0 +1,135 @@
<!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>
</head>
<body>
<button class="one">A</button>
<button class="two">B</button>
<button class="three">C</button>
<a href=""></a>
</body>
<script>
console.log(window)
var name = 250
// if (name >= 200 && name <= 300 ) {
// console.log("王一鸣是250");
// }else{
// console.log("王一鸣还是250");
// }
if (name < 200 || name > 300) {
console.log("王一鸣是250");
} else {
console.log("王一鸣还是250");
}
var cj = 75,
fl;
if (cj < 60) {
fl = "不及格"
} else if (cj >= 60 && cj < 70) {
fl = "及格"
} else if (cj >= 70 && cj < 80) {
fl = "良好"
} else {
fl = "优秀"
}
console.log(fl)
// 只有当i<50成立的时候即ture 才会执行i++。 例：i>50，false，不执行 输出undefined。
for (var i = 1; i < 50; i++) {
console.log(i);
}
// 九九乘法表 一层套一层
// 外层总共九行，所以定义一个名=公式 自动换行总共九行
for (var i = 1; i <= 9; i++) {
var all = ""
// 内层无数行，所以打印日志在外层，轻松实现换行
for (var j = 1; j <= i; j++) {
// all += j + "*" + i + "=" + i*j + ' '
all += `${j}*${i}=${i*j} `
}
all += `</br>`
// document.write(all)
}
var A = new Object({
Number: 20,
sex: "男",
name: "猪"
})
console.log(A);
console.log(A.name);
console.log(A["name"]);
// Key 是基于for in才被访问到的。key可以被定义为各种名称的常量
// B基于for in才被访问到 所以是局部常量
for (const B in A) {
console.log(B)
}
var A = new Object();
A.name = "哈1";
A.age = "哈2";
console.log(A);
FFF = 1
console.log(FFF);
// 去掉var，变量提升，且只提升一级
function a() {
var b = function () {
aaa = 1
}
console.log(aaa);
}
// 回调函数
function testa(n) {
// 执行n，n接收的ttt所以实际执行的是ttt的function，即123
n()
}
var tttt = function () {
console.log(123);
}
testa(tttt)
// 回调案例
function test(call, n) {
console.log('call', call);
var a = call()
n += a
console.log('n', n);
}
function b() {
return 1 + 1
}
test(b, 2)
// <button class="one">A</button>
// <button class="two">B</button>
// <button class="three">C</button>
// 事件的写法
// querySelector只能查询第一个
var all = document.querySelectorAll("button")
for (var i = 0; i < all.length; i++) {
all[i].innerText = "你好"
console.log('all', all[i]);
}
</script>
</html>

56
历届学生/font-end-nine/项目练习/学生项目/张婷/练习/html和cs/滚动固定.html Normal file
View File

@@ -0,0 +1,56 @@
<!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>
body {
height: 30000px;
background: #0000ff5e;
}
.header {
width: 100%;
height: 50px;
background: #ff00003d;
margin-top: 200px;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
margin-top: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
var header = document.querySelector('.header')
console.log('header',header);
document.querySelector('body').onscroll = function(){
// (定义c即这个元素距离顶部的距离)
// 要获取当前页面的滚动条纵坐标位置，用：
// document.documentElement.scrollTop;
// 而不是：
// document.body.scrollTop;
// documentElement 对应的是 html 标签，而 body 对应的是 body 标签。
var C = document.documentElement.scrollTop;
// console.log('c',C);
if(C >= 200){
header.className = 'header fixed'
}else{
header.className = 'header'
}
}
</script>
</html>