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,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/Learn.css">
</head>
<body>
<div class="header">
<div></div>
<ul>
<li class="on">圈子</li>
<li class="active in">附近</li>
</ul>
<img src="./img/xiangji.png" alt="">
</div>
<div class="content">
<img src="./img/timg.png" alt="">
<!-- <div class="mon">
<div class="icon">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="text">
<div class="text_title">
护肤品专卖店
<span>>200km</span>
</div>
<div class="text_bottom">
我亲测好用我亲测好用我亲测好用我亲测好用我亲测好
用我亲测好用我亲测好用我亲测好用我亲测好用我亲好
用我亲测我亲测我亲测我亲测
</div>
<div class="text_image">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="text_time">
<p>3分钟</p>
<img src="" alt="">
</div>
</div>
<div class="comments">
<div>
<img src="" alt="">
<span>张三 李</span>
</div>
<ul>
<li>
小可
<span>精彩</span>
</li>
<li>
小可
<span>精彩</span>
</li>
</ul>
</div>
</div> -->
</div>
<ul class="footer">
<li>首页</li>
<li>好友</li>
<li class="active">圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,28 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
body {
background: #eeeef3;
font-size: 0;
}
.content {
margin-top: 0.9rem;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

View File

@@ -0,0 +1,83 @@
.header {
height: 0.9rem;
width: 100%;
left: 0;
top: 0;
position: fixed;
align-items: center;
justify-content: space-between;
background: #fff;
padding-left: 0.21rem;
padding-right: 0.21rem;
box-sizing: border-box;
display: flex;
}
.header img {
width: 0.2rem;
height: 0.35rem;
}
body {
background: #fff;
}
.content {
margin: 0 0.6rem;
margin-top: 2.69rem;
margin-bottom: 4.45rem;
box-sizing: border-box;
}
.center {}
.center .login {
font-size: 0.54rem;
color: #000000;
}
.center .text {
margin-top: 1.21rem;
}
.center .text input {
font-size: 0.36rem;
color: #c7c7cc;
margin-bottom: 0.71rem;
border-bottom: 0.01rem solid #e8e8e8;
padding-bottom: 0.32rem;
width: 100%;
}
.center .button {
background-color: #5697f4;
border-radius: 0.49rem;
font-size: 0.34rem;
color: #ffffff;
height: 0.98rem;
align-items: center;
display: flex;
justify-content: center;
}
.center .bottom {
display: flex;
justify-content: space-between;
margin-top: 0.55rem;
box-sizing: border-box;
}
.bottom {
font-size: 0.28rem;
color: #666666;
display: flex;
}
.bottom .bottom_right {
display: flex;
}
.bottom .enroll {
font-size: 0.28rem;
color: #5697f4;
}

View File

@@ -0,0 +1,107 @@
.footer {
height: 1rem;
background-color: #000000;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.39rem;
padding-right: 0.54rem;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
}
.footer li {
font-size: 0.24rem;
color: #ffffff;
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.footer .active::after {
content: "";
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
position: absolute;
bottom: 0.05rem;
left: 50%;
transform: translateX(-50%);
}
.footer .active {
font-size: 0.3rem;
}
.header {
position: fixed;
width: 100%;
height: 0.9rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.43rem;
box-sizing: border-box;
z-index: 999;
}
.header ul {
display: flex;
align-items: center;
height: 100%;
}
.header ul li {
font-size: 0.36rem;
color: #ffffff;
position: relative;
height: 100%;
align-items: center;
display: flex;
}
.header ul .on {
padding-right: 0.423rem;
}
.header ul .in {
padding-left: 0.423rem;
}
.header ul .active::after{
width: 0.4rem;
height: 0.04rem;
background-color: #ffffff;
border-radius: 0.02rem;
content: "";
position: absolute;
bottom: 0.1rem;
left: 50%;
/* transform: translateX(-50%); */
}
.header img {
/* width: 100%; */
height: 32.4%;
}
body {
background: #fff;
}
.content {
margin-top: 0 !important;
height: calc(100vh - 1rem);
}
.content img {
width: 100%;
height: 5.5rem;
background-size: cover;
}

View File

@@ -0,0 +1,237 @@
.footer {
width: 100%;
height: 1rem;
background: #000000;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.39rem;
padding-right: 0.54rem;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
}
.footer li {
font-size: 0.24rem;
color: #ffffff;
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.footer .active::after {
content: "";
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
position: absolute;
bottom: 0.05rem;
left: 50%;
transform: translateX(-50%);
}
.header {
width: 100%;
height: 0.9rem;
display: flex;
position: fixed;
justify-content: space-between;
align-items: center;
padding: 0 0.37rem;
box-sizing: border-box;
z-index: 999;
}
.header img {
width: 0.42rem;
height: 0.42rem;
}
.header ul {
display: flex;
align-items: center;
}
.header ul li {
font-size: 0.3rem;
color: #fefefe;
position: relative;
}
.header ul .active::after {
content: "";
width: 0.35rem;
height: 0.02rem;
background-color: #ffffff;
position: absolute;
border-radius: 0.01rem;
bottom: -0.1rem;
left: 50%;
transform: translateX(-50%);
box-shadow: 0rem 0.02rem 0.02rem 0rem rgba(12, 0, 255, 0.35);
}
.header ul li:nth-child(2) {
margin: 0 0.23rem;
}
.content {
margin-top: 0 !important;
background: url(../img/backimg.png);
background-size: cover;
height: calc(100vh - 1rem);
position: relative;
}
.auth {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0.14rem;
right: 0.19rem;
align-items: center;
}
.auth .follow {
width: 0.96rem;
height: 0.97rem;
position: relative;
}
.auth .follow .head {
border: solid 0.03rem #ffffff;
width: 100%;
height: 100%;
border-radius: 100%;
box-sizing: border-box;
}
.auth .follow .add {
width: 0.34rem;
height: 0.33rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.16rem;
}
.auth ul {
margin-top: 0.42rem;
}
.auth ul li {
margin-bottom: 0.36rem;
}
.auth ul li img {
width: 0.68rem;
height: 0.63rem;
margin-bottom: 0.09rem
}
.auth ul li p {
font-size: 0.24rem;
color: #ffffff;
}
.music {
position: absolute;
left: 0.3rem;
bottom: 0.1rem;
}
.music .shop_name {
display: flex;
align-items: center;
margin-bottom: 0.22rem;
}
.music .shop_name img {
width: 0.28rem;
height: 0.26rem;
margin-right: 0.1rem;
margin-left: 0.07rem;
}
.music .shop_name span {
font-size: 0.26rem;
color: #ffc600;
}
.music .item {
position: relative;
width: 5.85rem;
height: 1.68rem;
background-color: #ffffff;
padding-left: 0.09rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
box-sizing: border-box;
display: flex;
align-items: center;
}
}
.music .item .item_img {
width: 1.48rem;
height: 1.48rem;
margin-right: 0.15rem;
}
.music .item .item_right {
}
.music .item .item_right .item_title {
font-size: 0.28rem;
color: #333333;
margin-bottom: 0.16rem;
}
.music .item .item_right .item_price {
font-size: 0.28rem;
color: #333333;
display: flex;
align-items: center;
margin-bottom: 0.09rem;
}
.music .item .item_right .item_price .back {
width: 0.6rem;
height: 0.24rem;
background-color: #ea4e3d;
border-radius: 0.12rem;
display: inline-block;
font-size: 0.2rem;
color: #fffefe;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.03rem;
}
.music .item .item_right .item_price span {
zoom: 0.8;
}
.music .item .item_right .item_his {
font-size: 0.2rem;
color: #626262;
zoom: 0.78;
}
}
.music .item .car {
position: absolute;
width: 0.46rem;
height: 0.46rem;
right: 0.34rem;
bottom: 0.17rem;
}
.music .music_name {
display: flex;
align-items: center;
margin-top: 0.27rem;
}
.music .music_name img {
width: 0.27rem;
height: 0.28rem;
margin-right: 0.13rem;
}
.music .music_name span {
font-size: 0.24rem;
color: #ffffff;
}

View File

@@ -0,0 +1,13 @@
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.padd {
padding-left: 0.37rem;
padding-right: 0.41rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 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: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1004 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1,45 @@
<!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="./js/rem.js"></script>
<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>
<div></div>
</div>
<div class="content">
<div class="center">
<div class="login">登录</div>
<div class="text">
<input type="text" placeholder="请输入账号">
<input type="" placeholder="请输入密码">
</div>
<div class="button">登录</div>
<div class="bottom">
<div>忘记密码?</div>
<div class="bottom_right">
<div>没有账号?</div>
<div class="enroll">立即注册</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,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>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/live.css">
</head>
<body>
<div class="header">
<img src="./img/sys.png" alt="">
<ul>
<li class="active">推荐</li>
<li>关注</li>
<li>直播</li>
</ul>
<img src="./img/ss.png" alt="">
</div>
<div class="content">
<div class="auth">
<div class="follow">
<img class="head" src="./img/auth.png" alt="">
<img class="add" src="./img/add.png" alt="">
</div>
<ul>
<li>
<img src="./img/like.png" alt="">
<p>71.1W</p>
</li>
<li>
<img src="./img/like.png" alt="">
<p>分享</p>
</li>
<li>
<img src="./img/like.png" alt="">
<p>评论</p>
</li>
<li>
<img src="./img/like.png" alt="">
<p>购物袋</p>
</li>
</ul>
</div>
<div class="music">
<div class="shop_name">
<img src="./img/shop.png" alt="">
<span>美林美妆合肥店>7KM</span>
</div>
<div class="item">
<img class="item_img" src="./img/4832198.png" alt="">
<div class="item_right">
<div class="item_title">夏季网纱半身裙中长款纱……</div>
<div class="item_price">
¥68.00
<span class="back">
<span>精选</span>
</span>
</div>
<div class="item_his">已卖1020</div>
</div>
<img class="car" src="./img/car.png" alt="">
</div>
<div class="music_name">
<img src="./img/music.png" alt="">
<span>你像花儿一样美(DJ)版</span>
</div>
</div>
</div>
<ul class="footer">
<li class="active">首页</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,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>rem</title>
<script>
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";
}
</script>
<style>
body {
margin: 0;
}
/* html {
font-size: 100px;
} */
/* @media screen and (width:414px) {
body {
background: yellow;
}
} */
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: yellow;
}
/* 真实尺寸 = 你写rem * html上的 font-size */
/* 动态修改html上的font-size
1.媒体查询 @media */
屏幕的宽度 / 传过来图片的宽度 * 100
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
<style>
body {
width: 100%;
height: 100vh;
background: red;
margin: 0;
}
@media screen and (min-width:100px) and (max-width:400px) {
body {
background: yellow;
}
}
</style>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
width: 250px;
transition: all 2s cubic-bezier(0.7, -0.25, 0.84, 1.58);
}
input:hover {
width: 400px;
}
@keyframes an {
from {
width: 200px;
height: 200px;
background: red;
}
to {
width: 300px;
height: 300px;
background: blue;
}
}
/* .box {
width: 200px;
height: 200px;
animation: an 3s ease ;
} */
.box1 {
width: 100px;
height: 75px;
background: red;
border: 1px solid black;
transform: translateY(200px);
/* {x,y轴平移} */
}
.box2 {
width: 100px;
height: 75px;
background: red;
border: 1px solid black;
transform: rotateX(10deg);
/* {正数顺时针旋转,单位deg} */
}
.box3 {
width: 100px;
height: 75px;
background: red;
border: 1px solid black;
transform: scale(3, 1);
/* {让元素放大缩小x,y} */
}
.box4 {
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
transform: skew(100deg,0);
}
/* {斜切x,y} */
/* matrix()6个参数,包括旋转,缩放,移动(平移)和斜切 */
/* rotate: ();沿中心轴旋转 rotateX: ();沿X轴旋转 rotateY:():沿Y轴旋转 */
</style>
</head>
<body>
<input type="text" placeholder="输入密码">
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

