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,170 @@
<!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>Document1</title>
</head>
<body>
<div class="header">
<div>
<div class="left">
<img src="" alt="">
<span></span>
</div>
<input class="center" type="text">
<ul class="right">
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
</div>
<div class="content">
<div>
<ul class="top">
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
<div class="center">
<img src="" alt="">
<img src="" alt="">
</div>
<div bottom>
<div class="left">
<div class="top">
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
<ul>
<li>
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
<ul class="center">
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
<div class="bottom">
<img src="" alt="">
<p></p>
</div>
</div>
<div class="center">
<h2></h2>
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
<div>
<img src="" alt="">
<p></p>
</div>
</div>
<div class="right">
<ul class="top">
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
<div class="center">
<ul class="left">
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
<div class="right">
<span></span>
<img src="" alt="">
</div>
</div>
<img class="bottom" src="" alt="">
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,193 @@
<!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 class="top">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<input class="center" type="text">
<ul class="right">
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
<ul class="bottom">
<li>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
</li>
<li>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
</li>
<li>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
</li>
<li>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
</li>
<li>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<span></span>
</a>
<a href="">
<span></span>
</a>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,243 @@
<!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="left">
<img src="" alt="">
</div>
<div class="center">
<ul>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
<input type="text">
<img src="" alt="">
</div>
<div class="right">
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<ul>
<li>
<h3></h3>
<p></p>
</li>
<li>
<h3></h3>
<p></p>
</li>
<li>
<h3></h3>
<p></p>
</li>
<li>
<h3></h3>
<p></p>
</li>
<li>
<h3></h3>
<p></p>
</li>
<li>
<h3></h3>
<p></p>
</li>
</ul>
</div>
<div class="right">
<ul class="top">
<li>
<div class="left">
<span></span>
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
</div>
</li>
<li>
<div class="left">
<span></span>
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
</div>
</li>
<li>
<div class="left">
<span></span>
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
</div>
</li>
<li>
<div class="left">
<span></span>
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
</div>
</li>
</ul>
<div class="mid">
<img src="" alt="" class="left">
<div class="right">
<div class="top">
<span></span>
<img src="" alt="">
</div>
<div class="bottom">
<span></span>
</div>
</div>
</div>
<div class="bottom">
<div class="title">
<span class="left"></span>
<div class="right">
<img src="" alt="">
<span></span>
</div>
</div>
<ul>
<li>
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<div class="top">
<span></span>
</div>
<div class="bottom">
<span></span>
</div>
</div>
<div class="right">
<img src="" alt="">
<span></span>
</div>
</li>
<li>
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<div class="top">
<span></span>
</div>
<div class="bottom">
<span></span>
</div>
</div>
<div class="right">
<img src="" alt="">
<span></span>
</div>
</li>
<li>
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<div class="top">
<span></span>
</div>
<div class="bottom">
<span></span>
</div>
</div>
<div class="right">
<img src="" alt="">
<span></span>
</div>
</li>
<li>
<div class="left">
<img src="" alt="">
</div>
<div class="center">
<div class="top">
<span></span>
</div>
<div class="bottom">
<span></span>
</div>
</div>
<div class="right">
<img src="" alt="">
<span></span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
ul {
margin: 0;
padding: 0;
}
.box_1 {
width: 200px;
height: 200px;
background: red;
/* display: inline-block; */
/* float: left; */
}
.box_2 {
width: 200px;
height: 200px;
background: green;
/* display: inline-block; */
}
.box_1-1 {
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div>
<div class="box_1">
<div class="box_1-1"></div>
</div>
<div class="box_2"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,ul {
margin: 0;
padding: 0;
}
.main {
height: 40px;
}
li {
list-style: none;
float: left;
line-height: 40px;
margin-right: 20px;
position: relative;
}
.main li:hover .main_list {
display: block;
}
.main_list {
position: absolute;
width: 150px;
background: rgb(177, 177, 182);
display: none;
}
.main_item {
cursor: pointer;
}
.main_item:hover {
background: red;
color: cornsilk;
}
</style>
</head>
<body>
<ul class="main">
<li>首页</li>
<li>HTML学习</li>
<li>CSS学习
<div class="main_list">
<div class="main_item">CSS学习1CSS学习1</div>
<div class="main_item">CSS学习2CSS学习2</div>
<div class="main_item">CSS学习3CSS学习3</div>
</div>
</li>
<li>JS学习</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
margin-left: 20px;
margin-bottom: 20px;
position: relative;
}
.main {
width: 100px;
}
.main_item {
padding-left: 15px;
width: 125px;
cursor: pointer;
}
.main_list {
position: absolute;
background: #bdb8b8;
display: none;
left: 80px;
top: 0;
}
.main_item:hover {
background: blue;
color: rgb(220, 229, 230);
}
.main li:hover .main_list {
display:inline-block;
}
</style>
</head>
<body>
<ul class="main">
<li>首页</li>
<li>HTML学习
<div class="main_list">
<div class="main_item">HTML学习学习1</div>
<div class="main_item">HTML学习学习2</div>
<div class="main_item">HTML学习学习3</div>
</div>
</li>
<li>CSS学习</li>
<li>JS学习
<div class="main_list">
<div class="main_item">JS学习1</div>
<div class="main_item">JS学习2</div>
<div class="main_item">JS学习3</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="http://at.alicdn.com/t/font_2884651_zynkd7ls8fp.css">
<style>
body,ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.main {
width: 290px;
height: 280px;
background: yellow;
position: relative;
}
.icon-zuojiantou {
color: #969696;
position: absolute;
left: 10px;
top: 100px;
}
.icon-youjiantou {
color: #969696;
position: absolute;
right: 10px;
top: 100px;
}
p {
position: absolute;
left: 15px;
bottom: 30px;
}
ul {
position: absolute;
width: 40px;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
.one, .the {
float: left;
width: 5px;
height: 5px;
background: red;
border-radius: 5px;
}
.two {
float: left;
width: 10px;
height: 5px;
background: red;
border-radius: 5px;
}
.one {
margin-right: 10px;
}
.the {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="main">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-youjiantou"></i>
<p>猪肉价格继续降11111111</p>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="the"></li>
</ul>
</div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,38 @@
.header {
background: black;
width: 100%;
height: 70px;
position: fixed;
z-index: 99;
align-items: center;
}
.head {
width: 100%;
height: 70px;
}
.logo {
background-image: url(../img/logo.svg);
width: 81px;
height: 31px;
}
.menu {
float: left;
width: 450px;
}
.menu li {
float: left;
margin-left: 30px;
font-size: 14px;
}
.dropmenu {
}
.meun_list {
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 803 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@@ -0,0 +1 @@
<svg width="81" height="31" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M46.872 6.105h-.032l-2.027.003.002 1.886h-3.901a.64.64 0 0 0-.644.603l-.001.032v2.008h4.548v3.603l-.007 1.463-.003.163-.004.159c-.008.267-.02.603-.039.853l-.011.149-.03.346h-4.73a.64.64 0 0 0-.645.604v2.039h5.212c-.958 2.675-2.749 4.425-5.213 5.39l.645 2.173c.063.21.372.27.52.21 1.769-.698 4.89-2.459 6.474-6.655 1.402 3.99 4.65 5.85 6.125 6.511l.124.055c.491.213.7 0 .779-.264l.607-2.03c-.997-.395-3.95-1.672-5.203-5.39H54.005a.64.64 0 0 0 .62-.603v-2.04h-1.28V8.63a.64.64 0 0 0-.614-.634l-.032-.001h-5.212l-.002-1.268V6.705a.638.638 0 0 0-.58-.598l-.033-.002zm-9.504 0H35.34v21.017c0 .34.271.618.612.634l.032.001 2.028-.012V14.987h1.609a.64.64 0 0 0 .62-.603v-2.04h-2.23V6.716a.64.64 0 0 0-.612-.61h-.032zm38.923.252c-.355.507-1.04 1.083-2.048 1.095h-15.6V9.46c0 .329.254.6.58.631l.033.003h8.243v3.463h-7.462a.64.64 0 0 0-.644.604v.032l-.001 2.007h8.107v3.15h-9.78a.64.64 0 0 0-.645.603v2.039h10.425v2.345l-.002.043-.002.022-.004.036a.795.795 0 0 1-.755.674l-.037.001H63.1l.583 2.157a.66.66 0 0 0 .56.483l.033.002h2.509l.055-.002.059-.003c1.814-.102 3.242-1.574 3.272-3.37v-2.388h9.434a.64.64 0 0 0 .62-.603v-2.04H70.171V16.2h7.032a.64.64 0 0 0 .62-.603l.001-.031v-2.008H70.17v-3.463c.885.005 2.223.004 4.014-.004 2.918.012 4.411-2.102 4.808-3.076l-1.93-.825c-.367-.157-.638-.024-.772.167zM33.574 8.98h-2.028v7.203l-.002.23-.002.145a16.74 16.74 0 0 1-.761 4.544.632.632 0 0 0 .354.765l.031.012 1.97.658c.678-1.875 1.041-3.843 1.08-5.99l.001-.174.001-.17.002-.708-.002-.001v-5.91a.64.64 0 0 0-.58-.6l-.032-.003-.032-.001zm13.916 1.656h3.182v6.737h-3.264l.029-.402c.025-.383.04-.86.046-1.279l.001-.18.002-.447.004-4.429z" fill="#FFF" fill-rule="nonzero"/><path d="M21.02 16.34c2.903 0 5.255 2.34 5.255 5.225v4.15c0 2.885-2.352 5.224-5.255 5.224h-7.728a5.255 5.255 0 0 1-4.995-3.597l-4.604 2.294a2.557 2.557 0 0 1-3.423-1.13A2.523 2.523 0 0 1 0 27.37v-7.442c0-1.4 1.142-2.535 2.55-2.535.4 0 .795.093 1.152.273l4.584 2.307a5.254 5.254 0 0 1 5.006-3.632h7.728zm-.033 2.69H13.37a2.62 2.62 0 0 0-2.628 2.569v4.038a2.62 2.62 0 0 0 2.584 2.612h7.617a2.62 2.62 0 0 0 2.627-2.568v-4.039a2.62 2.62 0 0 0-2.583-2.612zM3.4 20.65a.694.694 0 0 0-.695.679v4.678a.697.697 0 0 0 1 .622l.011-.006 4.321-2.191v-1.55l-4.325-2.158a.699.699 0 0 0-.312-.074zM9.815.975A7.114 7.114 0 0 1 16.02 4.59a6.1 6.1 0 0 1 4.15-1.619c3.372 0 6.105 2.718 6.105 6.07 0 3.352-2.733 6.07-6.105 6.07a6.108 6.108 0 0 1-4.934-2.495 7.112 7.112 0 0 1-5.421 2.495c-3.927 0-7.11-3.165-7.11-7.069S5.888.975 9.815.975zm0 2.842c-2.348 0-4.25 1.892-4.25 4.226s1.902 4.226 4.25 4.226c2.347 0 4.25-1.892 4.25-4.226s-1.903-4.226-4.25-4.226zM20.17 5.815a3.236 3.236 0 0 0-3.245 3.227 3.236 3.236 0 0 0 3.245 3.227 3.236 3.236 0 0 0 3.246-3.227 3.236 3.236 0 0 0-3.246-3.227z" fill="#FF4906"/></g></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2884651_oloxghv8vrk.css">
</head>
<body>
<div class="header">
<div class="head">
<div class="logo"></div>
<ul class="menu">
<li>
<a href="">我的关注</a>
</li>
<li>
<a href="">短视频</a>
</li>
<li>
<div class="menu_list">
<span>全部</span>
<i class="iconfont icon-xiangxia"></i>
<div class="dropmenu">
<a href="">直播</a>
<a href="">同城</a>
<a href="">长视频</a>
<a href="">小剧场</a>
<a href="">电影</a>
<a href="">AcFun</a>
</div>
</div>
</li>
</ul>
<input placeholder="请输入你要搜索的内容" type="text">
<ul class="right"></ul>
</div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,518 @@
.header {
width: 100%;
height: 40px;
line-height: 40px;
background: #222;
position: fixed;
left: 0;
top: 0%;
z-index: 999;
}
.title {
width: 1180px;
margin: 0 auto;
}
.souhu {
background: url(../img/souhu.png);
background-repeat: no-repeat;
height: 20px;
width: 44px;
float: left;
margin-top: 10px;
}
.logo {
width: 86px;
height: 40px;
float: left;
}
.logo i {
float: left;
font-size: 18px;
color: #ccc;
margin: 1px 7px 0 0;
}
.logo:hover i {
color: #fdd000;
}
.logo:hover .souhu {
background-position: 0 -30px;
}
.logo::after {
content: " ";
width: 1px;
height: 15px;
background: #666;
display: inline-block;
margin-top: 13px;
float: right;
}
.menu {
float: left;
height: 40px;
}
.menu li {
float: left;
width: 74px;
height: 40px;
text-align: center;
position: relative;
}
.menu li a,.menu_list {
color: #fff;
}
.menu li:last-child {
width: 150px;
}
.dropmenu {
width: 290px;
height: 136px;
border: 1px solid #ddd;
background: #fff;
position: absolute;
top: 40px;
left: -110px;
padding: 5px 10px;
display: none;
}
.dropmenu .item {
color: #191919;
display: inline-block;
width: 67px;
}
.icon-xiangxia {
display: inline-block;
transition: all 0.2s ease;
}
.menu li:hover{
background: #444;
}
.menu_list:hover .dropmenu {
display: block;
}
.dropmenu .item:hover {
color: red;
}
.menu li:hover i {
transform: rotate(180deg);
}
.content {
margin-top: 80px;
}
.center {
width: 1180px;
margin: 0 auto;
}
.center .left {
width: 140px;
float: left;
}
.user {
width: 138px;
height: 217px;
border: 1px solid #ddd;
background: #fff;
text-align: center;
position: relative;
}
.userimg {
border-radius: 100%;
position: relative;
top: -25px;
}
.user_title {
font-size: 16px;
line-height: 20px;
margin-top: -15px;
}
.user_logo {
margin-top: 5px;
margin-bottom: 5px;
}
.user_nm li {
float: left;
width: 50%;
}
.user_nm li p {
font-size: 16px;
color: black;
}
.user_nm li span {
font-size: 12px;
color: #666;
}
.user_bottom {
font-size: 12px;
color: #666;
background: #ddd;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 31px;
}
.comment {
margin-top: 30px;
text-align: center;
}
.comment_title {
font-size: 14px;
color: #303030;
}
.comment i {
font-size: 30px;
display: inline-block;
margin-top: 10px;
}
.comment p {
font-family: Georgia,Arial;
color: #da2128;
font-size: 24px;
}
.comment_title::before,.comment_title::after {
content: " ";
width: 48px;
height: 1px;
background: #666;
display: inline-block;
position: relative;
top: -3px;
}
.comment_title::before {
left: -7px;
}
.comment_title::after {
left: 7px;
}
.share {
margin-top: 30px;
text-align: center;
}
.share_title {
font-size: 14px;
color: black;
}
.share_title::before,.share_title::after {
content: " ";
width: 48px;
height: 1px;
background: #666;
display: inline-block;
position: relative;
top: -3px;
}
.share_title::before {
left: -7px;
}
.share_title::after {
left: 7px;
}
.share ul li {
margin-top: 20px;
}
.share ul li img {
vertical-align: middle;
}
.share ul li span {
font-size: 12px;
color: #666;
}
.center .mid {
width: 640px;
margin-left: 30px;
float: left;
}
.mid_title h2 {
font-size: 28px;
line-height: 38px;
}
.mid_title p {
font-size: 14px;
color: #666;
margin-top: 20px;
}
.mid_comment_say {
}
.say_title {
height: 28px;
line-height: 24px;
margin: 15px 0 5px 0;
}
.say_name {
font-size: 18px;
color: black;
float: left;
}
.say_name::before {
content: " ";
width: 4px;
height: 19px;
background: #fdd000;
display: inline-block;
border-radius: 2px;
margin-top: 3px;
margin-right: 15px;
float: left;
}
.say_list {
float: right;
}
.say_list .one {
font-size: 22px;
font-family: "Georgia Regular",Georgia;
color: #d92227;
}
.say_list img {
margin-top: -20px;
float: left;
}
.say_put {
border: 1px solid #b7b7b7;
height: 123px;
}
.say_put textarea {
width: 100%;
height: 84px;
resize: none;
box-sizing: border-box;
}
.say_one {
height: 35px;
line-height: 35px;
background: #f8f8f8;
padding-left: 10px;
}
.say_two span {
font-size: 13px;
float: left;
}
.say_two ul li {
float: left;
}
.say_the {
width: 90px;
height: 35px;
font-size: 14px;
color: #fff;
background: red;
float: right;
text-align: center;
margin-right: -1px;
}
.say_two ul li img {
margin-left: 10px;
margin-top: 9px;
}
.say_four {
font-size: 12px;
color: #999;
margin: 12px 0 28px 0;
}
.hot_title {
font-size: 16px;
height: 17px;
line-height: 17px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.hot_title::before {
content: " ";
width: 4px;
height: 19px;
background: #fdd000;
display: inline-block;
border-radius: 2px;
margin-top: 3px;
margin-right: 15px;
float: left;
}
.hot_list {
margin-top: 10px;
}
.hot_list img {
border-radius: 100%;
width: 50px;
height: 50px;
float: left;
}
.hot_list_one {
float: left;
width: 570px;
margin-left: 14px;
}
.hot_list_one .five {
font-size: 13px;
color: red;
margin-bottom: 10px;
}
.hot_list_one .six {
font-size: 14px;
color: #333;
}
.hot_date span {
font-size: 12px;
color: #b7b7b7;
float: left;
}
.hot_date_one {
float: right;
}
.hot_date_two {
float: left;
font-size: 12px;
color: #7e7e7e;
margin: 0 5px;
padding: 0 10px;
}
.hot_date {
margin-top: 15px;
}
.hot_list li {
border-bottom: 1px dashed #e5e5e5;
overflow: hidden;
margin-bottom: 15px;
padding-bottom: 10px;
}
.left .mid .right {
height: 700px;
}
.right {
width: 300px;
float: right;
}
.search input {
width: 236px;
height: 34px;
box-sizing: border-box;
float: left;
border: 1px solid silver;
border-right: none;
padding-left: 10px;
}
.search i {
width: 53px;
height: 34px;
line-height: 34px;
background: yellow;
display: inline-block;
text-align: center;
}
.hot_pic p {
font-size: 20px;
font-weight: 700;
margin-top: 40px;
margin-bottom: 20px;
}
.pic_one {
width: 300px;
height: 200px;
position: relative;
margin-bottom: 10px;
}
.icon-zuojiantou {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: #333;
display: none;
}
.icon-youjiantou {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: #333;
display: none;
}
.pic_one:hover .icon-zuojiantou {
display: inline-block;
}
.pic_one:hover .icon-youjiantou {
display: inline-block;
}
.pic_one p {
font-size: 15px;
color:black;
position: absolute;
left: 5px;
bottom: 20px;
}
.hot_pic .pic_two {
position: absolute;
left: 5px;
bottom: 10px;
}
.hot_pic .pic_two li {
width: 5px;
height: 2px;
background: #333;
float: left;
margin-right: 5px;
}
.hot_pic .two {
width: 10px;
height: 2px;
}
.hot_item img {
width: 145px;
height: 110px;
}
.hot_item p {
font-size: 12px;
color: black;
margin-top: 3px;
}
.hot_item li {
float: left;
width: 150px;
}
.hot_item {
overflow: hidden;
}
.hot_art_title {
font-size: 20px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
}
.hot_art_list li {
position: relative;
margin-bottom: 10px;
}
.art_list img {
width: 90px;
height: 60px;
}
.art_list {
float: left;
margin-right: 13px;
}
.art_list .one {
font-size: 24px;
font-weight: 700;
position: absolute;
left: 15px;
top: 25px;
}
.art_one p {
font-size: 14px;
color: black;
}
.art_one span {
font-size: 10px;
color: #333;
}
.art_one {
margin-left: 10px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 729 B

View File

@@ -0,0 +1,361 @@
<!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="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2884651_7iiqntpl2iw.css">
</head>
<body>
<div class="header">
<div class="title">
<div class="logo">
<i class="iconfont icon-home-page"></i>
<div class="souhu"></div>
</div>
<ul class="menu">
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">体育</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<a href="">新闻</a>
</li>
<li>
<div class="menu_list">
更多
<i class="iconfont icon-xiangxia"></i>
<div class="dropmenu">
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
<a class="item" href="">母婴</a>
</div>
</div>
</li>
<li>
<a href="">无障碍</a>
</li>
<li>
<a href="">
<i class="iconfont icon-denglu"></i>
登录
</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="left">
<div class="user">
<img class="userimg" src="./img/new.png" alt="">
<p class="user_title">中国新闻网</p>
<div class="user_logo">
<img src="./img/tip.png" alt="">
<img src="./img/tip.png" alt="">
</div>
<ul class="user_nm">
<li>
<p>112万</p>
<span>文章</span>
</li>
<li>
<p>685亿</p>
<span>总阅读</span>
</li>
</ul>
<div class="user_bottom">查看TA的文章></div>
</div>
<div class="comment">
<div class="comment_title">评论</div>
<i class="iconfont icon-pinglun"></i>
<p>126</p>
</div>
<div class="share">
<div class="share_title">分享</div>
<ul>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
<li>
<img src="./img/wx.png" alt="">
<span>微信分享</span>
</li>
</ul>
</div>
</div>
<div class="mid">
<div class="mid_title">
<h2>猪肉价格会继续下降?秋收秋种如何?权威回应来了</h2>
<p>2021-10-20 14:30</p>
</div>
<div class="mid_comment">
<div class="mid_comment_say">
<div class="say_title">
<div class="say_name">我来说两句</div>
<div class="say_list">
<img src="./img/gt.png" alt="">
<span>
<span class="one">126</span>人参与,<span class="one">50</span>条评论
</span>
</div>
</div>
<div class="say_put">
<textarea name="" id="" cols="30" rows="10"></textarea>
<div class="say_one">
<div class="say_two">
<span>快速登录:</span>
<ul>
<li>
<img src="./img/wx.png" alt="">
</li>
<li>
<img src="./img/wx.png" alt="">
</li>
<li>
<img src="./img/wx.png" alt="">
</li>
<li>
<img src="./img/wx.png" alt="">
</li>
</ul>
</div>
<div class="say_the">登录并发表</div>
</div>
</div>
</div>
<p class="say_four">搜狐“我来说两句” 用户公约</p>
<div class="mid_comment_hot">
<div class="hot_title">热门评论</div>
<ul class="hot_list">
<li>
<img src="./img/cm.jpeg" alt="">
<div class="hot_list_one">
<p class="five">执著</p>
<p class="six">特别是秋收还能增长?种粮食全在北方,北方那么多地区水灾看不到吗?还增产了居然,呵呵!</p>
<div class="hot_date">
<span>10月20日 19:52</span>
<div class="hot_date_one">
<div class="hot_date_two">回复</div>
<div class="hot_date_two">
<i class="iconfont icon-dianzan"></i>
2
</div>
</div>
</div>
</div>
</li>
<li>
<img src="./img/cm.jpeg" alt="">
<div class="hot_list_one">
<p class="five">执著</p>
<p class="six">特别是秋收还能增长?种粮食全在北方,北方那么多地区水灾看不到吗?还增产了居然,呵呵!</p>
<div class="hot_date">
<span>10月20日 19:52</span>
<div class="hot_date_one">
<div class="hot_date_two">回复</div>
<div class="hot_date_two">
<i class="iconfont icon-dianzan"></i>
2
</div>
</div>
</div>
</div>
</li>
<li>
<img src="./img/cm.jpeg" alt="">
<div class="hot_list_one">
<p class="five">执著</p>
<p class="six">特别是秋收还能增长?种粮食全在北方,北方那么多地区水灾看不到吗?还增产了居然,呵呵!</p>
<div class="hot_date">
<span>10月20日 19:52</span>
<div class="hot_date_one">
<div class="hot_date_two">回复</div>
<div class="hot_date_two">
<i class="iconfont icon-dianzan"></i>
2
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="search">
<input type="text" placeholder="大家都在搜">
<i class="iconfont icon-sousuo"></i>
</div>
<div class="hot_pic">
<p>热门精选</p>
<div class="pic_one">
<img src="./img/aaa.jpeg" alt="">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-youjiantou"></i>
<p>他被蛇追杀了5年</p>
<ul class="pic_two">
<li></li>
<li class="two"></li>
<li></li>
</ul>
</div>
<ul class="hot_item">
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
<li>
<a href="">
<img src="./img/bbb.jpeg" alt="">
<p>敲诈公职人员的女辅警照片曝光</p>
</a>
</li>
</ul>
</div>
<div class="hot_art">
<p class="hot_art_title">24小时热文</p>
<ul class="hot_art_list">
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
<li>
<div class="art_list">
<img src="./img/bbb.jpeg" alt="">
<div class="one">1</div>
</div>
<div class="art_one">
<p>不让下车去厕所 司机劝返新冠确诊游客被赞</p>
<span>1334万 阅读</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2880382_7kt93o3bmh2.css">
<style>
li {
list-style: none;
/* 清除li标签的小圆点 */
}
a {
text-decoration: none;
/* 清除a标签的下划线 */
}
body,
ul {
margin: 0;
padding: 0;
}
input {
padding: 0;
border: none;
}
.main {
position: relative;
width: 150px;
height: 50px;
}
.search {
width: 100%;
height: 100%;
border: 2px solid #eee;
border-radius: 10px;
padding-left: 80px;
box-sizing: border-box;
}
.icon-sousuo {
position: absolute;
}
</style>
</head>
<body>
<div class="main">
<input class="search" placeholder="百度一下" />
<i class="iconfont icon-sousuo"></i>
</div>
</body>
</html>

View File

@@ -0,0 +1,152 @@
<!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">
<img src="" alt="" class="left">
<div class="center">
<ul>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
<input type="text">
<img src="" alt="">
</div>
<div class="right">
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li>注册</li>
<li>
<img src="" alt="">
<span></span>
</li>
</ul>
</div>
</div>
<div class="content">
<div>
<ul class="left">
<li>
<h2></h2>
<p></p>
</li>
<li>
<h2></h2>
<p></p>
</li>
<li>
<h2></h2>
<p></p>
</li>
</ul>
<div class="right">
<ul>
<li>
<span></span>
<img src="" alt="">
</li>
<li>
<span></span>
<img src="" alt="">
</li>
<li>
<span></span>
<img src="" alt="">
</li>
<li>
<span></span>
<img src="" alt="">
</li>
</ul>
<div>
<img src="" alt="">
<div class="right">
<div class="top">
<span></span>
<img src="" alt="">
</div>
<div class="bottom">dddddd</div>
</div>
</div>
<div>
<div class="title">
<span></span>
<div>
<img src="" alt="">
<span></span>
</div>
</div>
<ul>
<li>
<img src="" alt="">
<div>
<span></span>
<div></div>
</div>
<div>
<img src="" alt="">
<span></span>
</div>
</li>
<li>
<img src="" alt="">
<div>
<span></span>
<div></div>
</div>
<div>
<img src="" alt="">
<span></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,76 @@
<!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>
<ul>
</ul>
</body>
<script>
// var res =0
// for (var i =1;i<=100;i++) {
// res+=i
// }
// console.log(res);
// var car = {
// name: {
// name1: 'F150',
// name2: '猛禽'
// },
// speed: 6,
// color: "black"
// };
// for (var key in car) {
// if (car[key].hasOwnProperty ("name1")) {
// for (var i in car[key])
// console.log(car[key][i]);
// }
// console.log(car[key]);
// }
var news = [
{
title: '新闻1标题',
time: '2020-10-29',
content: "新闻1内容"
},
{
title: '新闻2标题',
time: '2020-10-29',
content: "新闻2内容"
},
{
title: '新闻3标题',
time: '2020-10-29',
content: "新闻3内容"
},
{
title: '新闻4标题',
time: '2020-10-29',
content: "新闻4内容"
}
];
for (var index = 0; index < news.length; index++) {
var li = ` <li>
<h2>${news[index].title}</h2>
<span>${news[index].time}</span>
<div>${news[index].content}</div>
</li>`
document.querySelector("ul").innerHTML+=li
}
</script>
</html>

View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html{
width: 100%;
height: 100%;
margin: 0;
}
span {
position: absolute;
font-size: 20px;
}
</style>
</head>
<body>
</body>
<script>
document.querySelector("body").onclick = function (event) {
var x = event.clientX, y=event.clientY
var span = document.createElement("span")
span.style.left = `${x}px`
span.style.top = `${y}px`
span.innerText = "hahah"
console.log(span);
document.querySelector("body").appendChild(span)
}
</script>
</html>

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入分数">
<button>查询</button>
<div class="result"></div>
</body>
<script>
// document.querySelector("button").onclick = () => {
// var num = document.querySelector("input").value
// var res = document.querySelector(".result")
// if (num < 60) {
// console.log("不及格");
// res.innerText = "不及格"
// } else if (num >= 60 && num < 70) {
// console.log("一般");
// res.innerText = "一般"
// } else if (num >= 70 && num < 80) {
// console.log("普通");
// res.innerText = "普通"
// } else if (num >= 80 && num < 90) {
// console.log("良好");
// res.innerText = "良好"
// } else if (num >= 90 && num <= 100) {
// console.log("优秀");
// res.innerText = "优秀"
// } else {
// console.log("不合理");
// res.innerText = "不合理"
// }
// }
var je = true
je? console.log("不合理") : console.log("11")
</script>
</html>

View File

@@ -0,0 +1,17 @@
/* 专门用来清除标签的默认样式的 */
li {
list-style: none; /* 清除li标签的小圆点 */
}
a {
text-decoration: none; /* 清除a标签的下划线 */
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input {
outline: none;
}

View File

@@ -0,0 +1,51 @@
.header {
width: 100%;
height: 1.8rem;
position: fixed;
left: 0;
top: 0;
z-index: 999;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.6rem;
border-bottom: 0.02rem solid #f3f4f7;;
}
.header img {
width: 0.38rem;
height: 0.68rem;
}
.header span {
font-size: 0.68rem;
color: #333333;
}
.header div {
width: 0.38rem;
height: 0.68rem;
}
.list {
background: #5697f4;
width: 13.8rem;
height: 7.8rem;
margin: 2.82rem auto 0;
border-radius: 0.3rem;
text-align: center;
padding-top: 1.12rem;
}
.list p {
font-size: 0.52rem;
color: #ffffff;
}
.list img {
width: 1.84rem;
height: 1.84rem;
margin-bottom: 0.64rem;
}
.list .one {
margin-bottom: 1.9rem;
}
.list .two {
margin-bottom: 1.26rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/left.png" alt="">
<span>余额提现</span>
<div></div>
</div>
<div class="content">
<div class="list">
<p class="one">您还没有绑定银行卡,请绑定银行卡后再进行余额提现</p>
<img src="./img/jia.png" alt="">
<p class="two">添加银行卡</p>
</div>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 50)
};
window.onresize = function () {
getRem(750, 50)
};
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,17 @@
/* 专门用来清除标签的默认样式的 */
li {
list-style: none; /* 清除li标签的小圆点 */
}
a {
text-decoration: none; /* 清除a标签的下划线 */
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input {
outline: none;
}

View File

@@ -0,0 +1,96 @@
.header {
width: 100%;
height: 0.9rem;
top: 0;
left: 0;
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.42rem;
box-sizing: border-box;
z-index: 999;
}
.header img {
width: 0.15rem;
height: 0.29rem;
}
.header p {
font-size: 0.34rem;
color: #333333;
}
.header div {
width: 0.15rem;
height: 0.29rem;
}
.content {
margin-top: 0.9rem;
}
.content_top {
display: flex;
position: relative;
justify-content: center;
}
.content_top img {
width: 0.27rem;
height: 0.28rem;
position: absolute;
left: 0.68rem;
top: 0.14rem;
}
.content_top input {
width: 6.9rem;
height: 0.56rem;
background-color: #f0f0f0;
border-radius: 0.28rem;
border: solid 0.01rem #d5d5d5;
padding-left: 0.87rem;
box-sizing: border-box;
}
.content_mid {
display: flex;
justify-content: space-between;
padding: 0.34rem 0.59rem 0.24rem 0.66rem;
}
.mid_one,.mid_two,.mid_the,.mid_four {
font-size: 0.24rem;
}
.mid_one {
color: #ff7b41;
}
.mid_the img {
width: 0.15rem;
height: 0.19rem;
}
.mid_four img {
width: 0.18rem;
height: 0.23rem;
}
.content_bottom {
display: flex;
flex-wrap: wrap;
padding-left: 0.25rem;
}
.content_bottom li {
width: 3.4rem;
height: 5rem;
background-color: #ffffff;
border-radius: 0.1rem;
margin-right: 0.19rem;
margin-bottom: 0.48rem;
}
.content_bottom img {
width: 3.46rem;
height: 3.46rem;
}
.bottom_list {
font-size: 0.24rem;
color: #3f3f3f;
margin: 0.19rem 0.27rem 0.26rem 0.13rem
}
.bottom_nums {
font-size: 0.28rem;
color: #ff7b41;
margin-left: 0.13rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/left.png" alt="">
<p>商品列表</p>
<div></div>
</div>
<div class="content">
<div class="content_top">
<img src="./img/ser.png" alt="">
<input type="text" placeholder="搜索">
</div>
<ul class="content_mid">
<li class="mid_one">最新</li>
<li class="mid_two">销量</li>
<li class="mid_the">
<span>价格</span>
<img src="./img/top.png" alt="">
</li>
<li class="mid_four">
<span>筛选</span>
<img src="./img/share.png" alt="">
</li>
</ul>
<ul class="content_bottom">
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
<li>
<img src="./img/shop.png" alt="">
<p class="bottom_list">女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p class="bottom_nums">50积分</p>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

View File

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

View File

@@ -0,0 +1,17 @@
/* 专门用来清除标签的默认样式的 */
li {
list-style: none; /* 清除li标签的小圆点 */
}
a {
text-decoration: none; /* 清除a标签的下划线 */
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input {
outline: none;
}

View File

@@ -0,0 +1,175 @@
.header {
width: 100%;
height: 0.9rem;
left: 0;
top: 0;
position: fixed;
display: flex;
align-items: center;
padding-left: 0.21rem;
background-color: #ffffff;
z-index: 999;
}
body {
background: #f2f2f2;
}
.header_left {
width: 0.2rem;
height: 0.35rem;
}
.header_right {
display: flex;
position: relative;
margin-left: 0.48rem;
}
.header_right img {
width: 0.32rem;
height: 0.34rem;
position: absolute;
left: 0.24rem;
top: 0.13rem;
}
.header_right input {
width: 6.31rem;
height: 0.6rem;
background-color: #f2f2f2;
border-radius: 0.3rem;
padding-left: 0.74rem;
box-sizing: border-box;
}
.content {
margin-top: 0.9rem;
}
.content_top {
padding-left: 0.36rem;
background-color: #ffffff;
}
.content_list {
display: flex;
overflow-x: scroll;
width: 100%;
height: 0.94rem;
align-items: center;
}
.top_list {
font-size: 0.3rem;
color: #5697f4;
margin-right: 0.39rem;
flex-shrink: 0;
}
.top_menu {
font-size: 0.3rem;
color: #424242;
margin-right: 0.24rem;
flex-shrink: 0;
}
.top_bottom {
width: 0.31rem;
height: 0.04rem;
background-color: #5697f4;
margin-left: 0.13rem;
}
.content_bottom {}
.content_bottom li {
background: #fff;
margin-top: 0.12rem;
}
.bottom_title {
display: flex;
justify-content: space-between;
align-items: center;
height: 0.73rem;
padding: 0 0.32rem;
}
.title_list {
display: flex;
align-items: center;
}
.title_list .list_one {
width: 0.24rem;
height: 0.25rem;
}
.title_list .list_two {
width: 0.1rem;
height: 0.18rem;
}
.title_list span {
font-size: 0.26rem;
color: #333333;
margin: 0 0.18rem;
}
.bottom_title p {
font-size: 0.26rem;
color: #5697f4;
}
.bottom_commodity {}
.commodity_list {
display: flex;
justify-content: space-between;
padding: 0 0.35rem 0.22rem;
}
.commodity_name {
margin: 0 0.55rem 0 0.18rem;
}
.commodity_list img {
width: 1.36rem;
height: 1.37rem;
}
.commodity_name {}
.commodity_name .name_one {
font-size: 0.3rem;
color: #444444;
width: 3.9rem;
margin-bottom: 0.33rem;
}
.commodity_name .name_two {
font-size: 0.24rem;
color: #aaaaaa;
}
.commodity_nums {}
.commodity_nums .name_the {
font-size: 0.3rem;
color: #000000;
}
.commodity_nums .name_four {
font-size: 0.24rem;
color: #aaaaaa;
margin-left: 0.55rem;
}
.commodity_money {
padding-left: 2.45rem;
padding-right: 0.28rem;
}
.commodity_money p {
font-size: 0.24rem;
color: #000000;
}
.commodity_ser {
display: flex;
justify-content: end;
padding-top: 0.2rem ;
}
.commodity_del {
width: 1.28rem;
height: 0.46rem;
font-size: 0.24rem;
color: #888888;
border-radius: 0.23rem;
border: solid 0.01rem #dddddd;
line-height: 0.46rem;
text-align: center;
margin-right: 0.11rem;
}
.commodity_eva {
width: 1.28rem;
height: 0.46rem;
font-size: 0.24rem;
color: #5697f4;
border-radius: 0.23rem;
border: solid 0.01rem #5697f4;
line-height: 0.46rem;
text-align: center;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View File

@@ -0,0 +1,123 @@
<!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="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img class="header_left" src="./img/left.png" alt="">
<div class="header_right">
<img src="./img/search.png" alt="">
<input type="text" placeholder="搜索我的订单">
</div>
</div>
<div class="content">
<div class="content_top">
<ul class="content_list">
<li class="top_list">全部</li>
<li class="top_menu">待付款</li>
<li class="top_menu">待发货</li>
<li class="top_menu">待收货</li>
<li class="top_menu">待评价</li>
<li class="top_menu">已完成</li>
<li class="top_menu">售后</li>
</ul>
<div class="top_bottom"></div>
</div>
<ul class="content_bottom">
<li>
<div class="bottom_title">
<div class="title_list">
<img class="list_one" src="./img/shop.png" alt="">
<span>面包自营</span>
<img class="list_two" src="./img/right.png" alt="">
</div>
<p>待评价</p>
</div>
<ul class="bottom_commodity">
<li class="commodity_list">
<img src="./img/one.png" alt="">
<div class="commodity_name">
<p class="name_one">包子芝麻小蛋糕美味香脆新品正品包邮</p>
<p class="name_two">独立包装+原味</p>
</div>
<div class="commodity_nums">
<p class="name_the">¥38.8</p>
<p class="name_four">X1</p>
</div>
</li>
<li class="commodity_list">
<img src="./img/two.png" alt="">
<div class="commodity_name">
<p class="name_one">包子奶酪蛋糕美味新品正品包邮发货</p>
<p class="name_two">整箱x24+奶酪</p>
</div>
<div class="commodity_nums">
<p class="name_the">¥61.2</p>
<p class="name_four">X1</p>
</div>
</li>
</ul>
<div class="commodity_money">
<p>共2件商品,合计:¥100.00 (含运费¥0.00)</p>
<div class="commodity_ser">
<div class="commodity_del">删除订单</div>
<div class="commodity_eva">评价</div>
</div>
</div>
</li>
<li>
<div class="bottom_title">
<div class="title_list">
<img class="list_one" src="./img/shop.png" alt="">
<span>面包自营</span>
<img class="list_two" src="./img/right.png" alt="">
</div>
<p>已完成</p>
</div>
<div class="commodity_list">
<img src="./img/the.png" alt="">
<div class="commodity_name">
<p class="name_one">包子香脆牛角酥美味香脆新品当天发货</p>
<p class="name_two">包装+芝麻</p>
</div>
<div class="commodity_nums">
<p class="name_the">¥30.0</p>
<p class="name_four">X3</p>
</div>
</div>
<div class="commodity_money">
<p>共3件商品,合计:¥9.00 (含运费¥0.00)</p>
<div class="commodity_ser">
<div class="commodity_del">删除订单</div>
<div class="commodity_eva">评价</div>
</div>
</div>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

View File

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

View File

@@ -0,0 +1,17 @@
/* 专门用来清除标签的默认样式的 */
li {
list-style: none; /* 清除li标签的小圆点 */
}
a {
text-decoration: none; /* 清除a标签的下划线 */
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input {
outline: none;
}

View File

@@ -0,0 +1,124 @@
body {
background: #f3f4f7;
}
.header {
width: 100%;
height: 1.8rem;
position: fixed;
top: 0;
left: 0;
background: #fff;
padding-left: 0.25rem;
padding-top: 0.67rem;
box-sizing: border-box;
}
.header img {
width: 0.38rem;
height: 0.68rem;
}
.content {
margin-top: 1.8rem;
}
.name {
display: flex;
padding-top: 1.8rem;
padding-left: 0.48rem;
background: #fff;
}
.name_pic {
width: 2.4rem;
height: 2.4rem;
}
.name_list {
margin-left: 0.58rem;
}
.name_one {
display: flex;
align-items: baseline;
margin-bottom: 0.48rem;
}
.name_one span {
font-size: 0.72rem;
line-height: 0.72rem;
color: #000000;
margin-right: 0.2rem;
}
.name_one img {
width: 0.54rem;
height: 0.54rem;
}
.name_list ul li {
font-size: 0.52rem;
color: #868686;
margin-bottom: 0.34rem;
}
.name_mes {
margin-top: 0.34rem;
background: #fff;
padding-left: 0.46rem;
}
.mes_list_one {
font-size: 0.64rem;
color: #000000;
margin-right: 0.75rem;
}
.mes_list_two {
font-size: 0.64rem;
color: #868686;
}
.name_mes li img {
width: 0.28rem;
height: 0.48rem;
padding-right: 0.5rem;
}
.name_mes li {
display: flex;
justify-content: space-between;
align-items: center;
height: 2.18rem;
border-bottom: 0.02rem solid #dcdcdc;
}
.name_mes li:last-child {
border: none;
}
.mes_list_the {
font-size: 0.64rem;
color: #000000;
margin-right: 2rem;
}
.mes_list_four {
font-size: 0.64rem;
color: #5a6f92;
}
.name_bottom {
background: #fff;
margin-top: 0.34rem;
}
.name_bottom_one {
width: 0.72rem;
height: 0.68rem;
margin-right: 0.3rem;
}
.name_bottom_two {
width: 0.64rem;
height: 0.68rem;
margin-right: 0.3rem;
}
.name_bottom span {
font-size: 0.64rem;
color: #5a6f92;
margin-right: 0.3rem;
}
.name_bottom li {
height: 2.16rem;
display: flex;
justify-content: center;
align-items: center;
}
.name_bottom li:first-child {
border-bottom: 0.02rem solid #dcdcdc;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/left.png" alt="">
</div>
<div class="content">
<div class="name">
<img class="name_pic" src="./img/pic.png" alt="">
<div class="name_list">
<div class="name_one">
<span>张可</span>
<img src="./img/wm.png" alt="">
</div>
<ul>
<li>昵称:小可爱</li>
<li>ID:1234555</li>
<li>地区:安徽合肥</li>
</ul>
</div>
</div>
<ul class="name_mes">
<li>
<div class="mes_list">
<span class="mes_list_one">好友备注</span>
<span class="mes_list_two">张可</span>
</div>
<img src="./img/aa.png" alt="">
</li>
<li>
<div class="mes_list">
<span class="mes_list_the">手机</span>
<span class="mes_list_four">1300000000</span>
</div>
</li>
<li>
<div class="mes_list">
<span class="mes_list_the">生日</span>
<span class="mes_list_two">1993-12-12</span>
</div>
<img src="./img/aa.png" alt="">
</li>
<li>
<div class="mes_list">
<span class="mes_list_one">朋友圈</span>
</div>
<img src="./img/aa.png" alt="">
</li>
</ul>
<ul class="name_bottom">
<li>
<img class="name_bottom_one" src="./img/mes.png" alt="">
<span>发消息</span>
</li>
<li>
<img class="name_bottom_two" src="./img/rab.png" alt="">
<span>删除</span>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
<script src="./js/rem.js"></script>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 50)
};
window.onresize = function () {
getRem(750, 50)
};
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,17 @@
/* 专门用来清除标签的默认样式的 */
li {
list-style: none; /* 清除li标签的小圆点 */
}
a {
text-decoration: none; /* 清除a标签的下划线 */
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input {
outline: none;
}

View File

@@ -0,0 +1,171 @@
.header {
width: 8.64rem;
height: 1.6rem;
background: #a4a4a7;
border-radius: 0.8rem;
margin-top: 1.08rem;
margin-left: 0.48rem;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 0.68rem;
box-sizing: border-box;
}
.header_left img {
width: 1.4rem;
height: 1.4rem;
margin-top: 0.2rem;
margin-left: 0.14rem;
}
.header_mid .top {
font-size: 0.52rem;
color: #ffffff;
}
.header_mid .bottom {
font-size: 0.44rem;
color: #ffffff;
}
.header_right {
width: 2.1rem;
height: 0.9rem;
background: #ea4e3d;
border-radius: 0.48rem;
display: flex;
justify-content: center;
align-items: center;
}
.header_right img {
width: 0.68rem;
height: 0.48rem;
}
.header_right span {
font-size: 0.48rem;
color: #ffffff;
}
.content {
position: relative;
}
.content .name {
position: absolute;
left: 0.28rem;
top: 12.68rem;
}
.name_one {
width: 7rem;
height: 1rem;
background-color: #4799ee;
border-radius: 0.2rem;
opacity: 0.4;
display: flex;
align-items: center;
padding-left: 0.34rem;
margin-bottom: 0.62rem;
}
.name_one img {
width: 0.68rem;
height: 0.48rem;
}
.name_one span {
font-size: 0.52rem;
color: #ffffff;
}
.name_list {
width: 6.48rem;
height: 1rem;
background-color: #000000;
border-radius: 0.5rem;
opacity: 0.4;
display: flex;
align-items: center;
padding-left: 0.46rem;
margin-bottom: 0.26rem;
}
.name_list .list_one {
font-size: 0.52rem;
color: #4799ee;
}
.name_list .list_two {
font-size: 0.52rem;
color: #ffffff;
}
.content_bottom {
display: flex;
align-items: center;
position: absolute;
left: 0.6rem;
top: 16.28rem;
}
.bottom_left {
display: flex;
}
.bottom_left img {
width: 3.3rem;
height: 3.3rem;
border-radius: 0.2rem 0.2rem 0rem
}
.bottom_left li {
background: #fff;
margin-right: 0.2rem;
}
.left_one {
font-size: 0.4rem;
color: #000000;
margin-top: 0.16rem;
margin-bottom: 0.34rem;
margin-left: 0.26rem;
}
.left_two {
font-size: 0.4rem;
color: #ea4e3d;
margin-left: 0.26rem;
}
.bottom_right img {
width: 0.52rem;
height: 2.8rem;
}
.footer {
display: flex;
position: fixed;
width: 100%;
height: 2rem;
bottom: 0;
left: 0;
align-items: center;
padding-left: 0.8rem;
padding-right: 0.58rem;
}
.footer img {
width: 1.26rem;
height: 1.26rem;
}
.footer input {
background-color: #000000;
border-radius: 0.62rem;
opacity: 0.4;
padding-left: 0.5rem;
height: 1.26rem;
margin-left: 0.2rem;
margin-right: 0.58rem;
}
.footer_right {
display: flex;
}
.footer_left,.footer_right li {
width: 1.26rem;
height: 1.26rem;
}
.footer_right li {
margin-right: 0.3rem;
}
body {
background: url(../img/the.png);
background-size: 100%;
background-repeat: no-repeat;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1,92 @@
<!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="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_left">
<img src="./img/one.png" alt="">
</div>
<div class="header_mid">
<p class="top">昵称 | ID:12345</p>
<p class="bottom">7455观看| 首尔市</p>
</div>
<div class="header_right">
<img src="./img/two.png" alt="">
<span>关注</span>
</div>
</div>
<div class="content">
<ul class="name">
<li class="name_one">
<img src="./img/two.png" alt="">
<span>我是嘟嘟嘴 关注了主播</span>
</li>
<li class="name_list">
<span class="list_one">小飞仙:</span>
<span class="list_two">我下单啦查看下</span>
</li>
<li class="name_list">
<span class="list_one">小飞仙:</span>
<span class="list_two">我下单啦查看下</span>
</li>
</ul>
<div class="content_bottom">
<ul class="bottom_left">
<li class="left_list">
<img src="./img/four.png" alt="">
<p class="left_one">品牌经典多…</p>
<p class="left_two">¥160.00</p>
</li>
<li>
<img src="./img/five.png" alt="">
<p class="left_one">品牌彩二十…</p>
<p class="left_two">¥160.00</p>
</li>
<li class="left_list">
<img src="./img/four.png" alt="">
<p class="left_one">品牌经典多…</p>
<p class="left_two">¥160.00</p>
</li>
<li class="left_list">
<img src="./img/four.png" alt="">
<p class="left_one">品牌经典多…</p>
<p class="left_two">¥160.00</p>
</li>
</ul>
<div class="bottom_right">
<img src="./img/six.png" alt="">
</div>
</div>
</div>
<div class="footer">
<div class="footer_left">
<img src="./img/shop.png" alt="">
</div>
<input type="text" placeholder="说些什么...">
<ul class="footer_right">
<li>
<img src="./img/share.png" alt="">
</li>
<li>
<img src="./img/heard.png" alt="">
</li>
<li>
<img src="./img/end.png" alt="">
</li>
</ul>
</div>
</body>
<script src="./js/rem.js"></script>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 50)
};
window.onresize = function () {
getRem(750, 50)
};
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,17 @@
/* 专门用来清除标签的默认样式的 */
li {
list-style: none; /* 清除li标签的小圆点 */
}
a {
text-decoration: none; /* 清除a标签的下划线 */
}
body,ul,p,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
input {
outline: none;
}

View File

@@ -0,0 +1,241 @@
.header {
width: 100%;
height: 0.9rem;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.45rem 0 0.3rem;
box-sizing: border-box;
border: 0.02rem solid #f7f7f7;
z-index: 999;
}
.header img {
width: 0.19rem;
height: 0.34rem;
}
.header p {
font-size: 0.34rem;
color: #333333;
}
.header span {
font-size: 0.28rem;
color: #347ef4;
}
.content {
margin-top: 0.9rem;
}
.content_top {
display: flex;
padding-top: 0.25rem;
}
.top_left {
display: flex;
flex-direction: column;
position: relative;
padding-left: 0.24rem;
}
.top_left img {
width: 0.8rem;
height: 0.8rem;
}
.top_left div {
width: 0.68rem;
height: 0.24rem;
background-color: #ffe0e8;
border-radius: 0.03rem;
border: solid 0.01rem #fd4a75;
font-size: 0.2rem;
color: #fd4a75;
line-height: 0.24rem;
text-align: center;
position: absolute;
left: 0.3rem;
top: 0.68rem;
}
.top_right {
padding-left: 0.24rem;
width: 100%;
}
.right_list {}
.list_the {
font-size: 0.24rem;
color: #979da7;
margin-top: 0.26rem;
margin-bottom: 0.18rem;
}
.list_one {
font-size: 0.28rem;
color: #333333;
}
.list_two {
font-size: 0.28rem;
color: #292929;
}
.rifht_commodity {
width: 4.5rem;
height: 4.5rem;
position: relative;
}
.rifht_commodity img {
width: 4.5rem;
height: 4.5rem;
}
.rifht_commodity p {
font-size: 0.24rem;
color: #ffffff;
position: absolute;
right: 0.09rem;
bottom: 0.11rem;
}
.right_address {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 0.42rem;
margin-top: 0.2rem;
}
.address_list {}
.address_one {
font-size: 0.24rem;
color: #5a6f92;
margin-bottom: 0.09rem;
}
.address_two {
font-size: 0.24rem;
color: #797979;
}
.address_mes {
display: flex;
}
.address_mes img {
width: 0.39rem;
height: 0.37rem;
margin-left: 0.36rem;
}
.content_bottom {
width: 6.23rem;
height: 3.6rem;
background-color: #f7f7f7;
border-radius: 0.1rem;
margin-left: 1.03rem;
margin-top: 0.27rem;
}
.bottom_title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.22rem 0.2rem 0.38rem 0.2rem;
border-bottom: 0.01rem solid #dedede;
}
.bottom_title p {
font-size: 0.28rem;
color: #5a6f92;
}
.title_choice {
display: flex;
}
.title_choice span {
font-size: 0.24rem;
color: #5a6f92;
}
.title_choice img {
width: 0.38rem;
height: 0.38rem;
margin-left: 0.21rem;
}
.bottom_list {
display: flex;
padding-left: 0.22rem;
padding-top: 0.15rem;
}
.list_mes {
width: 0.36rem;
height: 0.34rem;
}
.list_reply {
margin-left: 0.12rem;
}
.reply_sev {
display: flex;
margin-bottom: 0.28rem;
}
.reply_one {
width: 0.7rem;
height: 0.7rem;
}
.reply_two {
display: flex;
padding: 0 0.23rem;
align-items: center;
}
.reply_the {}
.reply_four {
font-size: 0.24rem;
color: #666666;
margin-bottom: 0.17rem;
}
.reply_five {
font-size: 0.3rem;
color: #333333;
}
.reply_six {
width: 0.38rem;
height: 0.38rem;
}
.reply_chat {
display: flex;
}
.reply_chat img {
width: 0.7rem;
height: 0.7rem;
}
.reply_eight {
margin-left: 0.22rem;
}
.reply_eight p {
font-size: 0.24rem;
color: #666666;
}
.reply_nine {
font-size: 0.28rem;
color: #5a6f92;
}
.reply_ten {
font-size: 0.28rem;
color: #2f7af4;
}
.reply_ele {
font-size: 0.28rem;
color: #333333;
}
.reply_twe {
display: flex;
margin-top: 0.2rem;
}
.footer {
width: 100%;
height: 0.98rem;
bottom: 0;
left: 0;
position: fixed;
display: flex;
}
.footer_left {
background-color: #b4d2fc;
font-size: 0.34rem;
color: #ffffff;
width: 50%;
line-height: 0.98rem;
text-align: center;
}
.footer_right {
background-color: #5697f4;
font-size: 0.34rem;
color: #ffffff;
width: 50%;
line-height: 0.98rem;
text-align: center;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/left.png" alt="">
<p>详情</p>
<span>删除</span>
</div>
<div class="content">
<div class="content_top">
<div class="top_left">
<img src="./img/head.png" alt="">
<div>6年店</div>
</div>
<div class="top_right">
<div class="right_list">
<p class="list_one">新手体验店</p>
<p class="list_the">来自:今日新款</p>
<p class="list_two">本月上新31款</p>
</div>
<div class="rifht_commodity">
<img src="./img/shop.png" alt="">
<p>¥ 36.00</p>
</div>
<div class="right_address">
<div class="address_list">
<p class="address_one">东莞.厂家直供一层30号</p>
<p class="address_two">19/04/24 11:21</p>
</div>
<div class="address_mes">
<img src="./img/heart.png" alt="">
<img src="./img/mes.png" alt="">
</div>
</div>
</div>
</div>
<div class="content_bottom">
<div class="bottom_title">
<p>评论</p>
<div class="title_choice">
<span>全选</span>
<img src="./img/ball.png" alt="">
</div>
</div>
<div class="bottom_list">
<img class="list_mes" src="./img/mes.png" alt="">
<div class="list_reply">
<ul>
<li class="reply_sev">
<img class="reply_one" src="./img/headtwo.png" alt="">
<div class="reply_two">
<div class="reply_the">
<p class="reply_four">童装批发市场</p>
<p class="reply_five">款式好看款式好看款式好看款式好看</p>
</div>
<img class="reply_six" src="./img/ri.png" alt="">
</div>
</li>
<li class="reply_chat">
<img src="./img/head.png" alt="">
<div class="reply_eight">
<p>新手体验店</p>
<div class="reply_twe">
<span class="reply_nine">回复</span> <span class="reply_ten">童装批发市场</span> <span
class="reply_ele">:需要吗?</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_left">取消</div>
<div class="footer_right">删除</div>
</div>
</body>
<script src="./js/rem.js"></script>
</html>

View File

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