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

2
历届学生/zheng-yuqing/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
test/
你好

View File

@@ -0,0 +1,122 @@
<!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>
<p> 段落 </p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="抱歉,图片无法加载"/>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<ol>
<li>有序列表 1</li>
<li>有序列表 2</li>
<li>有序列表 3</li>
<li>有序列表 4</li>
</ol>
<select name="" id="">
<option value="">-请选择-</option>
<option value="">安徽省</option>
<option value="">江苏省</option>
</select>
<textarea placeholder="请输入留言" cols="30" rows="10"></textarea>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="number" placeholder="验证码">
<input type="date">
<h2>请选择你的性别</h2>
<input type="radio" name="xb">
<input type="radio" name="xb">
<input type="checkbox" name="www">
<input type="checkbox" name="www">
<input type="checkbox" name="www">
<input type="color" name="">
<input type="file" name="">
<input type="time" name="">
<input type="submit" value="登 录">
<button>登 录</button>
<input type="reset" value="登 录"/>
<button>登 录</button>
<form action="http://127.0.0.1/index.php">
<input type="text" name="user_name" placeholder="用户名">
<input type="submit" value="登 录">
<input type="reset" value="清除">
<input type="button" value="登 录">
</form>
<video src="https://www.runoob.com/try/demo_source/movie.mp4" controls autoplay muted loop
poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></video>
<audio src="https://www.runoob.com/try/demo_source/movie.mp4" controls></audio>
<table>
<tr>
<th>标题</th>
<th>价格</th>
<th>说明</th>
</tr>
<tr>
<td>测试1</td>
<td>10元</td>
<td>哈哈哈哈</td>
</tr>
<tr>
<td>测试1</td>
<td>10元</td>
<td>哈哈哈哈</td>
</tr>
<tr>
<td>测试1</td>
<td>10元</td>
<td>哈哈哈哈</td>
</tr>
</table>
<p>
<strong> HTML 4.01 </strong>
<br> 中,<i>table</i> 元素的<em> "align" </em><del> "bgcolor" </del>属性是不被赞成使用的。
在 XHTML 1.0 Strict DTDtable <big>元素的</big> "align" 和 "bgcolor" <small>属性</small> 是不被支持的
</p>
<div>在 XHTML 1.0 Strict DTDtable </div>
<span>在 XHTML 1.0 Strict DTDtable </span>
</body>
</html>

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="" alt="">
<input type="text">
</div>
<div class="menu">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
</div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer">
<div class="footer_menu">
<ul>
<li></li>
</ul>
<div class="flow">
<h2>关注微信</h2>
<img src="" alt="">
</div>
</div>
<div class="footer_text">Copyright © 2013-2022 菜鸟教程 runoob.com All Rights Reserved. 备案号闽ICP备15012807号-1</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<!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><img src="" alt=""></div>
<input type="text" name="" id="">
<div><ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul></div>
</div>
<div class="content">
<div> class="left"</div>
<div> class="content"</div>
<div> class="right"</div>
</div>
<div class="footer">
<div class="footer_menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="flow">
<h2>关注微信</h2>
<img src="" alt="">
</div>
<div>Copyright © 2013-2022 菜鸟教程 runoob.com All Rights Reserved. 备案号闽ICP备15012807号-1</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,120 @@
git 代码版本控制系统
作者:
linux linus
git github web网站
开源
代码回滚
v1
v2
v3
仓库:
本地仓库
远程仓库
自己服务器搭建 git
github 全球最大的代码仓库 卖个微软 7亿美元 gitee coding
gitlab
公共仓库
私有仓库
分支:
dev 开发
test 测试
prod 正式
git init 初始化一个本地仓库
git add 选中文件 暂存文件名1 文件名1 xxx ....
git add -A 选中全部
git commit -m "备注的内容" 设置此次的上传备注
git pull 拉取(下载)
git push 上传 推送
git remote add origin https://gitee.com/bmycode/zheng-yuqing.git
web 开发(网站开发)
前端 负责界面,特效,功能,数据展示
html css js
后端 负责数据,安全,接口,服务器
javaphpnodejspythongoc#...
web 前端
html 超文本标签标记语言 人的骨骼
绘制网页的基本布局
css 层叠样式表 人的外表
美化网站的
js 运行在浏览器的脚本语言 人的思想
第一阶段 远古阶段 (html + css)
第二阶段 jquery
Node.js
第三阶段 三大框架
手机pc网站android ios app桌面应用后端操作系统
meta
ul 重复性布局
div 一般用画网页的结构
标签分两类:
块标签
会独占一行的标签默认宽度100%可以通过css设置宽高属性
p h1 ~ h6 ul li div
行标签
不会独占一行的标签默认宽度是被内容撑开的不可以通过css设置宽高属性
img a input textarea span
在对网站进行画结构的时候要注意:
1按照功能来划分div
2按照分割线来画风div
3: 遵守网站的三要素 头部(header) 中间内容(content) 底部版权(footer)
注意div 可以 替代 p 标签的所有场景
div内如果只有一个标签那么div可以删除
作业:
https://www.readnovel.com/ 实现他的html结构和细节
https://www.ithome.com/

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>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
padding-left: 30px;
border: 20px solid;
}
</style>
</head>
<body>
<div class="box">你好</div>
</body>
</html>

