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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1,8 @@
body,ul,input,li,a{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="Http://at.alicdn.com/t/c/font_3888619_f4d3tx11tci.css">
<link rel="stylesheet" href="yinghang.css">
</head>
<body>
<div class="main">
<div class="center">
<div class="logo hidden">
<img class="left" src="./backws.png" alt="">
<ul>
<li>
<img src="./button.png" alt="">
<div class="logo_w">
<a href=""> 个人网上银行登录</a>
<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
</div>
</li>
</ul>
</div>
<ul class="banner">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,131 @@
.main {
width: 700px;
height: 100%;
}
.nav .logo {
width: 220px;
height: 150px;
margin-right: 15px;
}
.nav li {
margin-bottom: 15px;
}
.nav li .menu {
height: 26px;
margin-bottom: 10px;
font-size: 18px;
line-height: 26px;
}
.nav li .menu a {
height: 26px;
display: block;
color: #333;
overflow: hidden;
white-space: nowrap;
float: left;
}
.nav li .app {
float: right;
width: auto;
padding: 0 7px;
border: 1px solid #ff9d00;
border-radius: 11px;
height: 20px;
line-height: 20px;
font-size: 12px;
color: #ff9d00;
font-weight: bold;
background-color: #fff;
position: relative;
}
.nav li .app i {
background-image: url(./button.png);
background-size: 200px auto;
}
.nav li .app i {
float: left;
margin: 2px;
width: 16px;
height: 16px;
background: url(/images/index-sprites9.png) no-repeat -170px 0;
}
.word {
color: #666;
background-color: transparent;
font-size: 14px;
}
.follow {
margin-top: 25px;
height: 33px;
}
.follow span {
margin-right: 8px;
display: inline-block;
line-height: 33px;
}
.city {
font-size: 12px;
color: #666;
}
.user {
color: #ff9d00;
font-size: 12px;
}
.user img {
border-radius: 100%;
vertical-align: middle;
}
.nub {
font-size: 14px;
color: #999;
}
.ding {
color: #ff9d00;
font-size: 14px
}
.ding a {
margin-left: 8px;
}
.app:hover .drop{
display: block;
}
.app img{
position: absolute;
right: -5px;
top: 0;
padding-top: 21px;
width: 125px;
display: none;
}
/* .drop {
position: absolute;
right: -5px;
top: 0;
padding-top: 21px;
width: 125px;
display: none;
} */

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@@ -0,0 +1,17 @@
/* 公共样式的css代码 */
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.hidden {
overflow: hidden;
}
.reset {
line-height: 1;
}

View File

@@ -0,0 +1,84 @@
.main {
width: 100%;
height: 883.33px;
/* background-color: #fd8320; */
}
.main .center {
width: 1900px;
margin: 0 auto;
position: relative;
}
.head{
padding-bottom: 16px;
}
.head .title img {
height: 20px;
width: 20px;
}
.head .title span {
color: #fd8320;
font-weight: 600;
font-size: 12px;
vertical-align: text-top;
}
.head .desc {
font-weight: 500;
font-size: 20px;
height: 28px;
line-height: 28px;
/* overflow: hidden; */
}
.head .desc span {
font-weight: 600 !important;
}
.nav{
position: absolute;
bottom: 348px;
right: 240px;
}
.nav i{
font-size: 40px;
height: 40px;
float: right;
}
.content{
display: inline-block;
}
.content li {
float: left;
margin-right: 20px;
}
.content li{
position: relative;
}
.content img{
width: 319.43px;
height: 691.56px;
}
.content li:hover .copy{
display: none;
}
.follow{
position: absolute;
bottom: 33px;
right: 10px;
}
.follow .copy{
padding: 0 8px;
background: black;
border: 1px solid #FCDA7C;
color: #FCDA7C;
-webkit-border-radius: 4px;
border-radius: 4px;
font-weight: 400;
font-size: 12px;
display: block;
}

View File

@@ -0,0 +1,50 @@
.main {
width: 100%;
height: 380px;
background-image: url(https://v.icbc.com.cn/userfiles/adresources/794604423883382784.jpg);
}
.center {
width: 1000px;
margin: 0 auto;
height: 380px;
position: relative;
}
.main.center .logo img {
width: 293px;
height: 100%;
}
.logo ul {
padding: 39px;
transform: translatex(-26.5%);
}
.logo ul li .logo_w {
position: absolute;
transform: translate(321px, -38px);
}
.logo ul li .logo_w a,
i {
color: #fff;
font-size: 16px;
}
.banner {
position: absolute;
transform: translateX(160%);
bottom: 20px;
}
.banner li {
width: 50px;
height: 4px;
background: #cccccc no-repeat top right;
margin: 3px 7px;
float: left;
}

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./qiantu.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_luyms6vw3l.css">
</head>
<body>
<div class="main">
<div class="center">
<div class="head">
<div class="title">
<img src="https://static.qiantucdn.com/static/images/index/f-icon-118.png" alt="">
<span>正在热门</span>
</div>
<div class="desc">
<span>情人节</span>
| 浪漫告白季「情人节」营销素材集丨50000+ 作品
</div>
</div>
<ul class="content hidden">
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
<li>
<img src="https://preview.qiantucdn.com/auto_machine/20230118/98d216e7-e96d-4131-8939-1a489384816f.jpg!qt576_nowater"
alt="">
<div class="title_b">
情人节-地产刷屏
</div>
<div class="follow">
<span class="copy">@正版</span>
</div>
</li>
</ul>
<div class="nav">
<i class="iconfont icon-gengduo1"></i>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./mafengwo.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_wjqqzmgdo1.css">
</head>
<body>
<div class="main">
<ul class="nav hidden">
<li>
<img class="left logo"
src="https://note.mafengwo.net/img/27/f9/287d089cfff34f95d3138c3b1988f6b0.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90"
alt="">
<div class="right_1">
<div class="list">
<div class="menu">
<a href="">暴走十二时辰!澳门奔溃玩法</a>
<div class="app">
<i></i>
APP
<img class="drop"
src="https://b2-q.mafengwo.net/s12/M00/6E/DD/wKgED1uu232AMKEvAAAz-ljBM0k929.png"
alt="">
</div>
</div>
<div class="word">
澳门 没想到再遇 澳门 竟是如此短暂,短暂到没怎么停下步伐来歇息就已经跟 澳门 再次说再见了。 夜晚提早在预计的烟花拍摄点,然后坐在山道边,看着夜里灯火通明的通明的 澳门
,这大概就算...
</div>
</div>
<div class="follow">
<span class="city">
<i class="iconfont icon-zuobiao"></i>
<a href="">澳门</a>,by
</span>
<span class="user">
<img src="https://p1-q.mafengwo.net/s17/M00/07/A4/CoUBXl9-0SuAVvjCAACFL66Nud012.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
alt="">
haper1*4
</span>
<span class="nub">
<i class="iconfont icon-yanjing-zhengyan"></i>
1746/7
</span>
<span class="ding right">
115
<a href="">顶</a>
</span>
</div>
</div>
</li>
<li>
<img class="left logo"
src="https://note.mafengwo.net/img/27/f9/287d089cfff34f95d3138c3b1988f6b0.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90"
alt="">
<div class="right_1">
<div class="list">
<div class="menu">
<a href="">暴走十二时辰!澳门奔溃玩法</a>
<div class="app">
<i></i>
APP
</div>
</div>
<div class="word">
澳门 没想到再遇 澳门 竟是如此短暂,短暂到没怎么停下步伐来歇息就已经跟 澳门 再次说再见了。 夜晚提早在预计的烟花拍摄点,然后坐在山道边,看着夜里灯火通明的通明的 澳门
,这大概就算...
</div>
</div>
<div class="follow">
<span class="city">
<i class="iconfont icon-zuobiao"></i>
<a href="">澳门</a>,by
</span>
<span class="user">
<img src="https://p1-q.mafengwo.net/s17/M00/07/A4/CoUBXl9-0SuAVvjCAACFL66Nud012.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
alt="">
haper1*4
</span>
<span class="nub">
<i class="iconfont icon-yanjing-zhengyan"></i>
1746/7
</span>
<span class="ding right">
115
<a href="">顶</a>
</span>
</div>
</div>
</li>
<li>
<img class="left logo"
src="https://note.mafengwo.net/img/27/f9/287d089cfff34f95d3138c3b1988f6b0.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90"
alt="">
<div class="right_1">
<div class="list">
<div class="menu">
<a href="">暴走十二时辰!澳门奔溃玩法</a>
<div class="app">
<i></i>
APP
</div>
</div>
<div class="word">
澳门 没想到再遇 澳门 竟是如此短暂,短暂到没怎么停下步伐来歇息就已经跟 澳门 再次说再见了。 夜晚提早在预计的烟花拍摄点,然后坐在山道边,看着夜里灯火通明的通明的 澳门
,这大概就算...
</div>
</div>
<div class="follow">
<span class="city">
<i class="iconfont icon-zuobiao"></i>
<a href="">澳门</a>,by
</span>
<span class="user">
<img src="https://p1-q.mafengwo.net/s17/M00/07/A4/CoUBXl9-0SuAVvjCAACFL66Nud012.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
alt="">
haper1*4
</span>
<span class="nub">
<i class="iconfont icon-yanjing-zhengyan"></i>
1746/7
</span>
<span class="ding right">
115
<a href="">顶</a>
</span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,9 @@
/* 清除浏览器默认样式的css代码 */
body,ul,input,li,a,p{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
text-decoration: none;
}

View File

@@ -0,0 +1,225 @@
body{
background-color: #fbfcfd;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #37b2ff;
height: 1.57rem;
box-sizing: border-box;
padding: 0 0.3rem;
}
.header img{
width: 0.19rem;
height: 0.34rem;
}
.header .money{
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #ffffff;
}
.content .menu{
display: flex;
height: 1.59rem;
align-items: center;
padding: 0 0.24rem;
box-sizing: border-box;
background: #fff;
border-radius: 0.2rem 0.2rem 0rem 0rem;
position: relative;
bottom: 0.2rem;
/* margin-bottom: 0.18rem; */
}
.content .menu img{
width: 0.25rem;
height: 0.27rem;
margin-right: 0.15rem;
}
.content .menu p{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
line-height: 0.38rem;
letter-spacing: 0.005rem;
color: #333333;font-weight: 600;
}
.phone{
display: flex;
flex-direction: column;
padding: 0 0.24rem;
box-sizing: border-box;
background: #fff;
height: 1.15rem;
padding-top: 0.27rem;
}
.phone .top{
display: flex;
}
.phone .top img{
width: 0.27rem;
height: 0.31rem;
margin-right: 0.16rem;
}
.phone .top p{
font-family: PingFang-SC-Bold;
font-size: 0.26rem;
letter-spacing: 0.005rem;
color: #000000;
font-weight: 600;
}
.add{
font-family: PingFang-SC-Medium;
font-size: 0.22rem;
letter-spacing: 0.004rem;
color: #666666;
margin-left: 0.43rem;
margin-top: 0.1rem;
}
.logo{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.43rem;
box-sizing: border-box;
background-color: #fff;
margin-top: 0.16rem;
padding-bottom: 0.25rem;
/* border-bottom: 0.01rem solid #e9e3e3; */
}
.logo img{
width: 1.31rem;
height: 1.32rem;
}
.logo .red{
display: flex;
flex-direction: column;
margin-left: 0.24rem;
margin-right: 0.6rem;
align-items: baseline;
}
.logo .red p{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
}
.logo .red .red_b{
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #2b2b2b;
border-radius: 0.1rem;
border: solid 0.01rem #f5f5f5;
}
.logo .prince{
display: flex;
flex-direction: column;
align-items: end;
}
.logo .prince .prince_t{
font-family: AdobeHeitiStd-Regular;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
padding-right: 0.57rem;
}
.logo .prince .prince_m{
font-family: PingFang-SC-Regular;
font-size: 0.2rem;
letter-spacing: 0.004rem;
color: #aaaaaa;
padding-right: 0.59rem;
}
.logo .prince .prince_b{
font-family: PingFang-SC-Regular;
font-size: 0.2rem;
letter-spacing: 0.004rem;
color: #2b2b2b;
border-radius: 0.19rem;
border: solid 0.01rem #eeeeee;
margin-right: 0.54rem;
}
.desc {
background-color: #fff;
border-top: 0.01rem solid #e9e3e3;
}
.desc li {
display: flex;
justify-content: space-between;
padding-left: 0.4rem;
padding-right: 0.54rem;
margin-top: 0.19rem;
}
.desc li span {
font-family: PingFang-SC-Regular;
font-size: 0.24rem;
letter-spacing: 0.004rem;
color: #aaaaaa;
}
.desc li .one{
font-family: PingFang-SC-Regular;
font-size: 0.24rem;
letter-spacing: 0.004rem;
color: #0a0a0a;
font-weight: 600;
}
.desc li .two{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #ff7b41;
font-weight: 600;
}
.desc li:last-child{
background-color: #fbfcfd;
background-color: #fbfcfd;
height: 0.49rem;
line-height: 0.49rem;
margin-bottom: 0.19rem;
border-bottom: 0.01rem solid #e9e3e3;
}
.miss{
display: flex;
flex-direction: column;
height: 1.56rem;
justify-content: center;
box-sizing: border-box;
padding: 0 0.36rem;
position: relative;
background-color: #fff;
}
.miss .miss_t{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
font-weight: 600;
margin-left: 0.30rem;
padding: 0.22rem 0;
}
.miss .miss_b{
border-top: 0.01rem solid #e9e3e3;
font-family: PingFang-SC-Regular;
font-size: 0.24rem;
letter-spacing: 0.004rem;
color: #737373;
padding-top: 0.21rem;
}
.miss .miss_t::before{
position: absolute;
content: "";
width: 0.04rem;
height: 0.28rem;
background-color: #ff7b41;
left: .5rem;
top: 50%;
transform: translateY(-150%);
}

View File

@@ -0,0 +1,208 @@
body{
background-color: #f2f2f6;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
height: 0.9rem;
padding-left: 0.21rem;
padding-right: 0.3rem;
box-sizing: border-box;
background-color: #fff;
}
.header img{
width: 0.2rem;
height: 0.35rem;
}
.header .search{
display: flex;
position: relative;
}
.header .search img{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0.32rem;
height: 0.34rem;
left: 0.24rem;
/* background-color: #333333; */
}
.header .search input{
font-size: .26rem;
color: #808080;
width: 6.31rem;
height: 0.6rem;
background-color: #f2f2f2;
border-radius: 0.3rem;
padding-left: 0.74rem;
box-sizing: border-box;
}
.menu{
display: flex;
height: 0.94rem;
align-items: center;
overflow: scroll;
width: 100%;
background-color: #fff;
margin-bottom: 0.12rem;
}
.menu li{
width: 16%;
flex: none;
}
.menu li .text{
font-family: SimHei;
font-size: 0.3rem;
color: #424242;
}
.menu .active{
padding-left: 0.34rem;
position: relative;
}
.menu .active::after{
content: "";
width: 0.31rem;
height: 0.04rem;
background-color: #5697f4;
position: absolute;
left: 45%;
transform: translateX(-50%);
bottom: -0.28rem;
}
.content{
background-color: #fff;
margin-bottom: 0.12rem;
border-radius: 0.1rem;
}
.content .desc{
display: flex;
justify-content: space-between;
align-items: center;
height: 0.73rem;
padding-left: 0.28rem;
padding-right: 0.35rem;
box-sizing: border-box;
}
.content .title{
display: flex;
/* justify-content: space-between; */
align-items: center;
}
.content .title .img_1{
width: 0.32rem;
height: 0.32rem;
/* border: solid 0.01rem #9a9da3; */
}
.content .title .title_text{
font-family: PingFang-SC-Bold;
font-size: 0.26rem;
letter-spacing: 0.006rem;
line-height: 0.2rem;
color: #333333;
font-weight: 600;
margin: 0 0.18rem;
}
.content .title .img_2{
width: 0.1rem;
height: 0.18rem;
/* background-color: #999999; */
/* border: solid 0.01rem #c7c7c7; */
}
.content .follow{
font-family: PingFang-SC-Medium;
font-size: 0.26rem;
color: #5697f4;
}
.logo li{
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-left: 0.35rem;
padding-right: 0.3rem;
margin-bottom: 0.22rem;
}
.logo li img{
width: 1.36rem;
height: 1.37rem;
}
.logo li .logo_text{
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.logo li .logo_text p{
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
line-height: 0.44rem;
letter-spacing: 0rem;
color: #444444;
}
.logo li .logo_text span{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #aaaaaa;
margin-top: 0.15rem;
}
.logo li .logo_prince{
display: flex;
flex-direction: column;
align-items: end;
}
.logo li .logo_prince p{
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #000000;
}
.logo li .logo_prince span{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #aaaaaa;
margin-top: 0.15rem;
}
.all{
display: flex;
justify-content: end;
flex-direction: column;
align-items: end;
margin-right: 0.28rem;
}
.all p{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #000000;
}
.all .drop{
display: flex;
margin-top: 0.2rem;
box-sizing: border-box;
margin-bottom: 0.26rem;
}
.all .drop .drop_l{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #888888;
border-radius: 0.23rem;
border: solid 0.01rem #dddddd;
padding: 0 0.17rem;
margin-right: 0.11rem;
}
.all .drop .drop_r{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #5697f4;
border-radius: 0.23rem;
border: solid 0.01rem #5697f4;
padding: 0 0.41rem;
}

View File

@@ -0,0 +1,128 @@
body {
display: flex;
flex-direction: column;
height: 100vh;
font-size: 0;
}
.header{
background-color: #ffffff;
display: flex;
justify-content: space-between;
width: 100%;
height: .9rem;
top: 0.22rem;
padding:0 0.3rem;
align-items: center;
box-sizing: border-box;
/* position: fixed; */
}
.header img{
width: 0.19rem;
height: 0.34rem;
/* background-color: #333333; */
}
.header .record{
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #333333;
}
.content{
flex: 1;
background-color: #eeeef3;
}
.info li{
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
border-radius: 0.1rem;
/* margin: 0.23rem 0.24rem; */
box-sizing: border-box;
margin: 0 0.24rem;
padding-left:0.37rem;
padding-right: 0.41rem;
}
.info li:nth-child(1){
margin: 0.23rem 0.24rem!important;
height: 1.01rem;
}
.info li:nth-child(2){
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 1.01rem;
border-bottom: 0.02rem solid #f0f0f4;
}
.info li:nth-child(3){
height: 100%;
border-radius: 0;
border-bottom: 0.02rem solid #f0f0f4;
}
.info li:nth-child(4){
border-top-left-radius: 0px;
border-top-right-radius: 0px;
height: 100%;
}
.info li .date{
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #949494;
/* padding-left: 0.37rem; */
}
.info li .info_con{
display: flex;
align-items: center;
}
.info li .info_con .info_text{
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #949494;
margin-right: 0.27rem;
}
.info li .info_con img{
/* padding-right: 0.41rem; */
width: 0.2rem;
height: 0.11rem;
/* background-color: #979797; */
}
.info li .title .title_t{
font-family: PingFang-SC-Medium;
font-size: 0.34rem;
color: #333333;
padding-bottom: 0.17rem;
margin-top: 0.34rem;
}
.info li .title .title_m{
padding-bottom: 0.19rem;
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #949494;
}
.info li .title .title_b{
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #949494;
margin-bottom: 0.27rem;
}
.info li .desc{
display: flex;
flex-direction: column;
align-items: end
}
.info li .desc .desc_t{
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #333333;
padding-bottom: 0.19rem;
}
.info li .desc .desc_b{
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #949494;
margin-bottom: 0.38rem;
}

View File

@@ -0,0 +1,58 @@
body{
background: #fbfbfd;
}
.header{
display: flex;
justify-content: space-between;
padding: 0 0.42rem;
box-sizing: border-box;
align-items: center;
height: .9rem;
background: #fff;
}
.header img{
width: 0.15rem;
height: 0.29rem;
}
.header .text{
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #333333;
font-weight: 600;
}
.content{
display: flex;
justify-content: space-between;
padding: 0 0.25rem;
flex-wrap: wrap;
}
.content li{
width: 3.4rem;
height: 5rem;
display: flex;
flex-direction: column;
margin-top: 0.2rem;
box-sizing: border-box;
background-color: #fff;
}
.content li img{
width: 3.4rem;
height: 3.4rem;
background-color: #e8fffe;
border-radius: 0.1rem 0.1rem 0rem 0rem;
margin-bottom: 0.19rem;
}
.content li .text_t{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #3f3f3f;
margin-bottom: 0.26rem;
}
.content li .text_b{
font-family: PingFang-SC-Bold;
font-size: 0.28rem;
color: #ff7b41;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,91 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/hong.css">
</head>
<body>
<div class="header">
<img src="./img/white.png" alt="">
<div class="money">待付款</div>
<div></div>
</div>
<div class="content">
<div class="menu">
<img src="./img/menu.png" alt="">
<p>订单等待买家付款!</p>
</div>
<div class="phone">
<div class="top">
<img src="./img/top.png" alt="">
<p>姓名 130****0000</p>
</div>
<div class="add">安徽省合肥市蜀山区松芝万象城</div>
</div>
<div class="logo">
<img src="./img/red.png" alt="">
<div class="red">
<p>【大牌驾到】MAC魅可柔美系列
口红魅可柔列口红魅可柔</p>
<div class="red_b">
大红色
</div>
</div>
<div class="prince">
<div class="prince_t">¥100.00</div>
<div class="prince_m">X1</div>
<div class="prince_b">待付款</div>
</div>
</div>
<ul class="desc">
<li>
<span>商品总价</span>
<span>¥100.00</span>
</li>
<li>
<span>商品总价</span>
<span>¥100.00</span>
</li>
<li>
<span>商品总价</span>
<span>¥100.00</span>
</li>
<li>
<span class="one">实付款</span>
<span class="two">¥100.00</span>
</li>
</ul>
<div class="miss">
<div class="miss_t">订单信息</div>
<div class="miss_b">下单时间:2019-01-01 16:00</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,80 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/recod.css">
</head>
<body>
<div class="header">
<img src="./img/-e-(.png" alt="">
<div class="record">账户提现记录</div>
<div></div>
</div>
<div class="content">
<ul class="info">
<li>
<div class="date">2016-01</div>
<div class="info_con">
<div class="info_text">提现:50.00</div>
<img src="./img/e_bottom.png" alt="">
</div>
</li>
<li>
<div class="date">2014-08</div>
<div class="info_con">
<div class="info_text">提现:5,001.00</div>
<img src="./img/e_top.png" alt="">
</div>
</li>
<li>
<div class="title">
<div class="title_t">余额提现</div>
<div class="title_m">中国工商银行(3452)</div>
<div class="title_b">08-19 18:12</div>
</div>
<div class="desc">
<div class="desc_t">1.00</div>
<div class="desc_b">手续费 0.00元</div>
</div>
</li>
<li>
<div class="title">
<div class="title_t">余额提现</div>
<div class="title_m">中国工商银行(3452)</div>
<div class="title_b">08-19 18:12</div>
</div>
<div class="desc">
<div class="desc_t">1.00</div>
<div class="desc_b">手续费 0.00元</div>
</div>
</li>
<li></li>
</div>
</ul>
</body>
</html>

View File

@@ -0,0 +1,151 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/list.css">
</head>
<body>
<div class="header">
<img src="./img/e_left.png" alt="">
<div class="search">
<img src="./img/search.png" alt="">
<input placeholder="搜索我的订单" type="text">
</div>
</div>
<ul class="menu">
<li class="active">
<div class="text">全部</div>
</li>
<li>
<div class="text">待付款</div>
</li>
<li>
<div class="text">待发货</div>
</li>
<li>
<div class="text">待收货</div>
</li>
<li>
<div class="text">已完成</div>
</li>
<li>
<div class="text">待评价</div>
</li>
<li>
<div class="text">售后处理</div>
</li>
</ul>
<div class="content">
<div class="desc">
<div class="title">
<img class="img_1" src="./img/shop.png" alt="">
<div class="title_text">面包自营</div>
<img class="img_2" src="./img/right.png" alt="">
</div>
<div class="follow">待评价</div>
</div>
<ul class="logo">
<li>
<img src="./img/bao.png" alt="">
<div class="logo_text">
<p>包子芝麻小蛋糕美味香脆新品</p>
<p> 正品包邮</p>
<span>
独立包装+原味
</span>
</div>
<div class="logo_prince">
<p>¥38.8</p>
<span>X1</span>
</div>
</li>
<li>
<img src="./img/bao.png" alt="">
<div class="logo_text">
<p>包子芝麻小蛋糕美味香脆新品</p>
<p> 正品包邮</p>
<span>
独立包装+原味
</span>
</div>
<div class="logo_prince">
<p>¥38.8</p>
<span>X1</span>
</div>
</li>
</ul>
<div class="all">
<p>共2件商品,合计:¥100.00 (含运费¥0.00)</p>
<div class="drop">
<div class="drop_l">删除订单</div>
<div class="drop_r">评价</div>
</div>
</div>
</div>
<div class="content">
<div class="desc">
<div class="title">
<img class="img_1" src="./img/shop.png" alt="">
<div class="title_text">面包自营</div>
<img class="img_2" src="./img/right.png" alt="">
</div>
<div class="follow">待评价</div>
</div>
<ul class="logo">
<li>
<img src="./img/bao.png" alt="">
<div class="logo_text">
<p>包子芝麻小蛋糕美味香脆新品</p>
<p> 正品包邮</p>
<span>
独立包装+原味
</span>
</div>
<div class="logo_prince">
<p>¥38.8</p>
<span>X1</span>
</div>
</li>
</ul>
<div class="all">
<p>共2件商品,合计:¥100.00 (含运费¥0.00)</p>
<div class="drop">
<div class="drop_l">删除订单</div>
<div class="drop_r">评价</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,79 @@
<!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 type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/xiezi.css">
</head>
<body>
<div class="header">
<img src="./img/-e-返回.png" alt="">
<div class="text">
商品列表
</div>
<div></div>
</div>
<ul class="content">
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
<li>
<img src="./img/photo.png" alt="">
<div class="text_t">
女鞋小白鞋女鞋小白鞋女鞋
小白鞋女鞋小白鞋
</div>
<div class="text_b">
50积分
</div>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,103 @@
<!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>
<div class="menu_top">
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li> <li>
<a href="">新闻</a>
</li> <li>
<a href="">新闻</a>
</li> <li>
<a href="">新闻</a>
</li> <li>
<a href="">新闻</a>
</li> <li>
<a href="">新闻</a>
</li>
</ul>
<div class="tools">
<div class="setting">设置</div>
<div class="denglu">登录</div>
</div>
</div>
<div class="content">
<img src="" alt="">
<div class="search">
<input type="text">
<button>百度一下</button>
</div>
<div class="hot">
<div class="title">
<div class="left">
<a href="">百度热搜</a>
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
<span>换一换</span>
</div>
</div>
<ul>
<li>
<img src="" alt="">
<a href="">花好月圆,月圆人圆</a>
</li>
<li>
<img src="" alt="">
<a href="">花好月圆,月圆人圆</a>
</li>
<li>
<img src="" alt="">
<a href="">花好月圆,月圆人圆</a>
</li> <li>
<img src="" alt="">
<a href="">花好月圆,月圆人圆</a>
</li> <li>
<img src="" alt="">
<a href="">花好月圆,月圆人圆</a>
</li> <li>
<img src="" alt="">
<a href="">花好月圆,月圆人圆</a>
</li>
</ul>
</div>
</div>
<div class="copyright">
<ul>
<li>
<a href="">关于百度</a>
</li>
<li>
<a href="">关于百度</a>
</li>
<li>
<a href="">关于百度</a>
</li>
<li>
<a href="">关于百度</a>
</li>
<li>
<a href="">关于百度</a>
</li>
<li>
<a href="">关于百度</a>
</li>
<li>
互联网宗教
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高顿</title>
</head>
<body>
<div class="header">
<div class="center">
<div class="logo">
<div class="left">
<img src="" alt="">
<ul class="menu_t">
<li>
<a href="">成就梦想</a>
</li>
<li>
<a href="">成就梦想</a>
</li>
<li>
<a href="">成就梦想</a>
</li>
<li>
<a href="">成就梦想</a>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
<div class="right">
<img src="" alt="">
<ul>
<li>
<a href="">学习空间</a>
</li>
<li>
<a href="">学习空间</a>
</li>
<li>
<a href="">学习空间</a>
</li>
</ul>
</div>
</div>
<div class="menu">
<ul>
<li>
<a href="">考研</a>
</li>
<li>
<a href="">考研</a>
</li>
<li>
<a href="">考研</a>
</li>
<li>
<a href="">考研</a>
</li>
<li>
<a href="">考研</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="center">
<ul class="menu_f">
<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>
<img src="" alt="">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="ceneter">
<div class="menu_top">
<img src="" alt="">
<ul class="list">
<li>
<a href="">发现音乐</a>
</li>
<li>
<a href="">发现音乐</a>
</li>
<li>
<a href="">发现音乐</a>
</li>
<li>
<a href="">发现音乐</a>
</li>
</ul>
<span>hot</span>
</div>
<div class="search">
<input type="text">
<a href=""></a>
<a href=""></a>
</div>
<ul class="menu_m">
<li>
<a href="">推荐</a>
</li>
<li>
<a href="">推荐</a>
</li>
<li>
<a href="">推荐</a>
</li>
<li>
<a href="">推荐</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="logo">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="audio">
<div class="left">
<ul class="munu_f">
<li>
<img src="" alt="">
<a href="">热门推荐</a>
</li>
<li>
<a href="">热门推荐</a>
</li>
<li>
<a href="">热门推荐</a>
</li>
<li>
<a href="">热门推荐</a>
</li>
</ul>
<span>更多</span>
<img src="" alt="">
<ul class="music">
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
<li>
<img src="" alt="">
<a href="">一秒沦陷丨听说你也在找好听的歌曲</a>
</li>
</ul>
</div>
<div class="right">
<div class="user">
<p></p>
<button>登录</button>
</div>
<div class="right_f">
<div class="all">
<span>入驻歌手</span>
<a href=""></a>
<img src="" alt="">
</div>
<ul class="person">
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
<li>
<img src="" alt="">
<a href="">张惠妹</a>
</li>
</ul>
<button></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="center">
<img class="left" src="" alt="">
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
</div>
<div class="content">
<img class="banner" src="" alt="">
<div class="news">
<div class="center">
<div class="top">
<p></p>
<span class="top_r"></span>
</div>
<div class="bottom">
<ul>
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学新网</title>
</head>
<body>
<div class="header">
<div class="center">
<div class="logo">
<div class="left">
<img src="" alt="">
<a href="">中国高等教育学生信息网</a>
<p></p>
</div>
<ul class="right">
<li>
<a href="">登录</a>
</li>
<li>
<a href="">登录</a>
</li>
<li>
<a href="">登录</a>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">首页</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="center">
<img src="" alt="">
<div class="news">
<div class="news_l">
<div class="file">
<a href=""></a>
<a href=""></a>
</div>
<a href="">保送生</a>
<a href="">保送生</a>
<a href="">保送生</a>
<a href="">保送生</a>
<a href="">保送生</a>
</div>
<div class="news_r">
<div class="top">
<span>教育咨询</span>
<a href="">更多</a>
</div>
<ul class="list">
<li>
<a href="">反对恢复吧</a>
</li>
<li>
<a href="">反对恢复吧</a>
</li>
<li>
<a href="">反对恢复吧</a>
</li>
<li>
<a href="">反对恢复吧</a>
</li>
</ul>
</div>
</div>
</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>Document</title>
</head>
<body>
<div class="header">
<div class="top center">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<div>
<ul class="right">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<ul class="bottom">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="content">
<div class="center">
<img class="banner" src="" alt="">
<div class="list">
<ul class="left">
<li></li>
<li></li>
<li></li>
</ul>
<div class="right">
<div class="right_t">
</div>
<ul class="right_b">
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!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>
<div class="header">
<div class="ceenter">
<ul class="left">
<li>
<a href="">设为首页</a>
</li>
<li>
<a href="">设为首页</a>
</li>
<li>
<a href="">设为首页</a>
<img src="" alt="">
</li>
</ul>
<ul class="right">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="logo">
<img src="" alt="">
<div class="search">
<select name="" id="">
<option value="">
新闻
</option>
</select>
<input type="text">
<button></button>
</div>
<img src="" alt="">
</div>
<ul class="menu">
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
</ul>
<img src="" alt="">
</div>
</div>
<div class="copyrigh">
</div>
</body>
</html>

View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="top">
<div class="center">
<div class="left">
<img src="" alt="">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="right">
<div class="search">
<img src="" alt="">
<input type="text">
</div>
<span>创作者中心</span>
<button>登录</button>
</div>
</div>
</div>
<div class="bottom">
<ul class="center">
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
<li>推荐</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="top">
<div class="banner">
<img class="left" src="" alt="">
<div class="right">
<img src="" alt="">
<button>
<img src="" alt="">
<span>下载客户端</span>
</button>
<p>pc安卓</p>
</div>
</div>
</div>
<div class="bottom">
<div class="left">
<div class="hot">
<div class="hot_left">
<img src="" alt="">
<ul>
<li></li>
</ul>
</div>
<div class="hot_right">
<span>更多</span>
<img src="" alt="">
</div>
</div>
<ul class="list">
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
<div class="right">
<div class="sign">
<p></p>
<button>用户登录</button>
</div>
<div class="sign_f">
<div class="title">
<p>驱逐歌手</p>
<a href="">查看全部</a>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<button>申请成为网易音乐人</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=., initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="top center">
<div class="left">
<img src="" alt="">
<ul>
<li></li>
</ul>
<div class="phone">
<img src="" alt="">
<span>400-xx-xx</span>
</div>
</div>
<div class="right">
<img src="" alt="">
<span>学习空间</span>
<span>登录</span>
</div>
</div>
<div class="bottom">
<ul class="center">
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="ceenter">
<ul class="title">
<li>
<a href=""></a>
</li>
</ul>
<img class="banner" src="" alt="">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,96 @@
body,ul {
margin: 0;
padding: 0;
font-size: 0
}
.left {
float: left;
}
.right {
float: right;
}
.hidden {
overflow: hidden;
}
.mian {
width: 280px;
height: 450px;
}
.title {
margin-bottom: 15px;
}
.author {
font-size: 14px;
color: #969696;
}
.shuaxin {
font-size: 14px;
color: #969696
}
.shuaxin i {
font-size: 13px;
}
.list li {
overflow: hidden;
margin-bottom: 15px;
}
.picture {
width: 48px;
height: 48px;
border: 1px solid #ddd;
border-radius: 100%;
margin-right: 10px;
}
.person {
font-size: 14px;
color: #333;
padding-top: 5px;
}
.introduce {
font-size: 12px;
color: #969696;
margin-top: 2px;
}
.follow {
font-size: 13px;
color: #42c02e;
margin-top: 5px;
}
.follow i {
zoom: 0.85;
font-weight: 900;
font-size: 13px;
}
.all {
height: 35.07px;
font-size: 13px;
color: #787878;
background-color: #f7f7f7;
border: 1px solid #dcdcdc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
line-height: 35.07px;
}
.all i {
font-size: 13px;
}

View File

@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简书</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888619_vly3hygv0lq.css">
</head>
<body>
<div class="mian">
<div class="title hidden">
<div class="author left">
推荐作者
</div>
<div class="shuaxin right">
<i class="iconfont icon-shuaxin"></i>
换一批
</div>
</div>
<ul class="list">
<li>
<img class="left picture"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
<li>
<img class="left picture"
src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="name left">
<div class="person">卢璐说</div>
<div class="introduce">
写了2215.2k字 · 34.7k喜欢
</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao1"></i>
关注
</div>
</li>
</ul>
<div class="all">
查看全部
<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,113 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>