theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

练习

Browse Source
This commit is contained in:
asd
2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
teaching/lhj/kejian/biaodan.html Normal file
View File

@@ -0,0 +1,83 @@
<!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>
.btn{
width:70px;
height: 30px;
background: pink;
color:white;
text-align: center;
line-height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<!--
输入框
密码框
单选框
复选框
下拉框
文本框
按钮
-->
<form action="">
<div>
帐号 <input type="text" id="account"/>
</div>
<div>
密码 <input type="password" id="pwd">
</div>
<div>
性别 <input type="radio" name="sex" id="boy" value="nan"> <label for="boy">男</label>
<input type="radio" name="sex" id="girl" value="nv" checked="checked"><label for="girl">女</label>
</div>
<div>
爱好 <input type="checkbox" /> 读书
<input type="checkbox" /> timi
<input type="checkbox"> 追星
<input type="checkbox"> 听音乐
</div>
<div>
地址 <select name="" id="addr">
<option value="taohuayuan">桃花源</option>
<option value="tianya">天涯海角</option>
<option value="mxb">魔仙堡</option>
<option value="xizang">西藏</option>
<option value="budalagong">布达拉宫</option>
</select>
</div>
备注：<textarea name="" id="beizhu" cols="30" rows="10" ></textarea>
<div class="btn" onclick="save()">提交</div>
</form>
<noscript>
您的浏览器不支持js语法
</noscript>
<script>
function save(){
var account= document.getElementById("account").value
var pwd= document.getElementById("pwd").value
var beizhu=document.getElementById("beizhu").value
var addr=document.getElementById("addr").value
var sex=document.getElementsByName("sex")
var xingbie
console.log(account,pwd,beizhu)
console.log(sex[1].checked)
if(sex[0].checked){
xingbie="nan"
}else{
xingbie="nv"
}
console.log(xingbie)
}
</script>
</body>
</html>

91
teaching/lhj/kejian/float.html Normal file
View File

@@ -0,0 +1,91 @@
<!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>
*{
margin:0;
padding: 0;
}
.pic{
width:200px;
height: 200px;
background: red;
/* display: inline-block; */
float: left;
}
.box{
width: 600px;
overflow:auto;
/* display: inline-block; */
}
.pic2{
width:200px;
height: 200px;
background: blue;
/* display: inline-block; */
float: left;
}
.pic3{
width: 200px;
height: 200px;
background: green;
}
.topDiv {
width: 500px;
padding: 4px;
border: 2px solid black;
overflow: auto;
}
.floatDiv {
width: 100px;
height: 100px;
border: 2px dotted red;
color: red;
margin: 4px;
float: left;
}
.bottomDiv {
width: 500px;
height: 100px;
margin: 5px 0;
border: 2px dotted black;
}
.textDiv {
color: blue;
border: 2px solid blue;
}
.boxes{
/* overflow: auto; */
}
</style>
</head>
<body>
<div class="box">
<div class="pic"></div>
<div class="pic2"></div>
<!-- <div>抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果</div> -->
<!-- <div style="clear:both ;"></div> -->
<div class="pic3">
</div>
<div class="topDiv">
<div class="floatDiv">float left</div>
<div class="textDiv">...</div>
<div class="pic2"></div>
</div>
<div class="bottomDiv">...</div>
</div>
</body>
</html>

103
teaching/lhj/kejian/grid.html Normal file
View File

@@ -0,0 +1,103 @@
<!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>
*{
margin: 0;
padding: 0;
}
.box{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-row-gap:10px;/*(行间距)*/
grid-column-gap: 10px;/* 列间距*/
}
.item{
border: 1px solid black;
}
.box1{
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px)
}
.box2{
display: grid;
width: 800px;
grid-template-columns: repeat(auto-fill,100px);
grid-template-rows: repeat(3,100px)
}
.box3{
display: grid;
width: 800px;
grid-template-columns: 1fr 2fr;
}
</Style>
</head>
<body>
<p>demp1 grid布局基本用法：</p>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
<p>demp2 使用repeat重写</p>
<div class="box1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
<p>demp3 auto-fill</p>
<div class="box2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
<p>demp4 fr</p>
<div class="box3">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9 </div>
</div>
</body>
</html>