View File

@@ -0,0 +1,61 @@
class AJAX {
constructor() {
console.log("构造函数");
// 请求基地址
// this.baseUrl = "http://127.0.0.1:3000/api/json";
this.baseUrl = "http://127.0.0.1:3000/api";
this.http = new XMLHttpRequest();
}
/**
*
* @param {*object} parmas
* {
* url: '', // 请求地址
* data : { page: 1, count: 15 } // 请求参数
* success: () => {} // ajax成功后,回调拿回请求结果
* error: () => {} // ajax 失败后,回调拿回错误结果
* }
*/
get(parmas) {
// 将data 参数转化为 ?key=value&key=value
var str = ""
for (const key in parmas.data) {
str += `&${key}=${parmas.data[key]}`
}
str = str.replace("&", "?")
this.http.open("GET", `${this.baseUrl}${parmas.url}${str}`);
this.http.send();
this.readyState(parmas.success, parmas.error)
}
post(parmas) {
this.http.open("POST", `${this.baseUrl}${parmas.url}`);
this.http.setRequestHeader('Content-type', 'application/json; charset="utf-8"');
this.http.send(JSON.stringify(parmas.data));
this.readyState(parmas.success, parmas.error)
}
put() { }
delete() { }
// 给 get post put delete 进行状态监听的封装
readyState(success, error) {
this.http.onreadystatechange = () => {
if (this.http.readyState == 4) {
if (this.http.status == 200) {
var data = JSON.parse(this.http.response);
success(data)
} else {
error(this.http)
}
}
}
}
}
var http = new AJAX();

View File

