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,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head">
<div class="center">
<div class="left">
<img src="" alt="">
<ul>
<li><span>首页</span></li>
<li><a href="">IT圈</a></li>
<li><a href="">辣品</a></li>
</ul>
</div>
<div class="right">
<ul>
<li>
<div class="drop_menu">
<img src="" alt="">
<div class="hidden_menu">
<li><span>日夜间</span></li>
</div>
</div>
</li>
<li><a href="">投稿</a></li>
<li>登录</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="left">
<ul>
<li><a href="">业界</a></li>
<li><a href="">手机</a></li>
</ul>
</div>
<div class="right">
<div class="search">
<input type="text" placeholder=" 请输入关键词">
</div>
<div class="submit">
<span>搜索</span>
</div>
<ul>
<li>热搜</li>
<li><a href="">微信</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!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="head">
<div class="center">
<div class="head">
<div class="left">
<img src="" alt="">
<ul>
<li><span>首页</span></li>
<li><a href="">排行榜</a></li>
</ul>
</div>
<div class="right">
<div class="search">
<input type="text" placeholder="请输入书名">
<img src="" alt="">
</div>
<ul>
<li><a href="">作者首页</a></li>
<li><a href="">手机版</a></li>
<li>登录</li>
<li>注册</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="head">
<img src="" alt="">
</div>
<div class="div">
<img src="" alt="">
<ul>
<li><a href="">大奉打更人</a></li>
<li><a href="">诡秘之主</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

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>
</head>
<body>
<div class="head">
<div class="center">
<div class="left">
<img src="" alt="">
<div class="handoff">
<img src="" alt="">
<span>合肥</span>
<a href="">切换城市</a>
</div>
<ul>
<li>首页</li>
<li><a href="">职位</a></li>
<li><a href="">公司</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><img src="" alt="">
<span>手机上赶集</span>
<img src="" alt="">
</li>
<li><img src="" alt="">
<span>我要招人</span>
<img src="" alt="">
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="content_top">
<div class="search">
<img src="" alt="">
<input type="text">
</div>
<div class="submit">
<span>搜索</span>
</div>
<ul>
<li><a href="">货运司机</a></li>
<li><a href="">文员</a></li>
</ul>
</div>
<div class="content">
<div class="left">
<ul class="left_text">生活服务
<li>
<div class="dropmenu">
<span>餐饮</span>
<img src="" alt="">
<div class="hidden_menu">
<li><a href="">全部</a></li>
<li><a href="">家政</a></li>
</div>
</div>
</li>
<li>
<div class="dropmenu">
<span>人事</span>
<img src="" alt="">
<div class="hidden_menu">
<li><a href="">全部</a></li>
</div>
</div>
</li>
</ul>
</div>
<div class="right">
<div class="left">
<img src="" alt="">
<span>包吃包住</span>
</div>
<div class="right">
<img src="" alt="">
<span>周末双休</span>
</div>
<<<<<<< HEAD
<ul>
<li><img src="" alt="">
<span>急招专区</span>
</li>
<li><img src="" alt="">
<span>更多服务</span>
<ul>
<li><a href="">租房</a></li>
<li><a href="">二手车</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
=======
>>>>>>> 26739de342b7e5e4666ecd3d43d4bfe9a3e6dbc8
</div>
</body>
</html>

View File

@@ -0,0 +1,71 @@
<!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="head">
<div class="center">
<div class="left">
<img src="" alt="">
</div>
<div class="middle">
<ul>
<li>
<div class="dropmenu">
<span>课程</span>
<ul class="hidden_menu">
<li>
<div class="head_text">大学</div>
<ul>
<li><a href="">国家精品</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li><a href="">学校</a></li>
</ul>
</div>
<div class="right">
<div class="search">
<input type="text" placeholder="搜索">
<div class="submit">
<img src="" alt="">
</div>
</div>
<div class="reg">
<span>登录</span>
<span>/</span>
<span>注册</span>
</div>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="left">
<ul>
<li><a href="">国家精品</a></li>
<li><a href="">计算机</a></li>
</ul>
</div>
<div class="middle">
<img src="" alt="">
</div>
<div class="right">
<span>免费来学习</span>
<div class="div"><img src="" alt=""></div>
<span>网易</span>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,131 @@
<!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>hao123</title>
</head>
<body>
<div class="head">
<div class="head_top">
<div class="left">
<div class="dropmenu">
<a href="">
<img src="" alt="">
</a>
<span>导航</span>
<img src="" alt="">
<ul class="hidden_menu">
<div class="left_text">休闲娱乐
</div>
<ul>
<li>电影</li>
<a href=""></a>
</ul>
<ul>
<li>动漫</li>
<a href=""></a>
</ul>
<ul>
<li>综艺</li>
<a href=""></a>
</ul>
</ul>
<ul class="hidden_menu">
<div class="left_text">生活服务
</div>
<ul>
<li>银行</li>
<a href=""></a>
</ul>
<ul>
<li>房产</li>
<a href=""></a>
</ul>
<ul>
<li>股票</li>
<a href=""></a>
</ul>
<ul class="hidden_menu">
<div class="left_text">其他类别
</div>
<ul>
<li>邮箱</li>
<a href=""></a>
</ul>
<ul>
<li>微博</li>
<a href=""></a>
</ul>
<ul>
<li>公益</li>
<a href=""></a>
</ul>
</div>
</div>
<div class="right">
<img src="" alt="">
<span>一键登录</span>
<img src="" alt="">
<input type="text" placeholder="">
<img src="" alt="">
<span>搜索</span>
</div>
</div>
</div>
<div class="bottom">
<ul>
<li>推荐</li>
<a href=""></a>
</ul>
<ul>
<li>娱乐</li>
<a href=""></a>
</ul>
<ul>
<li>体育</li>
<a href=""></a>
</ul>
</div>
</div>
<div class="center">
<div class="">
</div>
</div>
</div>
<div class="center"></div>
<div class="left">
<ul>
<li>推荐</li>
<a href=""></a>
</ul>
<ul>
<li>娱乐</li>
<a href=""></a>
</ul>
<ul>
<li>体育</li>
<a href=""></a>
</ul>
</div>
<div class="middle">
</div>
<div class="Tail"></div>
</body>
</html>

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>Document</title>
</head>
<body>
<div class="head">
<div class="center">
<div class="left">
<img src="" alt="">
<ul>
<li><img src="" alt="">
<span>发现音乐</span>
</li>
<li><a href="">下载客户端</a></li>
</ul>
</div>
<div class="right">
<div class="search">
<img src="" alt="">
<input type="text" placeholder="搜索音乐">
</div>
<div class="reg">
<span>登录</span>
<span>/</span>
<span>注册</span>
</div>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="content_top">
<ul>
<li><img src="" alt="">
<span>推荐</span>
</li>
<li><a href="">排行榜</a></li>
</ul>
</div>
<div class="content_bottom">
<img src="" alt="">
<ul>
<li><img src="" alt=""><span>下载PC端</span></li>
<li><a href="">下载其他版本</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,66 @@
<!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>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">首页</li>
<li>社会</li>
<li>财经</li>
<li>体育</li>
</ul>
<ul class="tabs_content">
<li class="active_content">首页 的内容</li>
<li>社会 的内容</li>
<li>财经 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script>
$(".tabs_title li").click(function() {
$(this).addClass("active_title").siblings().removeClass("active_title")
//跟上面是一行代码换行下来的
$(".tabs_content li").eq($(this).index())
.addClass("active_content")
.siblings()
.removeClass("active_content")
})
</script>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="head">
<div class="center">
<div class="left">
<img src="" alt="">
<ul>
<li><span>首页</span></li>
<li><a href="">会员</a></li>
</ul>
</div>
<div class="middle">
<div class="search">
<input type="text">
<img src="" alt="">
<div class="submit">
<span>提问</span>
</div>
</div>
</div>
<div class="right">
<img src="" alt="">
<span>无障碍</span>
<p>登录</p>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="content_top">
<img src="" alt="">
<span>好问题广场</span>
</div>
<div class="content_menu">
<div class="left">
<img src="" alt="">
<span>登录一下</span>
<a href="">登录</a>
</div>
<div class="right">
<img src="" alt="">
<span>近期热点</span>
<ul>
<li><a href="">李嘉诚出售英国资产</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
font-size: 0px;
}

