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 @@
111111

View File

@@ -0,0 +1,121 @@
<!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_3445167_ub2ivnoluaa.css">
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 1000px;
}
.header {
width: 100%;
height: 100px;
background: pink;
position: fixed;
z-index: 999;
}
.content {
width: 100%;
height: 100%;
position: relative;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: red;
box-sizing: border-box;
transition: all ease 0.5s;
}
.iconfont {
font-size: 50px;
position: absolute;
top: -50px;
/* z-index: 3; */
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<i class="iconfont icon-shuaxin"></i>
</div>
</body>
<script>
// 1.绑定滚动事件
// 2.判断顶部滚动距离是否为0 然后绑定一个下拉事件
// 3.拉到一定距离固定几秒 然后消失
// 4.按住不动可以上下滑动(下滑、上滑)
var header = $(".header");
var content = $("content");
var startY = 0;
$("body").onscroll = function () {
if (document.documentElement.scrollTop == 0) {
//绑定下拉事件
a()
console.log("到顶了:",);
} else {
}
}
function a() {
$(".content").addEventListener('touchstart', function (e) {
startY = e.targetTouches[0].screenY;
console.log("startY:", startY);
console.log("touchstart:", e);
})
$(".content").addEventListener('touchmove', function move(e) {
var moveY = e.targetTouches[0].screenY;
// console.log("moveY:", moveY);
// 下滑
if (startY < moveY) {
var y = moveY - startY
$(".content").style.transform = `translateY(${y < 300 ? 300 : 300}px)`
$(".content").style.overflow = `visible`
console.log("下滑:", moveY - startY);
} else {
// var newy = moveY - startY
$(".content").style.transform = `translateY(${y < 0 ? 0 : 0}px)`
// console.log("上滑:", moveY - startY);
}
})
$(".content").addEventListener('touchend', function (e) {
console.log("touchend:", e);
var endY = e.changedTouches[0].screenY;
var yy = endY - startY
$(".content").style.transform = `translateY(${yy < 150 ? 150 : 150}px)`
setTimeout(function () {
$(".content").style.transform = `translateY(${yy <= 0 ? 0 : 0}px)`
}, 700)
})
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,87 @@
<!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_3445167_ub2ivnoluaa.css">
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 1000px;
}
.iconfont {
font-size: 50px;
position: absolute;
top: 0px;
}
.header {
width: 100%;
height: 50px;
background: red;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="header">
<i class="iconfont icon-shuaxin"></i>
</div>
</body>
<script>
var header = $(".header");
var content = $("content");
var startY = 0;
$("body").onscroll = function (v) {
if (document.documentElement.scrollTop == 0) {
//绑定下拉事件
v.addEventListener('touchstart', function (e) {
startY = e.targetTouches[0].screenY;
console.log("startY:", startY);
console.log("touchstart:", e);
})
v.addEventListener('touchmove', function (e) {
var moveY = e.targetTouches[0].screenY;
console.log("moveY:", moveY);
// 下滑
if (startY > moveY) {
console.log("下滑:",);
} else {
console.log("上滑");
}
})
v.addEventListener('touchend', function (e) {
console.log("touchend:", e);
var endY = e.changedTouches[0].screenY;
})
console.log("到顶了:", header);
} else {
// header.className = "header"
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,215 @@
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
user-select: none;
background-image: url(../img/back.png);
background-size: contain;
}
.stop {
position: absolute;
left: 10px;
top: 10px;
z-index: 999;
cursor: pointer;
}
.continue {
position: absolute;
left: 10px;
top: 10px;
z-index: 999;
cursor: pointer;
}
.voice,
.Mute {
width: 28px;
height: 30px;
position: absolute;
left: 50px;
top: 10px;
z-index: 999;
cursor: pointer;
}
.score {
position: absolute;
z-index: 1000;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.start {
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
left: 50%;
z-index: 999;
}
.start .play {
width: 70px;
margin-top: 20px;
cursor: pointer;
}
.grade {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
.grade div {
text-align: center;
display: flex;
width: 70%;
margin: 5px;
padding: 5px;
background: white;
border: 1px solid black;
border-radius: 4px;
align-items: center;
justify-content: center;
text-shadow: 2px 1px 3px rgb(98 87 87 / 74%);
letter-spacing: 5px;
font-size: 17px;
box-shadow: 3px 2px 5px rgb(26 25 25 / 74%);
cursor: pointer
}
.color {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
box-sizing: border-box;
}
.color div {
cursor: pointer
}
.ground {
position: absolute;
height: 112px;
width: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.ground img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
width: 34px;
height: 24px;
position: absolute;
z-index: 999;
left: 100px;
transition: all linear 0.15s;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
/* 黄色的鸟 */
@keyframes yelloBirdmove {
0% {
background-image: url(../img/hn1.png);
}
50% {
background-image: url(../img/hn2.png);
}
100% {
background-image: url(../img/hn3.png);
}
}
/* 蓝色的鸟 */
@keyframes blueBirdmove {
0% {
background-image: url(../img/bn1.png);
}
50% {
background-image: url(../img/bn2.png);
}
100% {
background-image: url(../img/bn3.png);
}
}
/* 红色的鸟 */
@keyframes redBirdmove {
0% {
background-image: url(../img/rn1.png);
}
50% {
background-image: url(../img/rn2.png);
}
100% {
background-image: url(../img/rn3.png);
}
}
@keyframes birdfly {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
.waterpipe {
width: 55px;
position: absolute;
}
.hidden {
display: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bird.css">
</head>
<body>
<audio class="music" src="./sounds/Orkaxjan_Emar.ogg" loop></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<audio class="die" src="./sounds/sfx_die.ogg"></audio>
<img class="stop hidden" src="./img/pause.png" alt="">
<img class="continue hidden" src="./img/continue.png" alt="">
<img class="voice hidden" src="./img/yinliang.png" alt="">
<img class="Mute hidden" src="./img/jingyin.png" alt="">
<div class="score hidden"></div>
<div class="start">
<img class="name" src="./img/title.png" alt="">
<img class="play hidden" src="./img/start.png" alt="">
<div class="grade">
<div class="easy">普通难度</div>
<div class="difficulty">地狱难度</div>
</div>
<div class="color">
<div class="yellow">
<img src="./img/hn2.png" alt="">
</div>
<div class="blue">
<img src="./img/bn2.png" alt="">
</div>
<div class="red">
<img src="./img/rn2.png" alt="">
</div>
</div>
</div>
<div class="bird" style="top:0px;animation: yelloBirdmove 0.4s linear infinite"></div>
<div class="ground">
<img class="groundone" src="./img/diban.png" alt="">
<img class="groundtwo" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/bird.js"></script>
<script>
</script>
</html>

View File

@@ -0,0 +1,367 @@
class bird {
GameState = false
innerHeight = window.innerHeight;
innerWidth = window.innerWidth;
// 鸟的下落速度
birdDownSpeed = 8
// 鸟的上升速度
birdUpSpeed = 40
// 地板和水管的移动速度
groundSpeed = 5
// 上下水管的间隙
WaterPipeClearance = 150
// 水管的左右间隙
WaterPipeLeftRightClearance = 300
// 一秒创建多少个水管
createdWaterPipeXTime = 500
// 生成水管的X轴位置
WaterPipeX = 0
// 分数
TotalScore = 0
// // 鸟的下落速度
// birdDownSpeed = 10
// // 鸟的上升速度
// birdUpSpeed = 60
// // 地板和水管的移动速度
// groundSpeed = 10
// // 上下水管的间隙
// WaterPipeClearance = 100
// // 水管的左右间隙
// WaterPipeLeftRightClearance = 200
// // 一秒创建多少个水管
// createdWaterPipeXTime = 300
constructor() {
this.bindEvent();
this.birdAction();
this.groundMove();
this.scoreAction()
this.ChangeColor()
//this.createdWaterPipe()
setInterval(() => {
if (this.GameState) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime);
}
//绑定事件
bindEvent() {
click(".easy", () => {
_(".waterpipe").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameState()
this.Easy()
})
click(".difficulty", () => {
_(".waterpipe").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameState()
this.Difficulty()
})
click(".stop", () => {
this.changeGameState()
_(".waterpipe").forEach(v => {
clearInterval(v.time)
})
$(".continue").remove("hidden")
$(".start").add("hidden")
})
click(".continue", () => {
_(".waterpipe").forEach(v => {
this.WaterPipeMove(v)
})
this.changeGameState()
$(".continue").add("hidden")
})
click(".voice", () => {
$(".music").pause()
$(".point").pause()
$(".die").pause()
$(".Mute").remove("hidden")
$(".voice").add("hidden")
})
click(".Mute", () => {
$(".music").play()
$(".Mute").add("hidden")
$(".voice").remove("hidden")
})
}
// 改变游戏状态
changeGameState() {
if (this.GameState) {
$(".stop").add("hidden")
$(".start").remove("hidden")
$(".music").pause()
$(".voice").add("hidden")
this.GameState = false
} else {
this.ChangeColor()
$(".stop").remove("hidden")
$(".start").add("hidden")
$(".score").remove("hidden")
$(".voice").remove("hidden")
$(".music").play()
this.GameState = true
setTimeout(() => {
}, 2000);
}
}
//鸟的移动
birdAction() {
var clcikTime = 0, currentTime = 0;
//鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
// $(".bird").style.animation += ', birdfly 0.7s linear infinite;'
//往下掉
setInterval(() => {
if (this.GameState) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`
}
}, 1000 / 16);
//上升
click("body", () => {
if (this.GameState) {
clcikTime = (new Date()).getTime()
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`
}
})
setInterval(() => {
if (this.GameState) {
currentTime = (new Date()).getTime();
//改变鸟的朝向
if (currentTime - clcikTime > 300) {
$(".bird").add("down")
$(".bird").remove("up")
}
}
}, 300)
}
// 地板移动
groundMove() {
$(".groundone").style.left = '0px';
$(".groundtwo").style.left = `${this.innerWidth}px`;
setInterval(() => {
$(".groundone").style.left = `${parseInt($(".groundone").style.left) - this.groundSpeed}px`
$(".groundtwo").style.left = `${parseInt($(".groundtwo").style.left) - this.groundSpeed}px`
if (parseInt($(".groundone").style.left) <= -this.innerWidth) {
$(".groundone").style.left = `${this.innerWidth}px`
}
if (parseInt($(".groundtwo").style.left) <= -this.innerWidth) {
$(".groundtwo").style.left = `${this.innerWidth}px`
}
this.collisionground($(".bird"), $(".ground"))
}, 1000 / 16);
}
//地板的碰撞检测
collisionground(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
this.gameOver()
console.log('碰撞成功')
}
}
//创建水管
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
if (TopWaterPipeHeight) {
TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
}
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
//console.log(TopWaterPipeHeight);
if (this.WaterPipeX == 0) {
this.WaterPipeX = this.innerWidth
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
}
// 插入水管图片
var cretedImg = (e) => {
var img = document.createElement("img");
img.src = `./img/${e == "top" ? 'sg_t' : 'sg_b'}.png`;
img.className = "waterpipe"
img.style = `${e}: ${e == "top" ? 0 : 112}px;
height: ${e == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px`;
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
// console.log("水管");
}
//水管移动
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
if (parseInt(img.style.left) <= -55) {
clearInterval(img.time)
$("body").removeChild(img)
} else {
this.collisionWaterPipe($(".bird"), img)//bird = react1,img = react2
}
}, 1000 / 16)
}
// 水管的碰撞检测
collisionWaterPipe(react1, react2) {
if (react1.offsetLeft < react2.offsetLeft + react2.offsetWidth &&
react1.offsetLeft + react1.offsetWidth > react2.offsetLeft &&
react1.offsetTop < react2.offsetTop + react2.offsetHeight &&
react1.offsetHeight + react1.offsetTop > react2.offsetTop
) {
this.gameOver()
console.log('碰撞成功')
} else {
// console.log("react2.offsetLeft + react2.offsetWidth:", react2.offsetLeft + react2.offsetWidth);
if ((react2.offsetLeft + react2.offsetWidth) == 105) {
this.TotalScore += 0.5;
if (!String(this.TotalScore).includes(".")) {
console.log("==========分数=======: ", this.TotalScore)
this.scoreAction()
$(".point").play()
//换背景图
if (this.TotalScore >= 10) {
$("body").style.backgroundImage = `url(./img/night.png)`
// function ResumeError() {
// return true;
// }
// window.onerror = ResumeError;
// console.log("xixi");
this.createdWaterPipe()
}
}
}
// console.log('没撞上')
}
}
//分数数字的变化
scoreAction() {
var TotalScoreArr = String(this.TotalScore).split("")
$(".score").innerHTML = ""
TotalScoreArr.forEach(v => {
$(".score").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
//游戏结束
gameOver() {
$(".die").play()
this.changeGameState()
_(".waterpipe").forEach(v => {
clearInterval(v.time)
})
var gameOver = document.createElement("img")
gameOver.src = "./img/gameover.png"
$(".start").replaceChild(gameOver, $(".name"))
click(".play", () => location.reload())
$(".start").removeChild($(".grade"))
$(".start").removeChild($(".color"))
$(".play").remove("hidden")
}
// 换皮肤
ChangeColor() {
click(".yellow", () => {
$(".bird").style.animation = "yelloBirdmove 0.4s linear infinite"
})
click(".blue", () => {
$(".bird").style.animation = "blueBirdmove 0.4s linear infinite"
console.log(2);
})
click(".red", () => {
$(".bird").style.animation = "redBirdmove 0.4s linear infinite"
console.log(3);
})
}
// 难度
Easy() {
this.birdDownSpeed = 7
this.birdUpSpeed = 40
this.groundSpeed = 5
this.WaterPipeClearance = 150
this.WaterPipeLeftRightClearance = 300
this.createdWaterPipeXTime = 2000
}
Difficulty() {
this.birdDownSpeed = 10
this.birdUpSpeed = 60
this.groundSpeed = 10
this.WaterPipeClearance = 70
this.WaterPipeLeftRightClearance = 220
this.createdWaterPipeXTime = 1000
}
}
new bird()

View File

@@ -0,0 +1,29 @@
class Util {
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
}
click(className, callback) {
$(className).onclick = () => {
callback()
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject } = new Util()
inject()

View File

@@ -0,0 +1,81 @@
<!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/QQmusic.css">
</head>
<body>
<div class="main">
<!-- shang -->
<div class="recommend">歌单推荐</div>
<!-- 下 -->
<div class="content">
<ul class="mune">
<li class="one">
<a href="">为你推荐</a>
</li>
<li>
<a href="">为你推荐</a>
</li>
<li>
<a href="">为你推荐</a>
</li>
<li>
<a href="">为你推荐</a>
</li>
<li>
<a href="">为你推荐</a>
</li>
<li>
<a href="">为你推荐</a>
</li>
</ul>
<ul class="list">
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1"
alt="">
<a href="">贺峻霖 | 少年十七未来山海共期</a>
<span>播放量:43.6万</span>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1"
alt="">
<a href="">贺峻霖 | 少年十七未来山海共期</a>
<span>播放量:43.6万</span>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1"
alt="">
<a href="">贺峻霖 | 少年十七未来山海共期</a>
<span>播放量:43.6万</span>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1"
alt="">
<a href="">贺峻霖 | 少年十七未来山海共期</a>
<span>播放量:43.6万</span>
</li>
<li>
<img src="https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1"
alt="">
<a href="">贺峻霖 | 少年十七未来山海共期</a>
<span>播放量:43.6万</span>
</li>
</ul>
<ul class="spot">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,87 @@
<!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>baidu</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446945_6e2tvlyr185.css">
<link rel="stylesheet" href="../上课练习/css/clear.css">
<link rel="stylesheet" href="../上课练习/css/public.css">
<link rel="stylesheet" href="./css/baidu.css">
</head>
<body>
<div class="main ">
<!-- 上 -->
<div class="title ">
<!-- 左图 -->
<img class="logo "
src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="">
<!-- 搜索框 -->
<div class="search">
<div class="input ">
<ul class="menu">
<li>
网页
<i class="iconfont icon-gengduo "></i>
<ul class="drop">
<li>文库</li>
<li>视频</li>
<li>图片</li>
</ul>
</li>
</ul>
<input type="text" placeholder="请输入">
</div>
<div class="baidu">百度一下</div>
</div>
<!-- 右 -->
<ul class="title-r">
<li>
<a>美国三天发生300多起枪击事件</a>
</li>
</ul>
</div>
<!-- 下 -->
<div class="hot">
<ul class="hot-t">
<li>
<a href="">
一夜过去雅安地震情况怎么样?
</a>
</li>
<li>
<a href="">
一夜过去雅安地震情况怎么样?
</a>
</li>
<li>
<a href="">
一夜过去雅安地震情况怎么样?
</a>
</li>
</ul>
<ul class="hot-b">
<li>
<a href="">
一夜过去雅安地震情况怎么样?
</a>
</li>
<li>
<a href="">
一夜过去雅安地震情况怎么样?
</a>
</li>
<li>
<a href="">
一夜过去雅安地震情况怎么样?
</a>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,100 @@
.main {
width: 1200px;
height: 532px;
margin: 0 auto;
color: #000;
}
.recommend {
height: 40px;
font-size: 20px;
padding-top: 50px;
padding-bottom: 24px;
letter-spacing: 18px;
text-align: center;
}
/* 主体内容 */
.content {}
.content>ul {
width: 1950.4px;
height: 50px;
text-align: center;
margin: 0px 50px;
}
.content>ul li {
font-size: 10px;
float: left;
}
.content>ul li a {
color: #333;
display: inline-block;
width: 60px;
height: 22.5px;
margin: 0px 24px;
}
.content>ul .one {
color: #31c27c;
}
/* 图片一块 */
.content .list {
height: 310px;
}
.content .list li {
width: 224px;
height: 283px;
margin-right: 20px;
}
.content .list li img {
width: 224px;
height: 224px;
float: left;
}
.content .list li a {
width: 194.5px;
height: 23.5px;
font-size: 14px;
color: #000;
float: left;
margin: 0px;
}
.content .list li span {
display: inline-block;
float: left;
height: 22px;
color: #999;
font-size: 14px;
}
/* 三个点 */
.content .spot {
height: 38px;
width: 100%;
text-align: center;
}
.content .spot li {
width: 8px;
height: 8px;
border-radius: 100%;
background: #ddd;
margin: 0px 10px;
}

View File

@@ -0,0 +1,127 @@
.main {
width: 100%;
height: 120px;
border-bottom: 1px solid #D1D8E5;
}
.title {
width: 1190px;
height: 46px;
margin: 0 auto;
}
.title img {
width: 128px;
height: 40px;
float: left;
margin-right: 18px;
}
/* 搜索框 */
.search {
float: left;
}
.search .input {
height: 40px;
width: 542px;
border: 2px solid #4E6EF2;
border-radius: 10px 0px 0px 10px;
float: left;
}
.search .input ul {
color: #9195a3;
font-size: 12px;
}
.search .input ul li {
color: #9195a3;
width: 38px;
height: 40px;
padding-left: 16px;
padding-right: 10px;
float: left;
line-height: 40px;
}
.search .input ul li i {
float: right;
font-size: 10px;
}
.search .input ul .drop {
display: none;
}
.search .input ul:hover .drop {
display: block !important;
}
.search .input input {
width: 443px;
height: 16px;
line-height: 16px;
padding: 12px 33px 12px 2px;
font-size: 16px;
}
.search .baidu {
width: 112px;
height: 44px;
text-align: center;
line-height: 44px;
background-color: #4E6EF2;
color: #fff;
font-size: 17px;
border-radius: 0 10px 10px 0;
float: left;
margin-right: 50px;
}
.title-r {
width: 120px;
height: 34px;
float: left;
}
.title-r li {
width: 6px;
height: 6px;
background: #666;
border-radius: 100%;
}
.title-r li a {
display: block;
width: 174px;
height: 46px;
font-size: 12px;
color: #666;
padding-left: 17px;
}
.hot-t,
.hot-b {
width: 617px;
height: 23px;
padding-left: 15px;
padding-right: 24px;
margin: 0 auto;
}
.hot-t li,
.hot-b li {
width: 184px;
height: 16px;
float: left;
margin-right: 16px;
}
.hot-t li a,
.hot-b li a {
color: #333;
font-size: 13px
}

View File

@@ -0,0 +1,165 @@
.main {
width: 950px;
margin: 0 auto;
}
/* 左 */
.hot {
width: 655px;
height: 423.361px;
margin-bottom: 30px;
float: left;
}
/* 热点内容 */
.hot .hot-t {
width: 655px;
height: 22.5px;
margin-bottom: 12px;
}
.hot .hot-t div,
.topic-b .title div {
color: #072;
font-size: 15px;
float: left;
}
.hot .hot-t a,
.topic-b .title a {
display: inline-table;
color: #37a;
font-size: 12px;
margin-top: 2px;
margin-left: 6px
}
/* 左下 */
.hot-b {
height: calc(423.361px - 34.5px);
}
/* 图集 */
.hot-b .picture {
width: 350px;
height: 388px;
margin-right: 30px;
float: left;
}
.hot-b .picture li {
width: 170px;
height: 189.431px;
font-size: 12px;
float: left;
margin-bottom: 10px;
}
.hot-b .picture li img {
width: 170px;
height: 170px;
}
.hot-b .picture li a {
color: #669;
}
.hot-b .picture li span {
color: #999;
}
/* 右list */
.list {
width: 275px;
height: 324.6px;
float: right;
}
.list .one {
height: 116.58px;
margin-top: 0px !important;
}
.list .one a {
color: #669;
width: 132px;
height: 19.44px;
line-height: 19.44px;
font-size: 12px;
}
.list .one div {
height: 19.44px;
line-height: 19.44px;
color: #999;
font-size: 12px;
}
.list .one p {
height: 77.75px;
color: #666;
font-size: 12px;
}
.list li {
margin-top: 12px;
color: #37a;
font-size: 12px;
}
.list li a:hover {
color: #fff;
background: #37a;
}
/* 右 */
.topic {
width: 265px;
height: 509.63px;
float: right;
}
.topic img {
width: 250px;
height: 125px;
}
/* 右下 */
.topic .topic-b {
width: 265px;
}
.topic-b .title {
height: 22.5px;
margin: 12px 0px;
}
.topic-b ul {
height: 298.13px;
}
.topic-b ul li {
height: 37.188px;
margin-top: 10px;
margin-bottom: 15px;
}
.topic-b ul li a {
height: 18.188px;
margin-bottom: 6px;
color: #37a;
font-size: 14px;
}
.topic-b ul li a:hover {
color: #fff;
background: #37a
}
.topic-b ul li span {
display: block;
font-size: 13px;
color: #aaaaaa;
margin-bottom: 15px
}

View File

@@ -0,0 +1,259 @@
.main {
height: 300px;
width: 1130px;
margin-left: 20px;
margin-top: 20px;
}
/* 左边的css */
.fenlei {
border: 1px solid #e1e1e1;
width: 813px;
height: 275px;
float: left;
}
/* 上 */
.fenlei .text {
height: 40px;
line-height: 40px;
background-color: #f1f1f1;
padding: 0px 14px;
}
.fenlei .text .text-l {
font-size: 15px;
color: #9c9c9c;
font-weight: 300
}
.fenlei .text .text-r {
color: #006699;
font-size: 10px;
}
.fenlei .text .text-r i {
font-size: 10px;
}
/* 下 */
.menu {
padding-left: 18px;
}
.menu li {
width: 184px;
height: 20px;
margin-right: 14px;
padding-top: 10px;
padding-bottom: 9px;
font-size: 10px;
float: left;
}
.menu li i {
color: #9c9c9c;
font-size: 10px;
}
.menu li a {
color: #4c4c4c;
padding-left: 16px;
}
/* 右边的css */
.register {
width: 300px;
border: 1px solid #e1e1e1;
float: right;
}
/* 登录注册 */
.register .register-t {
width: calc(150px + 150px);
height: 40px;
line-height: 40px;
font-size: 14px;
color: #3e3e3e;
text-align: center;
}
.register .register-t .register-t-l {
font-weight: bold;
width: 149px;
display: block;
float: left;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff
}
.register .register-t .register-t-r {
width: 149px;
display: block;
float: right;
background-color: #f5f6f5;
border-bottom: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}
/* 下 */
.register-b {
font-size: 12px;
width: 274px;
height: 213.431px;
padding: 10px 12px 10px 12px;
}
/* 两个框 */
.register-b .input {
width: 272px;
height: calc(58px + 58px);
font-size: 14px;
color: #cccccc;
}
.register-b .input .name {
height: 18px;
width: 262px;
padding: 9px 4px;
border: 1px solid #d5d5d5;
float: left;
margin: 10px 0px;
}
.register-b .input .password {
height: 18px;
width: 262px;
padding: 9px 4px;
border: 1px solid #d5d5d5;
float: left;
margin: 10px 0px;
}
/* zhong */
.register-b .zhuce {
width: 274px;
height: 19.44px;
display: block;
}
.zhuce li {
width: 60px;
height: 16px;
float: right;
}
.zhuce li ::after {
content: " ";
width: 1px;
height: 10px;
background: #9c9c9c;
display: inline-block;
margin-left: 6px;
}
.zhuce li:first-child ::after {
width: 0 !important;
}
.zhuce li a {
display: block;
color: #006699;
}
/* 两个登录按钮 */
.button {
width: 274px;
height: 28px;
margin-bottom: 10px;
}
.button .denglu {
text-align: center;
color: #fff;
font-size: 14px;
width: 130px;
height: 28px;
line-height: 28px;
background: #3086f2;
border: none;
border-radius: 2px;
font-weight: 700;
float: left
}
.button .weixin {
border-radius: 2px;
width: 130px;
height: 28px;
text-align: center;
border: none;
background-color: #00be00;
margin-left: 10px;
float: left
}
.button .weixin img {
display: inline-block;
width: 22px;
height: 18px;
font-size: 22px;
margin-top: 5px
}
.button .weixin .wx {
border: none;
background-color: #00be00;
font-size: 14px;
color: #fff;
font-weight: 700;
}
/* QQ那排 */
.bottom {
height: 20.1px;
width: 274px;
padding-top: 10px;
margin-bottom: 10px;
}
.bottom li {
width: 60px;
height: 20px;
float: left;
font-size: 12px
}
.bottom li::after {
content: " ";
width: 0.5px;
height: 10px;
display: inline-block;
background: #d0d0d0;
}
.bottom li a {
display: inline-block;
color: #3c3c3c;
}
.bottom li a img {
display: inline-block;
width: 15px;
height: 15px;
}
.bottom li a :last-child {
font-size: 12px;
color: #126395;
}

View File

@@ -0,0 +1,71 @@
.main {
padding-left: 24px;
padding-right: 24px;
width: 490px;
box-shadow: 0px 1px 3px rgb(18 18 18 / 20%);
border-radius: 4px;
margin-left: 20px
}
.hot {
border-bottom: 1px solid #EBEBEB;
height: 72px;
color: #121212;
font-size: 20px;
font-weight: 600;
line-height: 72px;
}
.list {
width: 442px;
}
.list li {
margin-top: 34px;
box-sizing: border-box;
overflow: hidden
}
.list span {
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
display: inline-block;
font-size: 12px;
background: red;
color: #fff;
border-radius: 5px;
}
.list a {
box-sizing: border-box;
height: 19.5px;
margin-left: 4px;
color: #121212;
font-size: 15px;
font-weight: 600;
}
.list div {
margin-top: 6px;
margin-left: 22px;
font-size: 12px;
color: #999999;
}
.all {
box-sizing: border-box;
margin-top: 22px;
padding-bottom: 26px;
color: #8590A6;
font-size: 14px;
font-weight: 500;
}
.all i {
font-size: 12px;
}

View File

@@ -0,0 +1,120 @@
<!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/douban.css">
</head>
<body>
<div class="main hidden">
<!-- 左 -->
<div class="hot">
<!-- 上 -->
<div class="hot-t">
<div>热点内容 · · · · · ·</div>
<a href="">( 更多 )</a>
</div>
<!-- 下 -->
<div class="hot-b">
<!-- 左图集 -->
<ul class="picture">
<li>
<img src="https://img3.doubanio.com/view/photo/albumcover/public/p2871391040.webp" alt="">
<a href="">辣团和南山の漫画</a>
<span>64张照片</span>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<a href="">花痴</a>
<span>304张照片</span>
</li>
<li>
<img src="https://img1.doubanio.com/view/photo/albumcover/public/p2867343799.webp" alt="">
<a href="">花痴</a>
<span>304张照片</span>
</li>
<li>
<img src="https://img3.doubanio.com/view/photo/albumcover/public/p2871391040.webp" alt="">
<a href="">辣团和南山の漫画</a>
<span>64张照片</span>
</li>
</ul>
<!-- 右list -->
<ul class="list">
<li class="one">
<a href="">一名平凡读者的买书总结</a>
<div>JrKgRn的日记</div>
<p>从小家教比较严格,高中之前几乎杜绝了一切电子产品,没有手机,也没有电脑,去同学家玩还要胆战心惊。好处是读书几乎成为了唯一的娱乐,买书从来不会被限制,坏处是,小镇...</p>
</li>
<li>
<a href="">媒介蒙太奇 之 观看奥运</a>
</li>
<li>
<a href="">根据真实案件改编的悬疑小说:死去的人,真的会为了复仇而活过来吗?</a>
</li>
<li>
<a href="">男友为我过生日没花一分钱,该不该分手?</a>
</li>
<li>
<a href="">男友为我过生日没花一分钱,该不该分手?</a>
</li>
<li>
<a href="">男友为我过生日没花一分钱,该不该分手?</a>
</li>
<li>
<a href="">男友为我过生日没花一分钱,该不该分手?</a>
</li>
</ul>
</div>
</div>
<!-- 右 -->
<div class="topic">
<!-- 广告 -->
<img src="https://img9.doubanio.com/view/dale-online/dale_ad/public/f60b6f97b5e9f6c.jpg" alt="">
<!-- 下 -->
<div class="topic-b">
<!-- 热门话题 -->
<div class="title">
<div>热门话题 · · · · · ·</div>
<a href="">( 去话题广场 )</a>
</div>
<!-- 下 -->
<ul>
<li>
<a href="">你记忆中的粽子味道</a>
<span>1.5万次浏览</span>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<span>1.5万次浏览</span>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<span>1.5万次浏览</span>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<span>1.5万次浏览</span>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<span>1.5万次浏览</span>
</li>
<li>
<a href="">你记忆中的粽子味道</a>
<span>1.5万次浏览</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,156 @@
<!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_3445167_o5pox8tpzh.css">
<link rel="stylesheet" href="../上课练习/css/clear.css">
<link rel="stylesheet" href="../上课练习/css/public.css">
<link rel="stylesheet" href="./css/douding.css">
</head>
<body>
<div class="main">
<!-- 左 -->
<div class="fenlei">
<!-- 上 -->
<div class="text hidden">
<div class="text-l left">文档分类</div>
<div class="text-r right">
更多
<i class="iconfont icon-gengduo"></i>
</div>
</div>
<!-- 下 -->
<ul class="menu ">
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
<li>
<i class="iconfont icon-jiahao"></i>
<a href="">幼儿/小学教育</a>
</li>
</ul>
</div>
<!-- 右 -->
<div class="register">
<!-- 上 -->
<div class="register-t">
<a class="register-t-l">登录</a>
<a class="register-t-r">注册</a>
</div>
<!-- 下 -->
<div class="register-b">
<div>
<!-- 两个框 -->
<div class="input">
<div class="name">
<input type="text" placeholder="用户名/邮箱/手机号">
</div>
<div class="password">
<input type="password" placeholder="登录密码">
</div>
</div>
<!-- 中 -->
<ul class="zhuce ">
<li>
<a href="" class="one">忘记密码?</a>
</li>
<li>
<a href="" class="two">登录注册</a>
</li>
</ul>
<!-- 两个登录按钮 -->
<div class="button">
<button class="denglu">登录</button>
<div class="weixin">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2F94edab33566b2eb5e51a99f7640e9aef.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656953231&t=e733104be300554c8d06dac9b31c6586"
alt="">
<button class="wx ">微信登录</button>
</div>
</div>
</div>
<!-- qq那一排 -->
<ul class="bottom">
<li>
<a href="">
<img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/e7cd7b899e510fb317cc8ae5df33c895d0430cee.jpg"
alt="">
QQ
</a>
</li>
<li>
<a href="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F03%2F10%2F985f7a4e6f4f9987badcbe1cfeeb3de9.jpg&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656926268&t=cfddbd74c48efe3b153db674b92b37ea"
alt="">
微博
</a>
</li>
<li>
<a href="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a1329413251x225688515b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656926362&t=6737110fc2c84eb50303649e59faa473"
alt="">
支付宝
</a>
</li>
<li class="more">
<a href="" class="more">更多
<i class="iconfont icon-z044"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!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>zhihu</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3446945_e95m1wkb1vd.css">
<link rel="stylesheet" href="../上课练习/css/clear.css">
<link rel="stylesheet" href="../上课练习/css/public.css">
<link rel="stylesheet" href="./css/zhihu.css">
</head>
<body>
<div class="main">
<div class="hot">
近期热点
</div>
<ul class="list">
<li class="">
<span>1</span>
<a href=""> 如何看待河南大学彭同学最后八分钟的求助电话?</a>
<div class="">1209 万浏览 · 7081 关注 · 2780 回答</div>
</li>
<li class="">
<span>2</span>
<a href=""> 如何看待河南大学彭同学最后八分钟的求助电话?</a>
<div class="">1209 万浏览 · 7081 关注 · 2780 回答</div>
</li>
<li class="">
<span>3</span>
<a href=""> 如何看待河南大学彭同学最后八分钟的求助电话?</a>
<div class="">1209 万浏览 · 7081 关注 · 2780 回答</div>
</li>
<li class="">
<span>4</span>
<a href=""> 如何看待河南大学彭同学最后八分钟的求助电话?</a>
<div class="">1209 万浏览 · 7081 关注 · 2780 回答</div>
</li>
</ul>
<div class="all">
查看全部热点问题
<i class="iconfont icon-gengduo"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,280 @@
.menu {
width: 240px;
height: 100vh;
position: fixed;
border-right: 1px solid #e6e6e8;
box-sizing: border-box;
z-index: 999;
}
.menu .logo {
width: 146px;
height: 36px;
display: block;
padding-top: 18px;
padding-bottom: 34px;
margin: 0 auto;
}
.menu ul {
margin: 0px 28px;
}
.menu ul li {
height: 40px;
line-height: 40px;
margin-bottom: 8px;
}
.menu ul li a {
font-size: 16px;
color: #111622
}
.menu ul .active {
background: #f7f7f7;
border-radius: 3px;
}
.menu ul li a img {
vertical-align: text-top;
margin-left: 4.5px;
}
.menu ul li span {}
.header {
width: calc(100% - 240px);
height: 64px;
position: fixed;
z-index: 999;
left: 240px;
border-bottom: 1px solid #e6e6e8;
box-sizing: border-box;
background: #fff;
}
.header .search {
width: 440px;
height: 36px;
background: #f7f7f7;
border: 1px solid #e6e6e8;
border-radius: 3px;
box-sizing: border-box;
margin: 14px 0 0 32px;
}
.header .search input {
background: #0000;
height: 100%;
padding-left: 17px;
width: 343px;
box-sizing: border-box;
}
.header .search div {
height: 100%;
width: 75px;
position: relative;
line-height: 34px;
padding-left: 20px;
}
.header .search div::before {
content: " ";
width: 1px;
height: 16px;
background: #e6e6e6;
position: absolute;
left: -5px;
top: 8px;
}
.header .search div i {}
.header .search div span {
font-size: 16px;
color: #666;
}
.header-r {
width: 611px;
}
.header-r .header-r-l {
line-height: 64px
}
.header-r .header-r-l li {
float: left;
font-size: 14px;
color: #111622;
margin-right: 16px;
padding-right: 10px;
}
.header-r .header-r-l li a {
color: #111622;
}
.header-r .header-r-l li a span {}
.header-r .header-r-l li i {}
.header-r .header-r-r {
margin-top: 14px;
}
.header-r .header-r-r li:first-child {
border: 1px solid #e6e6e8;
height: 30px;
border-radius: 5px;
padding: 0 8px;
}
.header-r .header-r-r li:last-child {
padding: 0 26px;
height: 30px;
background-color: #ff2626;
border-radius: 5px;
color: #fff;
}
.header-r .header-r-r li {
float: left;
line-height: 32px;
margin-right: 24px;
font-size: 16px;
}
.header-r .header-r-r li i {}
.header-r .header-r-r li span {}
.content {
margin-left: 240px;
padding-top: 64px;
}
.content ul {}
.content ul li {
float: left;
padding-right: 16px;
margin-top: 44px;
}
.content .one img {
width: 500px;
height: 222px;
}
.content ul .two {
width: 242.2px;
}
.content .two .tupian:hover {
transform: scale(1.1);
}
.content ul .two .tu .tupian {
height: 135.8px;
width: 242px;
border-radius: 0%;
margin-bottom: 17px;
transition: all 0.3s;
}
.content ul .two .tu {
position: relative;
}
.content ul .two .tu .name {
width: 36px;
height: 20px;
line-height: 20px;
padding-left: 22px;
padding-right: 12px;
background: red;
color: white;
font-size: 12px;
border-radius: 10px;
position: absolute;
left: 12px;
top: 12px;
background-image: url(https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-5/1652689008111/9557bd3b37a1.gif);
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: 6px;
}
.content ul .two .tu .time {
font-size: 14px;
color: #fff;
position: absolute;
text-align: right;
top: 112px;
right: 10px;
}
.content ul .two div {}
.content ul .two div img {
width: 36px;
height: 36px;
border-radius: 100%;
float: left;
}
.content ul .two div div {
float: right;
width: 198.2px;
}
.content ul .two div .t {
font-size: 16px;
color: #111622;
}
.content ul .two div .c,
.content ul .two div .u {
margin-top: 7px;
font-size: 14px;
color: #505666;
display: block;
}

View File

@@ -0,0 +1,219 @@
<!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_3445167_it6ine1mov8.css">
<link rel="stylesheet" href="../上课练习/css/clear.css">
<link rel="stylesheet" href="../上课练习/css/public.css">
<link rel="stylesheet" href="./haokan.css">
</head>
<body>
<div class="menu">
<img class="logo" src="./img/下载.png" alt="">
<ul class="one">
<li class="active">
<a href="">
<img src="./img/下载.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/下载.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/下载.svg" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="./img/下载.svg" alt="">
<span>首页</span>
</a>
</li>
</ul>
</div>
<div class="header">
<div class="search left hidden">
<input class="left" type="text" placeholder="搜索">
<div class="right">
<i class="iconfont icon-sousuo"></i>
<span>搜索</span>
</div>
</div>
<div class="header-r right">
<ul class="header-r-l">
<li>
<a href="">
<i class="iconfont icon-sousuo"></i>
<span>下载客户端</span>
</a>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>创作中心</span>
</li>
<li>
<i class="iconfont icon-sousuo"></i>
<span>消息</span>
</li>
</ul>
<ul class="header-r-r">
<li>
<i class="iconfont icon-sousuo"></i>
<span>上传视频</span>
</li>
<li>
<span>登录</span>
</li>
</ul>
</div>
</div>
<div class="content">
<ul>
<li class="one">
<img src="https://pic.rmb.bdstatic.com/baidu-rmb-video-cover-1/2022-5/1652165445258/1758dd6fa448.png"
alt="">
</li>
<li class="two">
<div class="tu hidden">
<img class="tupian"
src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
alt="">
<div class="name">直播中</div>
<div class="time">00:17</div>
</div>
<div>
<img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
alt="">
<div div="b">
<span class="t">别用502粘了!看下图,比电焊还牛掰,啥都能粘</span>
<span class="c">影视小妖怪</span>
<span class="u">1631次观看 · 正在直播</span>
</div>
</div>
</li>
<li class="two">
<div class="tu hidden">
<img class="tupian"
src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
alt="">
<div class="name">直播中</div>
<div class="time">00:17</div>
</div>
<div>
<img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
alt="">
<div div="b">
<span class="t">别用502粘了!看下图,比电焊还牛掰,啥都能粘</span>
<span class="c">影视小妖怪</span>
<span class="u">1631次观看 · 正在直播</span>
</div>
</div>
</li>
<li class="two">
<div class="tu hidden">
<img class="tupian"
src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
alt="">
<div class="name">直播中</div>
<div class="time">00:17</div>
</div>
<div>
<img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
alt="">
<div div="b">
<span class="t">别用502粘了!看下图,比电焊还牛掰,啥都能粘</span>
<span class="c">影视小妖怪</span>
<span class="u">1631次观看 · 正在直播</span>
</div>
</div>
</li>
<li class="two">
<div class="tu hidden">
<img class="tupian"
src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
alt="">
<div class="name">直播中</div>
<div class="time">00:17</div>
</div>
<div>
<img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
alt="">
<div div="b">
<span class="t">别用502粘了!看下图,比电焊还牛掰,啥都能粘</span>
<span class="c">影视小妖怪</span>
<span class="u">1631次观看 · 正在直播</span>
</div>
</div>
</li>
<li class="two">
<div class="tu hidden">
<img class="tupian"
src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
alt="">
<div class="name">直播中</div>
<div class="time">00:17</div>
</div>
<div>
<img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
alt="">
<div div="b">
<span class="t">别用502粘了!看下图,比电焊还牛掰,啥都能粘</span>
<span class="c">影视小妖怪</span>
<span class="u">1631次观看 · 正在直播</span>
</div>
</div>
</li>
<li class="two">
<div class="tu hidden">
<img class="tupian"
src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
alt="">
<div class="name">直播中</div>
<div class="time">00:17</div>
</div>
<div>
<img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
alt="">
<div div="b">
<span class="t">别用502粘了!看下图,比电焊还牛掰,啥都能粘</span>
<span class="c">影视小妖怪</span>
<span class="u">1631次观看 · 正在直播</span>
</div>
</div>
</li>
<li class="two">
<div class="tu hidden">
<img class="tupian"
src="https://pics2.baidu.com/feed/b2de9c82d158ccbf0bc57b02cc64ce34b03541d0.jpeg?token=43f5549db0d4043a8269cf3a1f8fa654"
alt="">
<div class="name">直播中</div>
<div class="time">00:17</div>
</div>
<div>
<img src="http://pic.rmb.bdstatic.com/46e7a103845cf50da65284786c80bd58.jpeg@c_1,w_220,h_220,x_0,y_0"
alt="">
<div div="b">
<span class="t">别用502粘了!看下图,比电焊还牛掰,啥都能粘</span>
<span class="c">影视小妖怪</span>
<span class="u">1631次观看 · 正在直播</span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.173 4.66l4 2.588A4 4 0 0 1 20 10.606V17a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-6.394a4 4 0 0 1 1.827-3.358l4-2.588a4 4 0 0 1 4.346 0zM12 12.358a.8.8 0 0 0-.8.8v3.338a.8.8 0 1 0 1.6 0v-3.338a.8.8 0 0 0-.8-.8z" fill="#111622" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 319 B

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>
<script src="./rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/133.css">
</head>
<body>
<div class="header">
<div class="screach">
<img class="left" src="./img/133/left.png" alt="">
<div>
<img src="./img/133/screach.png" alt="">
<input type="text" placeholder="搜索我的订单">
</div>
</div>
<ul class="menu">
<li class="active">全部</li>
<li>待付款</li>
<li>待发货</li>
<li>待收货</li>
<li>待评价</li>
<li>待评价</li>
<li>售后</li>
</ul>
</div>
<div class="content">
<ul>
<li>
<div class="title">
<div>
<img src="./img/133/home.png" alt="">
<span>面包自营</span>
<img src="./img/133/right.png" alt="">
</div>
<span class="comment">待评价</span>
</div>
<ul class="product">
<li>
<img src="./img/133/porduct1.png" alt="">
<div class="name">
<span>包子芝麻小蛋糕美味香脆新品正品包邮</span>
<span>独立包装+原味</span>
</div>
<div class="price">
<span>¥38.8</span>
<span>X1</span>
</div>
</li>
<li>
<img src="./img/133/porduct1.png" alt="">
<div class="name">
<span>包子奶酪蛋糕美味新品正品
包邮发货</span>
<span>整箱x24+奶酪</span>
</div>
<div class="price">
<span>¥61.2</span>
<span>X1</span>
</div>
</li>
</ul>
<div class="money">
<span>共2件商品,合计:¥100.00 (含运费¥0.00)</span>
<div class="bottom">
<div class="delete">
<span>删除订单</span>
</div>
<div class="pingjia">
<span>评价</span>
</div>
</div>
</div>
</li>
<li>
<div class="title">
<div>
<img src="./img/133/home.png" alt="">
<span>面包自营</span>
<img src="./img/133/right.png" alt="">
</div>
<span class="comment">已完成</span>
</div>
<ul class="product">
<li>
<img src="./img/133/porduct1.png" alt="">
<div class="name">
<span>包子香脆牛角酥美味香脆新品
当天发货</span>
<span>包装+芝麻</span>
</div>
<div class="price">
<span>¥30.0</span>
<span>X3</span>
</div>
</li>
</ul>
<div class="money">
<span>共2件商品,合计:¥100.00 (含运费¥0.00)</span>
<div class="bottom">
<div class="delete">
<span>删除订单</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="fooder"></div>
</body>
</html>

View File

@@ -0,0 +1,192 @@
<!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>22</title>
<script src="./rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/22.css">
</head>
<body>
<div class="header line">
<img src="./img/22/fanhui.png" alt="">
<div>填写订单</div>
</div>
<div class="centent">
<div class="address">
<div class="left">
<div class="xinxi">
<span class="name">张晓明</span>
<span class="number">186****0019</span>
</div>
<div class="dizhi">上海市黄浦区中山南路128号千古美城1楼1210室</div>
</div>
<img src="./img/22/right1.png" alt="">
</div>
<div class="pay">
<span class="left">选择支付方式</span>
<div class="right">
<span>在线支付</span>
<img src="./img/22/three drop.png " alt="">
</div>
</div>
<ul class="store">
<li>
<div class="shang">
<!-- 店铺名 -->
<div class="name line">
<img class="home" src="./img/22/home.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="more" src="./img/22/right2.png" alt="">
</div>
<!-- 商品信息 -->
<ul class="goods line">
<li>
<img src="./img/22/product.png" alt="">
<div class="right">
<div class="top">
真丝连衣裙2019春夏新款
杭州大牌气质修……
</div>
<div class="middle">
<span class="color">颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="bottom">
<div class="price">
<span>¥</span>
<span>160.</span>
<span>00</span>
</div>
<span>X1</span>
</div>
</div>
</li>
</ul>
</div>
<div class="xia">
<!-- 订单备注 -->
<div class="remarks line">
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<!-- 优惠抵用 -->
<ul class="discount line">
<li>
<span>优惠抵用</span>
<span class="five">-¥5</span>
</li>
<li>
<span>快递费用</span>
<span>免费包邮</span>
</li>
</ul>
<!-- 商品金额 -->
<div class="price">
<span>商品金额</span>
<span>¥155.00</span>
</div>
</div>
</li>
<li>
<div class="shang">
<!-- 店铺名 -->
<div class="name line">
<img class="home" src="./img/22/home.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="more" src="./img/22/right2.png" alt="">
</div>
<!-- 商品信息 -->
<ul class="goods line">
<li>
<img src="./img/22/product.png" alt="">
<div class="right">
<div class="top">
真丝连衣裙2019春夏新款
杭州大牌气质修……
</div>
<div class="middle">
<span class="color">颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="bottom">
<div class="price">
<span>¥</span>
<span>160.</span>
<span>00</span>
</div>
<span>X1</span>
</div>
</div>
</li>
<li>
<img src="./img/22/product.png" alt="">
<div class="right">
<div class="top">
真丝连衣裙2019春夏新款
杭州大牌气质修……
</div>
<div class="middle">
<span class="color">颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="bottom">
<div class="price">
<span>¥</span>
<span>160.</span>
<span>00</span>
</div>
<span>X1</span>
</div>
</div>
</li>
</ul>
</div>
<div class="xia">
<!-- 订单备注 -->
<div class="remarks line">
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<!-- 优惠抵用 -->
<ul class="discount line">
<li>
<span>优惠抵用</span>
<span class="five">-¥5</span>
</li>
<li>
<span>快递费用</span>
<span>免费包邮</span>
</li>
</ul>
<!-- 商品金额 -->
<div class="price">
<span>商品金额</span>
<span>¥315.00</span>
</div>
</div>
</li>
</ul>
</div>
<div class="footer">
<span>共3件,</span>
<span>合计:</span>
<span>¥</span>
<span>5999.00</span>
<div>
<span>结算(2)</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,108 @@
<!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>39</title>
<script src="./rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/39.css">
</head>
<body>
<div class="header">
<img class="picture" src="./img/39/scan.png" alt="">
<div class="middle">
<ul class="font">
<li class="active">推荐</li>
<li>关注</li>
<li>直播</li>
</ul>
</div>
<img class="picture" src="./img/39/searc.png" alt="">
</div>
<div class="content">
<div class="left">
<div class="top">
<img src="./img/39/home.png" alt="">
<span>美林美妆合肥店</span>
<span>>7KM</span>
</div>
<div class="middle">
<img class="tupian" src="./img/39/tupian.png" alt="">
<div class="right">
<span>夏季网纱半身裙中长款纱……</span>
<div class="xia">
<div>
<div class="price">
<span>¥68.00</span>
<div class="red">
<span>精选</span>
</div>
</div>
<span>已卖1020</span>
</div>
<img class="shop" src="./img/39/shop car.png" alt="">
</div>
</div>
</div>
<div class="bottom">
<img src="./img/39/yinfu.png" alt="">
<span>你像花儿一样美(DJ)版</span>
</div>
</div>
<div class="user">
<div class="touxiang">
<img src="./img/39/touxiang.png" alt="">
<img src="./img/39/plus.png" alt="">
</div>
<ul>
<li>
<a href="">
<img src="./img/39/like.png" alt="">
<span>71.1W</span>
</a>
</li>
<li>
<a href="">
<img src="./img/39/share.png" alt="">
<span>分享</span>
</a>
</li>
<li>
<a href="">
<img src="./img/39/comment.png" alt="">
<span>评论</span>
</a>
</li>
<li>
<a href="">
<img src="./img/39/shop.png" alt="">
<span>购物袋</span>
</a>
</li>
</ul>
</div>
</div>
<ul class="fooder">
<li class="active">首页</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,223 @@
<!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>46</title>
<script src="./rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/46.css">
</head>
<body>
<div class="header">
<div></div>
<ul>
<li>圈子</li>
<li class="active">附近</li>
</ul>
<img src="./img/46/camer.png" alt="">
</div>
<div class="content">
<img class="background" src="./img/46/background.png" alt="">
<ul class="main">
<li>
<div class="left">
<img src="./img/46/shoppictu.png" alt="">
<img src="./img/46/home.png" alt="">
</div>
<div class="right">
<div>
<!-- 店铺名 -->
<div class="name">
<span>护肤品专卖店</span>
<span>>200km</span>
</div>
<p>我亲测好用我亲测好用我亲测好用我亲测好用我亲测好
用我亲测好用我亲测好用我亲测好用我亲测好用我亲好
用我亲测我亲测我亲测我亲测</p>
<!-- 三个图片 -->
<ul class="goods">
<li>
<div class="tupian">
<img src="./img/46/picture.png" alt="">
<img src="./img/46/black.png" alt="">
</div>
<div class="price">
<img src="./img/46/money.png" alt="">
<div>
<span>289.</span>
<span>00</span>
</div>
</div>
</li>
<li>
<div class="tupian">
<img src="./img/46/picture.png" alt="">
<img src="./img/46/black.png" alt="">
</div>
<div class="price">
<img src="./img/46/money.png" alt="">
<div>
<span>289.</span>
<span>00</span>
</div>
</div>
</li>
<li>
<div class="tupian">
<img src="./img/46/picture.png" alt="">
<img src="./img/46/black.png" alt="">
</div>
<div class="price">
<img src="./img/46/money.png" alt="">
<div>
<span>289.</span>
<span>00</span>
</div>
</div>
</li>
</ul>
</div>
<div class="under">
<!-- 时间 -->
<div class="hour">
<div class="time">
<span>3 </span>
<span>分钟前</span>
</div>
<div class="drop">
<img src="./img/46/drop.png" alt="">
</div>
</div>
<!-- 评论 -->
<div class="comment">
<div class="like line">
<img src="./img/46/linke.png" alt="">
<span>张三</span>
<span>、</span>
<span>李</span>
</div>
<ul class="discuss">
<li>
<span>小可</span>
<span>:精彩</span>
</li>
<li>
<span>小可</span>
<span>:精彩</span>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="left">
<img src="./img/46/shoppictu.png" alt="">
<img src="./img/46/home.png" alt="">
</div>
<div class="right">
<div>
<!-- 店铺名 -->
<div class="name">
<span>护肤品专卖店</span>
<span>>200km</span>
</div>
<p>我亲测好用我亲测好用我亲测好用我亲测好用我亲测好
用我亲测好用我亲测好用我亲测好用我亲测好用我亲好
用我亲测我亲测我亲测我亲测</p>
<!-- 三个图片 -->
<ul class="goods">
<li>
<div class="tupian">
<img src="./img/46/picture.png" alt="">
<img src="./img/46/black.png" alt="">
</div>
<div class="price">
<img src="./img/46/money.png" alt="">
<div>
<span>289.</span>
<span>00</span>
</div>
</div>
</li>
<li>
<div class="tupian">
<img src="./img/46/picture.png" alt="">
<img src="./img/46/black.png" alt="">
</div>
<div class="price">
<img src="./img/46/money.png" alt="">
<div>
<span>289.</span>
<span>00</span>
</div>
</div>
</li>
<li>
<div class="tupian">
<img src="./img/46/picture.png" alt="">
<img src="./img/46/black.png" alt="">
</div>
<div class="price">
<img src="./img/46/money.png" alt="">
<div>
<span>289.</span>
<span>00</span>
</div>
</div>
</li>
</ul>
</div>
<div class="under">
<!-- 时间 -->
<div class="hour">
<div class="time">
<span>3 </span>
<span>分钟前</span>
</div>
<div class="drop">
<img src="./img/46/drop.png" alt="">
</div>
</div>
<!-- 评论 -->
<div class="comment">
<div class="like line">
<img src="./img/46/linke.png" alt="">
<span>张三</span>
<span>、</span>
<span>李</span>
</div>
<ul class="discuss">
<li>
<span>小可</span>
<span>:精彩</span>
</li>
<li>
<span>小可</span>
<span>:精彩</span>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<ul class="fooder">
<li>首页</li>
<li>好友</li>
<li class="active">圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/70.css">
</head>
<body>
<div class="content">
<img class="background" src="./img/70/picture.png" alt="">
<div class="information">
<div class="data">
<img class="touxiang" src="./img/70/picture.png" alt="">
<span>新手体验店</span>
<div>
<img src="./img/70/location.png" alt="">
<span>广东东莞厂家直供一层 30号</span>
</div>
</div>
<div class="QRcode">
<img src="./img/70/QRcode.png" alt="">
<span>长按二维码马上逛店铺</span>
</div>
</div>
</div>
<div class="fooder">
<div class="top">
<span></span>
<span>更多分享</span>
<img src="./img/70/close.png" alt="">
</div>
<ul>
<li>
<img src="./img/70/qq.png" alt="">
<div>QQ</div>
</li>
<li>
<img src="./img/70/space.png" alt="">
<div>QQ空间</div>
</li>
<li>
<img src="./img/70/weibo.png" alt="">
<div>微博</div>
</li>
<li>
<img src="./img/70/link.png" alt="">
<div>复制链接</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,248 @@
body {
background: #f2f2f6;
}
.header {
width: 100%;
background: #fff;
padding: 0.23rem 0.3rem 0 0.21rem;
position: fixed;
z-index: 999;
box-sizing: border-box;
}
.header .screach {
display: flex;
align-items: center;
justify-content: flex-start
}
.header .screach .left {
width: 0.2rem;
height: 0.35rem;
margin-right: 0.48rem;
}
.header .screach div {
width: 6.31rem;
height: 0.6rem;
background-color: #f2f2f2;
border-radius: 0.3rem;
display: flex;
align-items: center;
}
.header .screach div img {
width: 0.32rem;
height: 0.34rem;
margin-left: 0.24rem;
margin-right: 0.18rem;
}
.header .screach div input {
font-family: PingFang-SC-Medium;
font-size: 0.26rem;
letter-spacing: 0rem;
color: #808080;
background: #f2f2f2;
}
.menu {
width: 100%;
overflow-x: scroll;
display: flex;
justify-content: space-between;
position: relative;
padding: 0.47rem 0.36rem 0.31rem 0.36rem;
white-space: nowrap;
box-sizing: border-box;
}
.menu li {
font-family: SimHei;
font-size: 0.3rem;
color: #424242;
margin-right: 0.39rem;
}
.menu li:first-child {
color: #5697f4;
position: relative;
}
.menu .active::after {
content: " ";
width: 0.31rem;
height: 0.04rem;
position: absolute;
bottom: 0;
left: 0.1rem;
background: #5697f4;
bottom: -0.27rem;
left: 50%;
transform: translate(-50%);
background: #5697f4;
}
.content {
position: absolute;
margin-top: 1.91rem;
}
.content>ul {}
.content ul li {
background: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0.3rem 0.28rem 0.26rem 0.28rem;
margin-top: 0.12rem
}
.content .title {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.content .title div {
display: flex;
align-items: center;
}
.content .title div img {
width: 0.24rem;
height: 0.25rem;
}
.content .title div span {
font-family: PingFang-SC-Bold;
font-size: 0.26rem;
letter-spacing: 0.006rem;
color: #333333;
margin: 0 0.18rem
}
.content .title div img:last-child {
width: 0.1rem;
height: 0.18rem;
}
.content .title .comment {
font-family: PingFang-SC-Medium;
font-size: 0.26rem;
letter-spacing: 0.006rem;
color: #5697f4;
}
.product {
width: 100%
}
.product li {}
.product li img {
width: 1.36rem;
height: 1.37rem;
}
.product li .middle {}
.product li .name {
width: 3.86rem;
display: flex;
flex-direction: column;
}
.product li .name span {
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #444444;
margin-bottom: 0.29rem;
}
.product li .name span:last-child {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #aaaaaa;
}
.product li .price {
display: flex;
flex-direction: column;
align-items: flex-end
}
.product li .price span {
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #000000;
}
.product li .price span:last-child {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #aaaaaa;
}
.content .money {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 100%;
}
.content .money span {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #000000;
}
.money .bottom {
display: flex;
margin-top: 0.2rem;
}
.content .money .bottom .delete {
width: 1.28rem;
height: 0.46rem;
border-radius: 0.23rem;
border: solid 0.01rem #dddddd;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.11rem;
}
.content .money .bottom .delete span {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #888888;
}
.content .money .bottom .pingjia {
width: 1.28rem;
height: 0.46rem;
border-radius: 0.23rem;
border: solid 0.01rem #5697f4;
display: flex;
align-items: center;
justify-content: center;
}
.content .money .bottom span {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #5697f4;
}

View File

@@ -0,0 +1,361 @@
body {
background: #f2f2f2;
}
.header {
width: 100%;
height: 0.88rem;
background-color: #ffffff;
display: flex;
align-items: center;
position: fixed;
z-index: 999;
box-sizing: border-box;
top: 0
}
.header img {
width: 0.2rem;
height: 0.33rem;
margin-left: 0.3rem;
}
.header div {
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #333333;
margin-left: 2.58rem;
}
.centent {
margin-top: 0.88rem;
margin-bottom: 1rem;
}
.address {
display: flex;
width: 100%;
flex: 1;
justify-content: space-between;
background-image: url(../img/22/blue.png);
background-repeat: no-repeat;
background-size: contain;
}
.address .left {
align-items: center;
margin-left: 0.3rem;
}
.address .left .xinxi {
margin-top: 0.21rem;
}
.address .left .xinxi .name {
font-family: PingFang-SC-Bold;
font-size: 0.3rem;
color: #333333;
margin-right: 0.56rem;
}
.address .left .xinxi .number {
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #333333;
}
.address .left .dizhi {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #333333;
margin-top: 0.17rem;
}
.address img {
width: 0.14rem;
height: 0.26rem;
margin-top: 0.37rem;
margin-bottom: 0.63rem;
margin-right: 0.3rem;
}
.centent .pay {
width: 100%;
height: 0.84rem;
background-color: #ffffff;
border-radius: 0.1rem;
margin-top: 0.19rem;
margin-bottom: 0.16rem;
display: flex;
justify-content: space-between;
align-items: center
}
.pay span {
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #333333;
}
.pay .left {
margin-left: 0.26rem;
}
.pay .right {
display: flex;
align-items: center
}
.pay .right img {
margin-left: 0.07rem;
width: 0.31rem;
height: 0.1rem;
margin-right: 0.44rem;
}
.store {}
.store li {
background: #ffffff;
}
.store li .shang {
margin-left: 0.24rem;
}
.store li .xia {
margin-left: 0.3rem;
}
/* 店铺名 */
.store li .name {
border-radius: 0.1rem 0.1rem 0rem 0rem;
padding-top: 0.2rem;
padding-bottom: 0.17rem;
}
.store li .name .home {
width: 0.24rem;
height: 0.22rem;
margin-right: 0.06rem;
}
.store li .name span {
font-size: 0.26rem;
color: #333333;
margin-right: 0.16rem;
}
.store li .name .more {
width: 0.1rem;
height: 0.19rem;
}
/* 商品信息 */
.goods {
padding-top: 0.29rem;
}
.goods li {
display: flex;
margin-bottom: 0.31rem;
}
.goods li img {
width: 2rem;
height: 1.65rem;
margin-right: 0.36rem;
}
.goods .right {}
.goods .right .top {
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #333333;
margin-right: 1.72rem;
}
.goods .right .middle .color {
margin-right: 0.36rem;
}
.goods .right .bottom {
margin-right: 0.76rem;
}
.goods .right .bottom .price {
margin-right: 2.64rem;
display: inline
}
.goods .right .bottom .price span {
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #ea4e3d;
}
.goods .right .bottom .price span:first-child {
font-family: PingFang-SC-Bold;
font-size: 0.2rem;
}
.goods .right .bottom .price span:last-child {
font-family: PingFang-SC-Bold;
font-size: 0.24rem;
}
.goods .right span {
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #999999;
}
/* 订单备注 */
.remarks {
width: 100%;
padding-top: 0.3rem;
padding-bottom: 0.29rem;
}
.remarks span {
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #333333;
margin-right: 0.31rem;
}
.remarks input {
width: 4.15rem;
height: 0.27rem;
font-family: PingFang-SC-Medium;
font-size: 0.26rem;
color: #aaaaaa;
border: 0;
}
.discount {
padding-top: 0.22rem;
padding-bottom: 0.04rem;
}
.discount li {
display: flex;
justify-content: space-between;
flex: 1;
margin-right: 0.28rem;
margin-bottom: 0.12rem;
}
.discount li span {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #333333;
}
.discount li .five {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #f09c48;
}
.xia .price {
padding-top: 0.3rem;
padding-bottom: 0.25rem;
}
.xia .price span {
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #333333;
margin-right: 4.3rem
}
.xia .price span:last-child {
font-family: PingFang-SC-Bold;
font-size: 0.34rem;
color: #ea4e3d;
margin-right: 0.26rem !important;
}
.footer {
margin-top: 0.22rem;
padding-top: 0.16rem;
padding-bottom: 0.1rem;
background: #ffffff;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
z-index: 999;
bottom: 0;
width: 100%;
}
.footer span {
font-family: PingFang-SC-Medium;
font-size: 0.26rem;
line-height: 0.2rem;
color: #999999;
}
.footer span:nth-child(2) {
margin-left: 0.14rem;
}
.footer span:nth-child(3) {
font-family: PingFang-SC-Bold;
font-size: 0.24rem;
line-height: 0.2rem;
color: #000000;
margin-left: 0.27rem;
}
.footer span:nth-child(4) {
font-family: PingFang-SC-Bold;
font-size: 0.3rem;
line-height: 0.2rem;
color: #000000;
margin-left: 0.06rem;
}
.footer div {
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
margin-right: 0.24rem;
margin-left: 0.42rem;
display: flex;
justify-content: center;
align-items: center
}
.footer div span {
font-family: PingFang-SC-Bold;
font-size: 0.28rem;
line-height: 0.2rem;
color: #ffffff;
}

View File

@@ -0,0 +1,282 @@
body {
width: 100%;
height: 100%;
background-image: url(../img/39/background.png);
background-size: cover;
}
.header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.37rem 0.37rem 0rem 0.37rem;
position: fixed;
z-index: 999;
box-sizing: border-box;
top: 0;
}
.header .picture {
width: 0.43rem;
height: 0.43rem;
}
.header div {
display: flex;
flex-direction: column;
}
.header .font {
display: flex;
}
.header ul li {
font-size: 0.3rem;
color: #fefefe;
text-shadow: 0.03rem 0.05rem 0.03rem rgb(0 0 0 / 74%);
margin-right: 0.23rem;
position: relative;
}
.header ul .active::after {
content: " ";
background-image: url(../img/39/underli.png);
position: absolute;
bottom: -0.1rem;
left: 50%;
transform: translate(-50%);
width: 0.35rem;
height: 0.02rem;
}
.content {
display: flex;
width: 100%;
height: calc(100vh - 1rem);
position: relative;
}
.left {
position: absolute;
bottom: 0;
left: 0.37rem
}
.left .top {
margin-bottom: 0.22rem;
display: flex;
align-items: center;
}
.left .top img {
width: 0.28rem;
height: 0.26rem;
margin-right: 0.1rem;
}
.left .top span {
font-family: PingFangSC-Regular;
font-size: 0.26rem;
color: #ffc600;
}
.left .top span:last-child {
padding-left: 0.3rem
}
.left .middle {
width: 5.65rem;
height: 1.68rem;
background-color: #ffffff;
display: flex;
align-items: center;
padding-left: 0.09rem;
}
.left .middle .tupian {
width: 1.48rem;
height: 1.48rem;
}
.left .middle .right {
margin-left: 0.15rem;
}
.left .middle .right span,
.left .middle .right .xia .price span {
font-family: PingFang-SC-Bold;
font-size: 0.28rem;
color: #333333;
}
.left .middle .right .xia {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 0.2rem
}
.left .middle .right .xia div {}
.left .middle .right .xia .price {
display: flex;
align-items: center;
margin-bottom: 0.14rem;
}
.left .middle .right .xia .price .red {
width: 0.6rem;
height: 0.24rem;
background-color: #ea4e3d;
border-radius: 0.12rem;
display: flex;
align-items: center;
justify-content: center
}
.left .middle .right .xia .price .red span {
font-family: PingFang-SC-Regular;
font-size: 0.2rem;
color: #fffefe;
zoom: 0.8
}
.left .middle .right .xia div span {
font-family: PingFang-SC-Medium;
font-size: 0.2rem;
color: #626262;
display: block
}
.left .middle .right .shop {
width: 0.46rem;
height: 0.46rem;
}
.left .bottom {
display: flex;
align-items: center;
margin-top: 0.27rem;
margin-bottom: 0.13rem;
}
.left .bottom img {
width: 0.27rem;
height: 0.28rem;
margin-right: 0.13rem;
}
.left .bottom span {
font-family: PingFangSC-Regular;
font-size: 0.24rem;
color: #ffffff;
}
.content .user {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 0;
right: 0;
}
.content .user .touxiang {
position: relative;
}
.content .user .touxiang img {
width: 0.96rem;
height: 0.97rem;
}
.content .user .touxiang img:last-child {
width: 0.34rem;
height: 0.33rem;
position: absolute;
left: 0.34rem;
bottom: -0.165rem;
}
.content .user ul {
margin-bottom: 0.14rem;
margin-left: 0.39rem;
margin-right: 0.35rem;
margin-top: 0.1rem;
}
.content .user ul li {
margin-top: 0.32rem;
}
.content .user ul li a {
display: flex;
flex-direction: column;
align-items: center
}
.content .user ul li a img {
width: 0.68rem;
height: 0.63rem;
margin-bottom: 0.1rem;
}
.content .user ul li a span {
font-family: SourceHanSansCN-Regular;
font-size: 0.2rem;
color: #ffffff;
}
.fooder {
width: 100%;
height: 1rem;
position: fixed;
z-index: 999;
background-color: #000000;
padding-left: 0.39rem;
padding-right: 0.54rem;
display: flex;
bottom: 0;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.fooder li {
font-family: SourceHanSansCN-Regular;
font-size: 0.24rem;
color: #ffffff;
position: relative;
}
.fooder li:first-child {
font-family: AdobeHeitiStd-Regular;
font-size: 0.3rem;
color: #ffffff;
}
.fooder .active::after {
content: " ";
position: absolute;
width: 0.51rem;
height: 0.03rem;
background: #fff;
left: 50%;
transform: translate(-50%);
bottom: -50%;
}

View File

@@ -0,0 +1,301 @@
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.4rem;
position: fixed;
z-index: 999;
width: 100%;
padding-top: 0.38rem;
box-sizing: border-box;
top: 0;
}
.header ul {
display: flex;
}
.header ul li {
font-family: AdobeHeitiStd-Regular;
font-size: 0.36rem;
color: #ffffff;
margin-left: 0.34rem;
position: relative;
}
.header ul .active::after {
content: " ";
position: absolute;
bottom: -0.1rem;
width: 0.4rem;
height: 0.04rem;
background-color: #ffffff;
left: 50%;
transform: translate(-50%);
border-radius: 0.02rem;
}
.header img {
width: 0.62rem;
height: 0.48rem;
}
.content {
margin-bottom: 1rem;
}
.content .background {
width: 7.5rem;
height: 5.5rem;
}
.main {
margin-left: 0.24rem;
margin-right: 0.41rem;
}
.main>li {
display: flex;
justify-content: space-between;
margin-top: 0.42rem;
}
.main .left {
width: 0.86rem;
height: 0.86rem;
margin-right: 0.23rem;
position: relative;
}
.main .left img {
width: 0.86rem;
height: 0.86rem;
}
.main .left img:last-child {
width: 0.27rem;
height: 0.29rem;
position: absolute;
bottom: 0;
right: 0
}
.main .right {}
.main .right .name {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.23rem;
}
.main .right .name span {
font-family: PingFang-SC-Bold;
font-size: 0.3rem;
color: #5a6f92;
}
.main .right .name span:last-child {
font-family: PingFangSC-Regular;
font-size: 0.24rem;
color: #999999;
}
.main .right p {
font-family: PingFangSC-Regular;
font-size: 0.24rem;
color: #686868;
margin-bottom: 0.26rem;
}
.main .right .goods {
display: flex;
}
.main .right .goods li {
position: relative;
}
.main .right .goods li:nth-child(2) {
margin-left: 0.11rem;
margin-right: 0.11rem;
}
.main .right .goods li .tupian {
position: relative;
}
.main .right .goods li .tupian img {
width: 1.85rem;
height: 1.85rem
}
.main .right .goods li .tupian img:last-child {
height: 0.4rem;
position: absolute;
left: 0;
bottom: 0;
}
.main .right .goods li .price {
position: absolute;
display: flex;
align-items: center;
bottom: 0;
left: 0.85rem
}
.main .right .goods li .price img {
width: 0.12rem;
height: 0.16rem;
margin-right: 0.07rem;
}
.main .right .goods li .price span {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #ffffff;
}
.main .right .goods li .price span:last-child {
font-size: 0.2rem;
}
.main .right .under {
margin-top: 0.27rem;
margin-right: 0.13rem
}
.main .right .hour {
display: flex;
justify-content: space-between;
align-items: center;
}
.main .right .time {}
.main .right .time span {
font-family: PingFangSC-Regular;
font-size: 0.24rem;
color: #989898;
}
.main .right .time span:last-child {
font-family: PingFangSC-Regular;
font-size: 0.2rem;
}
.main .right .drop {
width: 0.39rem;
height: 0.27rem;
background-color: #f1f1f1;
display: flex;
align-items: center;
justify-content: center
}
.main .right .drop img {
width: 0.2rem;
height: 0.05rem;
}
.comment {
margin-top: 0.38rem;
width: 5.7rem;
background-color: #f7f7f7;
border-radius: 0.1rem;
padding-left: 0.29rem;
padding-top: 0.28rem;
box-sizing: border-box;
padding-bottom: 0.2rem
}
.comment .like {
padding-bottom: 0.21rem
}
.comment .like img {
width: 0.29rem;
height: 0.26rem;
margin-right: 0.22rem;
}
.comment .like span {
font-family: PingFang-SC-Bold;
font-size: 0.3rem;
color: #5a6f92;
}
.comment .like span:nth-child(3) {
color: #3c3c3c;
}
.comment .discuss {}
.comment .discuss li {
margin-top: 0.21rem;
}
.comment .discuss li span {
font-family: PingFang-SC-Bold;
font-size: 0.3rem;
color: #5a6f92;
}
.comment .discuss li span:last-child {
font-family: PingFang-SC-Medium;
font-size: 0.3rem;
color: #0e0e0e;
}
.fooder {
height: 1rem;
background-color: #000000;
position: fixed;
z-index: 999;
width: 100%;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.39rem;
padding-right: 0.54rem;
box-sizing: border-box;
}
.fooder li {
font-family: AdobeHeitiStd-Regular;
font-size: 0.24rem;
color: #ffffff;
}
.fooder .active::after {
content: " ";
width: 0.51rem;
height: 0.03rem;
border-radius: 0.015rem;
position: absolute;
background: #ffffff;
background: #ffffff;
left: 50%;
transform: translate(-50%);
bottom: -0.2rem;
}
.fooder li:nth-child(3) {
font-family: AdobeHeitiStd-Regular;
font-size: 0.3rem;
color: #ffffff;
position: relative;
}

View File

@@ -0,0 +1,152 @@
body {
width: 100%;
height: 100%;
background-image: url(../img/70/background.png);
background-size: cover;
}
.background {
width: 7.5rem;
position: absolute;
z-index: -1;
}
.content {
width: 6rem;
height: 7rem;
background-color: #ffffff;
border-radius: 0.2rem;
position: relative;
left: 0.75rem;
top: 2.05rem;
}
.content>.background {
width: 6rem;
height: 4.57rem;
position: absolute;
z-index: 2;
}
.content .information {}
.content .data {
position: absolute;
z-index: 3;
}
.content .data {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 1.3rem;
left: 1.14rem;
}
.touxiang {
width: 1.08rem;
height: 1.08rem;
border-radius: 100%;
border: 0.05rem solid #ffffff;
margin-bottom: 0.51rem;
}
.content .data span {
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #ffffff;
margin-bottom: 0.26rem;
}
.content .data div {}
.content .data div img {
width: 0.18rem;
height: 0.24rem;
margin-right: 0.13rem;
}
.content .data div span {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #ffffff;
}
.content .QRcode {
position: absolute;
bottom: 0.29rem;
left: 1.59rem;
display: flex;
flex-direction: column;
align-items: center
}
.content .QRcode img {
width: 1.95rem;
height: 1.95rem;
position: relative;
z-index: 2;
margin-bottom: 0.26rem
}
.content .QRcode span {
font-family: PingFang-SC-Medium;
font-size: 0.28rem;
color: #333333;
}
.fooder {
background-color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
padding: 0.44rem 0.4rem 0.35rem 0.4rem;
box-sizing: border-box;
}
.fooder .top {
display: flex;
justify-content: space-between;
align-items: center
}
.fooder .top span {
font-family: PingFang-SC-Medium;
font-size: 0.34rem;
color: #333333;
}
.fooder .top img {
width: 0.24rem;
height: 0.24rem;
}
.fooder ul {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.34rem;
}
.fooder ul li {
display: flex;
align-items: center;
flex-direction: column;
margin-right: 0.8rem;
}
.fooder ul li img {
width: 1.08rem;
height: 1.08rem;
}
.fooder ul li div {
font-family: PingFang-SC-Medium;
font-size: 0.26rem;
color: #333333;
}

View File

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

View File

@@ -0,0 +1,3 @@
.line {
border-bottom: 0.01rem solid #f2f2f2
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 936 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 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: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

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: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

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