@@ -0,0 +1,145 @@
<!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,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
height: 40px;
align-items: center;
padding: 0 15px;
border-bottom: 1px solid #efefef;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content ul {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<div class="content">
</div>
</body>
<script src="./ajax.js"></script>
<script>
// 定义标题列表
var index = 0;
var title = [
{ type: 1, title: '推荐', page: 1, total_page: 0, content: [] },
{ type: 2, title: '时令', page: 1, total_page: 0, content: [] },
{ type: 3, title: '食肉', page: 1, total_page: 0, content: [] },
{ type: 4, title: '素食', page: 1, total_page: 0, content: [] },
{ type: 5, title: '烘焙', page: 1, total_page: 0, content: [] },
];
function renderTitle() {
title.forEach((v, i) => {
$(".title").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
$(".content").innerHTML += `
<ul class="${i == 0 ? 'active' : ''}">
</ul>
`
})
// 生成好li标签
_(".title li").forEach((v, i) => {
v.onclick = () => {
_(".title li").forEach((item, index) => {
item.classList.remove("active");
_(".content ul")[index].classList.remove("active")
})
v.classList.add("active")
_(".content ul")[i].classList.add("active")
index = i;
getList();
}
})
getList();
// 使用li标签
}
function getList() {
if (title[index].content.length == 0) {
http.get({
url: '/index/class',
data: {
type: title[index].type,
page: title[index].page
},
success: (res) => {
var data = res.result;
title[index].total_page = data.total_page;
title[index].content = title[index].content.concat(data.items);
renderContentLi();
},
error: (err) => { }
});
}
}
function renderContentLi() {
title[index].content.forEach((v, i) => {
_(".content ul")[index].innerHTML += `
<li>
<p>${v.title}</p>
</li>
`
})
}
renderTitle()
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,140 @@
<!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,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
height: 40px;
align-items: center;
padding: 0 15px;
border-bottom: 1px solid #efefef;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content ul {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<div class="content">
</div>
</body>
<script src="./ajax.js"></script>
<script>
var inderx = 0
var title = [
{ tpye: 1, title: "推荐", page: 1, total_page: 0, content: [] },
{ type: 2, title: '时令', page: 1, total_page: 0, content: [] },
{ type: 3, title: '食肉', page: 1, total_page: 0, content: [] },
{ type: 4, title: '素食', page: 1, total_page: 0, content: [] },
{ type: 5, title: '烘焙', page: 1, total_page: 0, content: [] },
];
function renderTitle() {
title.forEach((v, i) => {
$(".title").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
$(".content").innerHTML += `
<ul class="${i == 0 ? 'active' : ''}"></ul>`
})
_(".title li").forEach((v, i) => {
v.onclick = () => {
_(".title li").forEach((item, index) => {
item.classList.remove("active")
_(".content ul")[index].classList.remove("active")
})
v.classList.add("active")
_(".content ul")[i].classList.add("active")
index = i;
getList();
}
})
getList();
}
function getList() {
if (title[index].content.length == 0) {
http.get({
url: '/index/class',
data: {
type: title[index].type,
page: title[index].page
},
success: (res) => {
var data = res.result;
title[index].total_page = data.total_page;
title[index].content = title[index].content.concat(data.items);
renderContentLi();
},
error: (err) => { }
});
}
}
function renderContentLi() {
title[index].content.forEach((v, i) => {
_(".content ul")[index].innerHTML += `
<li>
<p>${v.title}</p>
</li>
`
})
}
renderTitle()
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
// 获取多个标签
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,45 @@
<!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 src="./ajax.js"></script>
<script>
http.get({
url: '/class',
data: {},
success: (res) => {
renderLi(res.result.principal)
},
error: (err) => {
}
});
function renderLi(data) {
console.log(data);
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">${v.title}</a>
</li>
`
});
}
</script>
</html>

View File

@@ -0,0 +1,512 @@
const express = require('express');
const router = express.Router();
const config = require("../config")
const utils = require("../utils")
const cheerio = require('cheerio');
/**
* 1:首页获取分类数据接口
* 请求示例:http://127.0.0.1:3000/api/index/class?type=1&page=1
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/index/class
* 请求参数:
* type: 取值1(推荐),2(时令),3(食肉),4(素食),5(烘焙)
* page: 分页页码
*/
router.get('/index/class', function(req, res, next) {
var type = req.query.type || 1;
var page = req.query.page || 1;
utils.GET(config.HomeClassType(type,page),(result)=>{
let data = `${result.match(/jQuery2140868703264037048_1597809875093\(([\s\S]*?)\}\)/)[1]}}`
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: JSON.parse(data).data
});
})
});
/**
* 2:热门推荐
* 请求示例:http://127.0.0.1:3000/api/index/hot
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/index/hot
* 请求参数:无
*/
router.get('/index/hot', function(req, res, next) {
utils.GET(config.baseUrl,(result)=>{
const $ = cheerio.load(result);
let dat = []
$(".con1w .cj_swiper_item").each(function (index,el) {
dat.push({
img: $(this).find(".img").attr("style").match(/background: url\(([\s\S]*?)\) center/)[1],
title: $(this).find(".t").text(),
url: $(this).find("a").attr("href"),
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: dat
});
})
});
/**
* 3:每日三餐
* 请求示例:http://127.0.0.1:3000/api/index/threeMeals
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/index/threeMeals
* 请求参数:无
*/
router.get('/index/threeMeals', function(req, res, next) {
utils.GET(config.baseUrl,(result)=>{
const $ = cheerio.load(result);
var titleArray = []
$(".sc_titlew_scroller").eq(0).find("span").each(function(index,el){
titleArray.push({
title: $(this).find("em").text(),
content: []
});
})
var content = {};
$(".top_sancan2019 .swiper-slide").each(function(index,el){
content[index] = [];
$(this).find(".sancan_swiper_item").each(function(i,e){
content[index].push({
url: $(this).find("a").attr("href"),
img: $(this).find("a img").attr("src"),
title: $(this).find("a .text").text(),
des: $(this).find("a .yyw .des").text(),
})
})
});
for (const key in content) {
titleArray[key].content = content[key]
}
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: titleArray
})
})
});
/**
* 4:获取banner图
* 请求示例:http://127.0.0.1:3000/api/index/banner
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/index/banner
* 请求参数:无
*/
router.get('/index/banner', function(req, res, next) {
utils.GET(config.baseUrl,(result)=>{
const $ = cheerio.load(result);
let data = []
$(".swiper-container3 a").each(function (index,el) {
data.push({
url: $(this).attr("href"),
img: $(this).find("img").attr("src"),
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 5:获取banner点击后的详情
* 请求示例:http://127.0.0.1:3000/api/index/bannerInfo?url=https://m.meishij.net/zt/chushulaoji6dianyinshiyuanzeyi.html
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/index/bannerInfo
* 请求参数:
* url:要进入的轮播url地址
*/
router.get('/index/bannerInfo', function(req, res, next) {
let url = req.query.url;
utils.GET(url,(result)=>{
const $ = cheerio.load(result);
let data = {}
data.banner = $(".topimgw img").attr("src")
data.title = $(".zttitlew h1").text()
data.content = $(".ztcontentw").html()
data.comment = []
$(".zt_pllist .zt_plitem").each(function (index,el){
data.comment.push({
name: $(this).find(".c1 strong").text(),
time: $(this).find(".c1 span").text(),
img: $(this).find(".c1 .avatarw img").attr("src"),
content: $(this).find(".pltxt").text()
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 6:菜谱视频大全列表
* 请求示例:http://127.0.0.1:3000/api/video/list
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/video/list
* 请求参数:page
*/
router.get('/video/list', function(req, res, next) {
console.log("请求地址:", config.VideoList(1))
var page = req.query.page || 1;
utils.GET(config.VideoList(page),(result)=>{
let data = result.match(/jQuery21408367060449076322_1597835324516\(([\s\S]*?)\)/)[1]
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: JSON.parse(data).data
});
})
});
/**
* 7:搜索接口
* 请求示例:http://127.0.0.1:3000/api/search/list?q=猪蹄&page=1
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/search/list
* 请求参数:
* q 要搜索的菜名称
* page 页码
*/
router.get('/search/list', function(req, res, next) {
var q = req.query.q || '';
var page = req.query.page || 1;
utils.GET(config.SearchWord(encodeURIComponent(q), page),(result)=>{
const $ = cheerio.load(result);
var data = []
$(".hasbb1").each(function (index,el) {
data.push({
href: $(this).find("a").attr("href"),
title: $(this).find("a h3").text(),
des: $(this).find("a .des").text(),
img: $(this).find("a img").attr("src"),
})
});
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 8:分类页面获取左侧分类菜单
* 请求示例:http://127.0.0.1:3000/api/type/leftMenu
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/type/leftMenu
* 请求参数:无
*/
router.get('/type/leftMenu', function(req, res, next) {
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: config.leftType
});
});
/**
* 9:分类页面获取右边的小内容
* 请求示例:http://127.0.0.1:3000/api/type/rightMenu?url=/fenlei/shiyongfenlei/
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/type/rightMenu
* 请求参数:
* url: 左侧分类的url字段
*/
router.get('/type/rightMenu', function(req, res, next) {
let url = `${config.baseUrl}${req.query.url}`;
utils.GET(url,(result)=>{
const $ = cheerio.load(result);
let data = []
$(".right_sort_list_scroller ul li a").each(function (index,el) {
data.push({
id: $(this).attr("href"),
img: $(this).find("img").attr("src"),
title: $(this).find("span").text(),
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 10:点击右边小分类获取分类列表
* 请求示例:http://127.0.0.1:3000/api/type/rightMenuList?url=https://m.meishij.net/fenlei/recai/
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/type/rightMenuList
* 请求参数:
* url: 右侧分类的url字段
* p: 页码
*/
router.get('/type/rightMenuList', function(req, res, next) {
let url = req.query.url;
let page = req.query.p || 1;
console.log(`${url}p${page}`)
utils.GET(`${url}p${page}`,(result)=>{
const $ = cheerio.load(result);
var data = []
$(".con_data_s2_list").eq(0).find("li a").each(function (index, el){
var num = $(this).find("span").text().split("  ");
console.log(num)
data.push({
url: $(this).attr("href"),
img: $(this).find(".imgw img").attr("src"),
title: $(this).find(".imgw img").attr("alt"),
like: num[0],
view: num[1],
})
});
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 11:获取详情
* 请求示例:http://127.0.0.1:3000/api/index/info?url=https://m.meishij.net/html5/zuofa/douruhezidangao_1.html
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/index/info
* 请求参数:
* url: 右侧分类的url字段
*/
router.get('/index/info', function(req, res, next) {
let url = req.query.url;
let page = req.query.p || 1;
utils.GET(url,(result)=>{
const $ = cheerio.load(result);
var data= {};
if ($(".topimgw").length != 0) {
// 标题
data.title = $(".cpc_c1 h1").text()
// 作者
data.posttime = $(".cpc_c1 .posttime").text()
// 如果有视频
if ($(".topimgw .vw").length != 0) {
data.videoSrc = $(".topimgw .vw #artical_video").attr("src")
}
// 背景图
data.backImg = $(".topimgw img").attr("src");
data.Statistics = []
// 卡路里等
$(".yycardw .yyinfos .yy_left .yy_left_item").each(function (index,el){
data.Statistics.push({
title: $(this).find("strong").text(),
proportion: $(this).find(".jd").attr("style")
})
});
data.stepInfo = {
arr: [],
message: ''
};
var startIndex = 0;
// 图标步骤
$(".cpargsw .cpargs").each(function (index,el){
data.stepInfo.arr.push({
title: $(this).text(),
position: index != 3 ? startIndex+= -30 : -0
})
})
data.stepInfo.message = $(".cpdesw .cpdes").text()
data.material = {
main: [],
accessories: []
}
// 主料
$(".cpc_c3 .c_mtr_ul").eq(0).find(".c_mtr_li").each(function (index,el){
data.material.main.push({
title: $(this).find(".t").text(),
nums: $(this).find(".a").text()
})
})
// 辅料
$(".cpc_c3 .c_mtr_ul").eq(1).find(".c_mtr_li").each(function (index,el){
data.material.accessories.push({
title: $(this).find(".t1").text(),
nums: $(this).find(".a").text()
})
});
// 详细步骤
data.DetailedSteps = [];
$(".cpc_c4 .stepitem").each(function (index,el){
// 如果有成品图的话
if ($(this).find(".doneimgw").length !== 0) {
data.DetailedSteps.push({
step_title: $(this).find(".step_title").text(),
step_img: [],
step_text: null,
})
$(this).find(".doneimgw .imgset img").each(function (i,e){
data.DetailedSteps[index].step_img.push($(this).attr("src"))
})
} else {
data.DetailedSteps.push({
step_title: $(this).find(".step_title").text(),
step_img: $(this).find("img").attr("src") || null,
step_text: $(this).find(".stepdes").text(),
})
}
})
// 其他推荐
data.OtherRecommen = [];
$(".con_data_s1_list li").each(function (i,e){
data.OtherRecommen.push({
url: $(this).find("a").attr("href"),
title: $(this).find("strong").text(),
img: $(this).find("img").attr("src"),
})
})
// 相关推荐
data.RelatedRecommen = [];
$(".con_data_s2_list li").each(function (i,e){
if ($(this).find(".title").text().length !=0) {
data.RelatedRecommen.push({
title: $(this).find(".title").text(),
url: $(this).find("a").attr("href"),
view: $(this).find("span").text(),
img: $(this).find("img").attr("src"),
})
}
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
}
})
});
/**
* 12:获取banner图下面的九宫格分类数据
* 请求示例:http://127.0.0.1:3000/api/index/type
* 接口基地址:http://127.0.0.1:3000/
* 请求地址:/index/type
* 请求参数:
* url: 右侧分类的url字段
* p: 页码
*/
router.get('/index/type', function(req, res, next) {
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: [
{
title: '快手菜',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_shiyongfenlei_1.png',
href: 'https://m.meishij.net/fenlei/kuaishoucai/'
},
{
title: '下饭菜',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_shiyongfenlei_2.png',
href: 'https://m.meishij.net/fenlei/xiafancai/'
},
{
title: '肉食',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_shiyongfenlei_5.png',
href: 'https://m.meishij.net/fenlei/roushi/'
},
{
title: '早餐',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_sancan_1.png',
href: 'https://m.meishij.net/fenlei/zaocan/'
},
{
title: '午餐',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_sancan_2.png',
href: 'https://m.meishij.net/fenlei/wucan/'
},
{
title: '夜宵',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_sancan_5.png',
href: 'https://m.meishij.net/fenlei/yexiao/'
},
{
title: '蛋糕面包',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_hongbei_1.png',
href: 'https://m.meishij.net/fenlei/dangaomianbao/'
},
{
title: '甜品点心',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_hongbei_3.png',
href: 'https://m.meishij.net/fenlei/tianpindianxin/'
},
{
title: '热菜',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_jiachangcaipu_1.png',
href: 'https://m.meishij.net/fenlei/recai/'
},
{
title: '主食',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_jiachangcaipu_6.png',
href: 'https://m.meishij.net/fenlei/zhushi/'
},
]
})
});
module.exports = router;

View File

@@ -0,0 +1,70 @@
<!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>
<button>下一页</button>
</body>
<script src="./ajax.js"></script>
<script>
var page = 1,
total_page = 0;
function getData() {
http.get({
url: '/classList',
data: {
id: location.search.split("=")[1],
// split分割
page: page
},
success: (res) => {
console.log(res);
total_page = res.result.total_page
renderLi(res.result.data)
},
error: (err) => {
}
});
}
function renderLi(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<p>${v.title}</p>
<img src="${v.preview}" alt="">
</li>
`
});
}
getData()
document.querySelector("button").onclick = () => {
page += 1;
if (page <= total_page) {
getData()
}
}
</script>
</html>