View File

@@ -0,0 +1,84 @@
.header{
display: flex;
align-items: center;
justify-content: space-around;
}
.header .back{
width: 0.19rem;
height: 0.34rem;
margin-left: 0.13rem;
margin-top: 0.65rem;
margin-bottom: 0.29rem;
}
.header span{
margin-top: 0.65rem;
margin-bottom: 0.29rem;
font-size: 0.34rem;
color: #333333
}
.header .sosuo{
width: 0.35rem;
height: 0.35rem;
margin-top: 0.65rem;
margin-bottom: 0.29rem;
margin-right: 0.28rem;
}
.content{}
.content ul li .time{
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #666e7a;
}
.content ul li .time span{
font-size: 0.24rem;
color: #eaeef3;
padding-left: 0.21rem;
padding-top: 0.29rem;
padding-bottom: 0.18rem;
margin-left: 0.21rem;
margin-top: 0.29rem;
margin-bottom: 0.18rem;
}
.content ul li .title{
display: flex;
align-items: center;
justify-content: flex-start;
}
.content ul li .title .title_left{}
.content ul li .title .title_left img{
width: 0.72rem;
height: 0.72rem;
margin-left: 0.32rem;
margin-top: 0.3rem;
margin-bottom: 0.33rem;
}
.content ul li .title .title_right{
display: flex;
flex-direction: column;
justify-content: center;
}
.content ul li .title .title_right .title_name{
font-size: 0.28rem;
color: #666e7a;
}
.content ul li .title .title_right .like{
width: 0.23rem;
height: 0.19rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,138 @@
<!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="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img class="back" src="./img/z.png" alt="">
<span>联系人(1125)</span>
<img class="sosuo" src="./img/so.png" alt="">
</div>
<div class="content">
<ul>
<li>
<div class="time">
<span>2020/03/10</span>
</div>
<div class="title">
<div class="title_left">
<img src="./img/tou.png" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img class="like" src="./img/love.png" alt="">
</div>
</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
</li>
<li>
<div class="time">2020/03/1</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
</li>
<li>
<div class="time">2020/2/1</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
<div class="title">
<div class="title_left">
<img src="" alt="">
</div>
<div class="title_right">
<div class="title_name">不落的太阳DT</div>
<img src="" alt="">
</div>
</div>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
font-size: 0px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 KiB

View File

@@ -0,0 +1,112 @@
<!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">
<style>
.pa {
padding-left: 0.21rem;
padding-right: 0.23rem;
}
.content {
margin-top: 0.45rem;
}
.content ul {}
.content li {
width: 7.46rem;
height: 5.79rem;
border-radius: 0.04rem;
}
.content li .Information {
width: 7.02rem;
height: 3.9rem;
position: relative;
}
.content li .Information span {
width: 1.14rem;
height: 0.36rem;
background-color: #ff5f13;
border-radius: 0.04rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.24rem;
color: #ffffff;
position: absolute;
top: 0.21rem;
right: 0.3rem;
}
.content li .Information img {
width: 7.02rem;
height: 3.9rem;
}
.content li .Information p {
position: absolute;
font-size: 0.3rem;
color: #ffffff;
right: 0.4rem;
bottom: 0.12rem;
}
.content .text {
font-size: 0.3rem;
color: #333333;
display: flex;
padding-top: 0.21rem;
padding-bottom: 02.74rem;
}
.content .Information .time {
width: 2.8rem;
height: 0.4rem;
font-size: 0.22rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
color: #f6f8f6;
left: 2.11rem;
bottom: 1.63rem;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
<ul>
<li>
<div class="Information pa">
<span>正在直播</span>
<img src="./img/ts.png" alt="">
<p>342252人在看</p>
</div>
<div class="text">“文字鬼才”马伯庸新书发布座谈会(标题一行就一行)</div>
</li>
<li>
<div class="Information pa">
<span>直播预告</span>
<img src="./img/ts.png" alt="">
<div class="time">直播时间:07-23 16:00</div>
<p>59872人预约</p>
</div>
<div class="text">九枚玉和您畅谈陪读生活的酸辣苦涩(字体如果两
行就展示两行)</div>
</div>
</li>
<li>
<div class="tupian">
<img src="" alt="">
<span>连接金融合作蜕变共赢未来 </span>
</div>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,106 @@
<!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-style: none;
text-decoration: none;
border: none;
outline: none;
}
.center {
width: 100%;
float: left;
}
.center .img {
width: 128px;
height: 40px;
margin-top: -2px;
float: left;
}
.center .inp {
width: 70%;
position: relative;
float: left;
}
.center .inp .inp_a {
float: left;
width: 500px;
height: 34px;
border: 1px solid #4E6EF2;
border-radius: 16px;
}
.center .inp .inp_a input {
width: 80%;
height: 26px;
float: left;
margin-left: 50px;
margin-top: 3px;
}
.center .inp .inp_wy {
position: absolute;
left: 10px;
line-height: 34px;
float: left;
}
.center .inp .inp_xx {
border-radius: 100%;
text-align: center;
top: 9px;
width: 9px;
height: 18px;
color: #9195a3;
background-color: #F5F5F6;
float: left;
position: absolute;
right: 220px;
box-sizing: border-box;
}
.center .inp .inp_text {
width: 112px;
height: 44px;
background-color: #4E6EF2;
border: 0;
color: #fff;
font-size: 17px;
border-radius: 0 10px 10px 0;
line-height: 44px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="center">
<img class="img" src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png"
alt="">
<div class="inp">
<div class="inp_a">
<div class="inp_wy">网页</div>
<input class="inp_inp" type="text">
<div class="inp_xx">3</div>
</div>
<div class="inp_text">百度一下 </div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,153 @@
<!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-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 1000px;
height: 453.5px;
min-width: 900px;
overflow: hidden;
background-color: #ccc;
border-radius: 5px;
}
.main .title {
width: 900px;
height: 95.5px;
}
.main .title {
display: block;
margin: 0 auto;
width: 196px;
height: 40px;
padding-top: 37.5px;
padding-bottom: 18px;
text-align: center;
line-height: 100%;
}
.main .classify {
width: 600px;
height: 50px;
margin: 0 auto;
font-size: 0;
text-align: center;
box-sizing: border-box;
}
.main .classify li {
float: left;
font-size: 15px;
margin: 0 24px;
font-size: 15px;
margin: 0 24px;
color: #333;
text-align: center;
}
.main .classify li .T {
color: #31c27c;
text-align: center;
margin: 0 auto;
}
.main .list {
width: 920px;
height: 250px;
margin: 0 auto;
}
.main .list li{
width: 184px;
height: 100%;
float: left;
overflow: hidden;
}
.main .list li .img {
width: 164px !important;
height: 164px !important ;
padding: 0 10px;
}
.li_img{
height: 164px;
}
.text{
margin-top: 15px;
margin-bottom: 2px;
padding: 0 10px;
font-size: 14px;
}
.bf{
padding: 0 10px;
color: #999;
font-size: 14px;
}
</style>
</head>
<body>
<div class="main">
<div class="center">
<div class="title">
<div class="h2">歌单推荐</div>
</div>
<ul class="classify">
<li><a class="T" 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>
<ul class="list">
<li>
<div class="li_img"><img class="img" src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1" alt=""></div>
<div class="text">致失恋|想你会流泪</div>
<div class="bf">播放量:37525.8万</div>
</li>
<li>
<div class="li_img"><img class="img" src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1" alt=""></div>
<div class="text">致失恋|想你会流泪回答户外活动那大的那就拿出</div>
<div class="bf">播放量:37525.8万</div>
</li>
<li>
<div class="li_img"><img class="img" src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1" alt=""></div>
<div class="text">致失恋|想你会流泪</div>
<div class="bf">播放量:37525.8万</div>
</li>
<li>
<div class="li_img"><img class="img" src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1" alt=""></div>
<div class="text">致失恋|想你会流泪</div>
<div class="bf">播放量:37525.8万</div>
</li>
<li>
<div class="li_img"><img class="img" src="https://qpic.y.qq.com/music_cover/kKO9Dn5MeibqAxBfywKqTa5OKF21gEsPwp79aGbUibHDpGA4RLibERGibA/300?n=1" alt=""></div>
<div class="text">致失恋|想你会流泪</div>
<div class="bf">播放量:37525.8万</div>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> wosh</title>
</head>
<body>
</body>
<script>
//console
//console.log("anlkjncjscn")
//console.log(document)
//document.title="清风"
//console.log("window")
//window.alert("欢迎欢迎")
//alert("123")
// window.alert("爱你")
// console.log(document)
//var money = 10
//money>10?console.log("打游戏"):console.log("睡觉")
//var $dhfkcm = "缪虎"
//console.log ($dhfkcm)
//var a="无敌", A="DIJIA"
//a += "sui"
//console.log(a)
//var age=56
//if (age<60) {
// cons le.log("成绩不合格")
//} else if ( age>=60&&age<=70){
// console.log("一般")
//}else if(age>70){
// console.log("普通")
//}
//var arr = ["刘兵", 18, ["骑车", "编程"]]
//for (var i = 0; i<arr.length; i++) {
// console.log(arr[i]);
//}
// do {
//} while (condition);
var a = 10
do {
console.log(a);
} while (a <= 10);
</script>
</html>

View File

@@ -0,0 +1,70 @@
class ajax {
constructor() { // 类的参数初始化
this.baseUrl = "http://127.0.0.1:8090/api";
this.xhr = new XMLHttpRequest();
}
/**
*
* @param {*} params
* {
* url: 'http://127.0.0.1:3000/api/index/threeMeals',
* data: {
* page: 1,
* id: 1
* },
* success: function() {}
* }
*/
get(params) {
// 判断你传的参数里面是否有 data,没有的话就报错提示你
if (params.hasOwnProperty("data")) {
var str = ""
// 将 object 类型的 data 转为为 ?key=value&key=value
for (const key in params.data) {
str += `&${key}=${params.data[key]}`
}
str = str.replace("&", "?")
// 设置请求地址
this.xhr.open("GET", `${this.baseUrl}${params.url}${str}`)
//
this.xhr.send();
// 状态监听
this.onreadystatechange(params.success)
} else {
throw new Error("data参数必传")
}
}
onreadystatechange(callback) {
// this 指向
// 如何解决 this 指向
// 提前保存this
// 箭头函数 es6 es5
// bind
// var self = this;
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
callback(JSON.parse(this.xhr.response))
} else {
alert("网络请求错误")
}
}
}
}
}
var http = new ajax();

