aaaa
This commit is contained in:
44
teaching/heshubao/flex.html
Normal file
44
teaching/heshubao/flex.html
Normal 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>
|
||||
<style>
|
||||
/*
|
||||
flex
|
||||
*/
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
.item{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: blue;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.box{
|
||||
display: flex; /*声明一个弹性盒子*/
|
||||
/*内联元素display的默认值是 inline 块级元素的display默认值是block */
|
||||
/* flex-direction: row<shuiping>/column(shuzhi); 定义主轴方向 */
|
||||
/* justify-content: start; 定义排列方式*/
|
||||
/* flex-direction: column; */
|
||||
/* justify-content: center; */
|
||||
/* align-items:center; */
|
||||
/* justify-content: space-around; */
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
teaching/heshubao/float.html
Normal file
48
teaching/heshubao/float.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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{
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
border-right: 1px solid white;
|
||||
float: left;
|
||||
}
|
||||
.item1 {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
border-right: 1px solid white;
|
||||
/* float: left; */
|
||||
/* clear:both; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<!-- <div style="clear:both"></div> -->
|
||||
|
||||
</div>
|
||||
<div class="item1"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
58
teaching/heshubao/float1.html
Normal file
58
teaching/heshubao/float1.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
border: 1px solid yellow;
|
||||
/* float: left; */
|
||||
display:inline-block
|
||||
}
|
||||
.box{
|
||||
width: 500px;
|
||||
background-color: white;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
.item1{
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item"></div>
|
||||
|
||||
<!-- <div class="item"></div> -->
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<!-- <div class="item1"></div> -->
|
||||
<p>浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮
|
||||
</p>
|
||||
</div>
|
||||
<!--
|
||||
form =》 表单
|
||||
css
|
||||
width height margin padding float flex position absolute relative
|
||||
fixed staicy
|
||||
|
||||
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
40
teaching/heshubao/form.html
Normal file
40
teaching/heshubao/form.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
action 提交地址
|
||||
method 请求方式 get/post
|
||||
-->
|
||||
<form action="">
|
||||
商品名称 ：<input type="text" value=""> <br/>
|
||||
商品价格： <input type="text"> <br />
|
||||
商品数量： <input type="text"> <br/>
|
||||
活动价： <input type="text"> <br/>
|
||||
商品简介： <textarea name="" id="" cols="30" rows="10"></textarea> <br/>
|
||||
是否上架：<input type="radio" name="shangjia" id="on"> <label for="on">是</label> <input type="radio" name="shangjia" id="off"> <label for="off">否</label> <br/>
|
||||
类别：<input type="checkbox" id="shi"> <label for="shi">食品</label> <input type="checkbox" id="dian"> <label for="dian">电器</label> <input type="checkbox" id="ri"> <label for="ri">日用品</label> <br/>
|
||||
产地：<select name="" id="">
|
||||
<option value="">济南</option>
|
||||
<option value="">青岛</option>
|
||||
<option value="">潍坊</option>
|
||||
<option value="">泰安</option>
|
||||
</select> <br />
|
||||
<button>提交</button>
|
||||
<input type="button" value="保存">
|
||||
<input type="submit" value="err"> <!-- 提交按钮 -->
|
||||
<input type="reset"> <!-- 重置 -->
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
21
teaching/heshubao/git.html
Normal file
21
teaching/heshubao/git.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!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>
|
||||
<!--
|
||||
git 操作代码仓库的一个工具
|
||||
代码仓库：github(国外) gitee (码云)
|
||||
git init 初始化
|
||||
git remote -v 检测是否已经连接远程库
|
||||
git remote add origin url 添加远程库
|
||||
git pull origin master
|
||||
|
||||
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
29
teaching/heshubao/login.html
Normal file
29
teaching/heshubao/login.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!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>
|
||||
<!--
|
||||
html (结构)
|
||||
css(样式)
|
||||
js(交互)
|
||||
-->
|
||||
<script>
|
||||
function save(){
|
||||
var account=document.getElementById("account").value
|
||||
var pwd=document.getElementById("pwd").value
|
||||
// document.write(account)
|
||||
console.log(account)
|
||||
console.log(pwd)
|
||||
// alert('hello 贺树宝')
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
帐号：<input type="text" id="account" value="">
|
||||
密码：<input type="password" id="pwd">
|
||||
<button onclick="save()">提交</button>
|
||||
</body>
|
||||
</html>
|
||||
39
teaching/heshubao/margin.html
Normal file
39
teaching/heshubao/margin.html
Normal 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>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.box1{
|
||||
width:200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.box2{
|
||||
width:200px;
|
||||
height: 200px;
|
||||
background:yellow;
|
||||
/* margin-top: 50px; */
|
||||
padding-top: 50px;
|
||||
}
|
||||
.box{
|
||||
/* border-bottom: 1px solid white; */
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="box1"></div>
|
||||
</div>
|
||||
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
</html>
|
||||
36
teaching/heshubao/position.html
Normal file
36
teaching/heshubao/position.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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{
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
background: blue;
|
||||
margin-top: 50px;
|
||||
margin-left: 90px;
|
||||
position:sticky;
|
||||
}
|
||||
.item{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
94
teaching/heshubao/zishiying.html
Normal file
94
teaching/heshubao/zishiying.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!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为最大限制。
|
||||
*/
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.box1{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
.box2{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: yellow;
|
||||
}
|
||||
/*
|
||||
@media (max-width:1000px) {
|
||||
body {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user