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,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>
</head>
<body>
<div class="header">
<div class="nav">
<a href="">
<img src="" alt="" class="logo">
</a>
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<div>
<input type="text">
<i></i>
</div>
<a href=""><img src="" alt=""></a>
</div>
<ul>
<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="c_left">
<ul>
<li>
<h2><a href=""></a></h2>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<div>
<h2><a href=""></a></h2>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="">
<img src="" alt="">
</a>
</li>
</ul>
</div>
<div class="c_right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<a href="">
<img src="" alt="">
</a>
<div>
<p></p>
<p></p>
</div>
</div>
<div>
<div>
<span></span>
<span></span>
</div>
<ul>
<li>
<a href="">
<img src="" alt="">
</a>
<div>
<a href=""></a>
<p></p>
</div>
<a href=""></a>
</li>
<li>
<a href="">
<img src="" alt="">
</a>
<div>
<a href=""></a>
<p></p>
</div>
<a href=""></a>
</li>
<li>
<a href="">
<img src="" alt="">
</a>
<div>
<a href=""></a>
<p></p>
</div>
<a href=""></a>
</li>
</ul>
<a href="">
<div></div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,15 @@
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

View File

@@ -0,0 +1,149 @@
<!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="clear.css">
</head>
<body>
<div class="header">
<div class="header_top">
<a href="">
<img src="" alt="">
</a>
<div>
网页
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<input type="text">
<button></button>
<div>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
</div>
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<div>
更多
<ul class="menu_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="center">
<div class="advertisement">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="c">
<div class="C_left">
<div>
<p></p>
<p></p>
<div>
<span>合肥</span>
<img src="" alt="">
<span>9°</span>
<div></div>
</div>
</div>
<p></p>
<ul>
<li></li>
<li></li>
<li>
<img src="" alt="">
<p></p>
</li>
<li></li>
</ul>
</div>
<div class="C_center">
<div class="today">
<div>
<p>今日话题</p>
</div>
<p></p>
<ul>
<li>
<p></p>
<p></p>
</li>
</ul>
</div>
<div>
<img src="" alt="">
<ul>
<li>
<img src="" alt="">
<p></p>
</li>
<li></li>
<li></li>
<li>
<p>
<img src="" alt="">
</p>
<p></p>
</li>
<li>
<p>
<img src="" alt="">
</p>
<p></p>
</li>
</ul>
</div>
</div>
<div class="C_right">
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div>
<video src=""></video>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,56 @@
<!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>
<div>
<img src="" alt="">
<span>二十四小时热文</span>
</div>
<ul class="con">
<li class="tp">
<div>
<img src="" alt="">
<div>1</div>
</div>
<div>
<a>台风过后有剧毒</a>
<div>
<span>718万</span>
<span>阅读</span>
</div>
</div>
</li>
<li>
<div>2</div>
<div>
<a>台风过后有剧毒</a>
<div>
<span>236万</span>
<span>阅读</span>
</div>
</div>
</li>
<li>
<div>3</div>
<div>
<a>台风过后有剧毒</a>
<div>
<span>236万</span>
<span>阅读</span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,115 @@
<!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>
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
li {
width: 100px;
height: 30px;
background: rgba(170, 168, 165, 0.247);
margin-bottom: 5px;
text-align: center;
line-height: 30px;
}
ul {
position: relative;
}
.menu_list {
position: absolute;
background-color: cadetblue;
height: 135px;
width: 300px;
left: 100px;
top: 0px;
display: none;
}
li:hover .menu_list {
display:block
}
.menu_item {
padding: 2px;
}
</style>
<body>
<ul>
<li>首页
<div class="menu_list">
<div class="menu_item">
首页首页首页首页
</div>
<div class="menu_item">
首页首页首页首页
</div>
<div class="menu_item">
首页首页首页首页
</div>
<div class="menu_item">
首页首页首页首页
</div>
</div>
</li>
<li>HTML学习
<div class="menu_list">
<div class="menu_item">
HTML学习HTML学习HTML学习
</div>
<div class="menu_item">
HTML学习HTML学习HTML学习
</div>
<div class="menu_item">
HTML学习HTML学习HTML学习
</div>
<div class="menu_item">
HTML学习HTML学习HTML学习
</div>
</div>
</li>
<li>CSS学习
<div class="menu_list">
<div class="menu_item">
CSS学习CSS学习CSS学习
</div>
<div class="menu_item">
CSS学习CSS学习CSS学习
</div>
<div class="menu_item">
CSS学习CSS学习CSS学习
</div>
<div class="menu_item">
CSS学习CSS学习CSS学习
</div>
</div>
</li>
<li>JS学习
<div class="menu_list">
<div class="menu_item">
JS学习JS学习JS学习
</div>
<div class="menu_item">
JS学习JS学习JS学习
</div>
<div class="menu_item">
JS学习JS学习JS学习
</div>
<div class="menu_item">
JS学习JS学习JS学习
</div>
</div>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,88 @@
<!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="https://at.alicdn.com/t/font_2881065_kt2nregqrjm.css">
<style>
ul{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.con {
width: 319px;
height: 213px;
background: url(http://29e5534ea20a8.cdn.sohucs.com/c_zoom,h_213/c_cut,x_38,y_0,w_589,h_393/os/news/3f262081e8b625575d9d106a05a65aeb.jpg);
position: relative;
}
.turn {
width: 25px;
height: 25px;
background-color: rgba(68, 47, 47, 0.342);
text-align: center;
line-height: 25px;
border-radius: 50%;
position: absolute;
color: #ccc;
}
.left {
top: 70px;
left:10px;
}
.right {
top: 70px;
right: 10px;
}
p {
position: absolute;
bottom: 20px;
left: 20px;
color:#fff;
}
ul {
position: absolute;
bottom: 15px;
left: 50%;
transform: translate(-50%);
}
li {
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
float: left;
margin-right: 10px;
}
li:last-child {
margin-right: 0px;
}
li:nth-child(2) {
width: 25px;
border-radius: 6px;
background-color: #fdd000;
}
</style>
</head>
<body>
<div class="con">
<i class="iconfont icon-changyong_fanhui turn left"></i>
<i class="iconfont icon-fanye turn right"></i>
<p>猪肉价格降降降降降降降降降</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,84 @@
.con {
background-color: #f5f5f5;
}
.con_phone {
height: 690px;
width: 1226px;
margin: 0 auto;
}
.title {
height: 58px;
line-height: 58px;
font-size: 22px;
}
.title i {
text-align: center;
border-radius: 50%;
font-size: 10px;
color: #fff;
padding: 4px;
vertical-align: 1px;
margin-left: 5px;
background-color: #b0b0b0;
}
.title a {
font-size: 16px;
}
.title_r {
float: right;
height: 58px;
}
ul {
width: 1226px;
height: 614px;
}
li {
width: 234px;
height: 300px;
background-color: #fff;
margin-left: 14px;
float: left;
text-align: center;
}
li:first-child {
width: 234px;
height: 614px;
margin-left: 0;
}
li:nth-child(1n+6) {
margin-top: 14px;
}
li:nth-child(1n+2) img{
margin-top: 15px;
}
li :nth-child(2) {
font-size: 14px;
color: #333333;
}
li :nth-child(3) {
font-size: 12px;
color: #B0B0B0;
margin-top: 3px;
}
li :nth-child(4) {
font-size: 14px;
color: #FF6700;
margin-top: 7px;
}
li:hover {
box-shadow: 0 0 70px 1px rgba(153, 153, 153, 0.349);
}

View File

@@ -0,0 +1,83 @@
<!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="https:////at.alicdn.com/t/font_2881065_p5y7yedfmpm.css">
<link rel="stylesheet" href="xiaomi_phone.css">
</head>
<body>
<div class="con">
<div class="con_phone">
<div class="title">
手机
<div class="title_r">
<a href="">查看全部</a>
<i class="iconfont icon-fanye l_center"></i>
</div>
</div>
<ul>
<li>
<a href="">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=234&h=614&f=webp&q=90" alt="">
</a>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
<li>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
<p>黑鲨4S</p>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,43 @@
.float_left {
float: left;
}
.float_right {
float: right;
}
.c_center {
margin: 0 auto;
}
.turn_page {
width: 121px;
height: 42px;
float: right;
}
.turn_page i {
display: inline-block;
width: 12px;
height: 28px;
padding: 1px 6px;
line-height: 28px;
}
.turn_page i:hover {
background-color: hsla(0,0%,84.7%,.2);
border-radius: 50%;
color: #fe3666;
}
.turn_page span {
display: inline-block;
width: 62px;
height: 21px;
text-align: center;
}
.big {
font-size: 18px;
font-weight: 600;
}

View File

@@ -0,0 +1,651 @@
.header {
height: 40px;
background-color: #222222;
}
.center {
margin: 0 auto;
}
.ct {
padding-top: 40px;
}
.nav {
width: 1164px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav li:nth-child(1n+2):hover {
background: #444;
}
.more {
position: relative;
}
.more:hover i{
transform: rotate(180deg);
}
.nav_more a {
color: #191919!important;
display:block;
float:left;
width: 67px;
font-size: 14px;
}
.more a:hover {
background: #f9f9f9 ;
color: #c9141d!important;
}
.more i {
display: inline-block;
transition: transform 0.2s;
}
.more:hover .nav_more {
display: block;
}
.nav_more {
width: 268px;
height: 120px;
padding: 7px 10px;
border: 1px solid #ddd;
position: absolute;
left: -120px;
color: #191919;
display: none;
background-color: #fff;
z-index: 9;
}
.logo {
background: url(../img/s_logo.png);
width: 44px;
height: 20px;
float: left;
margin-top: 9px;
margin-left: 7px;
}
.icon-shouye {
font-size: 18px;
color: #ccc;
float: left;
}
.nav li {
width: 74px;
float: left;
margin-right: 5px;
color: #fff;
}
.nav li a {
color: #fff;
}
.shu::before {
content: "";
width: 1px;
height: 16px;
background-color: #666666;
float:left;
margin-top: 12px;
}
.nav li:last-child {
width: 130px;
}
.reset_n {
height: 40px;
}
.content .ct {
width: 1182px;
/* background-color: #444; */
margin-top: 10px;
}
.c_left_user {
width: 138px;
height: 217px;
border: #ddd 1px solid;
text-align: center;
position: relative;
}
.c_left_user_portrait {
width: 72px;
height: 72px;
border-radius: 50%;
margin-top: -20px;
}
.c_left {
float: left;
}
.level {
margin-top: 5px;
margin-bottom: 10px;
}
.read_information {
margin-top: 0px;
height: 50px;
}
.read_information div {
width: 50%;
height: 50px;
float: left;
margin-left: -1px;
}
.read_information div a {
display: block;
}
.read_information div:first-child {
border-right: #6666663f solid 1px;
}
.read_information p {
font-size: 14px;
}
.read_information span {
font-size: 12px;
color: #666;
}
.see {
width: 100%;
height: 31px;
background-color: #f9f9f9;
position: absolute;
bottom: 0px;
color:#666;
line-height: 31px;
font-size: 12px;
}
.c_left_comment {
width: 140px;
height: 120px;
margin-top: 20px;
}
.c_line {
font-size: 14px;
color: #404040;
text-align: center;
}
.c_line::before,
.c_line::after {
content: "";
display: inline-block;
height: 1px;
width: 45px;
background-color: #efefef;
position: relative;
top:-5px;
}
.c_line::before{
right:10px;
}
.c_line::after{
left:10px;
}
.c_left_comment img {
margin-top: 10px;
}
.c_left_comment {
text-align: center;
}
.red {
font-family: Georgia,Arial;
color: #da2128;
font-size: 24px;
}
.c_left_share {
width: 140px;
height: 150px;
}
.c_left_share ul li {
width: 140px;
height: 20px;
font-size: 12px;
color: #606060;
padding: 0 20px;
margin-top: 10px;
}
.c_left_share ul li span {
float: left;
}
.c_left_share ul li img {
float: left;
margin-top: -3px;
margin-right: 10px;
}
.c_center {
width: 640px;
height: 10000px;
float: left;
margin-left: 20px;
}
.article h2 {
color: #191919;
font-size: 28px;
}
.article .article_time {
margin-top: 20px;
color: #999;
font-size: 14px;
}
.article img {
display: block;
margin: 20px auto;
}
.article {
overflow: hidden;
}
.article p {
font-size: 16px;
color: #191919;
line-height: 1.9;
}
.article_bottom div {
margin-top: 24px;
box-sizing: border-box;
float: left;
width: 80px;
height: 34px;
border: 1px solid #e5e5e5;
border-radius: 17px;
text-align: center;
line-height: 31px;
color: #606060;
font-size: 12px;
}
.article_bottom p {
padding-top: 25px;
float: right;
font-size: 12px;
counter-reset: #666666;
}
.allsee {
overflow: hidden;
margin-top: 20px;
}
.allsee img {
width: 195px;
height: 130px;
}
.allsee li {
float: left;
margin-right: 27px;
margin-bottom: 16px;
width: 195px;
height: 178px;
overflow: hidden;
}
.allsee_title {
height: 29px;
font-size: 18px;
}
.allsee_title span {
margin-left: 20px;
}
.allsee_title::before{
content: "";
display: inline-block;
height: 19px;
width: 3px;
background-color: yellow;
position: relative;
top: 4px;
}
.allsee li:nth-child(3n) {
margin:0;
}
.italk {
width: 100%;
}
.italk_title {
float: left;
height: 29px;
width: 100%;
font-size: 18px;
}
.italk_title span {
margin-left: 20px;
}
.italk_title::before{
content: "";
display: inline-block;
height: 19px;
width: 3px;
background-color: yellow;
position: relative;
top: 4px;
}
.sunshine {
float: right;
height: 20px;
position: relative;
}
.sunshine img {
position: absolute;
left: -50px;
top: -15px;
}
.italk_content{
clear: both;
width: 638px;
height: 119px;
border: 1px solid #666;
margin-top: 0px;
}
.italk_content textarea {
width: 592px;
height: 40px;
line-height: 22px;
font-size: 14px;
resize: none;
border: none;
padding: 20px;
}
.italk_bottom {
height: 35px;
background-color: rgba(51, 51, 51, 0.103);
line-height: 35px;
position: relative;
}
.italk_bottom span {
float: left;
margin-left: 20px;
}
.italk_bottom ul {
float: left;
}
.italk_bottom li {
margin-left: 10px;
float: left;
padding-top: 4px;
}
.italk_botton {
text-align: center;
position: absolute;
right: -1px;
bottom: -1px;
width: 90px;
height: 37px;
font-size: 15px;
line-height: 37px;
color: #fff;
background: #d81519;
}
.c_right{
width: 300px;
float: right;
}
.a_search {
width: 300px;
height: 36px;
border: solid 1px #666;
position: relative;
}
.hot_selected {
margin-top: 25px;
}
.search_t {
width: 255px;
height: 30px;
border:none;
}
.a_search .i_search {
position: absolute;
right: -1px;
top:-1px;
background-color: #ffba00;
width: 60px;
height: 38px;
text-align: center;
line-height: 36px;
color: rgb(0, 0, 0);
font-size: 24px;
}
.Carousel_figure {
position: relative;
width: 300px;
height: 200px;
}
.Carousel_figure i {
width: 25px;
height: 25px;
background-color: rgba(68, 47, 47, 0.342);
text-align: center;
line-height: 25px;
border-radius: 50%;
position: absolute;
color: #ccc;
top: 75px;
display: none;
}
.Carousel_figure:hover i {
display: block
;
}
.h2_title {
font-size: 22px;
color: #191919;
font-weight: 600;
margin-bottom: 20px;
}
.Carousel_figure .left {
left:12px;
}
.Carousel_figure .right {
right: 12px;
}
.Carousel_figure p {
position: absolute;
bottom: 20px;
left: 10px;
color:#fff;
font-size: 16px;
}
.Carousel_figure ul {
position: absolute;
bottom: 5px;
left: 10px;
}
.Carousel_figure li {
width: 8px;
height: 3px;
background-color: #ccc;
border-radius: 5px;
float: left;
margin-right: 6px;
}
.Carousel_figure li:last-child {
margin-right: 0px;
}
.Carousel_figure li:nth-child(2) {
width: 15px;
border-radius: 6px;
background-color: #fff;
}
.hot_selected_list {
overflow: hidden;
}
.hot_selected_list img {
width: 145px;
height: 87px;
}
.hot_selected_list li{
height: 132px;
width: 145px;
float: left;
margin-right: 10px;
margin-top: 10px;
overflow: hidden;
}
.hot_selected_list li:nth-child(2n) {
margin-right: 0px;
}
.hot24 {
margin-top: 30px;
}
.hot24 li {
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
.hot24 li img {
width: 90px;
height: 60px;
}
.hot24_left div{
position: absolute;
width: 80px;
height: 40px;
padding-top: 20px;
background-color: rgba(0,0,0,.3);
left: 0;
top: 0;
color: #fff;
font-size: 24px;
font-weight: 700;
padding-left: 10px;
}
.hot24_left {
float: left;
}
.hot24_right {
margin-left: 10px;
width: 196px;
height: 40px;
float: left;
}
.hot24_right p {
font-size: 14px;
color: #191919;
}
.hot24_right span {
font-size: 12px;
color: #999;
}
.hottalk {
margin-top: 50px;
}
.hottalk_title {
float: left;
height: 29px;
width: 100%;
font-size: 18px;
}
.italk_foot {
margin-left: -180px;
margin-top: 10px;
font-size: 12px;
color: #999;
float: left;
}
.hottalk_title span {
margin-left: 20px;
}
.hottalk_title::before{
content: "";
display: inline-block;
height: 19px;
width: 3px;
background-color: yellow;
position: relative;
top: 4px;
}
.hottalk_title {
border-bottom: 1px solid #40404046;
}
.hottalk li {
width: 640px;
height: 180px;
border-bottom: #999 dashed 1px;
}
.hottalk img {
border-radius: 50%;
width: 50px;
margin-top: 20px;
/* margin-right: 10px; */
}
.hottalk_right {
width: 576px;
float:right;
}
.hottalk_user {
color: #c9141d;
margin-top: 20px;
margin-bottom: 20px;
}
.hottalk_right div {
margin-top: 10px;
color: #999;
font-size: 12px;
}

View File

@@ -0,0 +1,289 @@
.header {
height: 390px;
width: 100%;
background-image: url(https://s2-10623.kwimgs.com/kos/nlav10623/vision_images/topBannerx1.png);
}
p {
font-size: 15px;
color: #111;
}
p:hover {
color: #fe3666;
}
span {
color: #999;
font-size: 13px;
}
.nav {
width: 100%;
height: 70px;
background: rgba(34,34,34,.5);
position: fixed;
}
.nav_center {
width: 1800px;
height: 70px;
padding-top: 12px;
}
.nav_center .logo {
width: 81px;
height: 31px;
float: left;
margin-top: 8px;
}
.nav_search {
width: 580px;
height: 44px;
border: none;
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nav_search input{
margin-top: 0px;
float: left;
border-radius: 22px;
width: 470px;
height: 44px;
background: hsla(0,0%,100%,.12);
border: none;
color: #fff;
border-bottom-right-radius: 0%;
border-top-right-radius: 0%;
padding-left: 20px;
}
.nav_search_right {
/* margin-top: 10px; */
width: 80px;
height: 46px;
background-color: #fe3666;
line-height: 44px;
text-align: center;
border-top-right-radius: 22px;
border-bottom-right-radius: 22px;
float: left;
}
.nav_right {
width: 279px;
height: 50px;
float: right;
}
.nav_right li {
width: 60px;
height: 51px;
color: #fff;
float: left;
margin-left: 20px;
text-align: center;
}
.nav_right li p {
font-size: 14px;
color: #fff;
}
.nav_right a {
color :#fff;
line-height: 43px;
}
.nav_right li:last-child {
background-color: #fe3666;
width: 84px;
height: 43px;
border-radius: 22px;
text-align: center;
}
.change_red:hover {
color:#fe3666;
}
.content_a {
width: 1800px;
height: 1000px;
}
.nav_list {
margin: 40px auto;
width: 1800px;
overflow: hidden;
}
.nav_list li {
background-color: #fbfbfb;
border-radius: 30px;
font-size: 18px;
font-weight: 600;
text-align: center;
float: left;
margin-left: 166px;
}
.nav_list li:first-child {
margin-left: 0;
}
.video_title h2 {
float: left;
}
.video_title_more {
float: left;
font-size: 16px;
color: #999;
margin-left: 30px;
margin-top: 14px;
}
.video_title .turn_page {
float: right;
margin-right: 20px;
}
.video {
width: 1416px;
height: 995px;
float: left;
}
.video_title {
overflow: hidden;
}
.video li img {
width: 217px;
height: 359px;
}
.video li {
margin-right: 18px;
margin-bottom: 46px;
width: 217px;
height: 418px;
float: left;
}
.video p {
margin-top: 5px;
}
.hot {
float: left;
width: 384px;
height: 946px;
}
.hot_title {
overflow: hidden;
margin-bottom: 30px;
}
.hot_title h2 {
display: inline-block;
}
.hot_title .turn_page{
margin-top: 8px;
}
.hot_content {
background-color: #fbfbfb;
padding: 15px;
}
.hot_content li {
width: 344px;
height: 80px;
border-bottom: 1px solid #f2f2f2;
}
.hot_content_left {
float: left;
width: 49px;
height: 60px;
position: relative;
}
.hot_content_left img {
position: absolute;
bottom: 0px;
}
.hot_content_left h3 {
display: inline-block;
width: 49px;
text-align: center;
margin-right: 8px;
font-size: 40px;
font-weight: 800;
}
.hot_content li:nth-child(1) h3,
.hot_content li:nth-child(1) i{
color: #fe3666;
}
.hot_content li:nth-child(2) h3,
.hot_content li:nth-child(2) i{
color: #ff6f00;
}
.hot_content li:nth-child(3) h3,
.hot_content li:nth-child(3) i{
color: #ffa600;
}
.hot_content_right {
width: 198px;
height: 40px;
float: left;
margin-left: 20px;
margin-top: 10px;
}
.hot_content_right p {
font-size: 18px;
}
.hot_img {
float: right;
width: 20px;
margin-top: 10px;
}
.game {
width: 1808px;
height: 513px;
}
.game_title h2{
float: left
}
.game_title span{
float: left;
margin-left: 15px;
}
.game_title {
height: 45px;
line-height: 45px;
margin-bottom: 24px;
}
.game_contnet {
height: 444px;
}
.game_contnet li {
width: 211px;
height: 199px;
float: left;
margin-right: 16px;
margin-bottom: 46px;
}
.game_contnet li img {
width: 221px;
height: 139px;
}
.game_contnet li:first-child{
width: 655px;
height: 444px;
}
.game_contnet li:first-child img {
width: 655px;
height: 385px;
}
.game_contnet li p {
margin-top: 10px;
}

View File

@@ -0,0 +1,236 @@
body {
background: #f5f5f5;
}
.new_content li {
width: 352px;
height: 41px;
line-height: 41px;
font-size: 14px;
color: #3d3d3d;
}
.new {
width: 1200px;
height: 1151px;
}
a {
color: #333333;
}
a:hover {
color: #bf0614;
}
.new_content {
width: 1200px;
height: 986px;
}
.new_title {
height: 60px;
margin-bottom: 5px;
color: #000;
font-size: 30px;
}
.new_left {
width: 780px;
height: 980px;
float: left;
}
.new_left_top {
height: 131px;
margin-bottom: 20px;
background-color: #fff;
padding-left: 20px;
}
.new_left_top h2 {
font-size: 26px;
padding: 19px 15px 10px 15px;
line-height: 52px;
}
.new_left_top li {
float: left;
font-size: 16px;
padding: 0 10px;
margin-right: 20px;
width: 340px;
height: 30px;
line-height: 30px;
}
.new_left_top div {
float: left;
width: 70px;
height: 30px;
line-height: 30px;
background: #bf0614;
margin-right: 10px;
text-align: center;
color: #fff;
}
.Social_news {
overflow: hidden;
}
.Social_news_right {
height: 400px;
float: right;
}
.new_art {
width: 340px;
background-color: #fff;
padding: 5px 20px;
margin-bottom: 20px;
}
.tp img{
width: 184px;
height: 106px;
}
.tp li {
width: 185px;
height: 225px;
float: left;
margin-right:10px ;
background-color: #fff;
}
.tp li:last-child {
margin-right:0px ;
}
.tp {
width: 380px;
height: 245px;
overflow: hidden;
}
.tp p {
line-height: 16px;
margin-left: 10px;
}
.tp span {
display: inline-block;
margin-left: 10px;
margin-top: 28px;
}
.international_news {
overflow: hidden;
}
.international_news .new_art {
height: 215px;
}
.hot {
margin-top: 37px;
}
.hot_title {
background-image:url(http://p5.img.cctvpic.com/photoAlbum/page/performance/img/2020/11/5/1604566761484_154.png);
width: 780px;
height: 60px;
background-repeat: no-repeat;
}
.hot_title h2 {
margin-left: 20px;
font-weight: 600;
float: left;
}
.hot_title ul {
width: 260px;
height: 50px;
float: right;
}
.hot_title li {
float: left;
margin-left: 25px;
width: 60px;
height: 24px;
}
.turn_img {
overflow: hidden;
position: relative;
width: 780px;
height: 80px;
background-color: #666;
}
.turn_img li {
width: 180px;
height: 80px;
float: left;
margin-right: 17px;
}
.turn_img li:last-child {
margin-right: 0px;
}
.turn_img1 {
position: absolute;
top: 0;
right: 100%;
height: 80px;
}
.turn_img li:hover .turn_img1 {
right: 0;
transition:1s
}
.red_d {
float: left;
width: 70px;
height: 30px;
line-height: 30px;
background: #bf0614;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
margin-right: 10px;
text-align: center;
color: #fff;
}
.new_right {
width: 400px;
height: 986px;
float: right;
}
.new_right_top {
width: 380px;
height: 707px;
background-color: #fff;
padding: 10px;
}
.new_right_top_right {
width: 200px;
height: 86px;
margin-left: 21px;
float: left;
position: relative;
line-height: 22px;
}
.new_right_top_right a {
height: 40px;
}
.new_right_top img {
width: 154px;
height: 86px;
float: left;
}
.new_right_top li{
width: 380px;
height: 101px;
}
.new_right_top_right a {
display: inline-block;
margin-bottom: 10px;
}
.dt {
margin-top: 20px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 420 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 729 B

View File

@@ -0,0 +1,365 @@
<!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>
<link rel="stylesheet" href="../clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2881065_ghiwlizl24.css">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/task1.css">
</head>
<body>
<div class="header">
<ul class=" center nav">
<li class="reset_n">
<i class="iconfont icon-shouye"></i>
<div class="logo"></div>
</li>
<li class="shu"><a href=""></a>新闻</li><a href=""></a>
<li><a href="">体育</a></li>
<li><a href="">汽车</a></li>
<li><a href="">房产</a></li>
<li><a href="">旅游</a></li>
<li><a href="">教育</a></li>
<li><a href="">时尚</a></li>
<li><a href="">科技</a></li>
<li><a href="">财经</a></li>
<li><a href="">娱乐</a></li>
<li class="more">更多
<i class="iconfont icon-xiala"></i>
<div class="nav_more">
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
<a href="">历史</a>
</div>
</li>
<li class="reset_n">
<a href="">无障碍</a>
</li>
<li class="reset_n">
<a href="">
<i class="iconfont icon-denglu-copy"></i>
登录
</a>
</li>
</ul>
</div>
<div class="content">
<div class="center ct">
<div class="c_left">
<div class="c_left_user">
<a href="">
<img class="c_left_user_portrait"
src="http://5b0988e595225.cdn.sohucs.com/avatar/picon/2014/04/14/139746392399510175.png"
alt="">
</a>
<a href="">
<p>中国新闻网</p>
</a>
<div class="level">
<img src="img/level.png" alt="">
<img src="img/level.png" alt="">
</div>
<div class="read_information ">
<div>
<p>112万</p>
<span>文章</span>
</div>
<div>
<p>658亿</p>
<span>总阅读</span>
</div>
</div>
<div class="see">查看TA的文章></div>
</div>
<div class="c_left_comment">
<p class="c_line">评论</p>
<img src="./img/comment.png" alt="">
<p class="red">126</p>
</div>
<div class="c_left_share">
<p class="c_line">分享</p>
<ul>
<li>
<img src="img/weixin.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="img/weixin.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="img/weixin.png" alt="">
<span>微信分享</span>
</li><li>
<img src="img/weixin.png" alt="">
<span>微信分享</span>
</li>
</ul>
</div>
</div>
<div class="c_center">
<div class="article">
<h2>猪肉价格会继续下降?秋收秋种如何?权威回应来了</h2>
<p class="article_time">2021-10-20 14:30</p>
<img src="img/video.png" alt="">
<p>据农业农村部总农艺师、发展规划司司长曾衍德介绍,今年夏粮量质并增,产量2916亿斤,增加59.3亿斤;早稻实现增产,产量560亿斤,增加14.5亿斤,连续两年增产;秋粮增产已成定局,秋粮面积稳中有增,目前收获已近八成。全年粮食产量将再创历史新高,连续7年保持在1.3万亿斤以上。</p>
<div class="article_bottom">
<div>
<i class="iconfont icon-dianzan"></i>
首赞
</div>
<p>阅读(118万)</p>
</div>
</div>
<div class="allsee">
<div class="allsee_title">
<span>大家都在看</span>
</div>
<ul>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
<li>
<img src="https://p6.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211022/9bcd9ba91007454690603df68ae86246.jpeg" alt="">
<p>俄罗斯将不再对华供电?西方国家难掩兴奋,中国态度耐人寻味
</p>
</li>
</ul>
</div>
<div class="italk">
<div class="italk_title">
<span>我来说两句</span>
<div class="sunshine">
<img src="img/sun.png" alt="">
<div></div>
<span class="red">126</span>
人参与
<span class="red">126</span>
条评论
</div>
</div>
<div class="italk_content">
<textarea name="" id="" cols="30" rows="10"></textarea>
<div class="italk_bottom">
<span>快速登录</span>
<ul>
<li>
<a href="">
<img src="img/a4.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/a4.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/a4.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/a4.png" alt="">
</a>
</li>
</ul>
<div class="italk_botton">
登录并发表
</div>
</div>
<span class="italk_foot">搜狐“我来说两句” 用户公约</span>
</div>
<div class="hottalk">
<div class="hottalk_title">
<span>热门评论</span>
</div>
<ul>
<li>
<img src="http://p6.itc.cn/q_70/images03/20210916/3dbac0fb3bb847dab1634e3c4ea0a78e.jpeg" alt="">
<div class="hottalk_right">
<p class="hottalk_user">执著</p>
<p>特别是秋收还能增长?种粮食全在北方,北方那么多地区水灾看不到吗?还增产了居然,呵呵!</p>
<div>
<span class="float_left">10月20日 19:52</span>
<span class="hottalk_good float_right">回复
<i class="iconfont icon-dianzan "></i>
2
</span>
</div>
</div>
</li>
<li>
<img src="http://p6.itc.cn/q_70/images03/20210916/3dbac0fb3bb847dab1634e3c4ea0a78e.jpeg" alt="">
<div class="hottalk_right">
<p class="hottalk_user">执著</p>
<p>特别是秋收还能增长?种粮食全在北方,北方那么多地区水灾看不到吗?还增产了居然,呵呵!</p>
<div>
<span class="float_left">10月20日 19:52</span>
<span class="hottalk_good float_right">回复
<i class="iconfont icon-dianzan "></i>
2
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="c_right">
<div class="a_search">
<input class="search_t" type="text">
<i class="iconfont icon-sousuo i_search"></i>
</div>
<div class="hot_selected">
<p class="h2_title">热门精选</p>
<div class="Carousel_figure">
<img src="https://p9.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images03/20211023/63b3e35b0c374dc8afa49fa060dd1095.jpeg" alt="">
<i class="iconfont icon-changyong_fanhui left"></i>
<i class="iconfont icon-fanye right"></i>
<p>台独立委 陈柏惟:罢免通过</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="hot_selected_list">
<li>
<img src="https://p3.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211023/7d9a9f6e4f554b4483c62d753f6f66dd.jpeg" alt="">
<p>巩俐被曝将改国籍,直言自己年轻不懂事,...</p>
</li>
<li>
<img src="https://p3.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211023/7d9a9f6e4f554b4483c62d753f6f66dd.jpeg" alt="">
<p>巩俐被曝将改国籍,直言自己年轻不懂事,...</p>
</li><li>
<img src="https://p3.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211023/7d9a9f6e4f554b4483c62d753f6f66dd.jpeg" alt="">
<p>巩俐被曝将改国籍,直言自己年轻不懂事,...</p>
</li>
<li>
<img src="https://p3.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images01/20211023/7d9a9f6e4f554b4483c62d753f6f66dd.jpeg" alt="">
<p>巩俐被曝将改国籍,直言自己年轻不懂事,...</p>
</li>
</ul>
</div>
<div class="hot24">
<p class="h2_title">24小时热文</p>
<ul>
<li>
<div class="hot24_left">
<img src="https://p0.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images03/20211023/98d7e48c1394432b8ca1f0d2cd33c6c0.jpeg" alt="">
<div>1</div>
</div>
<div class="hot24_right">
<p>男子按摩后狂吐,一查竟是脑梗死…医生:这地方别乱按!</p>
<span>268万 阅读</span>
</div>
</li>
<li>
<div class="hot24_left">
<img src="https://p0.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images03/20211023/98d7e48c1394432b8ca1f0d2cd33c6c0.jpeg" alt="">
<div>2</div>
</div>
<div class="hot24_right">
<p>男子按摩后狂吐,一查竟是脑梗死…医生:这地方别乱按!</p>
<span>268万 阅读</span>
</div>
</li>
<li>
<div class="hot24_left">
<img src="https://p0.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images03/20211023/98d7e48c1394432b8ca1f0d2cd33c6c0.jpeg" alt="">
<div>3</div>
</div>
<div class="hot24_right">
<p>男子按摩后狂吐,一查竟是脑梗死…医生:这地方别乱按!</p>
<span>268万 阅读</span>
</div>
</li>
<li>
<div class="hot24_left">
<img src="https://p0.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images03/20211023/98d7e48c1394432b8ca1f0d2cd33c6c0.jpeg" alt="">
</div>
<div class="hot24_right">
<p>男子按摩后狂吐,一查竟是脑梗死…医生:这地方别乱按!</p>
<span>268万 阅读</span>
</div>
</li>
<li>
<div class="hot24_left">
<img src="https://p0.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images03/20211023/98d7e48c1394432b8ca1f0d2cd33c6c0.jpeg" alt="">
</div>
<div class="hot24_right">
<p>男子按摩后狂吐,一查竟是脑梗死…医生:这地方别乱按!</p>
<span>268万 阅读</span>
</div>
</li>
<li>
<div class="hot24_left">
<img src="https://p0.itc.cn/q_70,c_lfill,w_300,h_200,g_faces/images03/20211023/98d7e48c1394432b8ca1f0d2cd33c6c0.jpeg" alt="">
</div>
<div class="hot24_right">
<p>男子按摩后狂吐,一查竟是脑梗死…医生:这地方别乱按!</p>
<span>268万 阅读</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,464 @@
<!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="css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2881065_5znv7t2vnug.css">
<link rel="stylesheet" href="css/task2.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="c_center nav_center">
<img class="logo" src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/new-logo.79c3bfe1.svg" alt="">
<div class="nav_search">
<input type="text">
<div class="nav_search_right">
<i class="iconfont icon-sousuo"></i>
搜索
</div>
</div>
<ul class="nav_right">
<li class="change_red">
<i class="iconfont icon-upload"></i>
<p>上传视频</p>
</li>
<li class="change_red">
<i class="iconfont icon-upload"></i>
<p>上传视频</p>
</li>
<li>
<a href="">登录</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<ul class="nav_list c_center">
<li class="change_red">
<i class="iconfont icon-yiguanzhu"></i>
我的关注
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
<li class="change_red">
<i class="iconfont icon-bofang"></i>
短视频
</li>
</ul>
<div class="content_a c_center">
<div class="video">
<div class="video_title">
<h2>精彩短视频</h2>
<span class="video_title_more">更多></span>
<div class="turn_page">
<i class="iconfont icon-changyong_fanhui"></i>
<span>1/10</span>
<i class="iconfont icon-fanye"></i>
</div>
</div>
<ul>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
<li>
<img src="https://tx2.a.kwimgs.com/upic/2021/10/22/18/BMjAyMTEwMjIxODM3MDBfMTQzNDAzMDA3XzU5NDc5MjUyMDg0XzBfMw==_Bec7d2486c4ea64f4af7d897f617027b8.jpg?tag=1-1635066579-xpcwebhome-0-igfkf2umzk-ef8bc2d90c496b39&clientCacheKey=3xrfcc5x8a69p69.jpg&di=b7a0d02c&bp=14944"
alt="">
<p>为了打败金刚哥斯拉每天都健身</p>
<span>
<i class="iconfont icon-yiguanzhu"></i>
29.3W喜欢
</span>
</li>
</ul>
</div>
<div class="hot">
<div class="hot_title">
<h2>快手热榜</h2>
<div class="turn_page">
<i class="iconfont icon-changyong_fanhui"></i>
<span>1/10</span>
<i class="iconfont icon-fanye"></i>
</div>
</div>
<ul class="hot_content">
<li>
<div class="hot_content_left">
<h3>1</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>2</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>3</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>4</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>5</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>6</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>7</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>8</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>9</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
<li>
<div class="hot_content_left">
<h3>10</h3>
<img src="https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg" alt="">
</div>
<div class="hot_content_right">
<p>华春莹任外交部部长助理</p>
<div class="hot_content_right_hot">
<i class="iconfont icon-huore"></i>
<span>1229.9wre</span>
</div>
</div>
<img class="hot_img" src="https://ali2.a.yximgs.com/udata/pkg/nebula-app/rank_tag_new3x.png"
alt="">
</li>
</ul>
</div>
</div>
<div class="game c_center">
<div class="game_title">
<h2>游戏直播</h2>
<span>更多 ></span>
</div>
<ul class="game_contnet">
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
<li>
<img src="img/uzi.png" alt="">
<p>PEL S4 【第一周】</p>
<span>
<i class="iconfont icon-denglu-copy"></i>
3834人在看
</span>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,173 @@
<!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="css/public.css">
<link rel="stylesheet" href="css/task3.css">
</head>
<body>
<div class="content">
<div class="new c_center">
<div class="new_title">要闻</div>
<div class="new_content">
<div class="new_left">
<div class="new_left_top">
<h2><a href="">习近平签署第九十八号、第九十九号、第一〇〇号主席令</a></h2>
<ul>
<li>
<div>联播+</div>
<a href="">齐鲁大地 总书记留下这些殷殷期盼</a>
</li>
<li>
<div>热解读</div>
<a href="">黄河岸边的</a>
</li>
</ul>
</div>
<div class="Social_news">
<ul class="Social_news_left new_art float_left">
<li><a class="big" 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 class="big" href="">部分地区开展房地产税改革试点工作</a></li>
<li><a href="">全国人大常委会表决通过陆地国界法 明年起施行</a></li>
<li><a href="">全国人大常委会表决通过陆地国界法 明年起施行</a></li>
<li><a href="">全国人大常委会表决通过陆地国界法 明年起施行</a></li>
</ul>
<div class="Social_news_right float_right">
<ul class="new_art">
<li><a class="big" href="">部分地区开展房地产税改革试点工作</a></li>
<li><a href="">全国人大常委会表决通过陆地国界法 明年起施行</a></li>
<li><a href="">全国人大常委会表决通过陆地国界法 明年起施行</a></li>
</ul>
<ul class="tp">
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/24/1635063368680_932.jpg" alt="">
<p>两名16岁少年制止乘客抢方向盘 获“见义勇为”称号</p>
<span>社会新闻</span>
</li>
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/24/1635063368680_932.jpg" alt="">
<p>两名16岁少年制止乘客抢方向盘 获“见义勇为”称号</p>
<span>社会新闻</span>
</li>
</ul>
</div>
</div>
<div class="international_news">
<ul class="tp float_left">
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/24/1635063368680_932.jpg" alt="">
<p>两名16岁少年制止乘客抢方向盘 获“见义勇为”称号</p>
<span>社会新闻</span>
</li>
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/24/1635063368680_932.jpg" alt="">
<p>两名16岁少年制止乘客抢方向盘 获“见义勇为”称号</p>
<span>社会新闻</span>
</li>
</ul>
<ul class="new_art float_right">
<li><a class="big" 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 class="hot">
<div class="hot_title">
<h2>热点专题</h2>
<ul>
<li><a href="">学习强国</a></li>
<li><a href="">新闻+</a></li>
<li><a href="">8点见</a></li>
</ul>
</div>
<ul class="turn_img">
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/9/30/1633006171151_460.jpg" alt="">
<img class="turn_img1" src="img/tp1.png" alt="">
</li>
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/9/30/1633006171151_460.jpg" alt="">
<img class="turn_img1" src="img/tp1.png" alt="">
</li>
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/9/30/1633006171151_460.jpg" alt="">
<img class="turn_img1" src="img/tp1.png" alt="">
</li>
<li>
<img src="https://p3.img.cctvpic.com/photoAlbum/page/performance/img/2021/9/30/1633006171151_460.jpg" alt="">
<img class="turn_img1" src="img/tp1.png" alt="">
</li>
</ul>
</div>
</div>
<div class="new_right">
<ul class="new_right_top">
<li>
<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/23/1634992464012_815.jpg" alt="">
<div class="new_right_top_right">
<a href="">全国第十一届残运会暨第八届特奥会开幕</a>
<div class="red_d">新闻联播</div>
</div>
</li>
<li>
<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/23/1634992464012_815.jpg" alt="">
<div class="new_right_top_right">
<a href="">全国第十一届残运会暨第八届特奥会开幕</a>
<div class="red_d">新闻联播</div>
</div>
</li>
<li>
<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/23/1634992464012_815.jpg" alt="">
<div class="new_right_top_right">
<a href="">全国第十一届残运会暨第八届特奥会开幕</a>
<div class="red_d">新闻联播</div>
</div>
</li>
<li>
<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/23/1634992464012_815.jpg" alt="">
<div class="new_right_top_right">
<a href="">全国第十一届残运会暨第八届特奥会开幕</a>
<div class="red_d">新闻联播</div>
</div>
</li>
<li>
<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/23/1634992464012_815.jpg" alt="">
<div class="new_right_top_right">
<a href="">全国第十一届残运会暨第八届特奥会开幕</a>
<div class="red_d">新闻联播</div>
</div>
</li>
<li>
<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/23/1634992464012_815.jpg" alt="">
<div class="new_right_top_right">
<a href="">全国第十一届残运会暨第八届特奥会开幕</a>
<div class="red_d">新闻联播</div>
</div>
</li>
<li>
<img src="https://p4.img.cctvpic.com/photoAlbum/page/performance/img/2021/10/23/1634992464012_815.jpg" alt="">
<div class="new_right_top_right">
<a href="">全国第十一届残运会暨第八届特奥会开幕</a>
<div class="red_d">新闻联播</div>
</div>
</li>
</ul>
<img class="dt" src="img/dt.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,304 @@
.header {
position: fixed;
width: 100%;
left: 0;
top: 0;
height: 0.9rem;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
border-bottom: 0.05rem solid #f8f8f8;
box-sizing: border-box;
background-color: #fff;
padding: 0 0.3rem;
}
.Shopping_Cart {
font-size: 0.5rem;
}
.edit {
font-size: 0.24rem;
right: 0.3rem;
bottom: 0.24rem;
}
.edit_a {
width: .48rem;
}
.content {
margin-top: 0.9rem;
}
.flagship {
padding: 0rem 0.23rem;
border-bottom: 0.14rem solid #f8f8f8;
}
.flagship_title {
padding: 0.26rem 0rem;
display: flex;
justify-content:space-between;
align-items: center;
border-bottom: solid #f8f8f8 0.01rem;
}
.select {
width: 0.38rem;
height: 0.38rem;
border: solid 0.03rem #9ea2b5;
border-radius: 50%;
}
.flagship_title_left {
display: flex;
align-items: center;
}
.flagship_title_left img {
margin-left: 0.21rem;
width: 0.32rem;
height: 0.32rem;
}
.flagship_title_right {
width: 0.98rem;
height: 0.38rem;
background-color: #fcf2f1;
border-radius: 0.19rem;
font-size: 0.24rem;
color: #ea4e3d;
text-align: center;
}
.flagship_title_left span {
font-size: 0.3rem;
color: #333333;
margin-left: 0.12rem ;
}
.flagship_title_left i {
font-size: 0.03rem;
color: #cccccc;
margin-left: 0.14rem;
}
.activity {
display: flex;
justify-content: space-between;
height: 0.3rem;
align-items: center;
margin: 0.19rem 0;
}
.activity_right {
font-size: 0.26rem;
color: #333333;
}
.activity_left {
display: flex;
font-size: 0.24rem;
color: #333333;
}
.activity_left .full {
width: 0.67rem;
height: 0.3rem;
background-color: #ea4e3d;
border-radius: 0.15rem;
font-size: 0.22rem;
color: #ffffff;
text-align: center;
line-height: 0.3rem;
margin-right: 0.1rem;
margin-left: 0.55rem ;
}
.activity_right i {
font-size: 12px;
}
.commodity {
}
.commodity li {
display: flex;
padding: 0.18rem 0 0.38rem 0;
justify-content: space-between;
align-items: center;
}
.commodity img {
width: 1.56rem;
height: 1.56rem;
}
.commodity_content {
width: 4.61rem;
height: 1.53rem;
}
.commodity_content_top {
font-size: 0.28rem;
color: #333333;
}
.commodity_content_center {
font-size: 0.24rem;
color: #999999;
}
.commodity_content_bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.commodity_content_bottom_left {
font-size: 0.24rem;
color: #ea4e3d;
}
.commodity_content_bottom_right {
display: flex;
width: 1.76rem;
height: 0.46rem;
border-radius: 0.05rem;
border: solid 0.01rem #dbdbdb;
}
.commodity_content_bottom_right input {
width: 0.86rem;
border: none;
text-align: center;
}
.commodity_content_bottom_right div {
height: 0.46rem;
width: 0.46rem;
border-right: solid 0.01rem #dbdbdb;
font-size: 0.3rem;
text-align: center;
}
.commodity_content_bottom_right div:last-child {
border-right: none;
border-left: solid 0.01rem #dbdbdb;
}
.out {
padding: 0rem 0.23rem;
}
.wu {
width: 0.36rem !important;
height: 0.7rem !important;
}
.tm {
opacity: 0.5;
}
.out {
border-bottom: none;
}
.recommend_title{
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f8f8f8;
padding: 0.35rem 0;
}
.recommend_title img {
width: 0.39rem;
height: 0.17rem;
}
.recommend_title div {
margin: 0 0.17rem;
font-size: 0.28rem;
color: #333333;
}
.tj {
display: flex;
padding: 0 0.24rem;
justify-content: space-between;
}
.tj li {
display: flex;
justify-content: space-between;
flex-direction: column;
box-sizing: border-box;
flex-wrap: wrap;
padding:0 0.15rem 0.26rem 0.15rem;
}
.tj p{
font-size: 0.24rem;
color: #333333;
margin-bottom: 0.23rem;
}
.tj span{
font-size: 0.2rem;
color: #e34749;
}
.more {
height: 5rem;
}
.settlement {
width: 100%;
box-sizing: border-box;
padding:0 0.24rem;
height: 0.92rem;
background-color: #ffffff;
position: fixed;
left: 0;
bottom: 1rem;
font-size: 0.3rem;
color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
border-top: solid 0.01rem rgba(153, 153, 153, 0.137);
}
.Select_all {
display: flex;
font-size: 0.28rem;
color: #333333;
}
.Select_all .select {
margin-right: 0.11rem;
}
.settlement_sub {
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
font-size: 0.28rem;
color: #fff;
line-height: 0.66rem;
text-align: center;
}
.footer_real {
width: 100%;
height: 1rem;
background-color: #000000;
position: fixed;
left: 0;
bottom: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding:0 0.39rem;
}
.footer_real li {
font-size: 0.3rem;
color: #ffffff;
}

View File

@@ -0,0 +1,398 @@
.header {
position: fixed;
width: 100%;
height: 0.9rem;
left: 0;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0.36rem;
z-index: 999;
background-color: #fff;
}
.content {
margin-top: 0.9rem;
}
.header_left {
width: 0.15rem;
height: 0.29rem;
}
.header_center {
width: 5.66rem;
height: 0.6rem;
background-color: #f2f2f2;
border-radius: 0.3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_right {
width: 0.33rem;
height: 0.36rem;
}
.header_center img {
width: 0.32rem;
height: 0.34rem;
margin-left: 0.24rem;
}
.header_center input {
background-color: rgba(255, 255, 255, 0);
border: none;
flex: 1;
}
.turn {
position: relative;
width: 100%;
}
.turn img {
width: 100%;
}
.living {
position: absolute;
display: flex;
top: 0.97rem;
right: 0.25rem;
flex-direction: column;
align-items: center;
justify-content: center;
width: 0.98rem;
height: 1.28rem;
background-color: #ffffff80;
border-radius: 0.2rem;
}
.living img {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
}
.living span {
zoom: 0.8;
font-size: 0.2rem;
color: #1b1b1b;
margin-top: 0.15rem;
}
.turn ul {
position: absolute;
display: flex;
left: 50%;
transform: translateX(-50%);
bottom: 0.25rem;
width: 0.75rem;
justify-content: space-between;
}
.msg {
background-color: #ffffff;
padding-bottom: 0.36rem;
padding-top: 0.49rem;
display: flex;
flex-direction: column;
padding-left: 0.3rem;
border-bottom: 0.07rem solid #fdfdfd;
}
.msg .msg_name {
height: 0.23rem;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
margin-top: 0.24rem;
}
.Price {
display: flex;
}
.Price_left {
width: 1.43rem;
height: 0.26rem;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #ea4e3d;
}
.Price_right {
height: 0.19rem;
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #737373;
text-decoration: line-through;
}
.deliver {
border-bottom: 0.07rem solid #fdfdfd;
}
.deliver_top {
display: flex;
justify-content: space-between;
}
.deliver_left {
display: flex;
}
.deliver span {
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #737373;
margin-right: 0.21rem;
}
.deliver img {
width: 0.19rem;
height: 0.25rem;
margin-right: 0.08rem;
}
.deliver p {
font-size: 0.2rem;
color: #000000;
}
.deliver div {
font-size: 0.2rem;
color: #737373;
}
.deliver_bottom {
display: flex;
justify-content: space-between;
}
.deliver_bottom i {
height: 0.26rem;
color: #aaaaaa;
}
li {
height: 0.68rem;
border-bottom: solid 0.01rem rgba(153, 153, 153, 0.199);
align-items: center;
margin-left: 0.38rem;
margin-right: 0.55rem;
}
li:last-child {
border-bottom: none;
}
.turn li {
width: 0.1rem;
height: 0.1rem;
background-color: #fff;
border-radius: 50%;
margin-left: 0rem;
margin-right: 0rem;
}
.turn li:first-child {
background-color: #ff7b41;
}
.li_left {
display: flex;
}
.li_left span {
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #737373;
margin-right: 0.21rem;
}
.li_left img {
width: 0.19rem;
height: 0.25rem;
margin-right: 0.08rem;
}
.li_left p {
font-size: 0.2rem;
color: #000000;
}
.li_left div {
font-size: 0.2rem;
color: #f09c48;
margin-right: 0.41rem;
}
.quantity li {
display: flex;
justify-content: space-between;
}
.quantity {
border-bottom: 0.07rem solid #fdfdfd;
}
.quantity i {
height: 0.26rem;
color: #aaaaaa;
}
.choice div {
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #2b2b2b;
}
.explain1 {
font-size: 0.2rem;
letter-spacing: 0.004rem;
color: #000000 !important;
}
.explain1 {
margin-right: 0.09rem !important;
align-items: baseline;
}
.shop {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0.52rem 0.27rem 0.58rem 0.24rem;
}
.shop img {
width: 0.78rem;
height: 0.78rem;
border-radius: 0.05rem;
}
.shop_right {
text-align: center;
line-height: 0.54rem;
width: 1.48rem;
height: 0.54rem;
border-radius: 0.27rem;
border: solid 0.01rem #4799ee;
font-size: 0.24rem;
color: #4799ee;
}
.shop_left {
display: flex;
}
.shop_left p {
font-size: 0.28rem;
letter-spacing: 0.014rem;
color: #000000;
}
.shop_left span {
font-size: 0.22rem;
color: #999999;
}
.shop_left div {
height: 0.78rem;
display: flex;
flex-direction: column;
margin-left: 0.21rem;
}
.Commodity_information {
width: 100%;
height: 0.83rem;
background-color: #ffffff;
font-size: 0.2rem;
line-height: 0.83rem;
letter-spacing: 0.01rem;
text-align: center;
color: #979696;
}
.none {
height: 3.5rem;
}
.footer {
position: fixed;
z-index: 999;
left: 0;
bottom: 0;
width: 100%;
height: 0.98rem;
background-color: #ffffff;
border: solid 0.01rem #f4f4f4;
display: flex;
justify-content: space-between;
padding-left: 0.41rem;
padding-right: 0.3rem;
box-sizing: border-box;
align-items: center;
}
.purchase {
width: 4.2rem;
height: 0.68rem;
border-radius: 0.34rem;
display: flex;
text-align: center;
line-height: 0.68rem;
}
.purchase .shopcar {
width: 2.1rem;
height: 0.68rem;
background-color: #f5f2f2;
border-radius: 0.34rem 0rem 0rem 0.34rem;
font-size: 0.28rem;
letter-spacing: 0.006rem;
color: #747474;
position: relative;
}
.purchase .purchase_ {
width: 2.1rem;
height: 0.68rem;
background-color: #5697f4;
border-radius: 0rem 0.34rem 0.34rem 0rem;
font-size: 0.28rem;
letter-spacing: 0.006rem;
color: #ffffff;
}
.footer span {
font-size: 0.2rem;
letter-spacing: 0.02rem;
color: #999999;
width: 0.9rem;
text-align: center;
}
.footer ul {
display: flex;
}
.footer img {
width: 0.41rem;
height: 0.36rem;
}
.footer ul li{
border-bottom:none;
margin:0;
margin-right: 0.46rem;
width: 0.rem;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
}
.shopcar_a {
position: relative;
}
.shopcar_c {
position: absolute;
width: 0.34rem;
height: 0.24rem;
background-color: #ffffff;
border-radius: 0.12rem;
border: solid 0.01rem #ea4e3d;
font-size: 0.2rem;
color: #ea4e3d;
text-align: center;
line-height: 0.24rem;
right: 0;
top: -0.1rem;
}

View File

@@ -0,0 +1,61 @@
.header {
position: fixed;
width: 100%;
height: 0.9rem;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: 999;
background-color: #fff;
font-size: 0.4rem;
color: #1b1b1b;
}
.header img {
width: 0.15rem;
height: 0.29rem;
position: absolute;
left: 0.42rem;
}
.content {
margin-top: 2.4rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
height: 5.1rem;
}
.content img {
width: 1.56rem;
height: 1.92rem;
}
p {
font-size: 0.34rem;
color: #2b2b2b;
}
p span {
color: #ea4e3d;
}
.msg {
font-size: 0.28rem;
color: #aaaaaa;
}
.details {
width: 5.8rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
font-size: 0.28rem;
color: #ffffff;
text-align: center;
line-height: 0.66rem;
}

View File

@@ -0,0 +1,7 @@
position: fixed;
width: 100%;
left: 0;
top: 0;

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 611 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 739 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 575 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

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,161 @@
<!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="css/public.css">
<link rel="stylesheet" href="css/task1.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2881065_5znv7t2vnug.css">
</head>
<body>
<div class="header">
<div class="edit_a"></div>
<div class="Shopping_Cart">购物车</div>
<div class="edit">编辑</div>
</div>
<div class="content">
<div class="flagship">
<div class="flagship_title">
<div class="flagship_title_left">
<div class="select"></div>
<img src="img/shopimg.png" alt="">
<span>官方旗舰店</span>
<i class="iconfont icon-fanye"></i>
</div>
<div class="flagship_title_right">优惠券</div>
</div>
<div class="activity">
<div class="activity_left">
<div class="full">满减</div>
满100减5元优惠活动,付款减5元
</div>
<div class="activity_right">
再逛逛
<i class="iconfont icon-fanye"></i>
</div>
</div>
<ul class="commodity">
<li>
<div class="select"></div>
<img src="img/tv.png" alt="">
<div class="commodity_content">
<div class="commodity_content_top">旗舰店111111KD-55X9000E 55英K HDR智能液晶电视银色</div>
<div class="commodity_content_center">银色,65寸</div>
<div class="commodity_content_bottom">
<div class="commodity_content_bottom_left">¥5,999.00</div>
<di class="commodity_content_bottom_right">
<div>-</div>
<input type="text" value="1">
<div class="c_r">+</div>
</di>
</div>
</div>
</li>
<li>
<div class="select"></div>
<img src="img/tv.png" alt="">
<div class="commodity_content">
<div class="commodity_content_top">旗舰店111111KD-55X9000E 55英K HDR智能液晶电视银色</div>
<div class="commodity_content_center">银色,65寸</div>
<div class="commodity_content_bottom">
<div class="commodity_content_bottom_left">¥5,999.00</div>
<di class="commodity_content_bottom_right">
<div>-</div>
<input type="text" value="1">
<div class="c_r">+</div>
</di>
</div>
</div>
</li>
</ul>
</div>
<div class="flagship out">
<div class="flagship_title">
<div class="flagship_title_left">
<div class="select"></div>
<img src="img/shopimg.png" alt="">
<span>海外自营</span>
<i class="iconfont icon-fanye"></i>
</div>
<div class=""></div>
</div>
<ul class="commodity">
<li>
<div class="select"></div>
<img src="img/tv.png" alt="">
<div class="commodity_content">
<div class="commodity_content_top">旗舰店111111KD-55X9000E 55英K HDR智能液晶电视银色</div>
<div class="commodity_content_center">银色,65寸</div>
<div class="commodity_content_bottom">
<div class="commodity_content_bottom_left">¥5,999.00</div>
<di class="commodity_content_bottom_right">
<div>-</div>
<input type="text" value="1">
<div class="c_r">+</div>
</di>
</div>
</div>
</li>
<li class="tm">
<img src="img/wu.png" class="wu" alt="">
<img src="img/tv.png" alt="">
<div class="commodity_content">
<div class="commodity_content_top">旗舰店111111KD-55X9000E 55英K HDR智能液晶电视银色</div>
<div class="commodity_content_center">银色,65寸</div>
<div class="commodity_content_bottom">
<div class="commodity_content_bottom_left">¥5,999.00</div>
</di>
</div>
</div>
</li>
</ul>
</div>
<div class="recommend">
<div class="recommend_title">
<img src="img/left.png" alt="">
<div>为您推荐</div>
<img src="img/right.png" alt="">
</div>
<ul class="tj">
<li class="">
<img src="img/tv.png" alt="">
<p>爱图图正1.5匹 定速 品圆冷暖 壁挂式空调 KFR-35...</p>
<span>¥3999.00</span>
</li>
<li class="">
<img src="img/tv.png" alt="">
<p>爱图图正1.5匹 定速 品圆冷暖 壁挂式空调 KFR-35...</p>
<span>¥3999.00</span>
</li>
</ul>
</div>
</div>
<div class="more">
</div>
<div class="footer">
<div class="settlement">
<div class="Select_all">
<div class="select"></div>
<p>全选</p>
</div>
<span>合计: ¥5900.00</span>
<div class="settlement_sub">结算</div>
</div>
</div>
<ul class="footer_real">
<li>首页</li>
<li>好友</li>
<li>购物车</li>
<li class="footer_Select">圈子</li>
<li>我的</li>
</ul>
</body>
<script src="js/rom.js"></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>Document</title>
<link rel="stylesheet" href="../clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2881065_5znv7t2vnug.css">
<link rel="stylesheet" href="css/task2.css">
<link rel="stylesheet" href="css/public.css">
</head>
<body>
<div class="header">
<img class="header_left" src="img/return.png"></img>
<div class="header_center">
<img src="img/search.png" alt="">
<input type="text">
</div>
<img class="header_right" src="img/share.png" ></img>
</div>
<div class="content">
<div class="turn">
<img src="img/bg53.png" alt="">
<div class="living">
<img src="img/live.png" alt="">
<span>正在直播</span>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="msg">
<div class="Price">
<div class="Price_left">¥ 159.00</div>
<div class="Price_right">¥ 199.00</div>
</div>
<div class="msg_name">【大牌驾到】NBA新款秋季女鞋NBA新款秋季女鞋</div>
</div>
<ul class="deliver">
<li class="deliver_top">
<div class="li_left">
<span>发货</span>
<img src="img/position.png" alt="">
<p>浙江杭州 | 快递:0.00</p>
</div>
<div class="deliver_right">月销 1</div>
</li>
<li class="deliver_bottom">
<div class="deliver_left">
<span>发货</span>
<img src="img/position.png" alt="">
<p>浙江杭州 | 快递:0.00</p>
</div>
<i class="iconfont icon-fanye"></i>
</li>
</ul>
<ul class="quantity">
<li class="collect_coupons">
<div class="li_left">
<span>领券</span>
<div class="collect1">满100减8</div>
<div class="collect2">满200减30</div>
</div>
<i class="iconfont icon-fanye"></i>
</li>
<li class="choice">
<div class="li_left">
<span>领券</span>
<div class="collect1">已选 黑色,38, 1件</div>
</div>
<i class="iconfont icon-fanye"></i>
</li>
<li class="explain">
<div class="li_left">
<span>领券</span>
<div class="explain1">
<i class="iconfont icon-bofang"></i>
支持48小时快速退款
</div>
<div class="explain1">
<i class="iconfont icon-bofang"></i>
支持7天无忧退换货
</div>
</div>
<i class="iconfont icon-fanye"></i>
</li>
</ul>
<div class="shop">
<div class="shop_left">
<img src="img/shop.png" alt="">
<div>
<p>某某女鞋店</p>
<span>粉丝3.4万 </span>
</div>
</div>
<div class="shop_right">进店逛逛</div>
</div>
<div class="Commodity_information">商品信息</div>
<div class="none"></div>
</div>
<div class="footer">
<ul>
<li>
<img src="img/shopimg.png" alt="">
<span>店铺</span>
</li>
<li class="shopcar_a">
<img src="img/shopcar.png" alt="">
<span>购物车</span>
<div class="shopcar_c">24</div>
</li>
</ul>
<div class="purchase">
<div class="shopcar">加入购物车
</div>
<div class="purchase_">立即购买</div>
</div>
</div>
</body>
<script src="js/rom.js"></script>
</html>

View File

@@ -0,0 +1,28 @@
<!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="css/public.css">
<link rel="stylesheet" href="css/task3.css">
</head>
<body>
<div class="header">
<img src="img/fh.png" alt="">
退款进度
</div>
<div class="content">
<img src="img/y.png" alt="">
<p>
<span>259.98</span>
元,退款成功
</p>
<div class="msg">商家已经同意您的退款申请</div>
<div class="details">查看详情</div>
</div>
</body>
<script src="js/rom.js"></script>
</html>

View File

@@ -0,0 +1,400 @@
.header {
width: 100%;
height: 0.9rem;
display: flex;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
padding: 0.15rem 0.3rem;
box-sizing: border-box;
z-index: 999;
}
.header .return {
width: 0.2rem;
height: 0.33rem;
margin-right: 0.4rem;
margin-top: 0.14rem;
}
.search {
background-color: #f2f2f2;
border-radius: 0.3rem;
flex: 1;
}
.search {
display: flex;
padding: 0.13rem 0.24rem;
}
.search img {
margin-right: 0.18rem;
}
.search input {
border: none;
background-color: rgba(255, 255, 255, 0);
font-size: 0.26rem;
color: #808080;
}
.shop {
height: 3.09rem;
background: url(../img/shop_top.png);
background-size: contain;
display: flex;
flex-direction: column;
justify-content: end;
padding: 0 0.3rem;
}
.shop_rel {
width: 100%;
height: 0.9rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.12rem;
}
.shop_left {
display: flex;
}
.shop_left img {
margin-right: 0.25rem;
width: 0.9rem;
height: 0.9rem;
}
.shop_name {
font-size: 0.3rem;
color: #ffffff;
margin-bottom: 0.18rem;
}
.shop_fans {
font-size: 0.22rem;
color: #ffffff;
}
.shop_right {
width: 1.08rem;
height: 0.48rem;
background-color: #ea4e3d;
border-radius: 0.24rem;
font-size: 0.26rem;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.shop_list {
width: 100%;
align-items: flex-end;
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
margin-top: 0.33rem;
}
.shop_list li {
font-size: 0.26rem;
color: #ffffff;
}
.Discount {
display: flex;
background: url(../img/shop_bottom.png);
padding-top: 0.21rem;
padding-bottom: 0.29rem;
padding-left: 0.24rem;
overflow-y: scroll;
}
.Discount li{
width: 2.93rem;
height: 1.28rem;
background:url(../img/Discount.png);
background-size: contain;
border-radius: 0.25rem;
display: flex;
justify-content: space-between;
text-align: center;
align-items: center;
margin-right: 0.11rem;
}
.Discount {
}
.Discount_left {
width: 1.56rem;
}
.Discount_right {
width: 1.33rem;
}
.Discount_left p{
font-size: 0.58rem;
color: #ffffff;
}
.Discount_left div{
font-size: 0.2rem;
color: #ffffff;
zoom: 0.8;
}
.Discount_right p{
font-size: 0.3rem;
color: #659fdc;
}
.Discount_right div{
width: 1.05rem;
height: 0.36rem;
border-radius: 0.18rem;
background-color: #659fdc;
font-size: 0.2rem;
color: #ffffff;
margin: 0 auto;
margin-top: 0.18rem;
}
.turn {
position: relative;
height: 7.5rem;
}
.turn img {
width: 100%;
}
.turn ul {
position: absolute;
bottom: 0.08rem;
left: 50%;
display: flex;
justify-content: space-between;
transform: translateX(-50%);
}
.turn li {
width: 0.16rem;
height: 0.16rem;
background-color: #ffffff;
opacity: 0.5;
border-radius: 50%;
margin-right: 0.08rem;
}
.turn li:last-child {
margin-right: 0;
}
.live {
display: flex;
width: 7.02rem;
height: 1.9rem;
margin: 0.48rem 0.25rem;
justify-content: space-between;
}
.live_left img {
width: 1.88rem;
height: 1.88rem;
margin-right: 0.26rem;
}
.live_red {
width: 1.07rem;
height: 0.38rem;
background-color: #ea3543;
font-size: 0.26rem;
color:#ffffffde;
border-radius: 0.1rem;
text-align: center;
margin-right: 0.13rem;
}
.live_left {
display: flex;
}
.live_center {
display: flex;
flex-direction: column;
justify-content: center;
}
.live_center_zb {
display: flex;
}
.live_center p {
font-size: 0.32rem;;
color: #323232;
margin-bottom: 0.2rem;
}
.live_left span {
font-size: 0.26rem;
color: #595959;
}
.live_right p {
font-size: 0.22rem;
color: #ea363d;
}
.heart {
width: 0.44rem;
height: 0.44rem;
margin-bottom: 0.11rem;
}
.live_right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Second_purchase_title {
display: flex;
justify-content: space-between;
padding-left: 0.28rem;
padding-right: 0.26rem;
align-items: center;
}
.s_p_t_left {
display: flex;
align-items: center;
}
.s_p_t_left img {
width: 0.31rem;
height: 0.31rem;
}
.s_p_t_left p {
margin-left: 0.13rem;
font-size: 0.32rem;
color: #333333;
}
.s_p_t_right {
font-size: 0.26rem;
color: #999999;
display: flex;
align-items: center;
}
.s_p_t_right span {
font-size: 0.26rem;
color: #999999;
}
.s_p_t_right ul {
margin-left: 0.09rem;
display: flex;
}
.s_p_t_right li {
display: flex;
}
.s_p_t_right li p{
width: 0.32rem;
height: 0.32rem;
background-color: #eeeeee;
border-radius: 0.02rem;
font-size: 0.24rem;
color: #333333;
text-align: center;
}
.s_p_t_right div {
width: 0.25rem;
text-align: center;
font-size: 0.26rem;
color: #999999;
}
.Second_purchase_content {
margin: 0.42rem 0.24rem 0.19rem 0.24rem;
}
.Second_purchase_content img{
width: 1.6rem;
border-radius: 0.06rem;
margin-bottom: 0.19rem;
}
.Second_purchase_content {
display: flex;
}
.Second_purchase_content li {
margin-right: 0.21rem;
}
.Second_purchase_content p {
font-size: 0.32rem;
color: #ea4e3d;
}
.Second_purchase_content p span {
font-size: 0.24rem;
color: #ea4e3d;
}
.Second_purchase {
border-bottom: solid #f9f9f9 0.2rem;
}
.Second_purchase_content {
margin-bottom: 0.7rem;
}
.today_title {
padding-top: 0.43rem;
display: flex;
justify-content: center ;
padding-bottom: 0.32rem;
border-bottom: solid #f6f6f6 0.01rem;
}
.today_title div{
font-size: 0.32rem;
color: #4799ee;
margin: 0 0.17rem;
}
.today_content li {
padding: 0.19rem;
display: flex;
}
.sp {
width: 1.7rem;
height: 2.06rem;
margin-right: 0.21rem;
}
.today_content_right {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.today_content_right p {
font-size: 0.28rem;
color: #333333;
}
.today_content_num {
display: flex;
align-items: center;
}
.today_content_n {
display: flex;
justify-content: space-between;
align-items: center;
}
.today_content_num p{
font-size: 0.34rem;
color: #ea4e3d;
}
.today_content_user img {
width: 0.42rem;
height: 0.42rem;
}
.today_content_user img:last-child {
position: relative;
right:0.15rem
}
.today_content_num span{
margin-left: 0.26rem;
font-size: 0.24rem;
color: #999999;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 978 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: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 529 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

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,224 @@
<!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="css/">
<link rel="stylesheet" href="css/t50.css">
</head>
<body>
<div class="header">
<img src="img/return.png" class="return" alt="">
<div class="search">
<img src="img/search.png" alt="">
<input type="text" value="试试搜索夏季连衣裙">
</div>
</div>
<div class="content">
<div class="shop">
<div class="shop_rel">
<div class="shop_left">
<img src="img/headimg.png" alt="">
<div>
<p class="shop_name">菲尔斯盾旗舰店</p>
<p class="shop_fans">粉丝3.4万 </p>
</div>
</div>
<div class="shop_right">+ 关注</div>
</div>
<ul class="shop_list">
<li>首页</li>
<li>商品</li>
<li>上新</li>
<li>优惠</li>
<li>动态</li>
</ul>
</div>
<ul class="Discount">
<li>
<div class="Discount_left">
<p>¥ 5</p>
<div>满99元可使用</div>
</div>
<div class="Discount_right">
<p>优惠券</p>
<div>立即领取</div>
</div>
</li>
<li>
<div class="Discount_left">
<p>¥ 5</p>
<div>满99元可使用</div>
</div>
<div class="Discount_right">
<p>优惠券</p>
<div>立即领取</div>
</div>
</li>
<li>
<div class="Discount_left">
<p>¥ 5</p>
<div>满99元可使用</div>
</div>
<div class="Discount_right">
<p>优惠券</p>
<div>立即领取</div>
</div>
</li>
<li>
<div class="Discount_left">
<p>¥ 5</p>
<div>满99元可使用</div>
</div>
<div class="Discount_right">
<p>优惠券</p>
<div>立即领取</div>
</div>
</li>
<li>
<div class="Discount_left">
<p>¥ 5</p>
<div>满99元可使用</div>
</div>
<div class="Discount_right">
<p>优惠券</p>
<div>立即领取</div>
</div>
</li>
</ul>
</div>
<div class="turn">
<img src="img/banner1.png" alt="">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="live">
<div class="live_left">
<img src="img/zb.png" alt="">
<div class="live_center">
<p>秒杀终极专场!!!</p>
<div class="live_center_zb">
<div class="live_red ">●直播中</div>
<span>3857观看</span>
</div>
</div>
</div>
<div class="live_right">
<img class="heart" src="img/heart.png"></img>
<p>2349</p>
</div>
</div>
<div class="Second_purchase">
<div class="Second_purchase_title">
<div class="s_p_t_left">
<img src="img/clock.png" alt="">
<p>限时秒购</p>
</div>
<div class="s_p_t_right">
<span>距结束</span>
<ul>
<li>
<p>30</p>
<div>:</div>
</li>
<li>
<p>08</p>
<div>:</div>
</li>
<li>
<p>42</p>
</li>
</ul>
</div>
</div>
<ul class="Second_purchase_content">
<li>
<img src="img/clock_img.png" alt="">
<p>388.<span>00</span></p>
</li>
<li>
<img src="img/clock_img.png" alt="">
<p>388.<span>00</span></p>
</li>
<li>
<img src="img/clock_img.png" alt="">
<p>388.<span>00</span></p>
</li>
<li>
<img src="img/clock_img.png" alt="">
<p>388.<span>00</span></p>
</li>
</ul>
</div>
<div class="today">
<div class="today_title">
<img src="img/left.png" alt="">>
<div>今日必拼</div>
<img src="img/right.png" alt="">
</div>
<ul class="today_content">
<li>
<img class="sp" src="img/sp.png" alt="">
<div class="today_content_right">
<p>2019夏季新款牛仔短裤女宽松阔腿热裤韩
版百搭胖mm夏装显瘦潮</p>
<div class="today_content_n">
<div class="today_content_num">
<p>¥200.00</p>
<span>已拼10万+件</span>
</div>
<div class="today_content_user">
<img src="img/user1.png" alt="">
<img src="img/user2.png" alt="">
</div>
</div>
</div>
</li>
<li>
<img class="sp" src="img/sp.png" alt="">
<div class="today_content_right">
<p>2019夏季新款牛仔短裤女宽松阔腿热裤韩
版百搭胖mm夏装显瘦潮</p>
<div class="today_content_n">
<div class="today_content_num">
<p>¥200.00</p>
<span>已拼10万+件</span>
</div>
<div class="today_content_user">
<img src="img/user1.png" alt="">
<img src="img/user2.png" alt="">
</div>
</div>
</div>
</li>
<li>
<img class="sp" src="img/sp.png" alt="">
<div class="today_content_right">
<p>2019夏季新款牛仔短裤女宽松阔腿热裤韩
版百搭胖mm夏装显瘦潮</p>
<div class="today_content_n">
<div class="today_content_num">
<p>¥200.00</p>
<span>已拼10万+件</span>
</div>
<div class="today_content_user">
<img src="img/user1.png" alt="">
<img src="img/user2.png" alt="">
</div>
</div>
</div>
</li>
v
</ul>
</div>
<div class="footer"></div>
</body>
<script src="js/rom.js"></script>
</html>

View File

@@ -0,0 +1,13 @@
.pad {
padding-right: 0.24rem;
padding-left: 0.24rem;
}
.ss {
border-bottom: solid 0.01rem #f3f3f3;
padding-top: 0.3;
padding-bottom: 0.3;
}
.solidd {
border-bottom: solid 0.01rem #f3f3f3;
}

View File

@@ -0,0 +1,316 @@
body {
background-color: #f2f2f2;
}
.header {
width: 100%;
height: 0.9rem;
display: flex;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
box-sizing: border-box;
z-index: 999;
align-items: center;
background-color: #fff;
border-bottom: solid 0.01rem #f3f3f3;
}
.header img {
width: 0.2rem;
height: 0.33rem;
}
.header_center {
font-size: 0.34rem;
color: #333333;
}
.header_right {
width: 0.2rem;
height: 0.33rem;
}
.user {
margin-top: 0.91rem;
background: url(../img/bg_user_msg.png);
background-size: cover;
padding-top: 0.24rem;
padding-bottom: 0.36rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.user_name {
font-size: 0.3rem;
color: #333333;
}
.user_phone {
font-size: 0.3rem;
color: #333333;
}
.user_msg p {
font-size: 0.24rem;
}
.user img {
width: 0.14rem;
height: 0.26rem;
}
.user_msg_top {
margin-bottom: 0.17rem;
}
.payment {
padding-top: 0.31rem;
padding-bottom: 0.26rem;
background-color: #fff;
margin-top: 0.19rem;
margin-bottom: 0.16rem;
display: flex;
justify-content: space-between;
}
.payment_mode {
font-size: 0.28rem;
color: #333333;
}
.payment_r {
display: flex;
align-items: center;
}
.payment_r span {
font-size: 0.28rem;
color: #333333;
}
.payment_r_spot {
display: flex;
margin-left: 0.07rem;
margin-top: 0.06rem;
}
.payment_r_spot li {
height: 0.06rem;
width: 0.06rem;
background-color: #cccccc;
border-radius: 50%;
margin-right: 0.04rem;
}
.payment_r_spot li:last-child {
margin-right: 0;
}
.payment_r_spot li:nth-child(2) {
height: 0.1rem;
width: 0.1rem;
background-color: #979393;
}
.shoppingtitle {
padding-top: 0.2rem;
padding-bottom: 0.17rem;
background-color: #fff;
}
.shop_img {
width: 0.24rem;
height: 0.22rem;
}
.shoppingtitle span {
font-size: 0.26rem;
color: #333333;
margin-left: 0.06rem;
}
.shopping_right {
width: 0.1rem;
height: 0.19rem;
margin-left: 0.16rem;
}
.shopping_list li {
padding-top: 0.29rem;
padding-bottom: 0.29rem;
background-color: #fff;
display: flex;
}
.shopping_list img {
width: 2rem;
height: 1.65rem;
margin-right: 0.36rem;
}
.shopping_list_center {
width: 3.18rem;
}
.shopping_list p {
font-size: 0.28rem;
color: #333333;
margin-bottom: 0.15rem;
line-height: 0.3rem;
}
.shop_info {
margin-bottom: 0.05rem;
}
.shopping_list_center {
display: flex;
flex-direction: column;
justify-content: center;
}
.shop_info span {
font-size: 0.2rem;
color: #999999;
margin-right: 0.36rem;
zoom:0.8;
}
.shop_money_red span {
font-size: 0.2rem;
color: #ea4e3d;
}
.shop_money_red span:nth-child(2){
font-size: 0.34rem;
}
.shop_money_red span:nth-child(3) {
font-size: 0.24rem;
}
.shop_num_x {
display: flex;
font-size: 0.2rem;
color: #999999;
align-items: flex-end;
justify-content: center;
flex: 1;
padding-bottom: 0.18rem;
}
.shopp_remarks {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
display: flex;
background-color: #fff;
}
.shopp_remarks span {
font-size: 0.3rem;
color: #333333;
margin-right: 0.31rem;
}
.shopp_remarks input {
border: none;
background-color: rgba(255, 255, 255, 0);
flex: 1;
color: #aaaaaa;
}
.additional_costs_Discount p {
font-size: 0.24rem;
color: #333333;
}
.additional_costs_Discount span {
font-size: 0.24rem;
color: #f09c48;
}
.additional_costs_express p {
font-size: 0.24rem;
color: #333333;
}
.additional_costs_express span {
font-size: 0.24rem;
color: #333333;
}
.Commodity_amount p {
font-size: 0.3rem;
color: #333333;
}
.Commodity_amount span {
font-size: 0.34rem;
color: #ea4e3d;
}
.additional_costs {
display: flex;
flex-direction: column;
padding-top: 0.22rem;
padding-bottom: 0.16rem;
}
.additional_costs div {
display: flex;
justify-content: space-between;
margin-bottom: 0.24rem;
}
.additional_costs div:last-child {
display: flex;
justify-content: space-between;
margin-bottom: 0;
}
.Commodity_amount {
display: flex;
justify-content: space-between;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
.cost li {
background-color: #fff;
}
.shopping {
margin-bottom: 0.16rem;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
height: 1rem;
width: 100%;
background-color: #fff;
display: flex;
justify-content: end;
padding: 0.16rem 0.24rem;
box-sizing: border-box;
z-index: 999;
align-items: center;
}
.footer_nub {
font-size: 0.26rem;
font-weight: normal;
color: #c6c6c6;
}
.Total_price {
font-size: 0.3rem;
color: #000000;
margin-left: 0.27rem;
}
.settlement {
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
font-size: 0.28rem;
color: #ffffff;
line-height: 0.66rem;
text-align: center;
margin-left: 0.42rem;
}
.end {
height: 1.12rem;
}

View File

@@ -0,0 +1,162 @@
.header {
width: 100%;
height: 0.9rem;
display: flex;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
padding: 0 0.37rem;
box-sizing: border-box;
z-index: 999;
align-items: center;
}
.header .scanning {
width: 0.42rem;
height: 0.42rem;
}
.nav_Select {
position: relative;
}
.nav_Select_c {
position: absolute;
width: 0.35rem;
height: 0.02rem;
background-color: #ffffff;
border-radius: 0.01rem;
bottom: -0.1rem;
left:50%;
transform: translateX(-50%);
}
.nav {
display: flex;
}
.nav li {
font-size: 0.3rem;
color: #fefefe;
margin-right: 0.23rem;
}
.nav li:last-child {
margin-left: 0;
}
.header .search {
width: 0.43rem;
height: 0.43rem;
}
.content_c {
height: calc(100% - 1rem);
position: relative;
}
.backgroung {
width: 100%;
height:100%;
}
.right {
position: absolute;
right: 0.19rem;
bottom: 0.14rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.right li {
margin-top: 0.18rem;
display: flex;
flex-direction: column;
align-items: center;
}
.right li span {
margin-top: 0.13rem;
font-size: 0.2rem;
color: #ffffff;
}
.user img {
width: 0.96rem;
height: 0.97rem;
border: solid 0.04rem #ffffff;
border-radius: 50%;
}
.heart img {
width: 0.68rem;
height: 0.63rem;
}
.share img {
width: 0.67rem;
height: 0.8rem;
}
.talk img {
width: 0.7rem;
height: 0.7rem;
}
.shop_bag img {
width: 0.61rem;
height: 0.61rem;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
height: 1rem;
width: 100%;
background-color: #000000dc;
display: flex;
justify-content: space-between;
padding: 0 0.54rem;
box-sizing: border-box;
z-index: 999;
}
.footer li {
display: flex;
font-size: 0.24rem;
color: #ffffff;
align-items: center;
}
.footer_Select {
position: relative;
transform:scale(1.25);
}
.footer_Select_b {
width: 25.5px;
height: 1.5px;
background-color: #ffffff;
border-radius: 0.75px;
position: absolute;
bottom: 0.15rem;
}
.music {
position: absolute;
bottom: 0.14rem;
left: 0.3rem;
display: flex;
align-items: center;
}
.music img{
width: 0.27rem;
height: 0.28rem;
}
.music span {
font-size: 0.24rem;
color: #ffffff;
margin-left: 0.13rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 481 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 582 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 799 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

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,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="css/public.css">
<link rel="stylesheet" href="css/t22.css">
</head>
<body>
<div class="header pad">
<img src="img/fanhui.png" class="header_left">
<div class="header_center">填写订单</div>
<div class="header_right"></div>
</div>
<div class="content">
<div class="user pad">
<div class="user_msg">
<div class="user_msg_top">
<span class="user_name">张晓明</span>
<span class="user_phone">186****0019</span>
</div>
<p>上海市黄浦区中山南路128号千古美城1楼1210室</p>
</div>
<img src="img/header_r.png" alt="">
</div>
<div class="payment pad">
<div class="payment_mode">选择支付方式</div>
<div class="payment_r">
<span>在线支付</span>
<ul class="payment_r_spot">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="shopping">
<div class="shoppingtitle pad solidd">
<img class="shop_img" src="img/shop_img.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="shopping_right" src="img/shopping_right.png" alt="">
</div>
<ul class="shopping_list">
<li class="pad solidd">
<img src="img/cpt.png" alt="">
<div class="shopping_list_center">
<p>真丝连衣裙2019春夏新款
杭州大牌气质修……</p>
<div class="shop_info">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="shop_money_red">
<span>¥</span>
<span>160.</span>
<span>.00</span>
</div>
</div>
<div class="shop_num_x">X1</div>
</li>
</ul>
<div class="shopp_remarks pad solidd">
<span>订单备注</span>
<input type="text" value="有什么想对商家留言的可以在这里说">
</div>
<ul class="cost">
<li class="additional_costs pad solidd">
<div class="additional_costs_Discount">
<p>优惠抵用</p>
<span>-¥5</span>
</div>
<div class="additional_costs_express">
<p>快递费用</p>
<span>免费包邮</span>
</div>
</li>
<li class="Commodity_amount pad">
<p>商品金额</p>
<span>¥155.00</span>
</li>
</ul>
</div>
<div class="shopping">
<div class="shoppingtitle pad solidd">
<img class="shop_img" src="img/shop_img.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="shopping_right" src="img/shopping_right.png" alt="">
</div>
<ul class="shopping_list">
<li class="pad solidd">
<img src="img/cpt.png" alt="">
<div class="shopping_list_center">
<p>真丝连衣裙2019春夏新款
杭州大牌气质修……</p>
<div class="shop_info">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="shop_money_red">
<span>¥</span>
<span>160.</span>
<span>.00</span>
</div>
</div>
<div class="shop_num_x">X1</div>
</li>
<li class="pad solidd">
<img src="img/cpt.png" alt="">
<div class="shopping_list_center">
<p>真丝连衣裙2019春夏新款
杭州大牌气质修……</p>
<div class="shop_info">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="shop_money_red">
<span>¥</span>
<span>160.</span>
<span>.00</span>
</div>
</div>
<div class="shop_num_x">X1</div>
</li>
</ul>
<div class="shopp_remarks pad solidd">
<span>订单备注</span>
<input type="text" value="有什么想对商家留言的可以在这里说">
</div>
<ul class="cost">
<li class="additional_costs pad solidd">
<div class="additional_costs_Discount">
<p>优惠抵用</p>
<span>-¥5</span>
</div>
<div class="additional_costs_express">
<p>快递费用</p>
<span>免费包邮</span>
</div>
</li>
<li class="Commodity_amount pad">
<p>商品金额</p>
<span>¥315.00</span>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="footer_nub">共3件,合计:</div>
<div class="Total_price">¥ 5999.00</div>
<div class="settlement">结算(2)</div>
</div>
<div class="end"></div>
</body>
<script src="js/rom.js"></script>
</html>

View File

@@ -0,0 +1,67 @@
<!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="css/t43.css">
</head>
<body>
<div class="header">
<img src="img/scanning.png" class="scanning">
<ul class="nav">
<li>推荐</li>
<li class="nav_Select">
关注
<div class="nav_Select_c"></div>
</li>
<li>直播</li>
</ul>
<img src="img/search.png" class="search">
</div>
<div class="content">
<div class="content_c">
<img class="backgroung" src="img/b.png" alt="">
<ul class="right">
<li class="user">
<img src="img/userimg.png" alt="">
</li>
<li class="heart">
<img src="img/heart.png" alt="">
<span>71.1W</span>
</li>
<li class="share">
<img src="img/share.png" alt="">
<span>分享</span>
</li>
<li class="talk">
<img src="img/talk.png" alt="">
<span>评论</span>
</li>
<li class="shop_bag">
<img src="img/shop_bag.png" alt="">
<span>购物袋</span>
</li>
</ul>
<div class="music">
<img src="img/music.png" alt="">
<span class=>你像花儿一样美(DJ)版</span>
</div>
</div>
</div>
<ul class="footer">
<li class="footer_Select">
首页
<div class="footer_Select_b"></div>
</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
<script src="js/rom.js"></script>
</html>

View File

@@ -0,0 +1,48 @@
@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 0;
/*background: transparent;*/
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img { border:0;}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
font-size:200%;
font-weight:normal;
}
:focus { outline: 0;}
a{color: #000; text-decoration:none;}
a:hover img{ border:none;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
input,button,select,textarea{outline:none}
textarea{resize:none}

View File

@@ -0,0 +1,20 @@
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"app-plus" :
{
"launchtype" : "local"
},
"default" :
{
"launchtype" : "local"
},
"h5" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}

View File

@@ -0,0 +1,21 @@
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
// 全局变量
globalData: {
}
}
</script>
<style>
@import "@/less/_.less";
</style>

View File

@@ -0,0 +1,372 @@
<template>
<view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="show" @tap="close" @touchmove.stop.prevent>
<swiper class="swiper" :current="index" @change="swiperChange" :disable-touch="swiper" :circular="circular">
<swiper-item v-for="(img, i) in imgs" :key="'swiper-item-'+i" :id="'swiper-item-'+i">
<movable-area class="marea" scale-area>
<movable-view
:id="'movable-view-'+i"
:key="'movable-view-'+i"
class="mview"
direction="all"
:out-of-bounds="false"
:inertia="true"
damping="90"
friction="2"
scale="true"
scale-min="1"
scale-max="4"
:scale-value="scale"
@scale="onScale"
@change="movableChange"
>
<image
:id="'image-'+i"
:key="'movable-view'+i"
class="image"
:src="img"
:style="{ transform: 'rotateZ(' + deg + 'deg)' }"
:data-index="i"
:data-src="img"
mode="widthFix"
@touchmove="handletouchmove"
@touchstart="handletouchstart"
@touchend="handletouchend"
/>
</movable-view>
</movable-area>
</swiper-item>
</swiper>
<view class="page" v-if="imgs.length > 0">
<text class="text">{{ index + 1 }} / {{ imgs.length }}</text>
</view>
<view class="save" v-if="saveBtn" @click.stop.prevent="save"><text class="text">保存</text></view>
<view class="rotate" v-if="rotateBtn" @click.stop.prevent="rotate"><text class="text">旋转</text></view>
<view class="desc" v-if="descs.length > 0 && descs.length == imgs.length && descs[index].length > 0">{{ descs[index] }}</view>
</view>
</template>
<script>
export default {
name: 'ksj-previewImage', //插件名称
props: {
imgs: {
//图片列表
type: Array,
required: true,
default: () => {
return [];
}
},
descs: {
//描述列表
type: Array,
required: false,
default: () => {
return [];
}
},
//透明度,0到1之间。
opacity: {
type: Number,
default: 0.8
},
//保存按键
saveBtn: {
type: Boolean,
default: true
},
//旋转按键
rotateBtn: {
type: Boolean,
default: true
},
//循环预览
circular:{
type: Boolean,
default: false
}
},
data() {
return {
swiper:false,//是否禁用
show: false, //显示状态
index: 0, //当前页
deg: 0, //旋转角度
time: 0, //定时器
interval: 1000, //长按事件
scale: 1 //缩放比例
};
},
methods: {
//比例变化
onScale(e) {
},
//长按事件相关内容---------开始-------------------
//接触开始
handletouchstart(e) {
var tchs = e.touches.length;
if (tchs != 1) {
return false;
}
this.time = setTimeout(() => {
this.onLongPress(e);
}, this.interval);
return false;
},
//清除定时器
handletouchend() {
clearTimeout(this.time);
if (this.time != 0) {
//处理点击时间
}
return false;
},
//清除定时器
handletouchmove() {
clearTimeout(this.time);
this.time = 0;
},
// 处理长按事件
onLongPress(e) {
var src = e.currentTarget.dataset.src;
var index = e.currentTarget.dataset.index;
var data = { src: src, index: index };
this.$emit('longPress', data);
},
//长按事件相关内容---------结束-------------------
//图片改变
swiperChange(e) {
this.index = e.target.current; //更新当前图片index
this.$nextTick(function() {
this.scale = 1;
})
//this.deg = 0; //旋转角度
//this.swiper=true;
},
//移动变化
movableChange(e) {
//console.log(e);
/* if(this.old.scale <= 1){
this.swiper=false;
}else if(e.detail.x===0){
this.swiper=false;
} */
},
//保存
save(e) {
var _this = this;
var src = this.imgs[this.index];
//#ifdef MP-WEIXIN
//提前向用户发起授权请求
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
console.log('kxj-previewImage:允许储存');
_this.downloadImg(src);
}
});
//#endif
//#ifdef APP-PLUS
this.downloadImg(src);
//#endif
//#ifdef H5
//非同源图片将直接打开
var abtn = document.createElement('a');
abtn.href = src;
abtn.download = '';
abtn.target = '_blank';
abtn.click();
//#endif
},
//下载并保存文件
downloadImg(src) {
//下载图片文件
uni.showLoading({
title: '大图提取中'
});
uni.downloadFile({
url: src,
success: function(res) {
console.log('kxj-previewImage:下载成功');
uni.hideLoading();
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.showToast({
title: '已保存至相册',
duration: 1000
});
}
});
},
fail: function() {
uni.hideLoading();
uni.showToast({
title: '图片下载失败',
icon: 'none',
duration: 1000
});
}
});
},
//旋转
rotate(e) {
this.deg = this.deg == 270 ? 0 : this.deg + 90;
},
//打开
open(e) {
if (e === null || e === '') {
console.log('kxj-previewImage:打开参数无效');
return;
}
if (!isNaN(e)) {
if(e>=this.imgs.length){
console.log('kxj-previewImage:打开参数无效');
}else{
this.index = e;
}
} else {
var index = this.imgs.indexOf(e);
if(index===-1){
this.imgs = [e];
this.index = 0;
console.log('kxj-previewImage:未在图片地址数组中找到传入的图片,已为你自动打开单张预览模式')
}else{
this.index = this.imgs.indexOf(e);
}
}
console.log('kxj-previewImage:当前预览图片序号'+this.index);
this.show = true;
},
//关闭
close(e) {
this.show = false;
this.index = 0; //当前页
this.deg = 0; //旋转角度
this.time = 0; //定时器
this.interval = 1000; //长按事件
this.scale = 1; //缩放比例
}
}
};
</script>
<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
.previewImage {
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
user-select: none;
.swiper {
width: 100%;
height: 100%;
.marea {
height: 100%;
width: 100%;
position: fixed;
overflow: hidden;
.mview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
min-height: 100%;
.image {
width: 100%;
}
}
}
}
.page {
position: absolute;
width: 100%;
bottom: 20rpx;
text-align: center;
.text {
color: #fff;
font-size: 26rpx;
background-color: rgba(0, 0, 0, 0.5);
padding: 3rpx 16rpx;
border-radius: 20rpx;
user-select: none;
}
}
.save {
position: absolute;
left: 10rpx;
width: 120rpx;
height: 56rpx;
bottom: 10rpx;
text-align: center;
padding: 10rpx;
.text {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 30rpx;
border-radius: 20rpx;
border: 1rpx solid #f1f1f1;
padding: 6rpx 22rpx;
user-select: none;
}
.text:active {
background-color: rgba(100, 100, 100, 0.5);
}
}
.rotate {
position: absolute;
right: 10rpx;
width: 120rpx;
height: 56rpx;
bottom: 10rpx;
text-align: center;
padding: 10rpx;
.text {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 30rpx;
border-radius: 20rpx;
border: 1rpx solid #f1f1f1;
padding: 6rpx 22rpx;
user-select: none;
}
.text:active {
background-color: rgba(100, 100, 100, 0.5);
}
}
.desc {
position: absolute;
top: 0;
width: 100%;
padding: 5rpx 10rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 28rpx;
letter-spacing: 3rpx;
user-select: none;
}
}
</style>

View File

@@ -0,0 +1,58 @@
<template>
<view class="item_list">
<ul>
<li v-for="(v,i) in list" :key="i">
<div class="newest_img">
<div @click="gotoInfo(v)">
<image :src="v.preview || v.img_src" :alt="v.title">
</div>
<span>{{v.total || v.shuliang}}P</span>
</div>
<div class="newest_text">
<div @click="gotoInfo(v)">
<p class="t">{{v.title}}</p>
<p v-if(v.hasOwnProperty(source)) class="source">{{v.source}}</p>
</div>
<div v-if(v.hasOwnProperty(tags)) class="tags">
<div v-for="(it,index) in v.tags" :key="index" class="tags_item">
<div>
{{ it.title }}
</div>
</div>
</div>
</div>
</li>
</ul>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
}
},
name: "Img-list",
data() {
return {};
},
created() {
console.log(this.list)
},
methods:{
gotoInfo(v){
uni.navigateTo({
url: '/pages/info/info?id='+v.id
});
},
}
};
</script>
<style lang="less" scoped>
@import "@/less/components/uni-ImgList.less";
</style>

View File

@@ -0,0 +1,38 @@
import http from "@/service";
import utils from "@/utils";
// import ImgList from "@/components/Img-list/Img-list.vue"
export default {
devBaseUrl: 'http://192.168.31.100:3000/api/json', // 开发阶段
testBaseUrl: '', // 测试阶段
prodBaseUrl: '', // 正式阶段
apiList: {
home: '/index',
type: '/class',
classList: '/classList',
info: '/info',
getInfo:'/agent/info',
},
// VueComponents: [ ImgList ],
NotVuePlugins: [
{ n: '$http', v: http },
{ n: '$utils', v: utils },
],
CheckBaseUrl: function () {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl;
break;
case "test":
return this.testBaseUrl;
break;
case "production":
return this.prodBaseUrl;
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,68 @@
import config from "@/config"
export default class Http {
constructor() {}
async get(params) {
uni.showLoading({
title: '加载中...'
});
return new Promise((success, error) => {
uni.request({
url: config.CheckBaseUrl() + params.url,
method: "GET",
data: params.data,
header: Object.assign({
"Content-Type": "application/json; charset=utf-8",
}, params.headers),
success: (res) => {
this.interceptors(success, error, res.data)
}
});
})
}
async post(params) {
uni.showLoading({
title: '加载中...'
});
return new Promise((success, error) => {
uni.request({
url: config.CheckBaseUrl() + params.url,
method: "POST",
data: params.data,
header: Object.assign({
"Content-Type": "application/json; charset=utf-8",
}, params.headers),
success: (res) => {
this.interceptors(success, error, res.data)
}
});
})
}
interceptors(s, e, data) {
uni.hideLoading();
switch (data.status) {
case 200:
s(data.result || data.data)
break;
case 404:
uni.showToast({
title: data.msg,
duration: 2000
});
throw new Error(data.msg);
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2124975_273pse87hq8.css">
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

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