View File

@@ -0,0 +1,132 @@
<!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>css 属性练习</title>
<style>
@font-face {
font-family: "TitilliumWeb";
src: url("./TitilliumWeb-Bold.ttf");
}
p {
color: red;
font-size: 30px;
font-weight: 600;
text-shadow: 4px -1px 6px #f5ff29;
letter-spacing: 15px;
font-family: TitilliumWeb;
}
a {
text-decoration: none;
}
.box {
width: 200px;
height: 200px;
background: yellow;
line-height: 200px;
text-align: center;
}
.test img {
vertical-align: middle;
}
.input {
width: 300px;
height: 45px;
border: 1px solid #000;
background: url("https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp") right center red no-repeat;
background-size: 30px;
}
.input:hover+.display {
display: block;
}
.display {
display: none;
}
.hahhdgdg {
width: 400px;
height: 400px;
font-size: 0;
}
.bo {
width: 200px;
height: 400px;
display: inline-block;
}
.left {
background: red;
}
.right {
background: blue;
}
.text_body {
width: 300px;
height: 200px;
border: 1px solid;
overflow-y: scroll;
}
</style>
</head>
<body>
<p>测试哈哈哈</p>
<a href="">你好</a>
<div class="box">
测试line-height
</div>
<div class="test">
<img src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<span>用户名</span>
</div>
<div class="input"></div>
<div class="display">显示</div>
<div class="hahhdgdg">
<div class="bo left">1</div>
<div class="bo right">2</div>
</div>
<div class="text_body">
今天吵架,老公跟他爸妈吵,还带着我。
反正大家一起吵架。
婆婆问我为什么不给老大喂奶。我居然忘记当年她各种暗示我去上班挣钱的事情。(我的思路居然被她牵着走了。)
真的很讨厌婆婆,虽然她带娃,但真的感激不起来。
就连我老公吵着吵着,就说这是你们婆媳两个之间的事,不要把事情往他身上扯,意思就是跟他无关。
公公也附和,说我老公夹在中间左右为难。说让我理解下。说他们没文化巴拉巴拉的。
直到今天,我才发现每个人都是站在自己的立场上。
婆婆总是说自己付出了什么,牺牲了什么,道德绑架我们,反正就是说没良心之类的。她从来不觉得自己做错了什么。
</body>
</html>

View File

@@ -0,0 +1,3 @@
p {
color: greenyellow;
}

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>
<style>
.main p{
font-size: 30px;
}
.main p + span {
color: blue;
}
.main h1:hover p{
color: red;
}
.main input:focus {
width: 500px;
}
/* .main ul li:first-child {
font-size: 25px;
}
.main ul li:last-child {
font-size: 18px;
} */
.main ul li:nth-child(3n+2) {
color: red;
}
h3::before {
content: "其他 ";
}
h3::after {
content: " after";
}
</style>
</head>
<body>
<h3>哈哈哈哈哒哒哒</h3>
<div class="main">
<h1>
哈哈哈哈
<p>标题1</p>
<p>标题2</p>
</h1>
<img src="" alt="">
<span>dddd</span>
<input type="text" placeholder="输入用户">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
</ul>
<img src="" alt="">
</div>
</body>
</html>

