first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1 @@
node_modules/

View File

@@ -0,0 +1,68 @@
<html>
<meta charset="UTF-8">
<head>
<title>你好</title>
</head>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6" target="_blank">啦啦啦</a>
<a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6" target="_blank">链接</a>></a>
<img height="200px" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="抱歉">
<ul>
<li>冯文焌无敌帅1</li>
<li>冯文焌无敌帅2</li>
<li>冯文焌无敌帅3</li>
<li>冯文焌无敌帅4</li>
<li>冯文焌无敌帅5</li>
<li>冯文焌无敌帅6</li>
<li>冯文焌无敌帅7</li>
<li>冯文焌无敌帅8</li>
<li>冯文焌无敌帅9</li>
<li>冯文焌无敌帅10</li>
</ul>
<ul>
<li>无敌帅1</li>
<li>无敌帅2</li>
<li>无敌帅3</li>
<li>无敌帅4</li>
<li>无敌帅5</li>
<li>无敌帅6</li>
<li>无敌帅7</li>
<li>无敌帅8</li>
<li>无敌帅9</li>
<li>无敌帅10</li>
</ul>
<input type="text" placeholder="haha">
<input type="number" placeholder="输入手机号">
<input type="password" placeholder="请输入密码">
<input type="date">
<h2>性别</h2>
<input type="radio" name="seax">
<input type="radio" name="seax">
<select>
<option value="">请选择</option>
<option value="">合肥</option>
<option value="">淮南</option>
<option value="">蚌埠</option>
<option value="">拉拉</option>
</select>
<input type="checkbox" name="aihao" 看电视>
<input type="checkbox" name="aihao">
<input type="checkbox" name="aihao">
<input type="checkbox" name="aihao">
<input type="checkbox" name="aihao">
<input type="checkbox" name="aihao">
<!-- <>>!这句话是解释的意思 -->
<input type="button" value="登录">
<textarea cols="30" rows="10">请输入留言</textarea>
<video src="https://v.qq.com/x/page/k3339au3ymi.html" controls poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" muted autoplay loop></video>
<audio src=""></audio>
</html>

View File

@@ -0,0 +1,85 @@
<!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>
<!-- 网站的头部 -->
<div class="header">
<div class="title">
<img src="" alt="">
<div class="title_middle">
<input type="text">
<button>搜狗搜索</button>
</div>
<div class="title">
<input type="text">
<img src="" alt="">
<img src="" alt="">
<button>登录</button>
</div>
</div>
</div>
<!-- 网站的主体 -->
<div class="content">
<ul class="menu">
<li>新闻</li>
</ul>
<div class="content_left">
<img src="" alt="">
<div class="left">
<div class="title">
<div class="characters">要素</div>
<div class="address">位置</div>
</div>
<ul>
<li></li>
</ul>
<ul class="below">
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
<div class="right">
<div class="title">
<div class="characters">今日话题</div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<img src="" alt="">
<ul class="below">
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
</div>
<div class="content_right">
<img src="" alt="">
<ul class="A"></ul>
<div class="B">
<div class="B_top">
<div class="characters">热门赛事</div>
<p></p>
</div>
<img src="" alt="">
</div>
</div>
</div>
<!-- 网站的版权 -->
<div class="footer"></div>
</body>
</html>

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=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 网站的头部 -->
<div class="header">
<div class="header_left">
<img src="" alt="QQ阅读">
<ul>
<li>首页</li>
</ul>
</div>
<div class="header_right">
<input type="text">
<div class="A">
<ul class="A_left">
<li>作家专区</li>
</ul>
<ul class="A_right">
<li>登录注册</li>
</ul>
</div>
</div>
</div>
<!-- 网站的主体 -->
<div class="centent">
<div class="centent_top">
<img src="" alt="图片">
<span>扫码下载</span>
<img src="" alt="">
</div>
<div class="centent_middle">
<img src="" alt="">
<ul>
<li class="text">
<p></p>
</li>
</ul>
</div>
</div>
<!-- 网站的版权 -->
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,52 @@
<!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>
<!-- 网站的头部 -->
<div class="header">
<div class="title_left">
<img src="" alt="">
<ul>
<li>首页</li>
</ul>
</div>
<input type="text">
<div class="title_right">
<div>
<img src="" alt="">
<span></span>
</div>
<button>登录</button>
</div>
</div>
<!-- 网站的主体 -->
<div class="content">
<div class="title">
<img src="" alt="">
<span></span>
</div>
<div class="content_left">
<img src="" alt="">
<button></button>
</div>
<div class="content_right">
<div>
<span>近期热点</span>
<ul>
<li>
<p></p>
</li>
</ul>
<p>查看全部热点问题></p>
</div>
</div>
</div>
<!-- 网站的版权 -->
<div class="footer"></div>
</body>
</html>

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=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 开头 -->
<div class="header">
<div class="title">
<img src="" alt="搜狐">
<ul>
<li></li>
</ul>
<button>登录</button>
</div>
</div>
<!-- 中间 -->
<div class="content">
<img src="" alt="广告">
<div class="top">
<img class="top_left" src="" alt="">
<div class="top_center">
<input type="">
<img src="" alt="">
</div>
<ul class="top_right">
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
<ul class="menu">
<li>视频</li>
</ul>
</div>
<!-- 结尾 -->
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,69 @@
<!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>
<!-- 头部 -->
<div class="header">
<div class="top">
<img src="" alt="图片">
<input type="text">
</div>
<ul>
<li>内容</li>
</ul>
</div>
<!-- 中间 -->
<div class="center">
<!-- 中间左边 -->
<div class="left">
<div class="title">
<img src="" alt="">
<span></span>
<img src="" alt="">
<ul>
<li>wwww</li>
</ul>
</div>
</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
<span></span>
</div>
<div class="title_right">
<span></span>
<img src="" alt="">
</div>
<!-- 中间右边 -->
<div class="right">
<div class="title">
<img src="" alt="">
<span></span>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 结尾 -->
<div class="footer"></div>
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
<li>元素5</li>
</ul>
<body>
</body>
</html>

View 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>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./baidu.css">
</head>
<body>
<div class="title">
<!-- 左边 -->
<div class="title-l">
<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png">
</div>
<!-- 中间 -->
<div class="title-b"></div>
<!-- 右边 -->
<div class="title-r"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a{
text-decoration: none
}

View File