View File

@@ -0,0 +1,13 @@
<!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 src="./ajax.js"></script>
</html>

View File

@@ -0,0 +1,27 @@
<!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>
// for (var i = 0; i<arr.length; i++) {
// console.log(arr[i]);
// }
//var i = 0;
// while (i<arr.length) {
// console.log(arr[i]);
// i++
// }
</script>
</html>

View File

@@ -0,0 +1,167 @@
<!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>tabs</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
display: flex;
}
ul.title{
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content{
display: block !important;
}
.active_title{
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title">
<li class="active_title">首页</li>
<li>社会</li>
<li>财经</li>
<li>体育</li>
</ul>
<ul class="tabs_content">
<li class="active_content">首页 的内容</li>
<li>社会 的内容</li>
<li>财经 的内容</li>
<li>体育 的内容</li>
</ul>
</body>
<script >
var titleLi = _(".tabs_title li")
var contentLi = _(".tabs_content li")
// console.log(titleLi);
titleLi.forEach((v,i) => {
v.onclick = () => {
//所有
titleLi.forEach((j,index) => {
j.classList.remove("active_title")
contentLi[index].classList.remove("active_content")
});
//单个
v.classList.add("active_title");
contentLi[i].classList.add("active_content");
}
})
function _(ClassName){
return document.querySelectorAll(ClassName)
}
var index = 0;
var tabsData =[
{
id: 1,
title: '首页',
page: 1,
content: [
{ text: '首页的内容1' },
{ text: '首页的内容2' },
{ text: '首页的内容3' },
]
},
{
id: 2,
title: '社会',
page: 1,
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' }
]
},
{
id: 3,
title: '财经',
page: 1,
content: [
{ text: '财经的内容1' },
{ text: '财经的内容2' },
{ text: '财经的内容3' },
{ text: '财经的内容4' },
]
},
];
function renderTitle(){
tabsData.forEach((v,i) =>{
$(".tabs_title").innerHTML += `<li class="${i == 0 ? 'active_title' : ''}">${v.title}</li>`;
$(".tabs_content").innerHTML += `<li class ="${i ==0 ? 'active_content' : ''}"></li>`;
}
}
</script>
</html>

View File

@@ -0,0 +1,126 @@
<!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>tabs2</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
}
.tabs_title {
height: 45px;
align-items: center;
}
.tabs_title li {
margin: 0 10px;
}
.tabs_content li {
display: none;
}
.active_content {
display: block !important;
}
.active_title {
color: red;
}
</style>
</head>
<body>
<ul class="tabs_title"></ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var tabsData = [
{
id:1,
title:'首页',
page:1,
content:[
{ text: '首页的内容1'},
{ text: '首页的内容2'},
{ text: '首页的内容3'},
]
},
{
id: 2,
title: '社会',
page: 1,
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' }
]
},
{
id: 3,
title: '财经',
page: 1,
content: [
{ text: '财经的内容1' },
{ text: '财经的内容2' },
{ text: '财经的内容3' },
{ text: '财经的内容4' },
]
},
];
function renderTitle(){
tabsData.forEach((v,i) => {
$("tabs_title") .innerHTML += `<li class="${i ==0 ? active_title:''}">${v.title}</li>`;
$("tabs_content") .innerHTML += `<li class="${i ==0 ? active_content:''}"></li>`;
})
}
_("tabs_title li ").forEach((v,i) => {
v.onclick = () => {
index = i;
_(".tabs_title li").forEach((j,index) => {
j.classList.remove("active_title")
_(".tabs_content li ") [index].classList.remove("active_content");
});
v.classList.add("active_title");
_(".tabs_content li")[i].classList.add("tabs_title");
renderContent();
}
})
function renderContent() {
_(".tabs_content li") [index].innerHTML =""
tabsData[index].content .forEach(v => {
_(".tabs_content li") [index].innerHTML +=`<p>${v.text}</p>`
})
}
function _(className) {
return document.querySelectorAll(className)
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
font-size: 0px;
}