72
teaching/lhj/kejian/grid布局.md Normal file
View File

@@ -0,0 +1,72 @@
# grid
1. grid 概念
grid --网格布局 是css最强大的布局方案
将网页划分成一个个网格 ，可以通过组合不同的网格 从而实现各种各样的布局
2.应用
2-1 用前须知
四个概念：
* 容器和项目
我们把采取网格布局的整个区域称为容器 容器中采用网格定位的子元素 称为项目
* 行和列
容器内水平方向叫行（row） 垂直区域叫列（column）
* 单元格
行和列的交叉区域 称为“单元格”
* 网格线
划分网格的线
2-2 使用中
常用属性：
* display:grid（块级元素） 内联元素需要定义为display:inline-grid 定义任意元素为grid布局
* grid-template-columns: 定义每一列的宽度 一共多少列 这个属性就有多少个值
* grid-template-rows: 定义每一行的高度 一共有多少行 这个属性就有多少个值
|| 注 使用须知 设为网格布局以后，容器内子元素的float display:inline-block display:table-ceil verticle-align column-* 都会失效
grid-template-column 和 grid-template-rows的值可以使用绝对单位（px）也可以使用百分比
有时候 当列数很多 每列宽度都一样时 就需要写很多重复的值 非常麻烦 这时候可以用repeat()函数
repeat()接受两个参数 第一个是重复的次数 第二个是所要重复的值
对比demos
使用repeat之前：
```
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
```
使用repeat()之后
```
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
```
拓展延伸
* auto-fill关键字： 在单元格大小固定但是容器大小不固定的时候 如果希望容器的每一行（或每一列） 尽可能多的容纳单元格，可以使用auto-fill 用来表示自动填充(效果为 超出容器宽度的时候 项目换行排列)
* fr单位
为了表示比较关系 网格布局提供了新的计量单位 fr(关键字) 如果两列的宽度分别为1fr 和 2fr 就表示后者是前者的两倍
* grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
* grid-row 属性是一种 grid-row-start (en-US) 和 grid-row-end (en-US) 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。
如果指定了两个 <grid-line> 值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。
auto 指对网格布局不做干涉 自动布置 span 或者默认span的值为1
span 为网格单元定义一个跨度，定义项目跨多少个网格 1span 等于grid-auto-rows: 20px;属性定义的值

1
teaching/lhj/kejian/js/jichu.js Normal file
View File

@@ -0,0 +1 @@
alert("hello")

44
teaching/lhj/kejian/js/js基础.html Normal file
View File

@@ -0,0 +1,44 @@
<!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>
<!-- <script src="./jichu.js"></script> -->
<script>
// alert("hello world")
// js 引入方式：
// 1. 内部引入 在html文件里面写script标签 在标签内写 js的代码
// 2.外部引入 `<script type="text/javascript" src=""></s\cript>
// 3.从html中执行js代码
var name=123
// console.log(name)
document.write(name)
// 变量命名规则 不能数字开头 变量名包含 字母 数字 下划线 $ , 不能用关键字和保留字
// 数据类型：
// 简单 undefined null number boolean string
// 复杂数据类型 object =>array(数组)
// =》 function(函数)
// 检测数据类型
// typeof
// instanceof
// Object.prototype.toString.call()
console.log(typeof true) //Boolean
console.log(typeof undefined) //undefined
console.log(typeof "true") // String
console.log(typeof 3.14)// Number
console.log(typeof (2+"2"),999)// String(1) Number(2)
console.log(typeof {})// Object
console.log(Object.prototype.toString.call([]))// [object Array]
console.log(typeof function(){},function(){} instanceof Object) // null ,false object,不定
</script>
</head>
<body>
<button onclick="alert('hello')">sub</button>
</body>
</html>

10
teaching/lhj/kejian/js/note/js基础.md Normal file
View File

@@ -0,0 +1,10 @@
# js 基础
1. html (结构) css（样式） js（交互）
2. js 的组成:
1. ECMAScript(核心 js语言的基础)
1. 包括 语法 类型 语句 关键字 保留字 操作符（运算符） 对象
2. DOM (文档对象模型 DOM 描
绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。)
3. BOM (浏览器对象模型 提供一些对象来访问浏览器)

111
teaching/lhj/kejian/media.html Normal file
View File