@@ -0,0 +1,10 @@
.left{
margin-right: 20px;
display: inline-block;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,17 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,73 @@
.content {
background: #ccc;
}
.recommend {
color: #000;
font-size: 30px;
text-align: center;
line-height: 60px;
font-weight: 700;
}
.menu {
text-align: center;
color: #000;
padding: 30px;
}
.menu span{
margin-right: 30px;
cursor: pointer;
}
.menu span:hover{
color: yellow;
}
.menu span:first-child{
color: red;
}
.major{
background-color: white;
overflow: hidden;
width: 100%;
text-align: center;
padding-top: 50px;
}
.major img{
width: 224px;
height: 224px;
}
.major text{
font-size: 14px;
}
.major span{
font-size: 14px;
color: #ddd;
float: left;
}
.content .end{
background-color: white !important;
text-align: center;
padding-top: 26px;
padding-bottom: 20px;
padding-top: 20px;
}
.content .end li{
width: 12px;
height: 12px;
margin: 0 6px;
background: yellow;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.content .end .active{
background: red !important;
}
.content .end li:hover{
background: blue!important;
}

View File

@@ -0,0 +1,99 @@
<!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>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./qq音乐.css">
</head>
<body>
<!-- 全部 -->
<div class="content">
<!-- 歌单推荐 -->
<div class="recommend">
歌&nbsp; 单&nbsp; 推&nbsp; 荐
</div>
<!-- 菜单 -->
<div class="menu">
<ul>
<span>
为你推荐
</span>
<span>
英语
</span>
<span>
短视频热歌
</span>
<span>
经典
</span>
<span>
官方歌单
</span>
<span>
情歌
</span>
</ul>
</div>
<!-- 图片 -->
<div class="major hidden">
<div class="majora left">
<img
src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1">
<div class="text">
贺峻霖 | 少年十七未来山海共期
</div>
<span>播放量:43.6万</span>
</div>
<div class="majorb left">
<img
src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1">
<div class="text">
贺峻霖 | 少年十七未来山海共期
</div>
<span>播放量:43.6万</span>
</div>
<div class="majorc left">
<img
src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1">
<div class="text">
贺峻霖 | 少年十七未来山海共期
</div>
<span>播放量:43.6万</span>
</div>
<div class="majord left">
<img
src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1">
<div class="text">
贺峻霖 | 少年十七未来山海共期
</div>
<span>播放量:43.6万</span>
</div>
<div class="majore left">
<img
src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1">
<div class="text">
贺峻霖 | 少年十七未来山海共期
</div>
<span>播放量:43.6万</span>
</div>
</div>
<!-- 点点 -->
<div>
<ul class="end">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,17 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,73 @@
.content{
width: 320px;
}
.content .title{
margin-bottom: 15px;
font-size: 14px;
}
.content .title .author{
font-size: 14px;
color: #969696
}
.content .title .HYP{
font-size: 14px;
}
.content .title .HYP span{
font-size: 14px;
color: #969696
}
ul{
width: 100%;
overflow: hidden;
margin-left: 10px;
}
ul li{
margin-bottom: 10px;
height: 48px;
border-bottom: 1px dashed #b5b5b5;
padding-bottom: 10px;
}
ul img{
width: 48px;
height: 48px;
border-radius: 100%;
float: left;
margin-right: 10px;
}
.content_a{
float: left;
width: 252px;
line-height: 20px;
margin-top: 5px;
}
.inside{}
.themeColor{
display: inline-block;
font-size: 14px;
}
.inside .right{
font-size: 13px;
color: #42c02e;
}
.inside .right i{}
.inside .right span{}
.content_below{
font-size: 12px;
color: #969696;
}
.end{
width: 310px;
background-color: #f7f7f7;
text-align: center;
line-height: 40px;
margin-left: 10px;
border-radius: 5px;
font-size: 13px;
color: #787878;
cursor: pointer;
}
.end i{
font-size: 12px;
}

View File

@@ -0,0 +1,114 @@
<!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>
<link rel="stylesheet" href="http:////at.alicdn.com/t/font_3445167_o5pox8tpzh.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./简书.css">
</head>
<body>
<div class="content">
<!-- 上面 -->
<div class="title hidden">
<div class="author left">推荐作者</div>
<div class="HYP right">
<i class="iconfont icon-shuaxin"></i>
<span>换一批</span>
</div>
</div>
<!-- 中间重复 -->
<ul>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
</ul>
<!-- 结尾查看全部 -->
<div class="end">
<span>查看全部</span>
<i class="iconfont icon-gengduo"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,17 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,10 @@
.drop{
display: none;
}
.menu>li:hover .drop{
display: block;
}
.menu>li {
float: left;
margin-right: 10px;
}

View File

@@ -0,0 +1,32 @@
<!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>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./xiala.css">
</head>
<body>
<ul class="menu">
<li>菜单1
<ul class="drop">
<li>1-15151515151</li>
<li>1-2</li>
<li>1-3</li>
<li>1-4</li>
</ul>
</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,17 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,74 @@
.title{
width: 1000px;
margin: 0 auto;
}
.title .logo{
width: 272px;
height: 88px;
margin-right: 20px;
}
.logo img{
width: 100%;
}
.content_top ul li{
display: inline-block;
color: #666;
cursor: pointer;
margin-right: 5px;
font-size: 13px;
}
.content{
width: 469px;
margin-top: 20px;
line-height: 26px;
}
.content_top{
float: left;
width: 100%;
}
.content_down{
border-color: #008EE1;
float: left;
width: 100%;
height: 32px;
}
.input_a{
display: inline-block;
width: 389px;
height: 36px;
}
.input_a input{
border: 1px solid #50c52a;
width: 100%;
height: 100%;
padding: 0px;
padding-left: 10px;
box-sizing: border-box;
}
.button_a{
display: inline-block;
margin-left: -6px;
}
.button_a button{
width: 80px;
height: 36px;
background: #008ee1;
color: #fff;
border: none;
}
.tubiao{
float: right;
margin-top: 40px;
color: red;
}
.tubiao ul{}
.tubiao ul li{
display: inline-block;
margin-left: 10px;
text-align: center;
}
.tubiao ul li i{}
.tubiao ul li p{
color: #1f4f88;
font-size: 15px;
}

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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3448711_fco15j41ft.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./中关村.css">
</head>
<body>
<div class="title hidden">
<div class="logo left">
<img src="https://icon.zol-img.com.cn/mainpage/2019logo/festival/2022duanwu-logo_2x.png">
</div>
<div class="content left">
<div class="content_top">
<ul>
<li>综合</li>
<li>产品</li>
<li>咨询</li>
<li>论坛</li>
<li>下载</li>
<li>问题</li>
<li>图片</li>
<li>视频</li>
<li>口碑</li>
</ul>
</div>
<div class="content_down">
<div class="input_a">
<input type="text" placeholder="789">
</div>
<div class="button_a">
<button>搜索</button>
</div>
</div>
</div>
<div class="tubiao">
<ul>
<li>
<i class="iconfont icon-apple-fill"></i>
<p>下载app</p>
</li>
<li>
<i class="iconfont icon-apple-fill"></i>
<p>下载app</p>
</li>
<li>
<i class="iconfont icon-apple-fill"></i>
<p>下载app</p>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,21 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
/* list-style: none; */
}
html{
font-size: 0;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,235 @@
.content{
width: 1200px;
margin: 0 auto;
}
.content .title{
height: 44px;
line-height: 44px;
}
.content .title .tltle_l{
font-size: 24px;
font-weight: 400;
color: #333;
}
.content .title .tltle_l span{
font-size: 24px;
font-weight: bold;
font-family: 'Microsoft YaHei';
margin-right: 8px;
}
.content .title .title_r{
overflow: hidden;
}
.content .title .title_r li{
display: inline-block;
float: left;
}
.content .title .title_r li:hover{
text-decoration:underline
}
.content .title .title_r li::after{
content:" ";
background: black;
width: 0.5px;
height: 12px;
display: inline-block;
margin-top: 2px;
margin-left: 7.5px;
margin-right: 7.5px;
}
.content .title .title_r li a{
text-decoration:none;
color:black;
font-size: 12px;
}
.content .title .title_r li a i{
font-size: 12px;
zoom: 0.9;
}
.content .title .title_r li:last-child::after{
width: 0 !important;
background: white !important;
}
.ddd{
height: 516px;
width: 100%;
}
.wrap{
width: 300px;
height: 100%;
}
.warp_top{
width: 100%;
height: 281px;
background: #1d89bf;
}
.warp_top .kkkkk{
background: #0f4b69 !important;
width: 100%;
height: 38px;
}
.warp_top .kkkkk .guding{
font-size: 16px;
color: #f5f5f5;
margin-right: 50px;
text-align: center;
height: 100%;
line-height: 38px;
padding-left: 17px;
padding-right: 2px;
box-sizing: border-box;
}
.warp_top .kkkkk .three{
font-size: 16px;
color: #f5f5f5;
}
.warp_top .kkkkk .three li{
float: left;
width: 50px;
text-align: center;
line-height: 38px;
}
.warp_top .kkkkk .three li:hover{
background: #333;
}
.warp_top .kkkkk .three .active{
background: red !important;
}
.warp_top .xuanze{
padding: 20px 0 10px 20px;
}
.warp_top .xuanze li{
height: 30px;
line-height: 30px;
padding-left: 26px;
}
.warp_top .xuanze li:nth-child(1) span,
.warp_top .xuanze li:nth-child(2) span,
.warp_top .xuanze li:nth-child(3) span{
background: #f5f5f5;
color: blue;
}
.warp_top .xuanze li span{
width: 16px;
height: 16px;
display: inline-block;
font-size: 12px;
line-height: 16px;
text-align: center;
margin-right: 10px;
color: #f5f5f5;
}
.warp_top .xuanze li a{
font-size: 12px;
color: #f5f5f5;
}
.warp_top .end{
height: 53px;
text-align: center;
line-height: 53px;
font-size: 12px;
color: rgb(238, 237, 237);
border-top: 1px dashed black;
width: 260px;
margin: 0 auto;
}
.warp_down{
height: 235px;
background:#333;
padding-top: 25px;
padding-left: 20px;
font-size: 14px;
color: #333;
}
.tt{
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.warp_down li{
float: left;
margin-right: 20px;
line-height: 30px;
}
.warp_down li a{
color: black;
}
.picture{
width: 900px;
height: 100%;
border-top: 1px solid;
}
.picture .picture_top{
}
.picture .picture_top li{
padding: 20px 0px 20px 0;
border-right: 1px solid;
border-bottom: 1px solid;
display: inline-block;
font-size: 14px;
color: #999;
text-align: center;
width: 224px;
}
.picture .picture_top img{
width: 160px;
}
.picture .picture_top li .title{
height: 44px;
line-height: 44px;
}
.picture .picture_top li .price{
float: left;
}
.picture .picture_top li .price span{
font-weight: 500;
color: red;
}
.picture .picture_down{
border-right: 1px solid;
text-align: center;
padding-top: 26px;
border-bottom: 1px solid;
padding-bottom: 20px;
}
.picture .picture_down li{
width: 12px;
height: 12px;
margin: 0 6px;
background: yellow;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.picture .picture_down .active{
background: red !important;
}
.picture .picture_down li:hover{
background: blue!important;
}

View File

@@ -0,0 +1,217 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_o5pox8tpzh.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./笔记本.css">
</head>
<body>
<div class="content">
<!-- 标题 -->
<div class="title">
<div class="tltle_l left">
<span>2F</span>笔记本电脑
</div>
<ul class="title_r right">
<li>
<a href="">联想</a>
</li>
<li>
<a href="">惠普</a>
</li>
<li>
<a href="">戴尔</a>
</li>
<li>
<a href="">华为</a>
</li>
<li>
<a href="">华硕</a>
</li>
<li>
<a href="">微软</a>
</li>
<li>
<a href="">苹果</a>
</li>
<li>
<a href="">外星人</a>
</li>
<li>
<a href="">神州</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">更多
<i class="iconfont icon-z044"></i>
</a>
</li>
</ul>
</div>
<div class="ddd hidden">
<!-- 左半边 -->
<div class="wrap left">
<!-- 左上边 -->
<div class="warp_top">
<!-- 菜单 -->
<div class="kkkkk hidden">
<div class="guding left">热度排行</div>
<ul class="three left">
<li class="active">品牌</li>
<li>型号</li>
<li>新品</li>
</ul>
</div>
<!-- 内容 -->
<ul class="xuanze">
<li>
<span>1</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>2</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>3</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>4</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>5</span>
<a href="">惠普暗影精灵6</a>
</li>
</ul>
<!-- 查看更多排行榜 -->
<div class="end">
查看更多排行榜
<em>>></em>
</div>
</div>
<!-- 左下边 -->
<div class="warp_down">
<div class="tt">热门搜索</div>
<ul>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
</ul>
</div>
</div>
<!-- 右半边 -->
<div class="picture right">
<!-- 右上 -->
<ul class="picture_top">
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
</ul>
<!-- 右下 -->
<ul class="picture_down">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,358 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_ub2ivnoluaa.css">
<link rel="stylesheet" href="./css/celar.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/好看.css">
</head>
<body>
<!-- 菜单层 -->
<div class="menu">
<img class="logo" src="./img/logo.png">
<ul>
<li class="active">
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/home.svg">
<span>首页</span>
</a>
</li>
</ul>
</div>
<!-- 标题层 -->
<!-- 标题左边 -->
<div class="title hidden">
<div class="search left">
<input type="text left" placeholder="搜索">
<div class="butt left">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<!-- 标题右边 -->
<div class="title-A right">
<div class="tltle-b left">
<ul>
<li class="left">
<a href="">
<i class="iconfont icon-xiazai"></i>
<span>下载客户端</span>
</a>
</li>
<li class="left">
<a href="">
<i class="iconfont icon-xiazai"></i>
<span>下载客户端</span>
</a>
</li>
<li class="left">
<a href="">
<i class="iconfont icon-xiazai"></i>
<span>下载客户端</span>
</a>
</li>
</ul>
</div>
<div class="tltle-c right">
<a href="">
<i class="iconfont icon-yunshangchuan"></i>
<span>上传视频</span>
</a>
<button>登录</button>
</div>
</div>
</div>
<!-- 主要内容 -->
<div class="content hidden">
<ul>
<li class="firstImg left"></li>
<li class="aaa left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
<li class="left">
<img src="https://f7.baidu.com/it/u=568375066,3725573696&fm=222&app=108&f=JPEG@s_0,w_660,h_370,q_80">
<div class="kj hidden">
<div class="user left">
<img src="https://pic.rmb.bdstatic.com/bjh/user/c28c0569c1d64c18066f3e099d0eeecc.jpeg?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=15874">
</div>
<div class="text left">
<p>
莫西沙冰飘花翡翠手镯的原石定制现场,现场直播选料现场开石
</p>
<span>璀璨翡翠珠宝</span>
<p class="asd">287次观看</p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a{
text-decoration: none
}

View File

@@ -0,0 +1,11 @@
.left{
float: left;
/* margin-right: 20px;
display: inline-block; */
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,196 @@
.menu {
width: 240px;
height: 100%;
position: fixed;
box-shadow: 1px 5px 5px black;
}
.menu .logo {
width: 146px;
height: 36px;
margin: 0 auto;
display: block;
margin-top: 34px;
margin-bottom: 8px;
}
.menu ul {
overflow-y: auto;
padding: 0 30px;
height: calc(100% - 44px);
}
.menu ul .active {
background-color: #f7f7f7;
border-radius: 3px;
}
.menu ul li {
height: 40px;
line-height: 40px;
margin-bottom: 8px;
}
.menu ul li a {}
.menu ul li a img {
vertical-align: text-top;
margin-left: 5px;
}
.menu ul li a span {
font-size: 16px;
color: black;
}
/* 标题css */
.title {
width: calc(100% - 240px);
background-color: rgb(248, 247, 247);
position: fixed;
left: 240px;
}
.title .search {
margin-top: 14px;
margin-bottom: 14px;
width: 440px;
height: 36px;
background-color: hsl(0deg 0% 97% / 2%);
border: 1px solid black;
box-sizing: 3px;
margin-left: 30px;
}
.title .search input {
width: 342px;
height: 100%;
box-sizing: 3px;
border: none;
padding-left: 17px;
box-sizing: border-box;
}
.title .search .butt {
background-color: #f7f7f7;
position: relative;
margin-left: 16px;
}
.title .search .butt::before {
content: "";
width: 1px;
height: 16px;
background-color: red;
display: inline-block;
position: absolute;
right: 73px;
top: 3px;
}
.title .search .butt i {}
.title .search .butt span {
color: #666;
font-size: 16px;
}
/* 标题右边 */
.title .title-A {
font-size: 14px;
color: black ;
height: 36px;
line-height: 36px;
margin: 14px 0;
}
.title .title-A .tltle-b {}
.title .title-A .tltle-b li {}
.title .title-A .tltle-b li a {
color: black ;
}
.title .title-A .tltle-b li a i {
}
.title .title-A .tltle-b li a span {
}
.title .title-A .tltle-c{
margin-right: 30px;
}
.title .title-A .tltle-c a{
margin-right: 30px;
}
.title .title-A .tltle-c a i{
width: 96px;
height: 30px;;
color: #111622;
}
.title .title-A .tltle-c a span{
font-size: 14px;
color: #111622;
}
.title .title-A button{
color: white;
width: 88px;
height: 30px;
background-color: red;
box-sizing: 3px;
}
/* 正文css */
.content{
padding-top: 64px;
margin-left: 240px;
}
.content ul{
padding: 32px 0 0 32px;
}
.content ul li{
margin-bottom: 10px;
}
.content ul .firstImg {
margin-right: 20px;
width: 515px;
height: 219px;
background-image: url('https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-4/1651223082955/1596c0b2c3cd.jpg');
background-size: 100% 175%;
background-repeat: no-repeat;
}
.content ul .aaa{
margin-right: 20px;
}
.content ul li img{
height: 140px;
width: 245px;
}
.content ul li .user img{
width: 36px;
height: 36px;
border-radius: 50%;
margin-bottom: 45px;
}
.content ul li .text p{
width: 164px;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
font-size: 16px;
color: #111622
}
.content ul li .text span{
font-size: 14px;
color: #505666;
}
.content ul li .text .asd{
font-size: 14px;
color: #505666;
}

View File

@@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.173 4.66l4 2.588A4 4 0 0 1 20 10.606V17a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-6.394a4 4 0 0 1 1.827-3.358l4-2.588a4 4 0 0 1 4.346 0zM12 12.358a.8.8 0 0 0-.8.8v3.338a.8.8 0 1 0 1.6 0v-3.338a.8.8 0 0 0-.8-.8z" fill="#111622" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 319 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@@ -0,0 +1,243 @@
body {
background: #f2f2f2;
}
.header {
padding-left: 0.3rem;
padding-right: 0.3rem;
box-sizing: border-box;
background: white;
height: 0.9rem;
}
.header .top {
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
}
.header .top img {
width: 0.3rem;
height: 0.45rem;
}
.header .top span {
font-size: 0.44rem;
}
.content .don {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 0.5px solid #0000001a;
background-image: url('../imgs/img图片/zzz.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 10px
}
.content .don .text {
padding-left: 0.3rem;
}
.content .don .text span {
font-size: 0.44rem;
}
.content .don .text p {
font-size: 0.28rem;
margin-top: 0.04rem;
}
.baiyou {
padding-right: 0.3rem;
}
.mode{
font-size: 0.28rem;
display: flex;
justify-content: space-between;
height: 0.84rem;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
box-sizing: border-box;
background: white;
margin-top: 0.2rem;
}
.subject{}
.subject .name{
display: flex;
height: 0.62rem;
align-items: center;
justify-content: flex-start;
background: white;
padding-left: 0.3rem;
margin-top: 0.2rem;
}
.subject .name .fangzi{
width: 0.4rem;
height: 0.4rem;
}
.subject .name .wenzi{
padding-right: 0.1rem;
padding-left: 0.1rem;
color: #000000ba;
font-size: .28rem;
}
.subject .name .heiyou{
width: 0.18rem;
height: 0.28rem;
}
.zhuti{
font-size: 0.28rem;
display: flex;
height: 2.22rem;
background: white;
justify-content: flex-start;
align-items: center;
border-top: .01rem solid #0000001a;
}
p{
font-size: .28rem;
}
.zhuti img{
width: 2rem;
height: 1.64rem;
object-fit: cover;
padding-left: 0.3rem;
padding-right: 0.36rem;
}
.zhuti .zizizi{
}
p .one{
font-size: 0.28rem;
}
p .two{
font-size: 0.28rem;
}
.three{
font-size: 0.2rem !important;
color: #999999 !important;
}
.zhuti .zizizi .big{
display: flex;
justify-content: space-between;
width: 135%;
}
.zhuti .zizizi .big .bigg{
color: red;
font-size: 0.48rem;
}
.zhuti .zizizi .big .sme{
font-size: 0.2rem;
color: #999;
}
.subject .remarks{
height: 0.88rem;
background: white;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 0.34rem;
padding-left: 0.3rem;
border-top: 0.5px solid #0000001a;
}
.subject .remarks span{
font-size: 0.26rem;
color: #aaaaaa;
padding-left: 0.31rem;
}
.youhui{
border-top: 0.5px solid #0000001a;
height: 1.08rem;
background: white;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 0.3rem;
padding-right: 0.3rem;
}
.xxx{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.youhui_a{
display: flex;
justify-content: space-between;
}
.youhui_b{
display: flex;
justify-content: space-between;
}
.jiage{
font-size: 0.24rem;
color: #f09c48;
}
.money{
display: flex;
justify-content: space-between;
background-color: white;
border-top: 0.5px solid #0000001a;
height: 0.84rem;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
}
.money .six{
font-size: 0.3rem;
color: #333333;
}
.money .seven{
color: #ea4e3d;
font-size: 0.34rem;
}
.footer{
height: 1rem;
background: white;
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 0.5px solid #0000001a;
box-sizing: border-box;
}
.footer .ttt{
display: flex;
justify-content: center;
padding-right: 0.42rem;
}
.footer .ttt .eight{
font-size: 0.26rem;
color: #999999;
}
.footer .ttt .nine{
font-size: 0.26rem;
color: #999999;
}
.footer .ttt .ten{
font-size: 0.3rem;
color: #000000;
font-weight: 600;
}
.footer .buttom{
font-size: 0.28rem;
color: #ffffff;
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
display: flex;
justify-content: center;
align-items: center;
}

View File

@@ -0,0 +1,165 @@
<!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="../rem.js"></script>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./22.css">
</head>
<body>
<div class="header">
<div class="top">
<img src="../imgs/img图片/返回.png" alt="">
<span>填写订单</span>
<div></div>
</div>
</div>
<!-- 中间 -->
<div class="content">
<div class="don">
<div class="text">
<span>张晓明</span><span>186****0019</span>
<p>上海市黄浦区中山南路128号千古美城1楼1210室</p>
</div>
<img class="baiyou" src="../imgs/img图片/baiyou.png" alt="">
</div>
<div class="mode">
<div>选择支付方式</div>
<div>在线支付
<img src="../imgs/img图片/shenglve.png" alt="">
</div>
</div>
<!-- 等会复制 -->
<ul class="subject">
<!-- 店铺名字 -->
<div class="top">
<div class="name">
<img class="fangzi" src="../imgs/img图片/fangz.png" alt="">
<div class="wenzi">路易斯女装旗舰店</div>
<img class="heiyou" src="../imgs/img图片/heiyou.png" alt="">
</div>
<div class="zhuti">
<img src="../imgs/img图片/nvnv.png" alt="">
<div class="zizizi">
<p class="one">真丝连衣裙2019春夏新款</p>
<p class="two"> 杭州大牌气质修……</p>
<p class="three">颜色:黑白 尺码:L</p>
<div class="big">
<span class="bigg">¥160.00</span>
<span></span>
<span class="sme">X1</span>
</div>
</div>
</div>
</div>
<div class="donn">
<p class="remarks">
订单备注
<span>有什么想对商家留言的可以在这里说</span>
</p>
<div class="youhui">
<ul class="youhui_a">
<li class="xxx">
<p>优惠抵用</p>
<p class="jiage">-¥5</p>
</li>
</ul>
<ul class="youhui_b">
<li class="xxx">
<p>快递费用</p>
<p>免费包邮</p>
</li>
</ul>
</div>
<div class="money">
<p class="six">商品金额</p>
<p class="seven">¥155.00</p>
</div>
</div>
</ul>
<ul class="subject">
<!-- 店铺名字 -->
<div class="top">
<div class="name">
<img class="fangzi" src="../imgs/img图片/fangz.png" alt="">
<div class="wenzi">路易斯女装旗舰店</div>
<img class="heiyou" src="../imgs/img图片/heiyou.png" alt="">
</div>
<div class="zhuti">
<img src="../imgs/img图片/nvnv.png" alt="">
<div class="zizizi">
<p class="one">真丝连衣裙2019春夏新款</p>
<p class="two"> 杭州大牌气质修……</p>
<p class="three">颜色:黑白 尺码:L</p>
<div class="big">
<span class="bigg">¥160.00</span>
<span></span>
<span class="sme">X1</span>
</div>
</div>
</div>
<div class="zhuti">
<img src="../imgs/img图片/nvnv.png" alt="">
<div class="zizizi">
<p class="one">真丝连衣裙2019春夏新款</p>
<p class="two"> 杭州大牌气质修……</p>
<p class="three">颜色:黑白 尺码:L</p>
<div class="big">
<span class="bigg">¥160.00</span>
<span></span>
<span class="sme">X1</span>
</div>
</div>
</div>
</div>
<div class="donn">
<p class="remarks">
订单备注
<span>有什么想对商家留言的可以在这里说</span>
</p>
<div class="youhui">
<ul class="youhui_a">
<li class="xxx">
<p>优惠抵用</p>
<p class="jiage">-¥5</p>
</li>
</ul>
<ul class="youhui_b">
<li class="xxx">
<p>快递费用</p>
<p>免费包邮</p>
</li>
</ul>
</div>
<div class="money">
<p class="six">商品金额</p>
<p class="seven">¥155.00</p>
</div>
</div>
</ul>
</div>
<!-- 结尾 -->
<div class="footer">
<div class="ttt">
<p class="eight">共3件,</p>
<p class="nine">合计:</p>
<p class="ten">¥ 5999.00</p>
</div>
<div class="buttom">结算(2)</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,149 @@
body {
background-image: url("../imgs/img图片/beijing.png");
background-size: 8.06rem 14.1rem; */
}
.aaa {
width: 100vw;
height: 100vh;
background-color: #0e0e0e96;
position: fixed;
}
.head {
position: fixed;
width: 100%;
height: 0.9rem;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding-left: 0.37rem;
padding-right: 0.37rem;
box-sizing: border-box;
z-index: 2;
margin-top: 0.64rem;
}
.bbb {
position: relative;
}
.bbb::after {
content: "";
width: 0.4rem;
height: 0.02rem;
background-color: red;
position: absolute;
left: calc((100% - 0.4rem)/2);
bottom: 0.4rem;
}
.head .sys {
width: 0.42rem;
height: 0.42rem;
}
.head ul {
display: flex;
}
.head ul li {
font-size: 0.3rem;
color: #fefefe;
margin-right: 0.2rem;
}
.head .ss {
width: 0.43rem;
height: 0.43rem;
}
/* 中间 */
.content{
height: 10.34rem;
width: 100%;
background: #1a191e;
position: fixed;
bottom: 0;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
.content .title{
display: flex;
justify-content: space-between;
position: relative;
padding-left: 0.3rem;
padding-right: 0.3rem;
margin-top: 0.37rem;
}
.content .title span{
font-size: 0.28rem;
color: #79828e;
}
.content .title img{
width: 0.34rem;
height: 0.34rem;
background: white;
}
.chongfu{
display: flex;
height: 1.16rem;
margin-top: 0.2rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
justify-content: space-between;
}
.chongfu img{
width: 0.7rem;
height: 0.7rem;
}
.chongfu .text{}
.chongfu .text p{
color: #79828e;
font-size: 0.28rem;
}
.chongfu .text span{
white-space: pre-line;
color: #ffffff;
font-size: 0.28rem;
}
.heart{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.heart img{
width: 0.37rem;
height: 0.34rem;
}
.heart span{
color: #79828e;
font-size: 0.26rem;
}
.down{
margin-top: 20px;
height: 0.46rem;
display: flex;
justify-content: space-between;
padding-left: 0.23rem;
padding-right: 0.2rem;
}
.down .ffff{
border-bottom: 1px solid white;
width: 90%;
}
.down .ffff img{
width: 0.25rem;
height: 0.31rem;
padding-right: 0.2rem;
}
.down .ffff span{
font-size: 0.26rem;
color: #79828e;
}
.down img{
width: 0.45rem;
height: 0.46rem;
}

View File

@@ -0,0 +1,118 @@
<!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="../rem.js"></script>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./38.css">
</head>
<body>
<div class="aaa"></div>
<!-- 头部 -->
<div class="head">
<img class="sys" src="../imgs/img图片/扫一扫.png" alt="">
<ul>
<li class="bbb">
推荐
</li>
<li>
关注
</li>
<li>
直播
</li>
</ul>
<img class="ss" src="../imgs/img图片/搜索.png" alt="">
</div>
<!-- 中间黑色的 -->
<div class="content">
<div class="title">
<span>652条评论</span>
<img src="../imgs/img图片/xx.png" alt="">
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/redx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="down">
<div class="ffff">
<img src="../imgs/img图片/pl.png" alt="">
<span>发表评论</span>
</div>
<img src="../imgs/img图片/xiaolian.png" alt="">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,245 @@
.head {
position: fixed;
width: 100%;
height: 0.9rem;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding-left: 0.37rem;
padding-right: 0.37rem;
box-sizing: border-box;
z-index: 2;
align-items: center;
}
.bbb {
position: relative;
}
.bbb::after {
content: "";
width: 0.4rem;
height: 0.02rem;
background-color: red;
position: absolute;
left: calc((100% - 0.4rem)/2);
top: 0.4rem;
}
.head .sys {
width: 0.42rem;
height: 0.42rem;
}
.head ul {
display: flex;
}
.head ul li {
font-size: 0.3rem;
color: #fefefe;
margin-right: 0.2rem;
}
.head .ss {
width: 0.43rem;
height: 0.43rem;
}
/* 中间 */
.content {
width: 100%;
height: calc(100vh - 1rem);
position: relative;
}
.aaa{
width:100%;
height: 100%;
}
.aaa img{
width: 100%;
height: 100%;
}
.bbbb{
background: #0e0e0e96;
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.content .content-l {
position: absolute;
bottom: 0;
left: 0.3rem;
}
.content .content-l .text_top {
display: flex;
}
.content .content-l .text_top img {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.16rem;
}
.content .content-l .text_top span {
color: yellow;
font-size: 0.32rem;
}
.content .commodity {
width: 5.58rem;
height: 1.68rem;
background-color: white;
border: 1px solid black;
display: flex;
align-items: center;
padding-left: 0.06rem;
box-sizing: border-box;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.content .commodity img {
width: 1.48rem;
height: 1.48rem;
margin-right: 0.3rem;
}
.content .commodity .words {}
.content .commodity .words .one {
font-size: 0.28rem;
}
.content .commodity .words .two {
font-size: 0.28rem
}
.content .commodity .words .three {
font-size: 0.2rem
}
.content .commodity .words .three img {
width: 0.5rem;
height: 0.5rem;
background-color: black;
margin-left: 1.74rem;
}
.content .music {
}
.content .content-l .music img {
width: 0.27rem;
height: 0.28rem;
margin-right: 0.14rem;
}
.content .content-l .music span {
font-size: 0.32rem;
color: white;
margin-left: 0.2rem;
}
.content-r {
position: absolute;
right: 0;
margin-right: 0.4rem;
font-size: .3rem;
color: white;
bottom: 0;
}
.content-r p {
font-size: .32rem;
}
.six {
position: relative;
}
.six img {
width: 0.9rem;
height: 0.9rem;
object-fit: cover;
border-radius: 50%;
margin-bottom: 0.4rem;
}
.six .jiahao {
width: 0.36rem;
height: 0.36rem;
left: 0.28rem;
bottom: -0.12rem;
position: absolute;
background: red;
}
.seven,
.eight,
.nine,
.ten {
margin-bottom: 0.2rem;
}
.seven img {
width: 0.9rem;
height: 0.9rem;
}
.eight img {
width: 0.9rem;
height: 0.9rem;
}
.nine img {
width: 0.9rem;
height: 0.9rem;
}
.ten img {
width: 0.9rem;
height: 0.9rem;
}
/* 尾部 */
.footer {
width: 100vw;
height: 1rem;
position: fixed;
bottom: 0;
font-size: .28rem;
display: flex;
align-items: center;
justify-content: space-around;
color: white;
background-color: #0e0e0ede;
}
.footer li {
font-size: 0.35rem;
}
.footer li:first-child {
font-size: 0.35rem;
}
.ccc {
position: relative;
}
.ccc::after {
content: "";
width: 0.6rem;
height: 0.02rem;
background-color: white;
position: absolute;
left: calc((100% - 0.6rem)/2);
bottom: -0.1rem;
}

View File

@@ -0,0 +1,93 @@
<!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="../rem.js"></script>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./39.css">
</head>
<body>
<div class="aaa"></div>
<!-- 头部 -->
<div class="head">
<img class="sys" src="../imgs/img图片/扫一扫.png" alt="">
<ul>
<li class="bbb">
推荐
</li>
<li>
关注
</li>
<li>
直播
</li>
</ul>
<img class="ss" src="../imgs/img图片/搜索.png" alt="">
</div>
<!-- 中间 -->
<div class="content">
<div class="aaa">
<img src="../imgs/img图片/beijing.png" alt="000">
</div>
<div class="bbbb"></div>
<div class="content-l">
<div class="text_top">
<img src="../imgs/img图片/huangfangzi.png">
<span>美林美妆合肥店 >7KM</span>
</div>
<div class="commodity">
<img src="../imgs/img图片/shangpin.png">
<div class="words">
<p class="one">夏季网纱半身裙中长款纱……</p>
<p class="two">¥68.00</p>
<div class="three">已卖1020
<img src="../imgs/img图片/car.png" alt="">
</div>
</div>
</div>
<div class="music">
<img src="../imgs/img图片/yinfu.png">
<span>你像花儿一样美 (DJ) 版</span>
</div>
</div>
<!-- 中右 -->
<div class="content-r">
<div class="six">
<img src="../imgs/img图片/touxiang.png" alt="">
<img class="jiahao" src="../imgs/img图片/jiahao.png" alt="">
</div>
<div class="seven">
<img src="../imgs/img图片/心.png" alt="">
<p>71.1W</p>
</div>
<div class="eight">
<img src="../imgs/img图片/分享.png" alt="">
<p>分享</p>
</div>
<div class="nine">
<img src="../imgs/img图片/评论.png" alt="">
<p>评论</p>
</div>
<div class="ten">
<img src="../imgs/img图片/5购物袋2.png" alt="">
<p>购物袋</p>
</div>
</div>
</div>
<!-- 尾部 -->
<ul class="footer">
<li class="ccc">首页</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,18 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
font-size: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,108 @@
<!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>
</body>
<script>
// var name = "冯"
// // console.log(name);
// var age = 19
// console.log(age,name);
// var money = 40
// money > 50 ? console.log("去吃好吃的") : console.log("随便痴呆你");
// var ok = 5
// switch (ok) {
// case 0:
// console.log("啥也不说");
// break;
// case 1:
// console.log("普通");
// break;
// case 2:
// console.log("高级");
// break;
// default:
// console.log("buzhid");
// break;
// // }
// for(var i = 1;i < 100;i++)
// // console.log(i);
// var arr = new Array();
// arr[0] = "哈哈哈1"
// arr[1] = "哈哈哈2"
// arr[2] = "哈哈哈3"
// arr[3] = "哈哈哈4"
// console.log(arr);
// var arr = new Array("哈哈哈1","哈哈哈2","哈哈哈3","哈哈哈4");
// var aaa = new Array();
// aaa[0] = "哈哈哈6"
// aaa[1] = "哈哈哈7"
// aaa[2] = "哈哈哈8"
// aaa[3] = "哈哈哈9"
// console.log(
// [
// ...arr,
// ...aaa
// ]
// );
// for (var index = 0; index < aaa.length; index++) {
// arr.push(aaa[index])
// }
// console.log(arr);
// console.log(arr.concat(aaa));
// var obj = {
// name : "冯文焌",
// agr : 18,
// }
// // console.log(obj);
// for (const key in obj) {
// console.log(obj[key]);
// }
// function fff (a,b){
// return(a + b);
// }
// var ss = fff(1 , 3)
// console.log(ss);
//回调函数!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
function asyncfun(sss) {
var num = 1
setTimeout(function () {
num += 100
sss(num)
}, 3000)
}
asyncfun(function(bb){
console.log(bb);
})
// function aa(callback){
// var h = "100块钱"
// callback(h)
// }
// aa(function(bb){
// console.log(bb);
// })
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

View File

@@ -0,0 +1,85 @@
<!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>
span {
border: 1px solid;
margin: 2px;
width: 80px;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<var>
</var>
</body>
<script>
// var c = 3
// if(c < 60){
// console.log("不及格");
// }else if(c >= 60 && c < 70){
// console.log("刚刚积分");
// }else if(c >= 70 && c < 80){
// console.log("可以");
// }else {
// console.log("无敌");
// }
// switch (c) {
// case 1:
// console.log("不及格");
// break;
// case 2:
// console.log("2");
// break;
// case 3:
// console.log("3");
// break;
// default:
// break;
// }
// for (var i= 1; i <= 9; i++) {
// console.log(i);
// }
// var i=102
// do {
// console.log(i);
// i++;
// } while (i < 100);
// for (var i = 1; i <= 9; i++) {
// var aaa = ''
// for (var j = 1; j <= i; j++) {
// // console.log(j + 'x' + i + '=' + j * i);
// aaa += '<span>'+j + 'x' + i + '=' + j * i+' '+'</span>'
// }
// // console.log(aaa);
// document.write(aaa+'</br>')
// }
var aaa = ["打上单撒大所", "大萨达多", "大萨达所大所多"]
var bbb = ["11", "大是多少萨达多", "大萨达11111所大所多"]
for(
var index=0;index < aaa.length;index++ ){
console.log(aaa[index]);
}
// console.log(
// [
// ...aaa,
// ...bbb
// ]
// )
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@@ -0,0 +1,38 @@
<!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>
body {
height: 100%;
}
img {
width: 40px;
display: flex;
align-items: center;
height: 100%;
margin: auto;
}
.aaa {
width: 100vw;
}
</style>
</head>
<body>
<div class="aaa">
<img src="./shuaxin.png" alt="">
</div>
</body>
<script>
var startY = 0;
</script>
</html>

View File

@@ -0,0 +1,128 @@
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
position: relative;
overflow: hidden;
user-select: none;
}
.ground{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 7rem;
z-index: 50;
}
.ground img{
position: absolute;
width: 100%;
height: 100%;
}
.start{
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
/* 开启弹性盒子,上下排列,水平对齐 */
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.play{
width: 60px;
margin-top: 24px;
cursor: pointer;
}
.back img {
width: 100%;
height: 100vh;
background-size: contain;
}
.color {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
box-sizing: border-box;
}
.color div {
cursor: pointer
}
.nandu{
cursor: pointer;
color: red;
}
.result{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.875rem;
z-index: 555;
}
.pause{
position: absolute;
left: 3.75rem;
top: 3.75rem;
}
.sg{
width: 3.4375rem;
position: absolute;
}
.up{
transform: rotate(-40deg);
}
.down{
transform: rotate(90deg);
}
.bird{
width: 2.125rem;
height: 1.5rem;
position: absolute;
left: 120px;
transition: top linear 0.15s;
}
.bird_yellow{
background-image: url("../img/hn1.png");
}
@keyframes birdShake {
0% {transform: translateY(0rem);}
50% {transform: translateY(10px);}
100% {transform: translateY(0rem);}
}
@keyframes birdMotionYellow {
0% {background: url("../img/hn1.png");}
50% {background: url("../img/hn2.png");}
100% {background: url("../img/hn3.png");}
}
@keyframes birdMotionBlue {
0% {background: url("../img/bn1.png");}
50% {background: url("../img/bn2.png");}
100% {background: url("../img/bn3.png");}
}
@keyframes birdMotionRed {
0% {background: url("../img/rn1.png");}
50% {background: url("../img/rn2.png");}
100% {background: url("../img/rn3.png");}
}
.show{
display: block;
}
.hidden{
display: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,292 @@
class bird {
gameStatus = false
innerHeight = window.innerHeight
innerWidth = window.innerWidth;
//鸟的下落速度
birdDownSpeed = 5;
//鸟点一次上的速度
birdUpSpeed = 40
//地板移动速度
groundSpeed = 5
//水管上下间隙
WaterPipeClearance = 100
//水管水平间隔
WaterPipeLeftRightClearance = 500
// 生成水管的X轴位置
WaterPipeX = 0
// 一秒创建多少个水管
createdWaterPipeXTime = 500
// 总分
TotalScore = 0
constructor() {
this.birdEvent();
this.birdAction();
this.groundAction();
this.resultAction();
this.ChangeColor()
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime);
}
birdEvent() {
click(".play", () => {
this.changeGameStatus()
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
})
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
})
}
//运动状态
changeGameStatus() {
if (this.gameStatus) {
$(".start").remove("hidden")
$(".pause").add("hidden")
$(".music").pause()
this.gameStatus = false
} else {
this.ChangeColor()
$(".result").remove("hidden")
$(".bird").style.animation = 'birdMotion 0.48s linear infinite'
$(".start").add("hidden")
$(".pause").remove("hidden")
$(".music").play()
this.gameStatus = true
}
}
//分数
resultAction() {
var TotalScoreArr = String(this.TotalScore).split("")
$(".result").innerHTML = ""
TotalScoreArr.forEach(v => {
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
//鸟的移动
birdAction() {
var clickTime = 0, currentTime = 0;
//鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
$(".bird").style.animation += ',birdShake 0.48s linear infinite'
setInterval(() => {
if (this.gameStatus) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
}
}, 1000 / 16)
click("body", () => {
if (this.gameStatus) {
clickTime = (new Date()).getTime()
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`;
}
})
setInterval(() => {
if (this.gameStatus) {
var currentTime = (new Date()).getTime()
if (currentTime - clickTime > 400) {
$(".bird").remove("up")
$(".bird").add("down")
}
}
}, 300);
}
//地板的移动
groundAction() {
$(".groundOne").style.left = '0px';
$(".groundTwo").style.left = `${this.innerWidth}px`;
setInterval(() => {
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
$(".groundOne").style.left = `${this.innerWidth}px`
}
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
$(".groundTwo").style.left = `${this.innerWidth}px`
}
this.collisionground($(".bird"), $(".ground"))
}, 1000 / 20);
}
collisionground(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
this.gameOver()
console.log('碰撞成功')
}
}
//水管的图片生成
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
if (TopWaterPipeHeight) {
TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
}
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
if (this.WaterPipeX == 0) {
this.WaterPipeX = this.innerWidth
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
}
var cretedImg = (type) => {
var img = document.createElement("img");
img.src = `../水管鸟/img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
img.className = "sg"
img.style = `
${type}: ${type == "top" ? 0 : 112}px;
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px
`;
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
}
//水管移动
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
if (parseInt(img.style.left) <= -55) {
try {
clearInterval(img.time)
$("body").removeChild(img)
} catch (error) { }
} else {
this.collision($(".bird"), img)
}
}, 1000 / 30)
}
/**
* 碰撞检测
* @param {*} el1 鸟
* @param {*} el2 水管
*/
collision(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
console.log('碰撞成功')
this.gameOver()
} else {
console.log('111');
if ( (el2.offsetLeft + el2.offsetWidth) == 107 ) {
this.TotalScore += 0.5
if (!String(this.TotalScore).includes(".")) {
console.log("==========分数=======: ", this.TotalScore);
$(".point").play()
this.resultAction()
}
//换背景图
if (this.TotalScore > 3) {
var night = document.createElement("img")
night.src = "../水管鸟/img/night.png"
$(".back").replaceChild(night, $(".morring"))
function ResumeError() {
return true;
}
window.onerror = ResumeError;
console.log("xixi");
}
}
}
}
//游戏结束
gameOver() {
$(".die").play()
this.changeGameStatus()
_(".sg").forEach(v => {
clearInterval(v.time)
})
var gameOvers = document.createElement("img")
gameOvers.src = "./img/gameover.png"
$(".start").replaceChild(gameOvers, $(".logo"))
click(".play", () => location.reload())
$(".start").removeChild($(".nandu"))
$(".start").removeChild($(".color"))
// $(".nandu").remove("hidden")
}
ChangeColor() {
click(".yellow", () => {
$(".bird").style.animation = "birdMotionYellow 0.4s linear infinite,birdShake 0.48s linear infinite"
})
click(".blue", () => {
$(".bird").style.animation = "birdMotionBlue 0.4s linear infinite,birdShake 0.48s linear infinite"
console.log(2);
})
click(".red", () => {
$(".bird").style.animation = "birdMotionRed 0.4s linear infinite,birdShake 0.48s linear infinite"
console.log(3);
})
}
}
new bird()

View File

@@ -0,0 +1,31 @@
class Util{
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
}
click(className,callback) {
$(className).onclick = () => {
callback()
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject } = new Util()
inject()

View File

@@ -0,0 +1,57 @@
<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<audio class="music" src="./sounds/LBI利比 - 小城夏天.flac" loop></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<audio class="die" src="./sounds/sfx_die.ogg"></audio>
<div class="back">
<img class="morring" src="../水管鸟/img/back.png" alt="">
</div>
<div class="result hidden">
</div>
<img class="pause hidden" src="../水管鸟/img/pause.png" alt="">
<div class="start">
<img class="logo" src="../水管鸟/img/title.png" alt="">
<img class="again hidden" src="./img/start.png" alt="">
<div class="nandu">
<div class="play">普通</div>
<div class="difficulty">困难</div>
</div>
<div class="color">
<div class="yellow">
<img src="./img/hn2.png" alt="">
</div>
<div class="blue">
<img src="./img/bn2.png" alt="">
</div>
<div class="red">
<img src="./img/rn2.png" alt="">
</div>
</div>
</div>
<div class="bird bird_yellow" style="top: 0px;animation: birdMotionYellow 0.48s linear infinite"></div>
<div class="ground">
<img class="groundOne" src="../水管鸟/img/diban.png" alt="">
<img class="groundTwo" src="../水管鸟/img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,26 @@
<!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>
</body>
<SCript>
function al(callback){
var num = 1
setTimeout(function(){
num += 100;
callback(num)
},3000)
}
al( function(aaa){
console.log("res",aaa);
})
</SCript>
</html>

View File

@@ -0,0 +1,95 @@
<!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>
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
overflow: hidden;
}
ul li {
height: 45px;
position: relative;
align-items: center;
padding: 15px;
border-bottom: 1px solid black;
display: flex;
transition-duration: 0.3s;
}
.main .action {
display: flex;
align-items: center;
height: 49px;
padding-left: 10px;
position: absolute;
right: -120px;
font-size: 20px;
}
.item {
width: 100%;
}
.item {
height: 100%;
display: flex;
align-items: center;
}
.action .top {
background: #c8c7cd;
}
.action .read {
background: #ff9c00;
}
.action .delete {
background: #ff3a31;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="item">奥特曼1</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">奥特曼2</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">奥特曼3</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!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>点我</button>
<div style="display: block;" class="text"> 我会变色</div>
</body>
<script>
// 定义 button和文字
var button = $("button"), text = $(".text");
// 定义点击事件+if语句
button.onclick = function () {
if (text.style.display == "block") {
text.style.display = "none"
} else {
text.style.display = "block"
text.style.color = `hsl(${math.random() * 360},100%,50%)`
}
}
// 封装调用
function $(className) {
return document.querySelector(className)
}
// console.dir(document.querySelector("button"));
// addEventListener
// document.querySelector("button").addEventListener('click',function(){
// setTimeout(function(){
// alert('hahaha')
// },1000)
// })
// document.querySelector('button').addEventListener('click', button)
// function button() {
// setTimeout(function () {
// alert('hahaha')
// }, 1000
// )
// }
// button( function(){
// onclick('具体')
// } )
</script>
</html>

View File

@@ -0,0 +1,98 @@
<!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>
body{
height: 100vh;
}
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 160px;
border-radius: 10px;
box-shadow: 2px 2px 2px #c7b7b7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>上单</li>
<li>打野</li>
<li>中单</li>
<li>射手</li>
<li>辅助</li>
</ul>
</body>
<script>
// 整体里面的右键菜单
$("body").oncontextmenu = function (e) {
// 防止默认值
e.preventDefault();
// 从点击中拿到x,y的值
var { x, y } = e;
// 目前设备的宽和高,显示出来的
var { clientWidth, clientHeight } = document.body;
// 如果当前屏幕的宽-鼠标x的位置<菜单的宽 同时当前屏幕的高-鼠标y的位置<菜单的高
if (clientWidth - x < 152 && clientHeight - y < 160) {
// 定义菜单的位置在y - 200,x - 160的位置
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
// 显示出来
} else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
} else if (clientHeight - y < 160) {
$("ul").style = `
top: ${y - 160}px;
left: ${x}px;
display: block;
`
} else {
$("ul").style = `
top: ${y}px;
left: ${x}px;
display: block;
`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>
$("body").oncontextmenu = function(e){
e.preventDefault();
var { x,y } = e;
var { cl}
}

View 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>
</head>
<body>
<input type="text" placeholder="关键字">
</body>
<script>
var arr = ["在干嘛", "在吃饭", "写作业", "写吃饭", "干什么", "是什么", "是吃饭", "玩游戏", "玩什么"]
var aaaa = [];
$("input").oninput = function () {
aaaa = []
console.dir(
$("input").value.length != 0
);
arr.forEach(function (v, i) {
if (v.includes($("input").value)) {
aaaa.push(v)
console.log(aaaa);
}
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,43 @@
<!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>
body{
height: 100000px;
}
.header {
width: 100%;
height: 100px;
background: yellow;
}
.fixed{
position:fixed ;
width: 100%;
top: 0;
left: 0%;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
var header = $(".header")
$("body").onscroll = function(){
// 如果滚动距离大于500
if(document.documentElement.scrollTop > 500){
header.className = "header fixed"
}else{
header.className = "header"
}
}
// 封装
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,72 @@
<!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>
ul,li{
list-style: none;
}
.title{
display: flex;
}
.title li{
margin-right: 20px;
}
.content li{
display: none;
}
.content .active{
display: block;
}
.title .active{
color: blue;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">开始</li>
<li>起步</li>
<li>正常</li>
<li>减速</li>
<li>停止</li>
</ul>
<ul class="content">
<li class="active">开始1</li>
<li>起步2</li>
<li>正常3</li>
<li>减速4</li>
<li>停止5</li>
</ul>
</body>
<script>
var titleLi = _(".title li"), contentLi = _(".content li");
titleLi.forEach(function(v, i) {
v.onclick = function () {
console.log(v)
titleLi.forEach(function(item, index) {
item.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

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=device-width, initial-scale=1.0">
<title>红包</title>
<style>
body {
margin: 0;
padding: 0;
}
img {
width: 80px;
height: 96px;
position: fixed;
top: 0;
}
</style>
</head>
<body>
<!-- <img src="./hb.png" alt=""> -->
</body>
<script>
var { clientWidth, clientHeight } = document.body;
function CreateHB() {
var img = document.createElement("img")
img.src = "./hb.png";
var x = Math.random() * (clientWidth - 80)
console.log('x', x, clientWidth);
img.style.left = `${x}px`;
$('body').appendChild(img)
console.log("./hb.png:", img);
}
// setInterval(() => {
CreateHB()
// },1000
// )
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,59 @@
<!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>
<form action="">
<input type="text" name="id">
</form>
<ul>
</ul>
</body>
<script>
// 1 创建一个新的对象 举例:拿出手机
// fetch 全新的ajax请求方式 后面再用 //XHR
var ajax = new XMLHttpRequest()
//2 传入后端地址 (配置需要访问的后端地址和请求方式)举例:设置号码
ajax.open("POST","http://127.0.0.1/index.php?")
var form = new FormData();
form.append("id",1)
var params = {
id:1
}
//更改请求头类型,系统为Content-Type 更改为application 中文格式charset=UTF-8
// ajax.setRequestHeader('Content-Type','application/json,charset=UTF-8') //json格式发送后端
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8') //form表单格式传给后端
//3 发送请求 举例:拨号
// ajax.send(JSON.stringify(params))
ajax.send(form)
//监听请求状态
ajax.onreadystatechange = function () {
if (ajax.readyState == 4){
if (ajax.status ==200){
var data = JSON.parse(ajax.responseText)
//字符串转换为对象 JSON.parse //对象转换为字符串 JSON.stringify
console.log(data);
data.result.forEach(v => {
document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
});
}else{
alert("网络请求失败")
}
}
}
</script>
</html>

View File

@@ -0,0 +1,20 @@
class ajax{
constructor(){
this.ajax = new XMLHttpRequest();
}
get(params){
for (const key in params.data) {
console.log("key",key);
}
}
}

Some files were not shown because too many files have changed in this diff Show More