View File

@@ -0,0 +1,107 @@
css 层叠样式表
美化html网站
写法,三种写法:
内联写法 优先级最高
<p style="color: red;">你好</p>
内部写法
外链写法
改变优先级:!important
css选择器 {
css属性名: css值;
}
css选择器:
标签选择器
class. 选择器
id# 选择器 基本不用
,表示多选
空格 表格嵌套(父子)关系
> 选择父元素内部最近的子元素
+ 选择同级
通配符选择器 * 选中网页上所有标签body
用途:清除浏览器标签自带的样式
伪类选择器:
:hover
盒子模型内边距padding 外边距margin 内容content 边框border
什么叫盒子模型?
宽度计算规则:
标准盒子模型:
元素的真实宽高 = 你的写的宽度 + 左右内边距和左右边框 x 你的写的高度 + 上下内边距和上下边框
怪异盒子模型IE
box-sizing: border-box;
/* margin: 20px; 四个方向的距离 上 右 下 左 */
/* margin: 20px 30px; 上下 左右 */
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 5px 10px 15px 20px; 上 右 下 左 */
/* margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px; */
padding-left: 30px;
padding-top: 20px;
/* border: 13px solid #161616; */
/* border-left: 13px solid blue;
border-right: 13px solid #161616;
border-top: 13px solid green;
border-bottom: 13px solid yellow; */
/* border-left-width: 13px;
border-left-style: solid;
border-left-color: aquamarine; */
css 属性记录:
text-decoration 设置文字的线条一般用在a上
line-height 设置行高,一般用于 块标签内部单行文字的垂直居中
text-align 设置x轴对齐方式 ,一般用于 块标签内部文字的对齐方式
margin: 0 auto: 一个块标签在另外一个块标签中居中
vertical-align 设置y轴对齐方式一般设置在高度较高的元素上
cursor 设置光标的外观
outline: none; 输入框input button textarea
display 主要作用是:实现块标签和行标签的转换,次要作用:实现元素显示(block)隐藏(none)
inline 行
block 块
inline-block 行内块标签
none 把元素隐藏起来
元素被设置 inline-block 后标签之间会有一个默认的边距这个边距需要在父元素上设置font-size 0
来消除

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 B

View File