@@ -0,0 +1,111 @@
<!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>
<script>
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
/*
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
1rem=100px
*/
</script>
<!-- <style>
*{
margin:0;
padding:0;
}
.box{
width: 200px;
height: 200px;
background: blue;
}
@media (max-width:1000px){
body{
background: red;
}
.box{
background: white;
}
}
@media (max-width:900px){
body{
background: blue;
}
.box{
background: gold;
}
}
</style> -->
<style>
*{
margin:0;
padding:0;
}
.shoplistitem{
width: 6.14rem;
height: 1.43rem;
background: blue;
}
</style>
</head>
<body>
<div class="shoplistitem">
</div>
</body>
</html>

53
teaching/lhj/kejian/position.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<style>
/*
position
绝对定位 他的参照物不是他自己 如果父盒子不被relative修饰，他的参照物就是最外层盒子（body） 如果父盒子被relative修饰 他的参照物就是父盒子
相对定位 以他自己为参照物
子绝父相
固定定位 fixed
粘性 sticky 滚动条不动的时候 他相当于相对定位 滚动条滚动的时候 他相当于fixed 固定定位
*/
*{
margin: 0;
padding: 0;
}
.box{
width:400px;
height: 400px;
background: green;
margin: auto;
margin-top: 50px;
position: relative;
}
.item{
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 0;
left:0
}
.shu{
width: 10px;
height: 500px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div style="position: sticky; top: 0; ">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="box">
<div class="item"></div>
</div>
<div class="shu"></div>
</body>
</html>

63
teaching/lhj/kejian/pubuliu.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
* {
margin: 0;
padding: 0;
}
.waterfall {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* grid-gap: 0.25em; */
grid-auto-flow: row dense;
grid-auto-rows: 20px;
/* grid-template-columns: repeat(2, 1fr); // 指定两列，自动宽度
grid-gap: 0.25em; // 横向，纵向间隔
grid-auto-flow: row dense; // 是否自动补齐空白
grid-auto-rows: 20px; // base高度，grid-row基于此运算 */
}
.waterfall .item {
width: 100%;
background: #222;
color: white;
border: 1px solid white;
}
.waterfall .item:nth-of-type(3n+1) {
/* 1,4,7,10 ... */
grid-row: auto / span 1;
}
.waterfall .item:nth-of-type(3n+2) {
/* 2,8,11,15 */
grid-row: auto / span 9;
}
.waterfall .item:nth-of-type(3n+3) {
/* 3,6,14,15 */
grid-row: auto / span 4;
}
</style>
</head>
<body>
<div class="waterfall">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>

61
teaching/lhj/kejian/yunsuanfu.html Normal file
View File

@@ -0,0 +1,61 @@
<!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>
<script>
// x元运算符 =》 这个运算符 能操作几个数
// 1+2
// 2*3
// 3/7
// 7*2
var a=3
var b=3;
var c=4
// 如果一个变量没赋值的时候 默认是undefined
// console.log(a+undefined) //3b
// a++ 后置自增 先执行 再加减 加一
// console.log(a++)
// console.log(a)
// // b-- 后置自减 先执行 后加减
// console.log(b--) // 3
// console.log(b) // 2
// // ++c 前置自增（减） 先加减 后执行
// console.log(++c) //5
// console.log(c++) //5
// console.log(c) //6
// 相等和全等 （== ===） 输出结果都是true/false
// 相等在比较之前 会先对等号两边的值进行隐式类型转换
// == -> 相等
// === -> 全等
// console.log(5==1)
// console.log(5==5)
// console.log(5=='5') // true
// console.log(5=="5asd") //false
// console.log(Number("5"))
// console.log(Number("5asd"))
// 条件运算符
// 条件？条件成立的时候执行的语句：条件不成立的时候执行的语句
// var str=99
// typeof str=="String"?console.log(str):alert(str+1)
// var str1=1,str2=2,str3=3,str4=4
// 逻辑运算符 非！ 或|| 与&&
// 非 取反
// 与 && 只有两边都是true的时候才是true 只要有一个false 就是false
// 或 || 只要两边有一个是true 结果就是true
console.log(!true)
console.log(true&&false) //false
</script>
</head>
<body>
</body>
</html>