View File

@@ -0,0 +1,45 @@
ul {
overflow: hidden;
}
ul li {
display: flex;
height: 45px;
align-items: center;
position: relative;
padding: 0 15px;
border-bottom: 1px solid #f4f0f0;
transition-duration: 0.3s;
}
ul li .left {
width: 100%;
}
ul li .action {
display: flex;
align-items: center;
height: 100%;
position: absolute;
right: 0;
transform: translateX(100%);
}
ul li .action .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: #fff;
}
.top {
background: #c8c7cd;
}
.read {
background: #ff9c00;
}
.delete {
background: #ff3a31;
}

View File

@@ -0,0 +1,19 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

View File

@@ -0,0 +1,36 @@
body {
position: relative;
height: 100vh;
}
.menu {
width: 180px;
height: 240px;
background: #fff;
padding: 10px 15px;
box-sizing: border-box;
border-radius: 6px;
box-shadow: 1px 1px 13px #cdcdcd;
position: absolute;
}
.menu li {
display: flex;
align-items: center;
height: 38px;
padding-left: 10px;
cursor: pointer;
}
.menu li:hover {
background: #ece8e8;
border-radius: 4px;
}
.menu li i {
margin-right: 15px;
}
.menu li span {
font-size: 14px;
}
.hidden {
display: none;
}

View File

@@ -0,0 +1,15 @@
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 15px;
}
.tabs_title .active {
color: red;
}
.tabs_content li {
display: none;
}
.tabs_content .active {
display: block;
}

View File

