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

更新

Browse Source
This commit is contained in:
asd
2021-05-11 11:33:55 +08:00
parent 011d9328b0
commit c5f18c6051
32 changed files with 2011 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
teaching/wanzhaoyi/biaodan.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>Document</title>
<script>
function login(){
var account=document.getElementById("account").value
var pwd = document.getElementById("pwd").value
document.write(account+"的密码是："+pwd)
console.log(account)
}
</script>
</head>
<body>
<!--
前后台分离
前台 后台(数据库 存储数据)
前台和后台通过 api（接口） 来联系
api 返回的格式
code 接口请求状态
data
msg 提示信息
form
表单 前台输入的信息 收集起来 （）传到后台 后台把信息存起来
action
-->
<!-- <form action="" method=""> -->
用户名 <input type="text" value="张三"><br />
密码 <input type="password" value="123"><br />
性别 <input type="radio" id="man" name="sex" checked="checked"> <label for="man">男</label>
<input type="radio" id="woman" name="sex" > <label for="woman">女</label> <br />
爱好 <input type="checkbox" id="mov"><label for="mov"> 看电影</label>
<input type="checkbox" id="game" checked="checked" > <label for="game">打游戏</label>
<input type="checkbox" id="music" checked="checked"><label for="music">听音乐</lable><br />
地址 <select name="" id="">
<option value="">济南</option>
<option value="" >泰安</option>
<option value="" >济宁</option>
<option value="">淄博</option>
<option value="">德州</option>
<option value="" selected="selected">西安</option>
</select><br />
<button onclick="alert('注册成功')">提交</button>
<!-- </form> -->
<div>
qq号：<input type="text" id="account" value=""> <br/>
密码： <input type="password" id="pwd" value=""><br/>
<button onclick="login()">登录</button>
</div>
</body>
</html>

62
teaching/wanzhaoyi/css.html Normal file
View File

@@ -0,0 +1,62 @@
<!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;
}
.list,.list1{
list-style: none;
}
.list li{
width: 150px;
/* height: 70px; */
background: black;
color: white;
font-weight: bold;
border: 1px solid white;
text-align: center;
line-height: 70px;
}
.list1 li{
background: gray;
margin-left: 70px;
}
.bg{
background: white!important;
}
</style>
</head>
<body>
<!--
网页三剑客 html(结构) css（样式） js（交互）
css 层叠样式表
css 引入
link 外部样式
head 内部样式 里写 style标签 从style里面写 css 样式
行内样式 html标签 写style属性 值是字符串 字符串里面就是css样式
选择器 id选择器 类选择器 标签选择器 通配符（*） 属性选择器[]
优先级 !important > 行内样式 >id选择器 >类选择器 > 标签 > 通配符
-->
<ul class="list">
<li>家电</li>
<li class="bg">
<ul class="list1">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</li>
<li>洗护</li>
<li>衣物</li>
</ul>
</body>
</html>

60
teaching/wanzhaoyi/flex.html Normal file
View File

@@ -0,0 +1,60 @@
<!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{
border: 1px solid blue;
display:flex;
flex-direction: row;
/* justify-content: space-around; 跟父元素边缘有距离*/
justify-content: space-between; /* 跟父元素边缘没有距离*/
flex-wrap: wrap;
}
.item{
width: 200px;
height: 200px;
background:blue;
}
.item2{
background: red;
}
.item3{
background:pink;
}
.item4{
background: greenyellow;
}
.yuan{
width: 50px;
height: 50px;
background-color: aqua;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
<div class="yuan"></div>
</body>
</html>

73
teaching/wanzhaoyi/float.html Normal file
View File

@@ -0,0 +1,73 @@
<!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;
}
/*
display block --> 块级元素
inline --> 内联元素
inline-block 既不独占一行 又能设置宽高
*/
.box {
width: 200px;
height: 200px;
background: pink;
float: left;
}
.box1 {
width: 200px;
height: 200px;
background: red;
float: left;
}
.box2{
width:600px;
height: 30px;
background-color: blue;
clear: both;
}
/* .box1::after{
content: '.'; height: 0; display: block; clear: both;
} */
/* .box1:hover{} */
/* .bo{
overflow: auto;
/* //auto 默认 */
/* scroll 滚动 */
/* hidden 隐藏 */
} */
</style>
</head>
<body>
<!--
默认浏览器布局：
块级元素 p h1-h5 ul-li ol-li div
内联元素 span a input (text password button radio checkbox) textarea
区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高
特性1. 父元素高度塌陷
清除浮动 clear:left/right/both
-->
<div class="bo">
<div class="box"></div>
<!-- <div style="clear: both;"></div> -->
<p>区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高区别：块级元素独占一行 可以调整宽高 内联元素不能独占一行 不能调整宽高</p>
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
</html>

135
teaching/wanzhaoyi/pro.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>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid #f5f5f5;
width: 1150px;
height: 240px;
margin: 0 auto;
}
.item{
width: 136px;
float:left;
margin-left: 50px;
/* padding-top: 30px; */
margin-top: 30px;
border-right: 1px solid #f5f5f5;
padding-right:30px;
}
.list{
list-style: none;
font-size: 14px;
padding-top: 15px;
}
.list li{
padding-bottom: 10px;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<h5>特色购物</h5>
<ul class="list left">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
<ul class="list right">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
</div>
<div class="item">
<h5>特色购物</h5>
<ul class="list left">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
<ul class="list right">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
</div>
<div class="item">
<h5>特色购物</h5>
<ul class="list left">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
<ul class="list right">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
</div>
<div class="item">
<h5>特色购物</h5>
<ul class="list left">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
<ul class="list right">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
</div>
<div class="item">
<h5>特色购物</h5>
<ul class="list left">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
<ul class="list right">
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
<li>主题频道</li>
</ul>
</div>
</div>
</body>
</html>