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";
}