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,60 @@
class AJAX {
constructor() {
// 请求基地址
// 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,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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: [] },
];
// 渲染tabs切换的标题
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);
();
},
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,43 @@
<!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) => {
console.log(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,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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],
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,3 @@
封装的思想:
把重复部分封装起来,不同的地方作为参数传入

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,13 @@
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.padd {
padding-left: 0.37rem;
padding-right: 0.41rem;
}

View File

@@ -0,0 +1,63 @@
class AJAX {
constructor() {
this.baseUrl = config.checkBaseUrl();
this.http = new XMLHttpRequest();
}
/**
*
* @param {*object} parmas
*/
get(parmas) {
return new Promise((success, error) => {
// 将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(success, 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);
switch (data.status) {
case 200:
success(data.result)
break;
case 404:
alert(data.message)
throw new Error(data.message)
break;
}
// success(data)
} else {
error(this.http)
}
}
}
}
}
var http = new AJAX();

View File

@@ -0,0 +1,30 @@
var config = {
devBaseUrl: "http://127.0.0.1:3000/api", // 开发阶段的请求基本地址
testBaseUrl: "http://127.0.0.1:3000/api/test", // 测试阶段的请求基本地址
prodBaseUrl: "http://127.0.0.1:3000/api/prod", // 上线阶段的请求基本地址
stage: "dev", // dev开发 test测试 prod上线
apiList: {
iclass: '/index/class',
hot: '/index/hot'
},
// 检查使用什么阶段的接口地址
checkBaseUrl: function () {
switch (this.stage) {
case "dev":
return this.devBaseUrl
break;
case "test":
return this.testBaseUrl
break;
case "prod":
return this.prodBaseUrl
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,16 @@
class Index {
constructor () {
this.getIndexData()
}
async getIndexData() {
var res = await index.iclass({
type: 1,
page: 1
})
console.log(res)
}
}
new Index();

View File

@@ -0,0 +1,18 @@
class IndexService {
async hot(data) {
await http.get({
url: config.apiList.hot,
data: data
})
}
async iclass(data) {
return await http.get({
url: config.apiList.iclass,
data: data
})
}
}
var index = new IndexService()

View File

@@ -0,0 +1,7 @@
请求中间层
作用?
[1,2,3,4,5]
[{id:1},{id:2},{},{}]

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,25 @@
<!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/util/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>
</body>
<script src="../js/config/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/index.js"></script>
<script src="../js/util/index.js"></script>
<script src="../js/page/index.js"></script>
</html>

View File

@@ -0,0 +1,13 @@
Promise: 是es6中新更新的方法
作用:用来把异步编程转为同步编程
接口数据格式:
{
code: 201 // 状态码
result: [] // 数据
message: "恭喜,删除成功" // 操作的具体信息
}

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,148 @@
<!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 = $("body"),
menu = $(".menu");
var screenHeight = window.innerHeight,
screenWidth = window.innerWidth;
body.oncontextmenu = function (e) {
// 对象解构赋值
var { x, y } = e;
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 区域被点击的时候,需要隐藏右键菜单
body.onclick = function (e) {
console.log("body被点击: ", e);
hiddenMenu()
}
// 菜单里面的li被点击的时候
_(".menu li").forEach((v, i) => {
v.onclick = (e) => {
// 阻止事件冒泡从而触发父元素body上的点击事件
e.stopPropagation()
// 根据你点击的li标签跳转不同的页面
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")
}
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
// 获取多个标签
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,63 @@
<!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_2223989_98p80aj9eus.css">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/tabs.css">
</head>
<body>
<ul class="tabs_title">
<li class="active">首页</li>
<li>科技</li>
<li>社会</li>
<li>军事</li>
</ul>
<ul class="tabs_content">
<li class="active">首页的内容</li>
<li>科技的内容</li>
<li>社会的内容</li>
<li>军事的内容</li>
</ul>
</body>
<script>
var tabsTitle = _(".tabs_title li"),
tabsContent = _(".tabs_content li");
console.log(tabsTitle, tabsContent);
tabsTitle.forEach((v,i) => {
// 为所有标题li标签绑定事件
v.onclick = () => {
// 清除 所有 li 标签的样式
tabsTitle.forEach((item,index) => {
item.className = ""
tabsContent[index].className = ""
})
// 为你点击的li标签添加激活样式
v.classList.add("active")
// 为内容的li标签添加样式
tabsContent[i].classList.add("active")
}
})
// 获取多个标签
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

View File

@@ -0,0 +1,27 @@
<!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="main">
<h2>你好</h2>
</div>
</body>
<script>
document.querySelector(".main").onclick = function () {
alert("main")
}
document.querySelector(".main h2").onclick = function (e) {
e.stopPropagation();
alert("h2")
}
</script>
</html>

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>侧滑</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) => {
// 所有li标签未打开
v.isOpen = false;
// 手指按下
v.ontouchstart = (e) => {
console.log('ontouchstart',e);
// 保存你按下的坐标X点
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];
// 把滑动距离 toFixed 进行四舍五入,但是 toFixed 返回的是 string
// Number 进行 string 转 number
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,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=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);
var y = Math.random() * ((screenHeight - 21) - 600) + 600;
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, y)
}
// 运动
function motion(el,y) {
setTimeout(() => {
el.style.top = `${y - 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,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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;
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, 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,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索建议</title>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul>
</ul>
</body>
<script>
// 给输入框绑定 oninput 事件 ,实时获取输入框的数值
// 然后从我们内置的数组中找到匹配项
// 搜索结果的关键字 加红 表示
var input = $("input"),
keyWord = [ 'html学习', '不想学html', '学习html和css', '天气不好', '今天心情不好', 'css入门学习', '心情很好' ],
newArr = [];
input.oninput = () => {
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)
}
});
renderPage()
} else {
$("ul").innerHTML = ""
}
}
// 将 newArr 显示到页面上
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,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,154 @@
.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 li {
float: left;
font-weight: 300;
margin-right: 4px;
position: relative;
}
.logo ul li a {
color: #333;
padding: 0 14px;
font-size: 16px;
display: inline-block;
height: 100%;
}
.logo ul .active {
background: #ffe443;
font-weight: 600;
}
.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;
}
.menu .item:hover {
background: #ffdf1f;
}
.logo ul li:hover .menu {
display: inline-block;
}
.header .search {
line-height: 100%;
}
.search .search_wrap {
width: 294px;
height: 34px;
background: #f5f5f5;
margin-top: 16.5px;
}
.search .search_wrap i {
font-size: 16px;
color: #999;
top: 50%;
margin-top: -8px;
left: 8px;
}
.search .search_wrap input{
height: 100%;
width: 100%;
background: #504e4e00;
padding-left: 30px;
}
.search .logo_text {
font-size: 14px;
color: #333;
line-height: 67px;
}
.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;
width: 100%;
height: 6px;
background: #ffe443;
bottom: 19px;
left: 0;
z-index: -1;
}
.sub_nav ul li a{
font-size: 14px;
font-weight: 300;
}
.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 {
width: 25%;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
}
.banner ul li::after{
content: "";
width: 1px;
height: 28px;
position: absolute;
background: hsla(0,0%,100%,.1);
right: 0;
top: 50%;
margin-top: -14px;
}
.banner ul li:last-child::after {
width: 0px !important;
}

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;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<div class="footer"></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,181 @@
.header {
height: 80px;
box-shadow: 0 2px 10px 0 rgb(52 52 52 / 10%);
background: #fff;
}
.logo {
line-height: 80px;
}
.logo img {
margin-top: 20px;
margin-right: 40px;
}
.logo ul {}
.logo .active {
border-bottom: 1px solid #000;
}
.logo .active a{
color: #000;
font-weight: 600;
}
.logo ul li {
float: left;
margin: 0 13px;
height: 79px;
}
.logo ul li:hover a {
color: #000;
}
.logo ul li a {
font-size: 16px;
color: #909399;
}
.search {}
.search_wrap {
width: 320px;
height: 40px;
background: #f8f8f8;
margin-top: 20px;
}
.search_wrap input {
background: #f8f8f8;
width: 270px;
height: 100%;
padding-left: 15px;
box-sizing: border-box;
float: left;
}
.search_wrap i {
font-size: 30px;
color: #333;
margin-top: 5px;
float: left;
}
.login_text {
line-height: 80px;
margin-left: 30px;
font-size: 14px;
color: #606266;
}
.banner {
height: 300px;
margin-top: 30px;
}
.icon-htmal5icon39,
.icon-htmal5icon39-copy {
width: 65px;
height: 65px;
text-align: center;
line-height: 65px;
border-radius: 100%;
color: #fff;
font-size: 26px;
background: #00000030;
top: 50%;
margin-top: calc(-65px / 2);
display: none;
}
.icon-htmal5icon39 {
left: -80px;
}
.icon-htmal5icon39-copy {
right: -80px;
}
.center:hover .iconfont{
display: inline-block;
}
.l_img,
.r_img {
height: 250px;
top: 50%;
margin-top: calc(-250px / 2);
}
.banner .l_img {
left: 0;
}
.banner .r_img {
right: 0;
}
.banner .c_img {
left: 50%;
margin-left: calc(-750px / 2);
}
.hot {
margin-top: 30px;
}
.hot ul {}
.hot ul li {
float: left;
padding: 0 30px;
background: #f8f8f8;
height: 40px;
border-radius: 40px;
line-height: 40px;
margin-right: 10px;
}
.hot ul li a {
font-size: 14px;
color: #606266;
}
.more {
font-size: 14px;
color: #909399;
line-height: 40px;
}
.issue {
margin-top: 30px;
}
.issue .issue_title {
margin-bottom: 30px;
}
.issue .issue_title h2 {
color: #000;
font-size: 28px;
line-height: 28px;
font-weight: 400;
}
.issue_list {}
.issue_list li {
width: 20%;
float: left;
}
.issue_list li .name{
font-size: 16px;
color: #303133;
line-height: 22px;
margin-bottom: 6px;
}
.issue_list li .text {
margin-bottom: 6px;
}
.issue_list li .text,
.issue_list li .time{
font-size: 14px;
color: #909399;
}
.issue_list .top_img {
height: 192px;
position: relative;
margin-bottom: 18px;
}
.top_img .top {
width: 192px;
height: 192px;
}
.top_img .bottom {
width: 180px;
height: 180px;
z-index: -1;
top: 50%;
margin-top: -90px;
right: 22px;
}

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,169 @@
<!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="left logo">
<img class="left" src="./img/logo.svg" 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>
</li>
</ul>
</div>
<div class="right search">
<div class="search_wrap left">
<input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
<i class="iconfont icon-sousuo_o"></i>
</div>
<div class="login_text left">登录/注册</div>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<div class="center relative">
<img class="l_img absolute"
src="https://img01.dmhmusic.com/0103/M00/CD/5D/ChR45WJmMTGAAW_PAABdWQPgciI236.jpg" alt="">
<img class="r_img absolute"
src="https://img01.dmhmusic.com/0102/M00/D4/5A/ChR45WJmPcWAWJzPAAD2fX_P6qI546.jpg" alt="">
<img class="c_img absolute"
src="https://img01.dmhmusic.com/0105/M00/CE/E6/ChR45WJmCOaAUQeAAACKHRK5CEk845.jpg" alt="">
<i class="iconfont icon-htmal5icon39 absolute"></i>
<i class="iconfont icon-htmal5icon39-copy absolute"></i>
</div>
</div>
<div class="hot auto">
<div class="center">
<ul class="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>
<a href="" class="more right">更多</a>
</div>
</div>
<div class="issue">
<div class="center relative">
<i class="iconfont icon-htmal5icon39 absolute"></i>
<i class="iconfont icon-htmal5icon39-copy absolute"></i>
<div class="issue_title auto">
<h2 class="left">秀动发行</h2>
<div class="more right">更多</div>
</div>
<ul class="issue_list auto">
<li>
<div class="top_img relative">
<img class="top absolute"
src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
alt="">
<img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
alt="">
</div>
<div class="name"></div>
<div class="text">杨茂源</div>
<div class="time">发行时间2022-04-12</div>
</li>
<li>
<div class="top_img relative">
<img class="top absolute"
src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
alt="">
<img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
alt="">
</div>
<div class="name"></div>
<div class="text">杨茂源</div>
<div class="time">发行时间2022-04-12</div>
</li>
<li>
<div class="top_img relative">
<img class="top absolute"
src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
alt="">
<img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
alt="">
</div>
<div class="name"></div>
<div class="text">杨茂源</div>
<div class="time">发行时间2022-04-12</div>
</li>
<li>
<div class="top_img relative">
<img class="top absolute"
src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
alt="">
<img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
alt="">
</div>
<div class="name"></div>
<div class="text">杨茂源</div>
<div class="time">发行时间2022-04-12</div>
</li>
<li>
<div class="top_img relative">
<img class="top absolute"
src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
alt="">
<img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
alt="">
</div>
<div class="name"></div>
<div class="text">杨茂源</div>
<div class="time">发行时间2022-04-12</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,168 @@
<!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>元宇宙•3D</span>
元素
</a>
</li>
<li>
图片
<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="content">
<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>下载素材领VIP</div>
</div>
</li>
<li>
<img src="" alt="">
<div class="text">
<div>今日未下载</div>
<div>下载素材领VIP</div>
</div>
</li>
</ul>
<ul>
<li>
<img src="" alt="">
<div class="text">
<div>今日未下载</div>
<div>下载素材领VIP</div>
</div>
</li>
<li>
<img src="" alt="">
<div class="text">
<div>今日未下载</div>
<div>下载素材领VIP</div>
</div>
</li>
</ul>
</div>
<div class="like">
<div class="like_title">
<h1>专题/收藏夹推荐</h1>
<div class="setting">
<img src="" alt="">
<span>偏好设置</span>
</div>
</div>
<ul class="like_body">
<li>
<div class="img_list">
<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,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,47 @@
.header {
position: fixed;
height: .9rem;
line-height: 0.9rem;
top: 0;
left: 0;
background: #fff;
width: 100%;
padding-left: 0.57rem;
padding-right: 0.63rem;
box-sizing: border-box;
border-bottom: 0.01rem solid #e5e5e5;
}
.header .active {
color: #333;
}
.header .active::after {
content: "";
width: 0.24rem;
height: 0.05rem;
background: #d0302c;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.header li {
color: #999;
font-size: 0.3rem;
float: left;
width: 33.3%;
text-align: center;
position: relative;
}
.content {
margin-top: .9rem;
}
.new_list {}
.new_list li {
font-size: 0.32rem;
color: #333333;
height: 1.2rem;
background-color: #ffffff;
line-height: 1.2rem;
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,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>在包河</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>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ul class="header">
<li>包河Radio</li>
<li class="active">
包河Tv
</li>
<li>融媒直播</li>
</ul>
<div class="content">
<ul class="new_list">
<li>安徽卫视</li>
<li>安徽卫视</li>
<li>安徽卫视</li>
<li>安徽卫视</li>
<li>安徽卫视</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,143 @@
<!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="">
<span>搜索</span>
</div>
</div>
<div class="login">
<ul>
<li>
<img src="" alt="">
<div>上传视频</div>
</li>
<li>
<img src="" alt="">
<div>快币充值</div>
</li>
</ul>
<div class="login_text">登录</div>
</div>
</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_title_title">
<h1>精彩短视频</h1>
</div>
<div class="more">
<span>更多</span>
<img src="" alt="">
</div>
<div class="title_right">
<img src="" alt="">
<span>1/15</span>
<img src="" alt="">
</div>
<ul>
<li>
<img src="" alt="">
<div>拜托 人家躲起来很久了 </div>
<div class="like">
<img src="" alt="">
<span>91.8w喜欢</span>
</div>
</li>
</ul>
</div>
<div class="recommend_right">
<div class="recommend_title">
<div class="title_left">
<h1>精彩短视频</h1>
</div>
<div class="title_right">
<img src="" alt="">
<span>1/15</span>
<img src="" alt="">
</div>
</div>
<ul>
<li>
<img src="" alt="">
<div>
<div>英雄归来</div>
<div class="hot">
<img src="" alt="">
<span>1223.2w热度</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="live">
<div class="recommend_title">
<div class="title_left">
<h1>精彩短视频</h1>
<div class="more">
<span>更多</span>
<img src="" alt="">
</div>
</div>
</div>
<div class="live_content">
<div class="live_hot">
<img src="" alt="">
<div>不上战神不下播</div>
<div class="live_view">
<img src="" alt="">
<span>1.4万人在看</span>
</div>
</div>
<ul>
<li>
<img src="" alt="">
<div>国服后裔养猪五排带粉</div>
<div class="live_view">
<img src="" alt="">
<span>1.4万人在看</span>
</div>
</li>
</ul>
</div>
</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,93 @@
.header {
height: 0.9rem;
position: fixed;
width: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
box-sizing: border-box;
justify-content: space-between;
background: #fff;
}
.header span {
font-size: 0.34rem;
color: #333333;
}
.header img {
width: 0.19rem;
height: 0.34rem;
}
.content {
padding: 0 0.24rem;
margin-top: 1.130rem;
}
.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 {
font-size: 0.28rem;
color: #949494;
}
.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);
}
.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 .text {}
.menu .text .name {
font-size: 0.34rem;
color: #333333;
margin-bottom: 0.17rem;
}
.menu .text .bank,
.menu .text .time,
.menu .price .other{
font-size: 0.2rem;
color: #949494;
}
.menu .text .time {
margin-top: 0.2rem;
}
.menu .price {}
.menu .price .nums {
font-size: 0.3rem;
color: #333333;
margin-bottom: 0.21rem;
}
.menu .price .other {
}

View File

@@ -0,0 +1,229 @@
.header {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
height: 45px;
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 li:nth-child(2) {
margin: 0 0.23rem;
}
.header .active::after {
content: "";
position: absolute;
width: 0.35rem;
height: 0.02rem;
background-color: #ffffff;
box-shadow: 0rem 0.02rem 0.02rem 0rem rgba(12, 0, 255, 0.35);
border-radius: 0.01rem;
bottom: -0.1rem;
left: 50%;
transform: translateX(-50%);
}
.content {
height: calc(100vh - 1rem);
margin-top: 0 !important;
background: url("../img/backimg.png");
background-size: cover;
position: relative;
}
.auth {
position: absolute;
right: 0.19rem;
bottom: 0.14rem;
display: flex;
flex-direction: column;
align-items: center;
}
.auth .follow {
width: 0.96rem;
height: 0.97rem;
position: relative;
}
.auth .follow .head{
width: 100%;
height: 100%;
border: solid 0.03rem #ffffff;
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.2rem;
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_title{
font-size: 0.28rem;
color: #333333;
margin-bottom: .16rem;
}
.music .item .item_price{
font-size: 0.28rem;
color: #333333;
margin-bottom: .09rem;
display: flex;
align-items: center;
}
.music .item .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 .back span {
zoom: 0.8;
}
.music .item .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_name {
margin-top: 0.27rem;
display: flex;
align-items: center;
}
.music_name img {
width: 0.27rem;
height: 0.28rem;
margin-right: 0.13rem;
}
.music_name span {
font-size: 0.24rem;
color: #ffffff;
}
.footer {
width: 100%;
height: 1rem;
background-color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.39rem;
padding-right: 0.54rem;
position: fixed;
box-sizing: border-box;
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: "";
position: absolute;
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
bottom: 0.05rem;
left: 50%;
transform: translateX(-50%);
}

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: 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,74 @@
<!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="content">
<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">2016-01</div>
<div class="more">
<span>提现50.00</span>
<img 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,85 @@
<!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,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬浮</title>
<style>
body,
ul,
li,
a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
a {
color: #333;
}
.main>li {
float: left;
margin-right: 10px;
position: relative;
}
.menu {
position: absolute;
width: 90px;
left: 50%;
margin-left: -45px;
top: 21px;
display: none;
}
.menu li:hover {
background: red;
}
.main>li:hover .menu {
display: inline-block;
}
</style>
</head>
<body>
<ul class="main">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">社会</a>
<ul class="menu">
<li>社会111111</li>
<li>社会222222</li>
<li>社会333333</li>
</ul>
</li>
<li>
<a href="">财经</a>
</li>
<li>
<a href="">体育</a>
</li>
</ul>
</body>
</html>

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;
}

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