@@ -0,0 +1,267 @@
<!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,
input,
ul,
li {
font-size: 0;
margin: 0;
border: none;
outline: none;
list-style: none;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.auto {
overflow: hidden;
}
.all {
width: 280px;
height: 35px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid #dcdcdc;
text-align: center;
line-height: 35px;
}
.all span {
font-size: 13px;
color: #787878;
}
.all img {
width: 11px;
height: 10px;
}
.search {
width: 160px;
height: 38px;
background: #eee;
border-radius: 40px;
}
.search input {
background: #fff0;
width: 80%;
height: 100%;
padding-left: 15px;
box-sizing: border-box;
float: left;
font-size: 14px;
}
.search img {
width: 18px;
margin-top: 10px;
}
.menu {
height: 38px;
background: #96b97d;
}
.menu .center {
width: 1260px;
height: 100%;
margin: 0 auto;
}
.menu ul {
line-height: 38px;
}
.menu ul li {
font-size: 14px;
color: #fff;
float: left;
margin-right: 20px;
cursor: pointer;
}
.menu ul li:hover {
color: #e3efd9;
}
.recommend {
width: 280px;
height: 330px;
}
.recommend .title {
margin-bottom: 20px;
}
.title .text {
font-size: 14px;
color: #969696;
}
.title .refresh img {
width: 14px;
height: 14px;
margin-top: 3px;
}
.title .refresh span {
color: #787878;
font-size: 14px;
}
.list li {
overflow: hidden;
margin-bottom: 18px;
}
.list li .head {
width: 46px;
height: 46px;
border-radius: 100%;
margin-right: 10px;
}
.list li .author {
margin-top: 4px;
width: 224px;
}
.list .author .author_title {
margin-bottom: 5px;
}
.list .author .author_title .author_name {
font-size: 14px;
color: #333;
}
.author .author_title .author_add img {
width: 13px;
height: 13px;
margin-top: 3px;
}
.author .author_title .author_add span {
font-size: 13px;
color: #42c02e;
}
.list .author .author_text {
font-size: 12px;
color: #969696;
}
</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="搜索" />
<img src="./search.png" alt="">
</div>
<div class="all">
<span>查看全部</span>
<img src="./more.png" alt="">
</div>
<div class="menu">
<div class="center">
<ul>
<li>首页</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</div>
<div class="recommend">
<div class="title auto">
<div class="text left">推荐作者</div>
<div class="refresh right">
<img src="./sx.png" alt="">
<span class="right">换一批</span>
</div>
</div>
<ul class="list">
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
<li>
<img class="head left"
src="https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
<div class="author left">
<div class="author_title auto">
<div class="author_name left">闫泽华</div>
<div class="author_add right">
<img src="./add.png" alt="">
<span class="right">关注</span>
</div>
</div>
<div class="author_text">写了272.3k字 · 4.8k喜欢</div>
</div>
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!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>
.box {
width: 200px;
height: 200px;
float: left;
}
.box1 {
background: red;
}
.box2 {
background: rgb(0, 255, 4);
}
.box3 {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
<div class="box3">222</div>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!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>
ul,body{
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.menu > li {
float: left;
margin-right: 20px;
position: relative;
}
.drop {
position: absolute;
width: 73px;
display: none;
}
.drop li {
margin: 5px 0;
}
.menu > li:hover .drop {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>
首页
</li>
<li>
分类
<ul class="drop">
<li>html学习</li>
<li>js学习</li>
<li>css学习</li>
</ul>
</li>
<li>
我的
<ul class="drop">
<li>我的1</li>
<li>我的2</li>
<li>我的3</li>
</ul>
</li>
</ul>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 B

View File

@@ -0,0 +1,69 @@
<!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 {
margin: 0;
height: 3000px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 273px;
top: 37px;
}
.box_2 {
background: blue;
position: relative;
}
.box_2_1 {
width: 100px;
height: 100px;
background: #000;
position: absolute;
left: 121px;
top: 7px;
}
.box_3 {
background: yellow;
}
.box_4 {
background: green;
position: fixed;
right: 0;
bottom: 0;
}
.box_5 {
background: plum;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2">
<div class="box_2_1"></div>
</div>
<div class="box box_3"></div>
<div class="box box_4"></div>
<div class="box box_5"></div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,31 @@
<!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 {
margin: 0;
padding: 0;
}
.main {
height: 100%;
}
.box {
width: 100%;
height: 100vh;
background: red;
}
</style>
</head>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,56 @@
浮动 float
作用:让块元素排列在一行
display: inline-block
问题:元素之间有边距
清除 font-size: 0
问题:
元素漂浮离开后,原本位置被删除,下面的元素会钻上去,产生覆盖
解决方案:
1设置父元素的高度
2在父元素上设置 overflow: hidden;
3在浮动元素的后面元素上设置 clear: both;
元素漂浮离开后,原本位置被删除,父容器将没有高度
定位:
三种定位
相对定位 relative
当元素被设置相对定位后,元素的原本位置没有被删除,他的定位参考对象是他原本的位置
绝对定位 absolute
当元素被设置绝对定位后,元素的原本位置就被删除
他的定位参考对象:
他的父元素是否已定位?
如果已定位:那么参考父元素的位置来
如果没定位:参考浏览器边框来
实际使用:
子元素设置 absolute一般父元素都有个 relative
固定定位 fixed
当元素被设置固定定位后,元素的原本位置就被删除
他的定位参考对象就是浏览器边框
明天课程说 定位
案例:下拉菜单

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>
<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;
border-radius: 100%;
} */
0% {
width: 200px;
height: 200px;
background: red;
}
50% {
width: 100px;
height: 100px;
background: yellow;
}
100% {
width: 300px;
height: 300px;
background: blue;
}
}
.box {
width: 200px;
height: 200px;
animation: an 3s ease infinite alternate;
}
</style>
</head>
<body>
<input type="text" placeholder="输入密码">
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!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>媒体查询 media</title>
<style>
body {
width: 100%;
height: 100vh;
background: red;
margin: 0;
}
@media screen and (min-width: 100px) and (max-width: 500px) {
body {
background: yellow;
}
}
@media screen and (min-width: 501px) and (max-width: 1000px) {
body {
background: blue;
}
}
@media screen and (max-width: 319px) {}
@media screen and (min-width: 320px) {}
@media screen and (min-width: 360px) {}
@media screen and (min-width: 375px) {}
@media screen and (min-width: 414px) {}
@media screen and (min-width: 600px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {}
</style>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<!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;
}
.box {
width: 3.75rem;
height: 3.75rem;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: yellow;
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,48 @@
平滑过渡:
transform:
translate 让元素在 xy轴上进行移动
rotate 让元素旋转一定的角度
rotateX
rotateY
scale 让元素进行放大缩小 x y
skew 斜切 x y
媒体查询
@media
rem 新的尺寸单位 实现尺寸的动态适配
% px vw vh
rem 是参考网页 html 上的 font-size 来动态计算的
你写的rem * html 上的 font-size = 真实的尺寸
动态修改 html 上的 font-size
1 媒体查询 @media
2 js实现
布局的动态适配
display: flex

View File

@@ -0,0 +1,46 @@
<!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;
}
ul {
display: flex;
height: 45px;
background: #8d8d8d;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
li {
width: 25%;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>社会</li>
<li>军事</li>
<li>体育</li>
<li>政治</li>
<li>科技</li>
<li>热点</li>
<li>实时</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,32 @@
布局的动态适配
display: flex
作用:快速让页面实现居中对齐的(浏览器自动帮我们对齐)
总共13个css属性
display: flex 开启弹性盒子
注意1 在你想设置对齐子元素的最近的那个父元素上开启
2 父元素如果开启弹性盒子那么子元素的float、clear和vertical-align将失效
3 父元素如果开启了弹性盒子,子元素如果没有设置高度,那么子元素的高度默认继承父元素
6个应用在父元素上的
align-items: center; 设置Y轴对齐的
justify-content: space-between; 设置X轴对齐的
flex-wrap: wrap; 设置一行放不下的时候,是否换行(注意:需要手动指定一行放多少个)
flex-direction 设置元素的排列方向默认是row 横放)
注意:如果设置了 column
那么 align-items 和 justify-content 作用将相互颠倒
align-content 如果有多行子元素,那么使用这个属性进行对齐
6个应用在子元素上的
order 设置子元素的排列顺序,数值越小越靠前
flex-shrink: 0; 让子元素在空间不足的时候不缩小
一般实现横向滑动
flex-grow 定义子元素的放大比例
flex 是 flex-grow flex-shrink flex-basis 的简写
flex: 1; 代指: flex-grow: 1

View File

@@ -0,0 +1,310 @@
<!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>
</style>
</head>
<body>
</body>
<script>
// console.warn("111")
// console.error("111")
// console.log(window)
// js 基础语法
// js 变量
// 变量:计算机内部用来存储数据的地方,可以被修改的
// 定义变量?
// 系统关键字: class var let const
// var 变量名称 = 变量初始数值;
// 先定义 后 使用
// var UserName;
// UserName = 100
// console.log(UserName);
// 变量名命名规则?
// 不能以数字和特殊符号(_ $)开头
// 变量名可以用中文,但是杜绝使用!!!
// 变量名区分大小写
// 变量名命名的时候要具有含义(看得懂),一般是英文翻译
// 变量名要遵守驼峰命名发
// 常量
// 不能修改的(定期的存折)
// const test = "dddd";
// console.log(test);
// es5
// es6
/*
* 你好
* njbnij
*/
// 数据类型
// 基本类型: string 字符串boolean 布尔类型number 数字类型null 空undefined 未定义
// 引用数据类型array 数组object 对象function 方法
//undefined 未定义 变量定义了但是没有赋值返回的就是undefined
// 运算符
// + ++ --
// +两边只有都是number类型才会进行 数学 加法运算
// + 两边只要有一个是字符串类型,就会进行拼接
// var a = 1, b = "2";
// console.log(a+b);
// a++ 先使用a然后让a自加1
// ++a 先让a自加1然后使用a
// var a = 2, b = "2", c = 3;
// console.log(
// ( --a + (++b) ) + ( (a++) - (c--) + a ) - ( b- (--a) + (c+b--) )
// );
// console.log(
// (a++ + (--a) - (c++) ) * ( --c + (b++) + a ) - ( c * (c--) + b - a )
// );
// 赋值运算符
// += -= *= /= %=
// console.log(a+=b); // a = a+b
// = 赋值
// == 相等 只会判断数值是否一样
// === 强相等 会判断数值是否一样,还会判断 类型是否一样
// console.log( a === b );
// 逻辑运算符
// && and 条件表达式两边结果都为true才为true
// || or 只要有一个为true就返回true
// ! 非 取反的意思
// if 条件语句
// switch if 语句判断条件很多的时候这时候if写起来不好看所以换 switch
// 三目(元)运算符
// if (true) {
// console.log(true);
// } else {
// console.log(false);
// }
// 简写
// 1==2 ? console.log(true) : console.log(false);
// var type = 4
// switch (type) {
// case 1:
// console.log("1");
// break;
// case 2:
// console.log("2");
// break;
// default:
// console.log("3");
// break;
// }
// js 数组?
// 通下标来存储数据的一种方式
// var arr = new Array();
// arr[0] = 1
// arr[1] = 3
// arr[2] = 5
// var arr = new Array(1,3,5)
// var arr = [1, 3, 5, 7, 9];
// 数组还自带很多方法
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
// for(var i = 0;i< arr.length; i++) {
// console.log(arr[i]);
// }
// var a = 10;
// while (a > 20) {
// console.log(a);
// a++
// }
// do {
// console.log(a);
// a++
// } while (a > 20);
// for in 遍历对象
// 通过 key(名字) value 来存储数据
// 存储的数据应该是 某个事物 具体的属性
// var obj = new Object();
// obj.name = "刘兵";
// obj.age = 18;
// var obj = new Object({ name: '刘兵', age: 18 })
// es5 是没有 class
// var obj = {
// name: '刘兵',
// age: 18,
// like: ['骑车', '编程']
// }
// console.log(obj);
// es6 class
// 面向对象的三大特征
// 封装 继承 多态
// class ren {
// name;
// age;
// like;
// eat() { }
// sleep() { }
// }
// class ren1 extends ren {
// // 构造函数,类被初始化的时候第一个默认运行的方法
// // 类参数的保存,或者默认方法的调用
// constructor(name, age, like) {
// super()
// this.name = name;
// this.age = age;
// this.like = like;
// }
// sport() { }
// getName() {
// return this.name;
// }
// }
// class ren2 extends ren {
// constructor(D,F,G) {
// super()
// this.name = D
// }
// study() { }
// }
// var aaa = new ren1("刘兵", 18, [])
// var bbb = new ren2("张三")
// console.log(bbb.name);
// console.log(aaa.getName());
// function 方法 函数
// 作用???
// 降低代码冗余
// 匿名方法
// function test() {
// console.log("test方法");
// }
// var test = function (par, par2, par3) {
// console.log(par, par2, par3);
// }
// var c = test;
// console.log(c);
// test("你好1", "你好2", "你好3");
// 简写 => 箭头函数 es6
// var test = (par, par2) => console.log(par, par2);
// test("你好1", "你好2");
// 作用域
// 全局作用域
// 局部作用域
// var num = 100;
// function he(a,b) {
// // 不加 var 会做 变量提升(提升到全局,变成全局变量)
// var num2 = 200;
// return a + b + num;
// }
// var c = he(10,20);
// console.log(c);
// console.log(num2);
// 回调函数 es5 的方案
// 作用??
// 异步 一般用来处理 耗时 操作
// 同步
// function getTime(call) {
// var res = "默认数值"
// setTimeout(function() {
// res = "你好"
// call(res)
// }, 3000)
// }
// getTime( function(par) {
// console.log(par);
// } );
// function a(call) {
// call("你好")
// }
// a( function(par) {
// console.log(par);
// } )
// function a () {
// console.log(arguments);
// }
// a(1,2,3,4,5,6,7,8,9,0)
// 自执行函数
// 封装插件,避免变量污染
// (function () {
// console.log("11");
// })()
</script>
</html>

View File

@@ -0,0 +1,90 @@
<!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>js 事件</title>
</head>
<body>
<!-- <div class="main">
<p>测试</p>
<button>点 我</button>
<h2>
<a href="">你好</a>
</h2>
</div> -->
<button class="test">点 我</button>
<!-- <button onclick="hello()">点我2</button>
<button class="ddd">点我3</button> -->
</body>
<script>
// 虚拟dom
// var main = {
// tagName: 'div',
// className: 'main',
// text: '',
// children: [
// {
// tagName: 'p',
// className: '',
// text: '测试',
// children: []
// },
// {
// tagName: 'button',
// className: '',
// text: '点 我',
// children: []
// },
// {
// tagName: 'h2',
// className: '',
// text: '',
// children: [
// {
// tagName: 'a',
// className: '',
// text: '你好',
// children: []
// }
// ]
// }
// ]
// }
// 事件
// 事件三要素
// 事件源 事件类型 事件处理函数
// 绑定事件 有三种方式
// 第二种和第三种
var buttonObject = document.querySelector(".test")
buttonObject.onclick = (event) => {
console.log(event);
alert("你点我了")
}
// function hello() {
// alert("你好")
// }
// var ddd = document.querySelector(".ddd");
// document.addEventListener('click', function() {
// alert("3")
// })
</script>
</html>

View File

@@ -0,0 +1,8 @@
html css
javascript 运行在客户端浏览器上的编程语言
现在的 javascript 可以运行在终端(类似 pythonjava
js 是前端语言 但 同时也是 后端编程语言

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> ajax </title>
</head>
<body>
<ul>
</ul>
</body>
<script>
// 1 拿出电话 创建一个新的 ajax对象
var ajax = new XMLHttpRequest();
// 2 输入手机号码 设置后端的接口(网址)地址
ajax.open("GET", "http://127.0.0.1/my.php")
// 3 点击拨号按钮 开始发送请求
ajax.send();
// 4 状态监听
ajax.onreadystatechange = () => {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
var data = JSON.parse(ajax.response);
console.log(data);
// data.result.list.forEach(v => {
// document.querySelector("ul").innerHTML += `
// <li>
// <p>${v.title}</p>
// <img src="${v.img_src}" alt="">
// </li>
// `
// });
} else {
alert("请求失败,稍后再试")
}
}
}
</script>
<!-- <script>
function getData(res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1/index.php?callback=getData"></script> -->
</html>

View File

@@ -0,0 +1,105 @@
ajax
是什么?:是一种无刷新的前后端数据交换通讯的技术
XMLHttpRequest 第一代发送ajax的方法
fetch 下一代全新的发送ajax的方法
发送的是HTTP 请求
四种请求方式:
GET 表示的是找服务器 要 资源的意图
name '刘兵'
age 18
是把参数放在网址后面,传给后端
http://a.com/index.php?name=刘兵&age=18
POST 表示的是 给 服务器 数据的意图
是把参数放在请求体里面给后端
json{ name: '刘兵', age: 18 } 表单name=刘兵&age=18
PUT 表示的是 更新 服务器 数据的意图
DELETE 表示的是 删除 服务器 数据的意图
OPTIONS 预检查请求
ajax数据格式
xml
json 对象,数组,对象和数组的组合
JSON.stringify 将数组或对象转换为字符串格式
JSON.parse 将字符串格式的数组或对象转换为真正的数组或对象
ajaxhttp 请求
请求头
响应头
请求体
老旧:
服务端渲染
后端把网页的html直接做好后交给浏览器来实现
80%后端修改页面20%),数据库,写功能和后端代码 10k
20%)前端:写页面 3k
劣势:
项目里面混合了前后端多种语言,导致修改页面和增加功能的时候成本很高
现在:
前后端分离
50%)后端:数据库,接口,后端代码 10k
|
|--- ajax电话
|
50%)前端:写页面,写功能,做路由 10k
ajax 在使用的时候一般会遇到跨域错误
浏览器会对前后端的网址进行安全同源策略CORS检查
1协议
2域名
3端口
http https ws wss file
前端http://b.com:9090/index
后端http://a.com:8080/api/json/index
什么叫 跨域 (绕过浏览器的同源策略)
解决跨域:
1后端设置cors允许跨域请求
主要实现:后端设置响应头字段 Access-Control-Allow-Origin 为 前端的访问地址
【不用了】 2jsonp 把ajax请求的地址放到script src中变成js资源文件请求通过callback回调拿回数据
3: 服务端代理
A ---> B
A ----> C ---> B

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

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