@@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧滑</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/cell.css">
</head>
<body>
<div class="main">
<ul>
<li>
<div class="left">
测试1
</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="left">
测试2
</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="left">
测试3
</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
</ul>
</div>
</body>
<script>
var Li = _(".main ul li");
Li.forEach((v, i) => {
v.isOpen = false;
v.ontouchstart = (e) => {
console.log('ontouchstart', e);
var { pageX } = e.touches[0];
v.startX = pageX
Li.forEach((item, index) => {
if (index != i) {
item.style = `
transform: translateX(0px);
`
}
})
}
v.ontouchmove = (e) => {
console.log('ontouchmove', e);
var { pageX } = e.touches[0];
var translateX = Number((pageX - v.startX).toFixed())
if (pageX < v.startX) {
v.style = `
transform: translateX(${translateX >= -180 ? translateX : -180}px);
`
v.isOpen = true
} else if (pageX > v.startX) {
var newX = -180 + translateX
if (v.isOpen) {
v.style = `
transform: translateX(${newX <= 0 ? newX : 0}px);
`
}
}
}
v.ontouchend = (e) => {
console.log('ontouchend', e);
var endX = e.changedTouches[0].pageX;
if (endX < v.startX) {
var ss = v.startX - endX
if (ss < 60) {
v.style = `
transform: translateX(0px);
`
v.isOpen = false
} else {
v.style = `
transform: translateX(-180px);
`
}
} else if (endX > v.startX) {
var ss = endX - v.startX
if (ss < 60) {
v.style = `
transform: translateX(-180px);
`
} else {
v.style = `
transform: translateX(0px);
`
v.isOpen = false
}
console.log("右滑 打开")
}
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
body {
height: 100vh;
position: relative;
}
span {
position: absolute;
user-select: none;
transition: all 0.8s ease;
}
</style>
</head>
<body>
<span></span>
</body>
<script>
// 在你点击位置生产 span 标签
// 让span标签运动起来
var Text = ["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
var index = 0;
//
var screenHeight = window.innerHeight,
screenWidth = window.innerWidth;
function createdSpan() {
var x = Math.random() * ((screenWidth - 32) - 400) + 400;
var y = Math.random() * (screenHeight - 21)
var span = document.createElement("span")
span.innerText = Text[index];
span.style = `
left: ${x}px;
top: ${y}px;
color: hsl(${parseInt(Math.random() * 360)},100%,50%)
`
index++
index > 11 ? index = 0 : '';
$("body").appendChild(span)
motion(span, x)
}
// 运动
function motion(el,x) {
setTimeout(() => {
el.style.left = `${x - Math.random() * 600}px`
}, 100)
setTimeout(() => {
$("body").removeChild(el)
}, 900)
}
setInterval(()=>{
createdSpan()
}, 300)
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>

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">
<style>
body {
height: 100vh;
position: relative;
}
span {
position: absolute;
user-select: none;
transition: all 0.8s ease;
}
</style>
</head>
<body>
</body>
<script>
// 在你点击位置生产 span 标签
// 让span标签运动起来
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
var index = 0;
// 定义下标
// Math.random() * (max - min) + min
$("body").onclick = (e) => {
var { x, y } = e;
console.log(x, y)
var span = document.createElement("span")
console.dir(span)
span.innerText = Text[index];
span.style = `
left:${x}px;
top:${y}px;
color:hsl(${parseInt(Math.random() * 360)},100%,50%)
`
// 取随机数整数
index++
index > 11 ? index = 0 : '';
// 判断条件 ? 当条件为真执行 : 当条件为假执行
console.log(span)
$("body").appendChild(span)
// 把子容器span追加在父容器body里面
// span为虚拟dom,不能是字符串
motion(span, y)
}
function motion(el,y) {
setTimeout(() => {
el.style.top = `${y - 100}px`
}, 100)
setTimeout(() => {
$("body").removeChild(el)
}, 900)
}
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索建议</title>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul>
</ul>
</body>
<script>
// 给输入框绑定 oninput 事件 ,实时获取输入框的数值
// 然后从我们内置的数组中找到匹配项
// 搜索结果的关键字 加红 表示
var input = $("input")
keyWord = ['html学习', '不想学html', '学习html和css', '天气不好', '今天心情不好', 'css入门学习', '心情很好'],
newArr = []
input.oninput = () => {
console.dir(input.value)
newArr = []
if (input.value.length != 0) {
keyWord.forEach((value, index) => {
if (value.includes(input.value)) {
var newText = value.replace(input.value,`<span style="color: red">${input.value}</span>`)
newArr.push(newText )
}
});
console.log(newArr)
renderPage()
}
else{
$("ul").innerHTML = ""
// 清除网页记录
}
}
function renderPage() {
$("ul").innerHTML = ""
newArr.forEach((value, index) => {
$("ul").innerHTML += `<li>${value}</li>`
})
}
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
</script>
</html>

View File

@@ -0,0 +1,19 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

View File

@@ -0,0 +1,17 @@
.header {
height: 80px;
box-shadow: 0 2px 10px 0 rgb(52 52 52 / 10%);
background: #fff;
line-height: 80px;
box-sizing: border-box;
}
img{
margin-top: 20px;
margin-right: 40px;
}
.logo ul {}
.logo ul li {
float: left;
}
.logo ul li a {}

View File

@@ -0,0 +1,26 @@
/* 公共css */
.center {
width: 1200px;
margin: 0 auto;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千千音乐</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3359132_0ieicnv9yoqi.css">
<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="center auto">
<div class="logo left">
<img class="left" src="./img/logo.svg" alt="">
<ul class="left">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">歌单</a>
</li>
<li>
<a href="">歌手</a>
</li>
<li>
<a href="">VIP</a>
</li>
<li>
<a href="">音乐盒</a>
</li>
<li>
<a href="">客户端</a>
</li>
<li>
<a href="">音乐人入驻</a>
</li>
</ul>
</div>
<div class="right search">
<div>
<input type="text">
<i class="iconfont icon-sousuo_o"></i>
</div>
<div class="login_text">登录/注册</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,19 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

View File

@@ -0,0 +1,36 @@
body {
position: relative;
height: 100vh;
}
.menu {
width: 180px;
height: 240px;
background: #fff;
padding: 10px 15px;
box-sizing: border-box;
border-radius: 6px;
box-shadow: 1px 1px 13px #cdcdcd;
position: absolute;
}
.menu li {
display: flex;
align-items: center;
height: 38px;
padding-left: 10px;
cursor: pointer;
}
.menu li:hover {
background: #ece8e8;
border-radius: 4px;
}
.menu li i {
margin-right: 15px;
}
.menu li span {
font-size: 14px;
}
.hidden {
display: none;
}

View File

@@ -0,0 +1,15 @@
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 15px;
}
.tabs_title .active {
color: red;
}
.tabs_content li {
display: none;
}
.tabs_content .active {
display: block;
}

View File

@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义右键菜单</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2223989_98p80aj9eus.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ul class="menu hidden">
<li>
<i class="iconfont icon-vue"></i>
<span>Vue 文档</span>
</li>
<li>
<i class="iconfont icon-react"></i>
<span>React 文档</span>
</li>
<li>
<i class="iconfont icon-angular"></i>
<span>Angular 文档</span>
</li>
<li>
<i class="iconfont icon-typescript"></i>
<span>Typescript 文档</span>
</li>
<li>
<i class="iconfont icon-shuaxin"></i>
<span>刷新</span>
</li>
</ul>
</body>
<script>
var body = document.querySelector("body");
var menu = $(".menu");
// 获取虚拟dom
// console.dir(menu);
var screenHeight = window.innerHeight,
screenWidth = window.innerWidth;
body.oncontextmenu = function (e) {
console.log(e);
var { x, y } = e;
// console.log(x, y);
// 获取点击坐标
menu.style.left = `${x}px`
menu.style.top = `${y}px`
// console.log(menu.className);
// 获取类名为menu hidden
// menu.className = "menu"
// 覆盖类名 删掉了 hidden
// menu.className = "menu hidden"
// 显示类名 加上了 hidde
// console.log(menu.className);
if ((screenHeight - y < 240) && (screenWidth - x < 180)) {
console.log("屏幕右下角");
menu.style = `
left: ${x - 180}px;
top: ${y - 240}px;`
}
else if (screenHeight - y < 240) {
console.log("鼠标在屏幕最下面");
menu.style = `
left: ${x}px;
top: ${y - 240}px;`
}
else if (screenWidth - x < 180) {
console.log("屏幕最右边");
menu.style = `
left: ${x - 180}px;
top: ${y}px;`
}
else {
menu.style = `
left: ${x}px;
top: ${y}px;`
}
menu.classList.remove("hidden")
return false
}
body.onclick = function (e) {
console.log("body被点击", e);
hiddenMenu()
}
// menu.onclick = function (e) {
// e.stopPropagation()
// console.log("menu被点击", e);
// }
// 阻止事件冒泡
// _(".menu li").forEach(function () {})
_(".menu li").forEach((v, i) => {
v.onclick = (e) => {
e.stopPropagation()
switch (i) {
case 0:
open("https://cn.vuejs.org/")
break;
case 1:
open("https://react.docschina.org/")
break;
case 2:
open("https://angular.cn/")
break;
case 3:
open("https://www.tslang.cn/")
break;
case 4:
location.reload()
break;
default:
break;
}
// 功能执行完了关菜单
hiddenMenu()
}
})
function hiddenMenu() {
// 为menu菜单添加隐藏类名
menu.classList.add("hidden")
// menu.classList.remove("hidden")
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,20 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

View File

@@ -0,0 +1,52 @@
.header {
position: fixed;
height: .9rem;
width: 100%;
line-height: 0.9rem;
top: 0;
left: 0;
background: #fff;
padding-left: 0.57rem;
padding-right: 0.63rem;
box-sizing: border-box;
border-bottom: 0.01rem solid #e5e5e5;
}
.header li {
float: left;
width: 33%;
color: #999;
font-size: 0.3rem;
text-align: center;
position: relative;
}
.header .active {
color: #333;
}
.header .active::after {
background: #d0302c;
width: 0.24rem;
height: 0.05rem;
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.content {
margin-top: 0.9rem;
}
.content li {
font-size: 0.32rem;
color: #333333;
height: 1.2rem;
line-height: 1.2rem;
background-color: #ffffff;
padding-left: 0.61rem;
border-bottom: 0.01rem solid #e5e5e5;
}

View File

@@ -0,0 +1,26 @@
/* 公共css */
.center {
width: 1192px;
margin: 0 auto;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在包河</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<script>
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";
}
</script>
</head>
<body>
<ul class="header">
<li>包河radio</li>
<li class="active">包河TV</li>
<li>融媒直播</li>
</ul>
<div class="content">
<ul>
<li>安徽卫视</li>
<li>经济生活</li>
<li>影视频道</li>
<li>综艺频道</li>
<li>科教频道</li>
<li>人物频道</li>
<li>国际频道</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

View File

@@ -0,0 +1,53 @@
.header {
width: 100%;
height: 0.9rem;
position: fixed;
line-height: 0.9rem;
padding-left: 0.57rem;
padding-right: 0.63rem;
background: #ffffff;
top: 0;
left: 0;
box-sizing: border-box;
border-bottom: 0.01rem solid #e5e5e5;
}
.header li {
float: left;
font-size: 0.3rem;
width: 33.3%;
color: #999;
text-align: center;
position: relative;
}
.header .active {
color: #333;
}
.header .active::after {
position: absolute;
width: 0.24rem;
height: 0.05rem;
background: #d0302c;
content: "";
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.content {
margin-top: 0.9rem;
}
.content li {
font-size: 0.32rem;
color: #333333;
padding-left: 0.61rem;
line-height: 1.2rem;
background: #ffffff;
border-bottom: 0.01rem solid #e5e5e5;
height: 1.2rem;
}

View File

@@ -0,0 +1,26 @@
/* 公共css */
.center {
width: 1192px;
margin: 0 auto;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在包河</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<script>
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";
}
</script>
</head>
<body>
<ul class="header">
<li>包河radio</li>
<li class="active">包河TV</li>
<li>融媒直播</li>
</ul>
<div class="content">
<ul>
<li>安徽卫视</li>
<li>经济生活</li>
<li>影视频道</li>
<li>综艺频道</li>
<li>科教频道</li>
<li>人物频道</li>
<li>国际频道</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
body,
ul,
li {
margin: 0;
list-style: none;
padding: 0;
}
.top {
display: flex;
height: 45px;
background: #8d8d8d;
}
.butto {
display: flex;
height: 45px;
background: #8d8d8d;
}
li {
width: 25%;
}
</style>
</head>
<body>
<ul class="top">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ul>
<ul class="butto">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ul>
</body>
</html>

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>
</head>
<body>
<div class="header">
<div class="header_top">
<div>
<img src="" alt="">
</div>
<div class="header_left">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">IT圈</a>
</li>
<li>
<a href="">辣品</a>
</li>
</ul>
</div>
<div class="header_right">
<ul>
<li>
<span>设置</span>
<img src="" alt="">
</li>
<li>
<span>投稿</span>
</li>
<li>
<span>订阅</span>
<img src="" alt="">
</li>
<li>
<span>软件应用</span>
<img src="" alt="">
</li>
<li>
<span>登录</span>
</li>
</ul>
</div>
</div>
<div class="title_left">
<div>
<ul>
<li>
<a href="">业界</a>
</li>
<li>
<a href="">手机</a>
</li>
<li>
<a href="">电脑</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div>
<ul>
<li>
<a href="">软件</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="title_right">
<div>
<input type="text" placeholder="请输入关键词">
<button>搜索</button>
</div>
<ul>
<li>
<span>热搜:</span>
</li>
<li>
<a href="">知网</a>
</li>
<li>
<a href="">荣耀</a>
</li>
<li>
<a href="">华为</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div>
<img src="" alt="">
<a href="">网商银行回应暂停支付宝提现</a>
</div>
<div>
<img src="" alt="">
<a href="">Win10 21H2 开始全面推送</a>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,128 @@
<!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="header_left">
<img src="" alt="">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">it圈</a>
</li>
<li>
<a href="">辣品</a>
</li>
</ul>
</div>
<ul class="header_right">
<li>
<a href="">
<span>设置</span>
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<span>投稿</span>
</a>
</li>
<li>
<a href="">
<span>订阅</span>
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<span>软件应用</span>
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<span>登录</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="cobtent_title">
<ul class="content_left">
<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>
</ul>
<div class="content_right">
<div class="search">
<input type="text" placeholder="请输入关键词">
<button>搜索</button>
</div>
<ul class="keyword">
<li>
<span>热搜:</span>
</li>
<li>
<a href="">知网</a>
</li>
<li>
<a href="">荣耀</a>
</li>
<li>
<a href="">华为</a>
</li>
</ul>
</div>
</div>
<ul class="content_menu">
<li>
<img src="" alt="">
<a href="">网商银行回应暂停支付宝提现</a>
</li>
<li>
<img src="" alt="">
<a href="">Win10 21H2 开始全面推送</a>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kuaishou</title>
</head>
<body>
<div class="header">
<div class="header_top">
<img src="" alt="">
</div>
<div class="search">
<input type="text" name="" id="">
<div class="search_button">
<img src="" alt="">
<span>搜索</span>
</div>
</div>
<div class="login">
<ul>
<li>
<img src="" alt="">
<p>上传视频</p>
</li>
<li>
<img src="" alt="">
<p>快手充值</p>
</li>
<div class="login_text">登录</div>
</ul>
</div>
</div>
<div class="content">
<ul class="navigation">
<li>
<a href="我的关注"></a>
</li>
<li>
<a href="短视频"></a>
</li>
<li>
<a href="直播"></a>
</li>
</ul>
<div class="recommend">
<div class="recommend_left">
<div class="recommend_left_title">
<h2>精彩短视频</h2>
</div>
<div class="more">
<span>更多</span>
<img src="" alt="">
</div>
<div class="recommend_right">
<img src="" alt="">
<span>1/15</span>
<img src="" alt="">
</div>
</div>
<ul>
<li>
<img src="" alt="">
<div>不惹事 不怕事</div>
<div class="like">
<img src="" alt="">
<span>32.3w喜欢</span>
</div>
</li>
<li>
<img src="" alt="">
<div>有这样的女朋友你几点回家</div>
<div class="like">
<img src="" alt="">
<span>18.3w喜欢</span>
</div>
</li>
</ul>
</div>
<div class="recommend_right">
<div class="recomenf_title">
<div class="title_left">
<h2>快手热搜</h2>
</div>
<div class="title_right">
<img src="" alt="">
<span>1/5</span>
<img src="" alt="">
</div>
</div>
<div>
<ul>
<li>
<img src="" alt="">
<div>英雄归来</div>
<div class="hot">
<img src="" alt="">
<span>223.4w热度</span>
</div>
</li>
<li>
<img src="" alt="">
<div>上海新增本土死亡病例7</div>
<div class="hot">
<img src="" alt="">
<span>1209.4w热度</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千图</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="" alt="">
<img src="" alt="">
</div>
<ul class="menu">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">模板</a>
</li>
<li>
<a href="">
<span>元宇宙•3D</span>
元素
</a>
</li>
<li>
<a href="">图片</a>
</li>
<li>
<a href="">
<span>HOT</span>
视频音乐
</a>
</li>
<li>
<a href="">素材中心</a>
<img src="" alt="">
</li>
</ul>
<div class="login">
<ul>
<li>
<a href="">
<img src="" alt="">
创作
</a>
</li>
<li>
<a href="">个人vip</a>
</li>
</ul>
<ul>
<li>
<a href="">登录</a>
</li>
<li>
<a href="">免费试用</a>
</li>
</ul>
</div>
</div>
<div class="coontent">
<div class="banner">
<img src="" alt="">
<div class="left_button">&lt;</div>
<div class="right_button">&gt;</div>
<div class="search">
<ul class="navigation">
<li></li>
<li></li>
<li></li>
</ul>
<div class="search_body">
<div class="select">
<span>全部</span>
<img src="" alt="">
</div>
<div class="input">
<input type="text">
<img src="" alt="">
</div>
<div class="submit">
<img src="" alt="">
</div>
</div>
</div>
</div>
<div class="nav">
<ul>
<li>
<img src="" alt="">
<div class="text"></div>
<div>今日下载</div>
<div>下载素材领VIP</div>
</li>
</ul>
</div>
<div class="like">
<div class="like_title">
<h1>专题/收藏夹推荐</h1>
<div>
<img src="" alt="">
<span>偏好设置</span>
</div>
</div>
<ul class="like_body">
<li>
<div>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="like_down_title">
<div class="action">
<div class="sc">
<img src="" alt="">
<span>专题</span>
</div>
<span>疫情防控</span>
</div>
<div>7个</div>
</div>
</li>
</ul>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,160 @@
<!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="header_top">
<img src="" alt="">
<div class="search">
<input type="text">
<div class="search_button">
<img src="" alt="">
</div>
</div>
<div class="login">
<div>
<img src="" alt="">
<div>我的书架</div>
</div>
<div>
<img src="" alt="">
</div>
<div>
<img src="" alt="">
</div>
</div>
<div class="header_down">
<ul>
<li>
<img src="" alt="">
<div>全部分类</div>
</li>
<li>动漫专区</li>
<li>排行榜</li>
<li>免费</li>
<li>完本</li>
<li>现言青春</li>
<li>古言玄幻</li>
<li>神秘幻想</li>
</ul>
<div>
<ul>
<li>
<img src="" alt="">
<div>充值</div>
</li>
<li>
<img src="" alt="">
<div>作家专区</div>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<ul class="content_left">
<li>
<a href="">糟糕,我被指挥官黏上</a>
</li>
<li>
<a href="">崽崽是给娇气包得宠着</a>
</li>
<li>
<a href="">起飞法哈勒可汗发</a>
</li>
<li>
<a href="">我就爱喝牛奶</a>
</li>
<li>
<a href="">规划可更换</a>
</li>
</ul>
<div class="content_right">
<h3>公告</h3>
</div>
<ul>
<li>
<a href="">[公告]"妨害风化"</a>
</li>
<li>
<a href="">[公告]"按时发卡号"</a>
</li>
<li>
<a href="">[公告]"啊师傅hi"</a>
</li>
<li>
<a href="">[公告]"王妃爱国"</a>
</li>
</ul>
<div class="title_left">
<div>
<h1>热门推荐</h1>
</div>
<ul>
<li>
<img src="" alt="">
<div>
<div>和沈大佬订婚以后</div>
<div>
<div>北川云锦</div>
<span>现代言情</span>
</div>
</div>
</li>
<li>
<img src="" alt="">
<div>
<div>肥妻翻身:末世女王</div>
<div>
<div>紫雪凝咽</div>
<span>现代言情</span>
</div>
</div>
</li>
</ul>
</div>
<div class="title_right">
<div>
<h1>本周强推</h1>
</div>
<ul>
<li>
<a href="">古代言 太子的掌中娇她另谋</a>
</li>
<li>
<a href="">古代言 太子的掌中娇她另谋</a>
</li>
<li>
<a href="">古代言 太子的掌中娇她另谋</a>
</li>
</ul>
</div>
</div>
<div class="rootent"></div>
</body>
</html>

View File

@@ -0,0 +1,155 @@
<!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="header_top">
<img src="" alt="">
<div class="search_button">
<input type="text">
<img src="" alt="">
</div>
<ul>
<li>
<img src="" alt="">
<span>我的书架</span>
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
<div class="header_down">
<div class="left">
<ul>
<li>
<a href="">
<img src="" alt="">
<span>全部分类</span>
</a>
</li>
<li>
<a href="">排行榜</a>
</li>
<li>
<a href="">免费</a>
</li>
<li>
<a href="">完本</a>
</li>
<li>
<a href="">现代言情</a>
</li>
<li>
<a href="">古言玄幻</a>
</li>
<li>
<a href="">神秘幻想</a>
</li>
</ul>
</div>
<ul class="right">
<li>
<a href="">
<img src="" alt="">
<span>充值</span>
</a>
</li>
<li>
<a href="">
<img src="" alt="">
<span>作家专区</span>
</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="content_title">
<ul class="content_left">
<li>
<a href="">糟糕,我被指挥官黏上</a>
</li>
<li>
<a href="">崽崽是给娇气包得宠着</a>
</li>
<li>
<a href="">起飞法哈勒可汗发</a>
</li>
<li>
<a href="">我就爱喝牛奶</a>
</li>
<li>
<a href="">规划可更换</a>
</li>
</ul>
<div class="content_right">
<h3>公告</h3>
<ul>
<li>
<a href="">[公告]"妨害风化"</a>
</li>
<li>
<a href="">[公告]"按时发卡号"</a>
</li>
<li>
<a href="">[公告]"啊师傅hi"</a>
</li>
<li>
<a href="">[公告]"王妃爱国"</a>
</li>
</ul>
</div>
</div>
<div class="content_heard">
<div class="heard_left">
<h1>热门推荐</h1>
<ul>
<li>
<img src="" alt="">
<div>
<div>和沈大佬订婚以后</div>
<div>
<div>北川云锦</div>
<span>现代言情</span>
</div>
</li>
</ul>
</div>
<div class="heard_right">
<h1>本周强推</h1>
<ul>
<li>
<a href="">古代言 太子的掌中娇她另谋</a>
</li>
<li>
<a href="">古代言 太子的掌中娇她另谋</a>
</li>
<li>
<a href="">古代言 太子的掌中娇她另谋</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简书</title>
</head>
<body>
<div class="header">
<img src="" alt="">
<ul class="menu">
<li>
<a href="">
<img src="" alt="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<img src="" alt="">
<span>下载app</span>
</a>
</li>
<li>
<a href="">
<img src="" alt="">
<span>会员</span>
</a>
</li>
<li>
<a href="">
<img src="" alt="">
<span>it技术</span>
</a>
</li>
<li>
<input type="text" placeholder="搜索">
<img src="" alt="">
</li>
</ul>
<ul class="login">
<li>
<a href="">Aa</a>
</li>
<li>
<a href="">登录</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">
<img src="" alt="">
<span>写文章</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div clsaa="content_left">
<img src="" alt="">
<ul>
<li>
<div>
<a href="">我那傻闺女</a>
</div>
<div>
<a href="">是付款哈看过hi v年代开始额how i和</a>
<img src="" alt="">
</div>
<div>
<div>
<img src="" alt="">
<span>18.9</span>
</div>
<div>如风_自由</div>
<div>
<img src="" alt="">
<span>63</span>
</div>
<div>
<img src="" alt="">
<span>95</span>
</div>
</div>
</li>
</ul>
</div>
<div class="content_right">
<ul class="on">
<li>
<a href="">
<span>日更挑战</span>
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<span>简书会员</span>
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<span>优选连载</span>
<img src="" alt="">
</a>
</li>
<li>
<a href="">
<span>简书版权</span>
<img src="" alt="">
</a>
</li>
</ul>
<div class="centre">
<img src="" alt="">
<div>
<h3>下载简书手机app</h3>
<img src="" alt="">
<h4>随时随地发现和创作内容</h4>
</div>
</div>
<ul class="under">
<li>
<a href="">写作兼职</a>
</li>
<li>
<a href="">app程序开发</a>
</li>
</ul>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易新闻</title>
</head>
<body>
<div class="header">
<ul class="left">
<li>
<a href="">网易首页</a>
</li>
<li>
<a href="">应用</a>
<img src="" alt="">
</li>
<li>
<a href="">进入关怀模式</a>
</li>
</ul>
<ul class="right">
<li>
<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>
<li>
<img src="" alt="">
<img src="" alt="">
</li>
<li>
<button>登 录</button>
</li>
<li>
<a href="">注册免费邮箱</a>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
</div>
<div class="content">
<div class="content_one">
<img src="" alt="">
</div>
<ul class="content_tow">
<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="">nba</a>
</li>
<li>
<a href="">中超</a>
</li>
</ul>
<img src="" alt="">
<div class="content_three">
<a href="">教育</a>
<ul>
<li>
<a href="">公版影响典藏计划</a>
</li>
<li>
<a href="">爱克发哈</a>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,28 @@
/* 清楚浏览器默认样式 */
ul,li,p,h1,h2,h3,h4,h5,h6,body {
margin: 0;
padding: 0;
}
body {
background: #eeeef3;
font-size: 0;
}
.content {
margin-top: 0.9rem;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
input {
outline: none;
border: none;
}

View File

@@ -0,0 +1,115 @@
.header {
height: 0.9rem;
position: fixed;
width: 100%;
left: 0;
top: 0;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
box-sizing: border-box;
}
.header span {
font-size: 0.34rem;
color: #333333;
}
.header img {
width: 0.19rem;
height: 0.34rem;
}
.conter {
margin-top: 1.130rem;
padding: 0 0.24rem;
}
.list {
margin-bottom: 0.23rem;
}
.list li {
background-color: #ffffff;
border-radius: 0.1rem;
}
.list li .title {
display: flex;
align-items: center;
justify-content: space-between;
height: 1.01rem;
}
.list .time {
color: #949494;
font-size: 0.28rem;
}
.list .more {
display: flex;
align-items: center;
}
.list .more span {
font-size: 0.28rem;
color: #949494;
margin-right: 0.27rem;
}
.list .more img {
width: 0.2rem;
height: 0.11rem;
transform: rotate(180deg);
}
.list .more .image {
transform: rotate(0deg);
}
.menu {}
.menu .item {
display: flex;
justify-content: space-between;
border-top: 0.02rem solid #f0f0f4;
box-sizing: border-box;
padding-top: 0.36rem;
padding-bottom: 0.27rem;
}
.menu .item .name {
font-size: 0.34rem;
color: #333333;
margin-bottom: 0.17rem;
}
.menu .item .bank {
font-size: 0.2rem;
color: #949494;
}
.menu .item .time {
font-size: 0.2rem;
color: #949494;
}
.mwnu .price {}
.menu .price .nums {
font-size: 0.3rem;
color: #333333;
margin-bottom: 0.21rem;
}
.menu .price .other {
font-size: 0.2rem;
color: #949494;
}
.menu .text .time {
margin-top: 0.2rem;
}

View File

@@ -0,0 +1,13 @@
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.padd {
padding-left: 0.37rem;
padding-right: 0.41rem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 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: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,73 @@
<!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="./js/rem.js"></script>
<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/back.png" alt="">
<span>账户提现记录</span>
<div></div>
</div>
<div class="conter">
<ul class="list">
<li>
<div class="title padd">
<div class="time">2016-01</div>
<div class="more">
<span>提现:50.00</span>
<img src="./img/up.png" alt="">
</div>
</div>
</li>
</ul>
<ul class="list">
<li>
<div class="title padd">
<div class="time">2014-01</div>
<div class="more">
<span>提现:50.00</span>
<img class="image" src="./img/up.png" alt="">
</div>
</div>
<div class="menu">
<div class="item padd">
<div class="text">
<div class="name">余额提现</div>
<div class="bank">中国工商银行(3452)</div>
<div class="time">08-19 18:12</div>
</div>
<div class="price">
<div class="nums">1.00</div>
<div class="other">手续费 0.00元</div>
</div>
</div>
<div class="item padd">
<div class="text">
<div class="name">余额提现</div>
<div class="bank">中国工商银行(3452)</div>
<div class="time">08-19 18:12</div>
</div>
<div class="price">
<div class="nums">1.00</div>
<div class="other">手续费 0.00元</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

View File

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

View File

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

View File

@@ -0,0 +1,256 @@
.header {
height: 67px;
border-bottom: 1px solid #f0f0f0;
}
.header .logo {
line-height: 67px;
}
.header .logo img {
width: 131px;
height: 39px;
margin-right: 39px;
margin-top: 14px;
}
.logo ul {}
.logo ul li {
float: left;
font-weight: 300;
margin-right: 4px;
position: relative;
}
.logo ul li a {
display: block;
height: 100%;
color: #333;
font-size: 16px;
padding: 0 14px;
}
.logo ul .active {
font-weight: 600;
background: #ffe443;
}
.menu {
line-height: 50px;
position: absolute;
width: 170px;
height: 155px;
background: #fff;
box-shadow: 0 0 30px 0 rgb(65 67 70 / 8%);
left: 50%;
margin-left: -85px;
top: 61px;
display: none;
z-index: 3;
}
.menu .item:hover {
background: #ffdf1f;
}
.logo ul li:hover .menu {
display: inline-block;
}
.header .search {}
.search .search_wrap {
width: 294px;
height: 34px;
background: #f5f5f5;
;
margin-top: 16.5px;
}
.search .search_wrap i {
top: 50%;
margin-top: -8px;
left: 8px;
font-size: 16px;
color: #999;
}
.search .search_wrap input {
background: #504e4e00;
width: 100%;
height: 100%;
padding-left: 30px;
}
.search .logo_text {
line-height: 67px;
font-size: 14px;
color: #333;
}
.sub_nav {
height: 54px;
line-height: 54px;
}
.sub_nav ul {
margin-left: 206px;
}
.sub_nav ul li {
float: left;
margin-right: 34px;
position: relative;
}
.sub_nav ul .active::after {
content: "";
position: absolute;
height: 6px;
width: 100%;
background: #ffe443;
bottom: 19px;
left: 0;
z-index: -1;
}
.sub_nav ul li a {
font-size: 14px;
font-family: 300;
color: #333;
}
.banner {
height: 350px;
}
.banner img {
width: 100%;
height: 100%;
}
.banner i {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: #00000038;
color: #fff;
border-radius: 100%;
top: 50%;
margin-top: -30px;
}
.icon-htmal5icon39 {
left: 25px;
}
.icon-htmal5icon39-copy {
right: 25px;
}
.banner ul {
width: 100%;
height: 60px;
bottom: 0;
background: rgba(0, 0, 0, .15);
}
.banner ul li {
float: left;
width: 25%;
text-align: center;
color: #fff;
font-size: 16px;
position: relative;
}
.banner ul li ::after {
position: absolute;
width: 1px;
height: 28px;
background: hsla(0, 0%, 100%, .1);
content: "";
right: 0;
top: 50%;
margin-top: -14px;
}
.banner ul li:last-child::after {
width: 0px !important;
}
/* last-child 选中最后一个 */
.recommend {
margin-top: 60px;
margin-bottom: 24px;
}
.recommend .recommend_title {
width: 1192px;
margin: 0 auto;
height: 40px;
line-height: 50px;
}
.recommend .recommend_title h3 {
font-size: 28px;
margin-right: 40px;
line-height: 40px;
display: block;
width: 112px;
height: 40px;
color: #333;
}
.recommend .recommend_title .data {}
.recommend .recommend_title .data li {
float: left;
margin-right: 34px;
position: relative;
}
.recommend .recommend_title .data li a {
color: #333;
}
.recommend .recommend_title .data .active::after {
content: "";
position: absolute;
height: 6px;
width: 100%;
background: #ffe443;
bottom: 17px;
left: 0;
z-index: -1;
}
.recommend_list {
}
.recommend_list {
width: 1192px;
height: 100%;
float: left;
margin-left: 163px;
}
.recommend_list li {
width: 20%;
float: left;
}
.recommend_list .top {
width: 177px;
height: 177px;
}
.recommend_list .text {}

View File

@@ -0,0 +1,25 @@
.center {
width: 1192px;
margin: 0 auto;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}

View File

@@ -0,0 +1,191 @@
<!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_3359132_0ieicnv9yoqi.css">
<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="center">
<div class="logo left">
<img class="left" src="https://h5static.kuwo.cn/www/kw-www/img/logo.7bf8751.png" alt="">
<ul class="left">
<li class="active">
<a href="">发现音乐</a>
</li>
<li>
<a href="">下载客户端</a>
</li>
<li>
<a href="">音乐现场</a>
</li>
<li>
<a href="">VIP会员</a>
</li>
<li>
<a href="">酷我畅听</a>
</li>
<li>
<a href="">酷我耳机</a>
</li>
<li>
<a href="">更多</a>
<div class="menu">
<div class="item">
<a href="">更多音乐人</a>
</div>
<div class="item">
<a href="">HIFI音乐</a>
</div>
<div class="item">
<a href="">主播创造中心</a>
</div>
</div>
</li>
</ul>
</div>
<div class="search right">
<div class="search_wrap left relative">
<i class="iconfont icon-sousuo_o absolute"></i>
<input type="text" placeholder="搜索音乐/MV/歌单/歌手">
</div>
<div class="logo_text left">登录 / 注册</div>
</div>
</div>
</div>
<div class="content">
<div class="sub_nav">
<div class="center">
<ul>
<li class="active">
<a href="">推荐</a>
</li>
<li>
<a href="">排行榜</a>
</li>
<li>
<a href="">歌手</a>
</li>
<li>
<a href="">歌单</a>
</li>
<li>
<a href="">MV</a>
</li>
</ul>
</div>
</div>
<div class="banner">
<div class="center relative">
<img src="https://kwimg1.kuwo.cn/star/upload/93/93/1635395354301_.png" alt="">
<i class="absolute iconfont icon-htmal5icon39"></i>
<i class="absolute iconfont icon-htmal5icon39-copy"></i>
<ul class="absolute">
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
<li>
<i class="iconfont icon-sousuo_o"></i>
<span>下载PC版</span>
</li>
</ul>
</div>
</div>
<div class="recommend auto content">
<div class="recommend_title">
<h3 class="left">推荐歌单</h3>
<ul class="data left">
<li>
<a class="active" 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="0">更多</a>
<img src="" alt="">
</li>
</ul>
</div>
<ul class="recommend_list">
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
<li>
<img class="top" src="https://img1.kuwo.cn/star/userpl2015/10/13/1649904612537_132026710_500.jpg"
alt="">
<div class="text">每日推荐</div>
<div>
<i></i>
<div>20316.0万</div>
</div>
</li>
</ul>
</div>
</div>
<div class="footer"></div>
</body>
</html>