View File

@@ -0,0 +1,165 @@
.pa {
padding-left: 0.25rem;
padding-right: 0.24rem;
}
.header{
height: 1rem;
background-color: rgb(0 0 0 / 70%);
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100%;
padding-left: 0.24rem;
padding-right: 0.4rem;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 999;
}
.header .zai{
height: 0.65rem;
}
.header .open{
width: 1.44rem;
height: 0.52rem;
background-color: #d0302c;
border-radius: 0.08rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.24rem;
color: #ffffff;
}
.content {
margin-top: 1rem;
}
.content .qw{
height: 4.22rem;
}
.content .news{
padding-top: 0.59rem;
padding-bottom: 0.53rem;
position: relative;
}
.content .news ::after{
content: "";
width: 100%;
height: 0.5rem;
background:#e5e5e5 ;
transform: scaleY(0.5);
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
}
.content .news .summary{
font-size: 0.36rem;
color: #333333;
margin-bottom: 0.3rem;}
.content .news .time{
font-size: 0.23rem;
color: #999999;
margin-bottom: 0.3rem;
}
.content .news .btn{
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.content .btn .main_left{
display: flex;
align-items: center;
}
.content .main_left .shoucang{
display: flex;
align-items: center;
margin-right: 0.6rem;
}
.content .main_left .shoucang .collect{
width: 0.28rem;
height: 0.28rem;
}
.content .main_left .shoucang span{
font-size: 0.24rem;
color: #999999;
margin-left: 0.08rem;
}
.content .main_left .zan{}
.content .main_left .zan .good{
width: 0.26rem;
height: 0.27rem;
}
.content .main_left .zan span{
font-size: 0.24rem;
color: #999999;
margin-left: 0.08rem;
}
.content .main_right {}
.content .main_right .zk{}
.content .main_right .zk span{
font-size: 0.24rem;
color: #999999;
margin-left: 0.08rem;
}
.content .main_right .zk .down{
width: 0.17rem;
height: 0.1rem;
margin-left: 0.11rem;
}
.recommend{}
.recommend .recommend_tab{
height: 1rem;
background-color: #ffffff;
font-size: 0.32rem;
color: #333333;
display: flex;
align-items: center;
}
.recommend ul{
display: flex;
overflow-x: scroll;
}
.recommend ul li{
margin-right: 0.1rem;
flex-shrink: 0;
width: 2.74rem;
}
.recommend ul li .top{
width: 2.74rem;
height: 1.56rem;
position: relative;
margin-bottom: 0.24rem;
}
.recommend ul li .top img{
width: 100%;
height: 100%;
}
.recommend ul li .top span{
font-size: 0.22rem;
color: #ffffff;
position: absolute;
right: 0.14rem;
bottom: 0.13rem;
}
.recommend ul li .text{
font-size: 0.28rem;
color: #333333;
margin-bottom: 0.39rem;
}
.active .text {
color: #d0302c;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,89 @@
<!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="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img class="zai" src="./img/logo.png" alt="">
<div class="open"> 打开
</div>
</div>
<div class="content">
<img class="qw" src="./img/video.png" alt="">
<div class="news pa">
<div class="summary">香港24小时 | 8月25日发生了什么?暴力局
面再次升级</div>
<div class="time">2019-04-30 10:45</div>
<div class="btn">
<div class="main_left">
<div class="shoucang">
<img class="collect" src="./img/love.png" alt="">
<span>收藏</span>
</div>
<div class="zan">
<img class="good" src="" alt="">
<span>12</span>
</div>
</div>
<div class="main_right">
<div class="zk">
<span>简介</span>
<img class="down" src="./img/zk.png" alt="">
</div>
</div>
</div>
</div>
<div class="recommend">
<div class="recommend_tab">相关推荐</div>
<ul class="pa">
<li class="active">
<div class="top">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天
给海岛,我的9大家覅的v你问呢v那位女天8夜</div>
</li>
<li>
<div class="top">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天
给海岛,我的9天8夜</div>
</li>
<li>
<div class="top">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天
给海岛,我的9天8夜</div>
</li>
<li>
<div class="top">
<img src="./img/video.png" alt="">
<span>03:07</span>
</div>
<div class="text">一生中总要有个夏天
给海岛,我的9天8夜</div>
</li>
</ul>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
height: 70px;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
ul li {
flex-grow: inherit;
}
</style>
</head>
<body>
<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>
</body>
</html>

View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
font-size: 0px;
}

View File

@@ -0,0 +1,39 @@
body{
display: flex;
flex-direction: column;
height: 100vh;
}
.header{}
.content{
height:100%;
flex: 1;
}
.footer{
height: 1rem;
background-color: #000000;
display: flex;
align-items: center;
justify-content: space-around;
}
.footer li{
font-size: 0.24rem;
color: #ffffff;
position: relative;
}
.footer .active{
font-size: 0.3rem;
}
.footer .active ::after{
content: "";
width:0.51rem;
height: 0.03rem;
position: absolute;
background-color: #ffffff;
border-radius: 0.015rem;
left: 50%;
transform: translateX(-50%);
bottom: -0.24rem;
}

View File

@@ -0,0 +1,90 @@
<!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="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/scode.png" alt="">
<ul>
<li class="active">推荐</li>
<li>关注</li>
<li>直播</li>
</ul>
<img src="./img/search.png" alt="">
</div>
</div>
<div class="content">
<div class="shop">
<div class="shop_name">
<img src="./img/shop.png" alt="">
<span>美林美妆合肥店&nbsp;&nbsp;&nbsp;>7KM</span>
</div>
<div class="shop_goods">
<img class="shop_goods_img" src="./img/item.png" alt="">
<div class="shop_goods_text">
<div class="goods_title">夏季网纱半身裙中长款纱……</div>
<div class="goods_price">
<span class="price">¥68.00</span>
<span class="goods_select">
<span>精选</span>
</span>
</div>
<div class="goods_nums">已卖1020</div>
</div>
<img class="shop_goods_car" src="./img/car.png" alt="">
</div>
<div class="shop_music">
<img src="./img/music.png" alt="">
<span>你像花儿一样美(DJ)版</span>
</div>
</div>
<div class="user">
<div class="user_avter">
<img class="user_it" src="./img/item.png" alt="">
<img class="add" src="./img/add.png" alt="">
</div>
<ul class="list">
<li>
<img src="./img/like.png" alt="">
<p>71.1W</p>
</li>
<li>
<img src="./img/share.png" alt="">
<p>分享</p>
</li>
<li>
<img src="./img/comment.png" alt="">
<p>评论</p>
</li>
<li>
<img src="./img/dz.png" alt="">
<p>购物袋</p>
</li>
</ul>
</div>
</div>
<ul class="footer">
<li class="active">首页</li>
<li>好友</li>
<li>购物车</li>
<li>首圈子</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

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>
<select name="" id="">
<option value="">请选择浏览器</option>
<option value="">百度</option>
<option value="">谷歌</option>
<option value="">360</option>
</select>
<input type="text" placeholder="关键字">
<button>登录</button>
</body>
<script> var button = document.querySelector("button");//获取到body里面的button(按钮)
searchKeyWord=document.querySelector("input")
select =document.querySelector("select")
button.onclick=function (){
console.log(select.searchKeyWord[0].value);
// open(`https://cn.bing.com/search?q=${searchKeyWord.value}`)
}
</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>
*{
margin: 0%;
padding: 0%;
list-style: none;
text-decoration: none;
}
.menu{
height: 40px;
background: #f6f6f6;
}
.menu li{
display: inline-block;
line-height: 40px;
margin-right: 20px;
}
.center {
width: 1260px;
margin: 0 auto;
}
.menu li a {
color: #f6f6f6;
font-size: 14.4px;
}
.menu li a :hover{
color: #f6f6f6;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="">首页</a>
</li>
<li><a href="">HTML</a>
</li>
<li><a href="">css</a>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,66 @@
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 490px;
height: 450px;
border: 1px solid #d3d3d3;
}
.main img {
width: 490px;
height: 225px;
}
.main h1 {
text-align: center;
}
.main p {
text-align: center;
}
.main .login {
width: 350px;
height: 36px;
background: blue;
font-size: 16px;
text-align: center;
border: 1px solid #d3d3d3;
margin: 0 auto;
line-height: 32px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.zhihu.com/heifetz/assets/loginBackgroundImg.2c81e205.png" alt="">
<h1>登录一下</h1>
<p>更多精彩内容等你发现</p>
<div class="login">登录</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,164 @@
<!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="...">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.left{
float: left;
}
.right{
float: right;
}
.overflow{
overflow: hidden;
}
.mian{
width: 280px;
height: 442px;
padding: 0 10px;
box-sizing: border-box;
}
.main_title{
margin-bottom: 15px;
height: 40px;
line-height: 40px;
}
.main_title p{
font-size: 14px;
color: #969696;
}
.mian_title .mian_title_r i{
font-size: 13px;
}
.mian_title .mian_title_r span {
font-size: 14px;
color: #969696;
}
.mian_list li{
margin-bottom: 15px;
}
.mian_list .mian_item_left img {
width: 48px;
height: 48px;
margin-right: 10px;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="mian">
<div class="mian_title overflow">
<p class="left">推荐作者</p>
<div class="mian_title_r right">
<i class="iconfont icon-shuaxin"></i>
<span>换一批</span>
</div>
</div>
<ul class="mian_list">
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
<li class="overflow">
<div class="mian_item_left left">
<img class="left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="item_text left">
<div class="text_title">哈哈哈哈</div>
<div class="text_desc">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right right">
<i class="iconfont icon-jiahao1"></i>
<span>关注</span>
</div>
</li>
</ul>
<div class="all">
<span>查看全部</span>
<i class="iconfont icon-jinrujiantouxiao"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.main .main_title {
width: 375px;
height: 51px;
font-size: 16px;
background-color: #ffffff;
}
.mian ul {
padding: 14px 12px;
}
.main ul li {
display: flex;
margin-bottom: 35px;
}
.main ul .img {
width: 35px;
height: 36px;
margin-right: 10px;
border-radius: 100%;
}
.main ul .all .biaoti {}
.main ul .all .biaoti .biaoti_1 {
display: flex;
justify-content: space-between;
align-items: center;
}
.main ul .all .biaoti .biaoti_1 .name {
font-size: 14px;
margin-bottom: 5px;
color: #333333;
}
.main ul .all .biaoti .biaoti_1 .zan {
display: flex;
align-items: center;
}
.main ul .all .biaoti .biaoti_1 .zan img {
width: 13px;
height: 14px;
margin-right: 5px;
}
.main ul .all .biaoti .biaoti_1 .zan span {
font-size: 12px;
color: #999999;
}
.main ul .all .biaoti .time {
font-size: 10px;
color: #999999;
margin-bottom: 19px;
}
.main ul .all .wenben {
font-size: 14px;
color: #333333;
}
</style>
<body>
<div class="main">
<div class="main_title">全部评论</div>
<ul>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="all">
<div class="biaoti">
<div class="biaoti_1">
<div class="name">呆小瓜</div>
<div class="zan">
<img src="" alt="">
<span>15</span>
</div>
</div>
<div class="time">刚刚</div>
</div>
<div class="wenben">限价房从开扣税的目标我日哦部门</div>
</div>
</li>
</ul>
</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>搜索建议</title>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul></ul>
</body>
<script>
var result = [];
var list = [
'明天天气不好', '天气很好', '我的心情很好', '我不想学编程', '编程是我快乐',
'明天我想学习', '明天我们出去玩'
];
var mes =document.querySelector("input"),
ul = document.querySelector("ul");
mes.oninput = function(){
result =[]
if( mes.value.length !=0){
for(var i = 0;i<list.length;i++){
if(list[i].includes(mes.value)){
var spanText=`<span style="color:red">${mes.value}</span>`
var pushText=list[i].replace(mes.value,spanText)
result.push(pushText)
}
}
renderHTML()
}else{
ul.innerHTML =""
}
}
function renderHTML(){
var html =""
console.log(result);
result.forEach(function (v,i){
html +=`<li>${v}</>`
})
ul.innerHTML =html
}
</script>
</html>

View 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>
</head>
<style>
* {
margin: 0;
padding: 0;
border: none;
outline: none;}
.main{
width: 400px;
height:300px;
border: 1px solid #000;
position: relative;
}
.main textarea {
width: 100%;
height: 100%;
resize: none;
}
</style>
<body>
<div class="main">
<textarea name="" id="" ></textarea>
<span>100/100</span>
</div>
</body>
<script>
var message=document.querySelector("textarea")
tips =document.querySelector(".main.span")
total=100
message. oninput =function(){
var sy = total - message.value.length;
if(sy<=0){
tips.innerText = "已达限制"
tips.classList.replace("hui", "red")
message.value = message.value.substring(0, 100)
}else{
tips.innerText = `100/${sy}`
tips.classList.replace("red", "hui")
}
}
</script>
</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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.main {
width: 490px;
height: 450px;
border-radius: 4px;
border: 1px solid #000;
text-align: center;
}
.main img{
width: 100%;
}
.main h1{
margin-top: 32px;
margin-bottom: 4px;
font-size: 34px;
}
.mian p{
margin-top: 4px;
margin-bottom: 36px;
font-size: 22px;
color: #444;
}
.mian .login{
width: 350px;
height: 36px;
background-color: #06f;
margin: 0 auto;
line-height: 36px;
color: #fff;
border-radius: 3px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="head">
<div class="center">
<div class="main">
<img class="logo" src="https://static.zhihu.com/heifetz/assets/loginBackgroundImg.2c81e205.png" alt="">
<h1>登录一下</h1>
<p>更多精彩内容等你发现</p>
<div class="login">登录</div>
</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@@ -0,0 +1,184 @@
<!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;
}
body {
height: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
width: 120px;
}
.alert {
position: inherit;
width: 100%;
height: 100%;
background: #0000008f;
display: flex;
align-items: center;
justify-content: center;
z-index: 8;
}
.alert .alert_warp {
width: 32%;
background: #fff;
height: 300px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.alert_warp .alert_title {
display: flex;
justify-content: space-between;
height: 45px;
align-items: center;
border-bottom: 1px solid #e6e6e6;
}
.alert_body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="alert hidden">
<div class="alert_warp">
<div class="alert_title">
<span>恭喜中奖</span>
<span class="close">x</span>
</div>
<div class="alert_body">
恭喜抽中9折优惠券
</div>
</div>
</div>
</body>
<script>
//随机生成图片+图片的移动
//点击图片 图片点击事件 图片暂停 关闭图片弹窗 和重新运动
var clientWidth = $("body").clientWeight,
clientHeight = $("body").clientHeight,
alert = $(".alert"),
text = $(".alert_body"),
close = $(".alert_title .close"),
clickImg = null, // 保存你点击的图片的虚拟dom对象
body = $("body"),
createdId = null
//生成图片 图片运动
//随机生成图片
function createdHB() {
var x = parseInt(Math.randmo() * (clientwidth - 80))
var img = document.createElement("img");
img.src = "./p.png"
img.style = `
left: ${x}px;
top :-105px;
`
//红包点击事件
img.onclick = function () {
clickImg = img;
probability()
alert.classList.remove("hidden")
clearInterval(craetedId)
allImgAction(2)
}
body.appendchild(img)
motion(img)
}
//设置定时器让红包运动起来
function mation(el) {
el.num = setInterval(function () {
var topSet = parseInt(el.style.top) + 1
el.style.top = `${topSet}px`
if (topSet > clientHeight) {
$(".body").removechild(el)
clearInterval(el.num)
}
}, 6)
}
//关闭弹窗
close.onclick = function () {
$("body").removechild(clickImg)
alert.classList.add("hidden")
allImgAction(1)
//开始创建红包以及所需要的时间
autoCreated()
}
//计算概率
function probability() {
var prob = Math.random();
if (prob <= 0.2) {
text.innerText = `${prob}恭喜您中了1折优惠卷`
} else if (0.2 < prob && prob <= 0.8) {
text.innerText = `${prob}恭喜您中了7 折优惠卷`
} else if (prob > 0.8) {
text.innerText = `${prob}恭喜您中了3折优惠卷`
}
}
function allImgAction(type) {
var allImg = document.querySelectorAll("img");
allImg.forEach(function (v) {
type == 1 ? motion(v) : clearInterval(v.num)
})
}
function autoCreated() {
createdId = setInterval(function () {
createdHb()
}, 1000)
}
autoCreated()
function $(className) {
return document.querySelector(className)
}
</script>
</html>

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>简述</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div class="main">
<div class="mian_title">
<p>推荐作者</p>
<div class="mian_title_right">
<img src="" alt="">
<span>换一批</span>
</div>
</div>
<ul class="mian_list">
<li>
<div class="main_item_left">
<img src="" alt="">
<div class="main_text">
<div class="1"><a href="">闫泽华</a></div>
<div class="2">写了262.4k字 · 4.8k喜欢</div>
</div>
</div>
<div class="mian_item_right">
<img src="" alt="">
<span>关注</span>
</div>
</li>
</ul>
<div class="list">
<span>查看全部</span>
<img src="" alt="">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
font-size: 0px;
}

View File

@@ -0,0 +1,107 @@
.header {
padding-top: 1rem;
border: 1px solid #e5e5e5;
}
.header ul {
height: 0.59rem;
display: flex;
align-items: center;
justify-content: space-between;
top: 0;
left: 0;
z-index: 999;
position: relative;
}
.header ul li {
font-size: 0.3rem;
color: #333333;
}
.header ul :nth-child(1){
padding-left: 0.57rem;
}
.header ul :nth-child(3){
padding-right: 0.63rem;
}
.header ul ::after{
content: "";
width: 0.5rem;
height: 0.1em;rem;
position: absolute;
background:#b80e0e ;
transform: scaleY(0.5);
display: inline-block;
left: 80%;
bottom: 0;
}
.pa{
padding-left:0.21rem ;
padding-right: 0.23rem;
}
.content{
margin-top: 1rem;
}
.content .title{
}
.content .title .tupian{
height: 3.9rem;
position: relative;
}
.content .title .tupian .zhibo{
width: 1.14rem;
height: 0.36rem;
background-color: #ff5f13;
border-radius: 0.04rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.14rem;
right: 0.14rem;
}
.content .title .tupian .zhibo span{
font-size: 0.24rem;
color: #ffffff;
}
.content .title .tupian img{
width: 7.02rem;
height: 3.9rem;
}
.content .title .tupian .number {
font-size: 0.22rem;
color: #ffffff;
position: absolute;
right: 0.12rem;
bottom: 0.13rem;
}
.content .title .title_text{
font-size: 0.28rem;
color: #333333;
margin-top: 0.21rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 382 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

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>
<script src="./rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<ul>
<li >包河radio</li>
<li>包河TV</li>
<li >融创媒体</li>
</ul>
</div>
<ul class="content pa">
<li class="title">
<div class="tupian">
<div class="zhibo">
<span>正在直播</span>
</div>
<img src="./img/-slice-.png" alt="">
<div class="number">
342252人在看
</div>
</div>
<div class="title_text">
"文字鬼才"马伯庸新书发布座谈会(标题一行就一行)
</div>
</li>
</ul>
<div class="footer"></div>
</body>S
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
font-size: 0px;
}

View File

@@ -0,0 +1,47 @@
.header{
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 0.68rem;
margin-bottom: 0.6rem;
}
.header img{
width: 0.26rem;
height: 0.27rem;
}
.header span{
font-size: 0.36rem;
color: #000000;
}
.header .header_right{
width: 1.24rem;
height: 0.63rem;
background-color: #5697f4;
border-radius: 0.05rem;
display: flex;
align-items: center;
justify-content: center;
}
.header .header_right span{
font-size: 0.26rem;
color: #ffffff;
}
.content{
display: flex;
align-items: center;
justify-content: center;
}
.content textarea{
font-size: 0.3rem;
color: #c2c2c2;
background-color: antiquewhite;
padding-left: 0.4rem;
padding-right: 0.65rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

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>
<script src="./rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/back.png" alt="">
<span>设置个人介绍</span>
<div class="header_right">
<span>完成</span>
</div>
</div>
<div class="content">
<textarea name="" id="" cols="40" rows="10" placeholder="填写个人介绍更容易获得关注,点击此处添加"></textarea>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,33 @@
/* 清除浏览器默认的css样式 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
button,
textarea {
outline: none;
border: none;
}
body {
font-size: 0px;
}

View File

@@ -0,0 +1,346 @@
.header{
height: 0.88rem;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100%;
padding-left: 0.3rem;
top: 0;
left: 0;
z-index: 999;
}
.header img{
width: 0.2rem;
height: 0.33rem;
}
.header span{
font-size: 0.34rem;
color: #333333;
}
.content{
margin-top: 1rem;
background-color: #ffffff;
}
.content .top{
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #efefef;
}
.content .top .top_left{
margin-left: 0.3rem;
margin-right: 0.29rem;
}
.content .top .top_left .name{
display: flex;
align-items: center;
justify-content: flex-start;
}
.content .top .top_left .name span{
font-size: 0.3rem;
color: #333333;
margin-right: 0.52rem;
}
.content .top .top_left .name p{
font-size: 0.3rem;
color: #333333;
}
.content .top .top_left .address{
font-size: 0.24rem;
color: #333333;
}
.content .top .top_right_img{
width: 0.14rem;
height: 0.26rem;
padding-right: 0.3rem;
}
.content .middle{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.26rem;
padding-right: 0.43rem;
border: 1px solid #efefef;
}
.content .middle .middle_left{
font-size: 0.28rem;
color: #333333;
padding-top: 0.31rem;
padding-bottom: 0.26rem;
}
.content .middle .middle_right{
display: flex;
align-items: center;
justify-content: center;
}
.content .middle .middle_right span{
font-size: 0.28rem;
color: #333333;
padding-top: 0.31rem;
padding-bottom: 0.26rem;
}
.content .middle .middle_right img{
width: 0.31rem;
height: 0.06rem;
}
.content ul{}
.content ul li{}
.content ul li .store{
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 0.16rem;
border: 1px solid #efefef;
}
.content ul li .store img{
width: 0.24rem;
height: 0.22rem;
margin-left: 0.24rem;
margin-right: 0.06rem;
padding-top: 0.2rem;
padding-bottom: 0.17rem;
}
.content ul li .store span{
font-size: 0.26rem;
color: #333333;
margin-right: 0.16rem;
padding-top: 0.2rem;
padding-bottom: 0.17rem;
}
.content ul li .store img{
width: 0.1rem;
height: 0.19rem;
padding-top: 0.2rem;
padding-bottom: 0.17rem;
}
.content ul li .gw{
display: flex;
align-items: center;
padding-top: 0.2rem;
border: 1px solid #efefef;
}
.content ul li .gw .gw_img{
width: 2rem;
height: 1.65rem;
margin-left: 0.24rem;
margin-right: 0.36rem;
margin-bottom: 0.28rem;
}
.content ul li .gw .gw_text{
}
.content ul li .gw .gw_text .gw_name{
font-size: 0.28rem;
color: #333333;
}
.content ul li .gw .gw_text .gw_color{
display: flex;
margin-top: 0.14rem;
}
.content ul li .gw_color .black{
font-size: 0.2rem;
color: #999999;
}
.content ul li .gw_color .chima{
font-size: 0.2rem;
color: #999999;
}
.content ul li .gw .gw_text .gw_pr{
margin-top: 0.18rem;
}
.content ul li .gw .gw_text .gw_pr .pr{
display: flex;
align-items: center;
justify-content: space-between;
}
.content ul li .gw .gw_text .gw_pr .pr span {
font-size: 0.2rem;
color: #ea4e3d;
margin-right: 2.82rem;
margin-bottom: 0.49rem;
}
.content ul li .gw .gw_text .gw_pr .pr p {
font-size: 0.2rem;
color: #999999;
margin-bottom: 0.47rem;
}
.content ul li .beizhu{
border:1px solid #efefef;
display: flex;
align-items: center;
}
.content ul li .beizhu span{
font-size: 0.3rem;
color: #333333;
padding-left: 0.3rem;
}
.content ul li .beizhu .as{
font-size: 0.26rem;
padding-left: 0.31rem;
color: #aaaaaa;
}
.content ul li .zhekou{
padding-left: 0.3rem;
padding-right: 0.18rem;
border:1px solid #efefef;
}
.content ul li .zhekou .youhui{}
.content ul li .zhekou .youhui .diyong{
display: flex;
align-items: center;
justify-content: space-between;
}
.content ul li .zhekou .youhui .diyong span{
font-size: 0.24rem;
color: #333333;
}
.content ul li .zhekou .youhui .diyong p{
font-size: 0.24rem;
color: #f09c48;
}
.content ul li .zhekou .kuaidi{}
.content ul li .zhekou .kuaidi .feiyong{
display: flex;
align-items: center;
justify-content: space-between;
}
.content ul li .zhekou .kuaidi .feiyong span{
font-size: 0.24rem;
color: #333333;
}
.content ul li .zhekou .kuaidi .feiyong p{
font-size: 0.24rem;
color: #333333;
}
.content ul li .jiage{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.3rem;
padding-right: 0.18rem;
border: 1px solid #efefef;
}
.content ul li .jiage_left{
font-size: 0.3rem;
color: #333333;
}
.content ul li .jiage_right{
font-size: 0.34rem;
color: #ea4e3d;
}
.footer{
display: flex;
align-items: center;
justify-content: flex-end;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
margin-top: 0.22rem;
background-color: #ffffff;
z-index: 999;
}
.footer .footer_text{
display: flex;
}
.footer .footer_text span {
font-size: 0.26rem;
color: #c6c6c6;
}
.footer .footer_text p{
font-size: 0.26rem;
color: #999999;
}
.footer .jiesuan{
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
display: flex;
align-items: center;
justify-content: center;
}
.footer .jiesuan span{
font-size: 0.28rem;
color: #ffffff;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

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="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/back.png" alt="">
<span>填写订单</span>
<div class=""></div>
</div>
<div class="content">
<div class="top">
<div class="top_left">
<div class="name">
<span>张晓明</span>
<p>186****0019</p>
</div>
<div class="address">上海市黄浦区中山南路128号千古美城1楼1210室</div>
</div>
<img class="top_right_img" src="./img/you.png" alt="">
</div>
<div class="middle">
<div class="middle_left">选择支付方式</div>
<div class="middle_right">
<span>在线支付</span>
<img src="./img/dian.png" alt="">
</div>
</div>
<ul >
<li>
<div class="store">
<img src="./img/wuzi.png" alt="">
<span>路易斯女装旗舰店</span>
<img src="./img/you.png" alt="">
</div>
<div class="gw">
<img class="gw_img" src="./img/tupian.png" alt="">
<div class="gw_text">
<div class="gw_name">真丝连衣裙2019春夏新款
<br> 杭州大牌气质修……</div>
<div class="gw_color">
<div class="black">颜色:黑白</div>
<div class="chima">尺码:L</div>
</div>
<div class="gw_pr">
<div class="pr">
<span>¥160.00</span>
<p>X1</p>
</div>
</div>
</div>
</div>
<div class="beizhu">
<span>订单备注</span>
<textarea class="as" name="" id="" cols="40" rows="1" placeholder="有什么想对商家留言的可以在这里说"></textarea>
</div>
<div class="zhekou">
<div class="youhui">
<div class="diyong">
<span>优惠抵用</span>
<p>-¥5</p>
</div>
<div class="kuaidi">
<div class="feiyong">
<span>快递费用</span>
<p>免费包邮</p>
</div>
</div>
</div>
</div>
<div class="jiage">
<div class="jiage_left">商品金额</div>
<div class="jiage_right">¥155.00</div>
</div>
</li>
<li>
<div class="store">
<img src="./img/wuzi.png" alt="">
<span>路易斯女装旗舰店</span>
<img src="./img/you.png" alt="">
</div>
<div class="gw">
<img class="gw_img" src="./img/tupian.png" alt="">
<div class="gw_text">
<div class="gw_name">真丝连衣裙2019春夏新款
<br> 杭州大牌气质修……</div>
<div class="gw_color">
<div class="black">颜色:黑白</div>
<div class="chima">尺码:L</div>
</div>
<div class="gw_pr">
<div class="pr">
<span>¥160.00</span>
<p>X1</p>
</div>
</div>
</div>
</div>
<div class="beizhu">订单备注</div>
<div class="zhekou">
<div class="youhui">
<div class="diyong">
<span>优惠抵用</span>
<p>-¥5</p>
</div>
<div class="kuaidi">
<div class="feiyong">
<span>快递费用</span>
<p>免费包邮</p>
</div>
</div>
</div>
</div>
<div class="jiage">
<div class="jiage_left">商品金额</div>
<div class="jiage_right">¥315.00</div>
</div>
</li>
</ul>
</div>
<div class="footer">
<div class="footer_text">
<span>共3件,合计:</span>
<p>¥ 5999.00</p>
</div>
<div class="jiesuan">
<span>结算(2)</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,12 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

View File

@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

View File

@@ -0,0 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

View File

@@ -0,0 +1,21 @@
# my-project
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

View File

@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

View File

@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

View File

@@ -0,0 +1,22 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

View File

@@ -0,0 +1,82 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

View File

@@ -0,0 +1,95 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

View File

@@ -0,0 +1,145 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

View File

@@ -0,0 +1,7 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

View File

@@ -0,0 +1,69 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

View File

@@ -0,0 +1,4 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,63 @@
{
"name": "my-project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "缪虎 <2286278705@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.26.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

View File

@@ -0,0 +1,16 @@
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>

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