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,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="这是我的网站介绍"/>
<title>这是我的第一课</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://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=196519980,2056827994&fm=58"
alt="抱歉,图片无法显示">
<a href="https://baidu.com" target="_blank">百度</a>
<ul>
<li>ul无序列表1</li>
<li>ul无序列表2</li>
</ul>
<ol>
<li>
第一章html学习
<ol>
<li>a标签学习</li>
<li>img标签学习</li>
<li>h1标签学习</li>
</ol>
</li>
<li>ol有序列表2</li>
</ol>
<button>我是按钮</button>
<input type="text" placeholder="请输入用户名"/>
<input type="number" placeholder="请输入手机号"/>
<input type="password" placeholder="请输入密码">
<input type="color">
<input type="file"/>
<input type="date"/>
<input type="datetime-local"/>
<h2>请选择你的性别:</h2>
<input type="radio" name="sex">
<input type="radio" name="sex">
<input type="radio" name="sex2"> 女2
<input type="radio" name="sex2"> 男2
<h2>选择你的兴趣:</h2>
<input type="checkbox" name="eee"> 骑车
<input type="checkbox" name="322"> 游戏
<input type="checkbox" name="444"> 电影
<form action="http://127.0.0.1/index.php" method="GET">
<input required name="username" type="text" placeholder="请输入用户名">
<input required name="userpwd" type="password" placeholder="请输入密码">
<input type="button" value="登录"/>
<input type="submit" value="登录">
</form>
<video width="400" loop autoplay muted controls src="https://www.runoob.com/try/demo_source/movie.mp4"></video
<audio controls src="https://www.runoob.com/try/demo_source/horse.ogg"></audio>
<textarea placeholder="留言信息" name="" id="" cols="80" rows="10"></textarea>
<p>
<strong>option</strong> 元素&nbsp;&nbsp;&nbsp;&nbsp;定义下拉列表中的一个选项(一个条目)。
<br>
浏览器将 <sub></sub> 签 中<sup></sup>内容作为 <em>标签</em> 的菜单或是
<del>滚动列表</del>中的一个 <i>元素显示</i> 。option 元素位于 select 元素内部。
<center>居中</center>
</p>
<pre>
#!/usr/bin/env node
var argv = require('yargs').argv;
if (argv.ships > 3 && argv.distance < 53.5) {
console.log('Plunder more riffiwobbles!');
} else {
console.log('Retreat from the xupptumblers!');
}</pre>
</body>
</html>

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="top">
<div class="top-logo">
<a href="">
<img src="" alt="">
</a>
</div>
<div class="top-menu">
<ul>
<li>HTML/CSS</li>
<li>HTML/CSS</li>
<li>HTML/CSS</li>
<li>HTML/CSS</li>
<li>HTML/CSS</li>
<li>HTML/CSS</li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<div class="left-top">
<h3>课程表</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="left-top">
<h3>课程表</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="center"></div>
<div class="right">
<div class="right-top">
<h2>工具箱</h2>
<ul>
<li>
<img src="" alt="">
<span>dwede</span>
</li>
<li>
<img src="" alt="">
<span>dwede</span>
</li>
<li>
<img src="" alt="">
<span>dwede</span>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="top">
<img src="" alt="">
<span>dqewdqwdwqdwqd</span>
</div>
<div class="bottom">
错误符号加班我就开荒保洁然后把VR计划表是而客户缴费
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,87 @@
前端:主要做网页的前端页面,页面特效和页面功能
应用范围写pc手机端端页面微信小程序移动端APPPc端应用后端应用
三块:
1html 骨头 写网页基本结构 超文本标签标记语言
2css 皮肤美化html 层叠样式表
3javascriptjs思想是一门变成语言运行在客户端浏览器服务上操作系统上 Node.js上的脚本语言
1,2 用来构建页面的3 主要用来写特效,功能
后端语言PHPjavapythongojsnodejs【全栈语言】c#(桌面端,网站)
APP androidjavaswiftocc
meta:
title 浏览器标签卡
相对路径:
./ 当前目录
../ 上一层
/ 网站根目录
ul无序列表
ol有序列表
作用:
1实现重复性的布局
2网站的导航菜单下拉菜单
3新闻网站的新闻列表
标签分类:
块级标签:
1会独占一行 div
2可以设置宽高属性 width height
行内标签: span
1: 不会独占一行
2: 不能设置宽高
div
作用:用来组织网站整体结构的
span
作用: 用来组织网站局部结构的
http请求方法
get
参数放在地址栏
post
参数放在请求体body内部,form data
put
delete
header
option
任务
table
select
iframe

View File

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

View File

@@ -0,0 +1,18 @@
p,span{
color: red;
}
.two {
color: blue;
}
#three {
color: green;
}
li:nth-child(5n) {
color: green;
}
ul li:first-child {
color: hotpink;
}
ul li:last-child {
color: hotpink;
}

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/demo.css">
<title>Document</title>
<style>
p {
color: blue !important;
}
h2:hover {
color: crimson;
}
h2::before {
content: "before ";
}
h2::after {
content: " after ";
}
::selection {
color: green;
background: yellow;
}
input:focus{
width: 200px;
}
</style>
</head>
<body>
<p>wwww</p>
<h2>hover测试</h2>
<input type="text" placeholder="输入搜索关键词" name="" id="">
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 第一课</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<p>这是p标签1</p>
<p class="two">这是p标签2</p>
<p id="three">这是p标签3</p>
<p >这是p标签4</p>
<span>我是span</span>
<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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@@ -0,0 +1,86 @@
1: css 三种写法
1写在单独的css文件中 外链css
2x写在标签中 内部css忘记。。。。
3写在 head 里面 内链css
2css 的语法规则
选择器类型 {
属性名: 属性值;
}
3选择器
1标签选择器
标签名,标签名 {
属性名: 属性值;
}
2类(class)选择器(.
.类名,.类名 {
属性名: 属性值;
}
3id选择器#
#id名,#id名 {
属性名: 属性值;
}
class 和 id 选择器主要区别:
1id选择器定义的名称默认是唯一的
2id选择器主要结合js使用
4: 伪类选择器
nth-child
first-child
last-child
hover
focus
selection
before
after 用来绘制横线,图标等一些细节性的东西,在不影响网页布局的情况下实现细节
5: 通配符 *
6: 父子关系的表示
1xxx xxx
2: xxx > xxx
同级关系的表示
1: +
7: css 样式应用的优先级(权重)
最后的css样式会覆盖前面的后面权重 最高。
!important 会改变权重
3月11号
1: 实现task中的纯html结构布局
2: 把今天内容练到熟练,明天提问
3月12号如果时间足够的话
提前预习css更多属性
地址http://css.doyoe.com/
字体,
文本,
颜色,
3月13号
盒子模型,
定位,

View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索框</title>
<style>
input {
border-radius: 29px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
font-size: 13px;
padding: 7px 7px;
background-image: url("./sss.png");
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: 107px center;
outline: none;
}
</style>
</head>
<body>
<input type="text" placeholder="搜索">
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css属性练习</title>
<style>
.dddd {
font-size: 80px;
font-weight: bolder;
font-family: fantasy;
font-style: oblique;
text-align: center;
letter-spacing: 35px; /* 设置字符间距 */
line-height: 60px;
}
div {
height: 60px;
}
span {
vertical-align: middle;
}
.box {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.box p {
font-size: 15px;
}
.tm {
opacity: 0.5; /* 0 ~ 1*/
}
.box-2 {
width: 400px;
height: 400px;
/* background: #c65050; */
background-image: url('https://upload-images.jianshu.io/upload_images/538-efa040828af14c4e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp');
background-size: 134px 98px;
background-repeat: no-repeat;
background-position: 19px 21px;
border: 30px solid #747474;
box-shadow: 10px 38px 1px #e33c3c;
border-radius: 300px 50px 60px 10px;
/* border-width: 30px;
border-style: solid;
border-color: #747474; */
}
</style>
</head>
<body>
<div>
<span>测试</span>
<a href="">dedede</a>
</div>
<p class="dddd">
这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体
</p>
<div class="box">
<p>居中文字</p>
</div>
<img class="tm" src="https://upload-images.jianshu.io/upload_images/538-efa040828af14c4e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp" alt="">
<div class="box-2">
背景测试
</div>
</body>
</html>

View File

@@ -0,0 +1,49 @@
text-indent: 首行缩进 30px;
line-height: 做元素的垂直居中
前提:文本标签在 块元素中垂直居中
限定:单行文字居中
outline: none; 清除输入框外边的线
text-decoration清除下划线
text-shadow: 设置文字阴影
box-shadow设置div块元素阴影
list-style: 设置 ulol里面的li的圆点样式风格 none
display: 行内标签和块级标签实现相互转换
inline
block
inline-block
none 将元素隐藏
不适合:网站最外层搭建结构的时候使用,因为元素间会有边距
float 浮动
overflow: 规定元素超过父容器后如何排列,显示
hidden 超过部分隐藏
scroll 超过部分滚动
overflow-x
overflow-y
visibility 决定元素是否可以被看见
hidden
animation
@media
尺寸与补白
排除 marginpadding
box-sizing

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照腾讯新闻导航条</title>
<style>
body,li,a,ul{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.menu {
width: 100%;
height: 79px;
border-bottom: 1px solid #ebebeb;
}
.menu ul {
line-height: 79px;
padding-left: 40px;
}
.menu li {
float: left;
margin-right: 15px;
}
.menu li a{
color: #333;
font-size: 18px;
}
.active {
border-bottom: 3px solid #4889f3;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li class="active"><a href="">要闻</a></li>
<li><a href="">要闻1</a></li>
<li><a href="">要闻2</a></li>
<li><a href="">要闻3</a></li>
<li><a href="">要闻4</a></li>
<li><a href="">要闻5</a></li>
<li><a href="">要闻6</a></li>
<li><a href="">要闻7</a></li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
ul li {
list-style: none;
}
.box {
display: inline-block;
}
.box-1 {
width: 80px;
height: 80px;
overflow: scroll;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<a href="">测试</a>
<div class="box">div1</div>
<div class="box">div2</div>
<div class="box-1">
是计划表锯口费VB二级很方便是解放碑是继而被不就好是计划表锯口费VB二级很方便是解放碑是继而被不就好是计划表锯口费VB二级很方便是解放碑是继而被不就好是计划表锯口费VB二级很方便是解放碑是继而被不就好
</div>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body {
margin: 0;
height: 2000px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box-1 {
background: red;
position: relative;
left: 40px;
top: 18px;
z-index: -1;
}
.box-2 {
background: yellow;
position: absolute;
z-index: -3;
}
.box-3 {
background: green;
position: relative;
}
.box-3-1 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: -30px;
top: 140px;
z-index: -1;
}
.box-4 {
position: fixed;
right: 0;
bottom: 0;
background: palevioletred;
}
</style>
</head>
<body>
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">
<div class="box-3-1">3-1</div>
</div>
<div class="box box-4">4</div>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #8d8d8d;
/* padding: 10px; */
/* padding: 10px; 上右下左四个方向内边距都为10px*/
/* padding: 10px 20px; 上下为10px 左右为20px*/
/* padding: 10px 30px 20px; 上10px 左右30px 下20px */
padding: 10px 20px 30px 40px;
/* margin: 10px; */
/* margin-left: ;
margin-top: ;
margin-right: ;
margin-bottom: ; */
margin-left: 30px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">盒子模型</div>
<a href="">的文档无</a>
</body>
</html>

View File

@@ -0,0 +1,42 @@
盒子模型:
1: 宽高
2: 边框 border
3内边距 padding
4外边距 margin
5content内容
盒子模型真实宽高 = 宽 + border(左右) + padding左右 x 高 + border(上下) + padding上下
box-sizing
定位position
1相对定位 relative
元素被设置 相对定位 后,不会脱离文档流,他原本位置还在。
定位参考对象:
1他原本的位置左上角
2绝对定位 absolute
元素被设置 绝对定位 后,会脱离文档流,他原本位置不在,被其他元素占据。
定位参考对象:
1如果绝对定位的元素有父元素
1.1: 父元素已经定位,那么参考父元素的初始位置进行定位参考
1.2: 父元素没有定位, 那么参考浏览器边框进行定位
3固定定位 fixed
元素被设置 绝对定位 后,会脱离文档流,他原本位置不在,被其他元素占据。
定位参考对象:
永远参考浏览器进行定位
4默认定位
就是浏览器的默认文档流,自上向下
z-index: 设置定位元素的层级
数值越小,越向下
反之向上

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿百度图片详情</title>
<style>
body, ul,li,p {
margin: 0;
padding: 0;
list-style: none;
}
.main {
position: relative;
width: 458px;
height: 272px;
background: url("https://inews.gtimg.com/newsapp_ls/0/11459241338_870492/0");
background-size: cover;
}
.main p {
position: absolute;
font-size: 20px;
color: #fff;
bottom: 15px;
padding: 0 20px;
}
.box {
position: relative;
width: 458px;
height: 272px;
}
.box img {
position: absolute;
z-index: 1;
width: 100%;
}
.box p {
position: absolute;
z-index: 2;
font-size: 20px;
color: #fff;
bottom: 30px;
padding: 0 20px;
}
.news_list li{
width: 270px;
height: 100px;
}
.news_list img {
width: 120px;
height: 80px;
float: left;
}
.news_list span {
float: left;
width: 144px;
margin-left: 5px;
}
</style>
</head>
<body>
<!-- 背景图 -->
<div class="main">
<p>vivo清仓5G手机跑分50万大电池44W快充跌至2898</p>
</div>
<!-- img实现 -->
<div class="box">
<img src="https://inews.gtimg.com/newsapp_ls/0/11459241338_870492/0" alt="">
<p>vivo清仓5G手机跑分50万大电池44W快充跌至2898</p>
</div>
<ul class="news_list">
<li>
<img src="https://inews.gtimg.com/newsapp_ls/0/11458983176_294195/0" alt="">
<span>服退烧药,带全家从美国来京的确诊女子已被立案</span>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照网易严选的搜索</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.main {
width: 532px;
height: 38px;
}
.left {
float: left;
}
.main input {
width: 442px;
height: 100%;
border: none;
border: 1px solid #CC9756;
box-sizing: border-box;
border-top-left-radius: 19px;
border-bottom-left-radius: 19px;
padding-left: 32px;
background: url("./img/sss.png");
background-repeat: no-repeat;
background-size: 25px;
background-position: 5px center;
}
.search_button {
width: 90px;
height: 100%;
background: #CC9756;
color: #fff;
text-align: center;
line-height: 38px;
border-top-right-radius: 19px;
border-bottom-right-radius: 19px;
}
</style>
</head>
<body>
<div class="main">
<input class="left" type="text" placeholder="搜索">
<div class="search_button left">搜索</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
overflow: hidden;
position: relative;
}
.main:hover .daohang {
display: block;
}
.daohang {
position: absolute;
width: 520px;
height: 36px;
top: 50%;
margin-top: -18px;
display: none;
}
.fs {
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #000;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.dh_left {
float: left;
}
.dh_right {
float: right;
}
.lb_img{
width: 1560px;
}
.lb_img li {
float: left;
}
.yd {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -37.5px;
}
.yd li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
float: left;
margin-right: 10px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<div class="daohang">
<div class="fs dh_left"> < </div>
<div class="fs dh_right"> > </div>
</div>
<ul class="lb_img">
<li><img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt=""></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1VZo7x4v1gK0jSZFFXXb0sXXa-520-280.jpg_q90_.webp" alt=""></li>
</ul>
<ul class="yd">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮出现菜单</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.menu li {
float: left;
position: relative;
margin-right: 20px;
}
.drop_menu {
position: absolute;
display: none;
}
.menu li:hover .drop_menu{
display: block;
}
.drop_menu li {
clear: both;
width: 68px;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="">首页</a></li>
<li>
<a href="">图标库</a>
<ul class="drop_menu">
<li><a href="">我的图标</a></li>
<li><a href="">我的项目</a></li>
<li><a href="">我的收藏</a></li>
</ul>
</li>
<li><a href="">图标管理</a></li>
<li><a href="">帮助</a></li>
</ul>
</body>
</html>

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@@ -0,0 +1 @@
<svg class="wCYvWN" style="width:60px;height:30px" width="60" height="30" focusable="false" aria-hidden="true" viewBox="0 0 106 50" version="1.1"><g><path d="M79.6542664,49.2735656 L75.6602511,49.6932377 L75.6602511,27.3313525 L59.1137321,27.3313525 C58.6314725,27.3313525 57.9655336,26.8821721 57.8498237,26.1776639 L57.5346557,23.1870902 L75.6602511,23.1887295 L75.6602511,12.1260246 L62.1759992,12.1260246 C61.6180832,12.0858607 61.0229458,11.7788934 60.8894344,10.9870902 L60.5819534,7.93790984 L75.6602511,7.93790984 L75.6602511,0.409631148 L81.2074496,0.409631148 L81.2074496,7.93790984 L97.4727855,7.93790984 L97.4727855,23.1887295 L103.836831,23.1887295 L103.836831,38.1235656 C103.836831,42.2026639 100.70174,44.4715164 97.7187702,44.4715164 L92.357274,44.4715164 C91.6217473,44.4715164 91.0290374,43.9440574 90.9659229,43.3719262 L90.6681519,40.5223361 L92.1274725,40.5223361 L95.7933733,40.5223361 C97.0864115,40.5223361 98.3321137,39.6739754 98.3321137,38.1235656 L98.3321137,27.3313525 L81.2074496,27.3313525 L81.2074496,47.4452869 C81.2074496,48.5985656 80.4148771,49.1264344 79.6542664,49.2735656 L79.6542664,49.2735656 Z M81.260045,22.917418 L91.9745412,22.917418 L91.9745412,12.0514344 L81.260045,12.0514344 L81.260045,22.917418 Z M104.57519,13.9920082 L100.167289,13.9920082 C99.5871214,9.9170082 97.5274038,5.26987705 95.0355947,1.96209016 L100.167289,1.96209016 C102.583037,4.95553279 104.693327,8.85922131 105.720556,12.5608607 C105.867015,13.1711066 105.472144,13.9920082 104.57519,13.9920082 L104.57519,13.9920082 Z"></path><path d="M4.98236412,12.0515574 L9.99834885,12.0515574 C11.3953641,13.8056557 12.3169977,15.077377 13.7310053,18.5515574 C13.8337687,18.8339344 13.9130664,20.2007377 12.5900893,20.2007377 L8.57624962,20.2007377 C7.43047863,15.8630328 6.43521145,14.337623 4.97831832,12.0540164 C3.51980687,13.0105738 1.86507405,13.8138525 -4.04580153e-05,14.3802459 L-4.04580153e-05,10.3880328 C2.35987557,9.24172131 4.08662366,7.6892623 5.34608168,5.85278689 C6.43399771,4.2654918 7.18206641,2.47901639 7.58300534,0.409754098 L11.8043947,0.409754098 C12.772555,0.409754098 13.2313489,1.06877049 13.0962191,1.56139344 C12.9129443,2.1392623 12.5342573,2.99377049 12.1640664,3.78270492 L25.2676084,3.78270492 L25.0038221,6.30278689 C24.9370664,6.85483607 24.5227763,7.57532787 23.6181351,7.57532787 L17.5377,7.57532787 C18.2930511,9.24336066 18.7571046,10.7601639 18.9112496,11.3568852 C19.0508298,11.9036066 18.7004634,12.7810656 17.765074,12.7810656 L13.9850817,12.7810656 C13.7127992,10.9581148 13.4073412,9.70811475 12.633784,7.57532787 L9.82963893,7.57532787 C8.54266947,9.20852459 6.93891374,10.7679508 4.98236412,12.0515574 L4.98236412,12.0515574 Z M14.1651198,43.4847541 L14.1651198,22.1413115 L34.8367382,22.1413115 L34.8367382,36.8896721 C34.9253412,41.1093443 31.729158,43.4847541 28.4929214,43.4847541 L14.1651198,43.4847541 Z M35.3776618,49.3056557 C34.6793565,49.3056557 34.1008069,48.7921311 34.0028985,48.0851639 L33.669929,45.2757377 L38.4682496,45.2372131 C39.5310817,45.2372131 40.5696389,44.5277869 40.5696389,42.9769672 L40.5696389,18.4761475 L16.1390664,18.4761475 C15.6288908,18.4761475 15.0078603,18.2769672 14.819326,17.2298361 L14.5478527,14.3802459 L45.940845,14.3802459 L45.940845,43.4048361 C45.940845,45.4257377 44.1275168,49.2339344 39.6552878,49.3056557 L35.3776618,49.3056557 Z M6.84505115,49.2904918 L3.0626313,49.6933607 L3.0626313,20.2007377 L8.42250916,20.2007377 L8.42250916,47.3646721 C8.42250916,48.0146721 8.09399008,49.0794262 6.84505115,49.2904918 L6.84505115,49.2904918 Z M41.1040893,12.617541 L37.1335397,12.617541 C36.8025931,10.8986885 36.5436618,9.44581967 35.7462344,7.47942623 L32.2174863,7.47942623 C31.3132496,8.52245902 30.2645779,9.69581967 28.8404557,10.8204098 C27.3799214,11.9736885 25.5018603,13.1154918 22.9704023,13.9917213 L22.9704023,9.96672131 C27.0331962,7.6904918 29.0237305,4.6007377 29.9906771,0.409754098 L34.2080206,0.409754098 C35.3258756,0.409754098 35.6547992,1.21385246 35.5848069,1.4892623 C35.3121198,2.35811475 34.9075397,2.9892623 34.6032954,3.70360656 L48.620784,3.70360656 L48.3602344,6.23434426 C48.2724405,6.99745902 47.669616,7.47942623 47.0243107,7.47942623 L40.7173107,7.47942623 C41.4892496,9.14459016 41.945616,10.3318852 42.1398145,11.2503279 C42.223158,11.6478689 41.9775779,12.5761475 41.1040893,12.617541 L41.1040893,12.617541 Z M19.1422649,39.6040164 L27.579784,39.6040164 C29.230471,39.6040164 29.861616,38.5290164 29.861616,37.3347541 L29.861616,34.5634426 L19.1693718,34.5589344 L19.1422649,39.6040164 Z M19.1422649,30.6786066 L29.8620206,30.6786066 L29.8620206,26.0220492 L19.1422649,26.0220492 L19.1422649,30.6786066 Z"></path></g></svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@@ -0,0 +1,221 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿简书详情页面</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
body {
background: #f9f9f9;
}
.left {
float: left;
}
.right {
float: right;
}
.middle {
vertical-align: middle;
}
.header {
width: 100%;
height: 56px;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
background: #fff;
}
.header_center {
width: 1440px;
height: 100%;
margin: 0 auto;
}
.logo {
width: 60px;
height: 48px;
}
.menu {
height: 100%;
margin-left: 154px;
}
.menu li {
float: left;
line-height: 56px;
padding: 0 20px;
}
.menu li a {
font-size: 17px;
color: #333;
}
.menu li input {
width: 160px;
padding: 8px 36px 8px 16px;
box-sizing: border-box;
border-radius: 17px;
border: none;
background: #f2f2f2;
background-image: url("./img/sss.png");
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: 120px center;
}
.setting {
height: 100%;
}
.setting li {
float: left;
line-height: 52px;
margin-right: 10px;
}
.setting li:last-child {
margin-right: 0;
}
.auth {
width: 40px;
height: 40px;
}
.auth+img {
width: 14px;
height: 14px;
}
.vip {
width: 52px;
height: 24px;
}
.font {
width: 24px;
height: 14px;
}
.wirte {
width: 14px;
height: 14px;
}
.xwz {
width: 74px;
height: 22px;
padding: 8px 16px;
border: 1px solid #ec7259;
background: #ec7259;
border-radius: 50px;
}
.xwz {
color: #fff;
}
.content {
width: 1000px;
margin: 0 auto;
overflow: hidden;
margin-top: 10px;
}
.content_left {
padding: 24px;
box-sizing: border-box;
width: 730px;
margin-right: 10px;
background: #fff;
}
.content_right {
width: 260px;
background: #fff;
}
.user_message {
margin-top: 15px;
}
.user_message img {
width: 48px;
height: 48px;
border-radius: 100%;
}
.message_right {
margin-left: 8px;
padding-top: 3px;
}
.top_title span {
font-size: 15px;
font-weight: bolder;
}
.top_title p{
padding: 2px 9px;
display: inline-block;
width: 24px;
height: 17px;
border-radius: 30px;
border: 1px solid #ec7259;
text-align: center;
line-height: 17px;
color: #ec7259;
font-size: 12px
}
.top_info {
color: #969696;
font-size:14px;
}
.content_left h2{
border-left: 6px solid #ec7259;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="header_center">
<img class="logo left" src="./img/logo.png" alt="">
<ul class="menu left">
<li><a href="">发现</a></li>
<li><a href="">关注</a></li>
<li><a href="">消息</a></li>
<li>
<input type="text" placeholder="搜索">
</li>
</ul>
<ul class="setting right">
<li>
<img class="font middle" src="./img/font.png" alt="">
</li>
<li>
<img class="vip middle" src="./img/vip.png" alt="">
</li>
<li>
<img class="auth middle" src="./img/auth.png" alt="">
<img src="./img/drop.png" alt="">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="" class="xwz">
<img class="wirte" src="./img/bji.png" alt="">
<span>写文章</span>
</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="content_left left">
<h2>avicat Premium for Mac的破解教程</h2>
<div class="user_message">
<img class="left" src="https://upload.jianshu.io/users/upload_avatars/2925683/46e9598d606f.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
<div class="message_right left">
<div class="top_title">
<span>用户名</span>
<p>关注</p>
</div>
<div class="top_info">
12 2018.03.22 11:56:59 字数 1,398 阅读 134,301
</div>
</div>
</div>
</div>
<div class="content_right left"></div>
</div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,292 @@
.header_menu {
background: #333;
height: 36px;
line-height: 36px;
}
.menu_center{
}
.menu_r {
}
.menu_r li{
float: left;
margin-right: 10px;
position: relative;
}
.menu_r li:hover .drop_menu{
display: block;
}
.menu_r li:last-child {
margin-right: 0;
}
.menu_r li a{
color: #ccc;
padding-right: 10px;
font-size: 12px;
border-right: 1px solid #5c5c5c;
}
.menu_r li:last-child a{
border-right: none;
}
.icon-shouji {
vertical-align: bottom;
}
.icon-down{
vertical-align: bottom;
}
.drop_menu {
position: absolute;
left: -9px;
display: none;
}
.drop_menu a {
border-right: none !important;
}
.drop_menu ul{
padding-top: 10px;
width: 76px;
overflow: hidden;
box-shadow: 1px 1px 3px #a7a3a3;
padding: 0 10px;
box-sizing: border-box;
position: absolute;
top: -2px;
}
.drop_menu ul li{
clear: both;
margin-right: 0;
line-height: 19px !important;
border-bottom: 1px solid #e4e0e0;
width: 100%;
text-align: center;
margin-bottom: 10px;
padding-bottom: 5px;
}
.drop_menu ul li:last-child {
border-bottom: none;
}
.drop_menu .sanjx {
width: 0px;
height: 0px;
border-top: 5px solid #ffff0000;
border-bottom: 5px solid white;
border-left: 5px solid #0000ff00;
border-right: 5px solid #ff000000;
position: absolute;
top: -12.5px;
left: 33px;
}
.drop_menu ul li a{
padding-right: 0;
}
.header_nav {
margin-top: 20px;
}
.nav_top_l {
height: 60px;
width: 212px;
background: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s24d0453a5f-dba1cb6952.png?imageView&type=webp");
background-position: 0 -298px;
}
.nav_bottom {
}
.nav_bottom ul {}
.nav_bottom ul li {
float: left;
padding: 0 26px;
position: relative;
line-height: 35px;
}
.nav_bottom ul li:first-child {
padding-left: 0;
}
.nav_bottom ul li:last-child {
padding-right: 0;
}
.nav_bottom ul li a{}
.nav_bottom ul li:hover .dropdown_menu{
display: block;
}
.dropdown_menu {
width: 1100px;
position: absolute;
left: -100px;
top: 36px;
padding: 10px;
border: 1px solid #8d8d8d;
box-sizing: border-box;
overflow: hidden;
display: none;
background: #fff;
}
.item {
width: 128px;
margin-right: 23px;
}
.item h2 {
font-size: 16px;
border-bottom: 1px solid #a29f9f;
padding-bottom: 10px;
margin-bottom: 12px;
}
.item_list {
margin-bottom: 11px;
}
.item_list img {
width: 46px;
vertical-align: middle;
}
.item_list span {
color: #908c8c;
}
.banner {
height: 420px;
background: url("https://yanxuan.nosdn.127.net/c9a9289286628f83d8a6795a2a5593ab.jpg?type=webp&imageView&quality=95&thumbnail=1920x420");
background-position: center;
margin-top: 43px;
}
.limited_time {
margin: 20px 0;
padding: 20px 0;
}
.time_title {
margin-bottom: 20px;
}
.time_title h2 {
}
.time_title p {
}
.time_content {
width: 100%;
height: 429px;
}
.content_l {
width: 224px;
height: 100%;
text-align: center;
box-sizing: border-box;
padding-top: 60px;
background: url("https://yanxuan.nosdn.127.net/a0d0bd891ebb55308dbddda736ed53cc.png?imageView&type=webp");
}
.content_l h2{
color: #615548;
font-size: 28px;
margin-bottom: 11px;
}
.line {
width: 20px;
height: 2px;
margin: 0 auto 18px;
background: #61594b;
}
.block {
width: 40px;
height: 40px;
color: #fff;
font-size: 18px;
line-height: 40px;
text-align: center;
background-color: #615548;
}
.time_block {
width: 130px;
margin: 0 auto;
}
.time_block span{
line-height: 40px;
}
.view_all {
width: 110px;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;
background: #a7936e;
border-radius: 15px;
color: #fff;
margin: 0 auto;
margin-top: 20px;
}
.content_r {
width: 866px;
}
.content_r li {
float: left;
width: 433px;
height: 214px;
border: 1px solid #f0ece4;
border-left: none;
box-sizing: border-box;
}
.content_r li img{
width: 180px;
height: 180px;
float: left;
}
.content_r li .r_info{
width: 252px;
padding-top: 14px;
}
.r_info h2 {
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.r_info p {
font-size: 14px;
color: #999;
}
.r_info .progress {
margin: 6px 0 8px;
}
.r_info .progress span{
font-size: 14px;
color: #999;
margin-left: 15px;
}
.r_info .progress .progress_left{
width: 152px;
height: 10px;
border: 1px solid #f2cecd;
border-radius: 5px;
margin-top: 7px;
}
.progress_left .progress_back {
width: 125.25px;
background-color: #ffe5e5;
height: 10px;
}
.price {}
.price span:nth-child(1){
font-size: 14px;
color: #be4141;
}
.price span:nth-child(2){
font-size: 24px;
color: #be4141;
font-weight: bolder;
}
.price span:nth-child(3){
margin-left: 3px;
color: #999;
font-size: 14px;
text-decoration: line-through;
}
.submitQ {
width: 118px;
height: 31px;
line-height: 31px;
text-align: center;
background-color: #be4141;
color: #fff;
font-size: 16px;
border-radius: 2px;
margin-top: 18px;
}

View File

@@ -0,0 +1,15 @@
.w_1090 {
width: 1090px;
}
.right {
float: right;
}
.left {
float: left;
}
.margin_auto {
margin: 0 auto;
}
.overflow {
overflow: hidden;
}

View File

@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易严选 - 以严谨的态度,为中国消费者甄选天下优品</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1699820_kffci9w7jn.css">
<link rel="shortcut icon" href="https://you.163.com/favicon.ico?r=gold" type="image/x-icon" />
<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="">
<div class="header_menu">
<div class="w_1090 margin_auto">
<div class="menu_r right">
<ul>
<li>
<a href="">登录/注册</a>
</li>
<li>
<a href="">我的订单</a>
</li>
<li>
<a href="">
企业采购
<i class="iconfont icon-down"></i>
</a>
<div class="drop_menu">
<div class="sanjx"></div>
<ul>
<li><a href="">企业购</a></li>
<li><a href="">礼品卡</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</li>
<li>
<a href="">
<i class="iconfont icon-shouji"></i>
APP
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 顶部黑色导航菜单 结束-->
<!-- 顶部白色导航不急 开始-->
<div class="header_nav">
<div class=" w_1090 margin_auto">
<div class="nav_top">
<div class="nav_top_l"></div>
<div class="nav_top_c"></div>
<div class="nav_top_r"></div>
</div>
<div class="nav_bottom">
<ul>
<li><a href="">首页</a></li>
<li>
<a href="">居家生活1</a>
<div class="dropdown_menu">
<div class="item left">
<h2>口碑好物</h2>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
</div>
<div class="item left">
<h2>口碑好物</h2>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
</div>
<div class="item left">
<h2>口碑好物</h2>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
</div>
<div class="item left">
<h2>口碑好物</h2>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
<div class="item_list">
<img src="https://yanxuan.nosdn.127.net/0dd4db7175684809f98db4a172568c22.jpg?quality=95&type=webp&imageView" alt="">
<span>温暖好物</span>
</div>
</div>
</div>
</li>
<li><a href="">居家生活2</a></li>
<li><a href="">居家生活3</a></li>
<li><a href="">居家生活4</a></li>
</ul>
</div>
</div>
</div>
<!-- 顶部白色导航不急 结束-->
<div class="banner">
<div class="w_1090">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<!-- 限时购 -->
<div class="limited_time">
<div class="w_1090 margin_auto">
<div class="time_title overflow">
<h2 class="left">限时购</h2>
<p class="right">更多抢购</p>
</div>
<div class="time_content">
<div class="content_l left">
<h2>18点结束</h2>
<div class="line"></div>
<div class="time_block overflow">
<div class="block left">00</div>
<span class="left">:</span>
<div class="block left">50</div>
<span class="left">:</span>
<div class="block left">13</div>
</div>
<div class="view_all">查看全部></div>
</div>
<ul class="content_r left">
<li>
<img src="https://yanxuan-item.nosdn.127.net/df3b083f7c42a6453fec121db61d0297.png?type=webp&imageView&thumbnail=180x180&quality=95" alt="">
<div class="r_info left">
<h2>美国加州甄选品质,原香大开心果 400克</h2>
<p>个大饱满,开口易剥</p>
<div class="progress">
<div class="progress_left left">
<div class="progress_back"></div>
</div>
<span>还剩167件</span>
</div>
<div class="price">
<span>限时价</span>
<span>¥82.8</span>
<span>¥88</span>
</div>
<div class="submitQ">立即抢购</div>
</div>
</li>
<li>
<img src="https://yanxuan-item.nosdn.127.net/df3b083f7c42a6453fec121db61d0297.png?type=webp&imageView&thumbnail=180x180&quality=95" alt="">
<div class="r_info left">
<h2>美国加州甄选品质,原香大开心果 400克</h2>
<p>个大饱满,开口易剥</p>
<div class="progress">
<div class="progress_left left">
<div class="progress_back"></div>
</div>
<span>还剩167件</span>
</div>
<div class="price">
<span>限时价</span>
<span>¥82.8</span>
<span>¥88</span>
</div>
<div class="submitQ">立即抢购</div>
</div>
</li>
<li>
<img src="https://yanxuan-item.nosdn.127.net/df3b083f7c42a6453fec121db61d0297.png?type=webp&imageView&thumbnail=180x180&quality=95" alt="">
<div class="r_info left">
<h2>美国加州甄选品质,原香大开心果 400克</h2>
<p>个大饱满,开口易剥</p>
<div class="progress">
<div class="progress_left left">
<div class="progress_back"></div>
</div>
<span>还剩167件</span>
</div>
<div class="price">
<span>限时价</span>
<span>¥82.8</span>
<span>¥88</span>
</div>
<div class="submitQ">立即抢购</div>
</div>
</li>
<li>
<img src="https://yanxuan-item.nosdn.127.net/df3b083f7c42a6453fec121db61d0297.png?type=webp&imageView&thumbnail=180x180&quality=95" alt="">
<div class="r_info left">
<h2>美国加州甄选品质,原香大开心果 400克</h2>
<p>个大饱满,开口易剥</p>
<div class="progress">
<div class="progress_left left">
<div class="progress_back"></div>
</div>
<span>还剩167件</span>
</div>
<div class="price">
<span>限时价</span>
<span>¥82.8</span>
<span>¥88</span>
</div>
<div class="submitQ">立即抢购</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相框掉落</title>
<style>
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url("qiang.jpg");
position: relative;
animation: doudong 0.3s 4 reverse;
overflow: hidden;
}
.box {
width: 400px;
border: 10px solid #000;
background: url("./xk_1.jpeg");
background-size: contain;
height: 248px;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -200px;
animation: qxie 0.1s ease-out 1.5s forwards;
transform-origin: 0px 0px;
}
@keyframes doudong {
0% {
background-position: 0 0;
left: 0;
}
50% {
background-position: 10px 0;
left: 10px;
}
100% {
background-position: 0 0;
left: 0;
}
}
@keyframes qxie {
0% {
top: 0;
transform: rotate(0deg);
}
50% {
top: 0;
transform: rotate(60deg);
}
70% {
top: 50%;
transform: rotate(60deg);
}
80% {
top: 70%;
transform: rotate(60deg);
}
100% {
top: 100%;
transform: rotate(60deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
animation: Dh 3s ease infinite reverse;
}
@keyframes Dh {
from {
background: blue;
}
to {
background: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
}
@media screen and (min-width: 320px) and (max-width: 414px) {
.box {
background: blue;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.box {
background: green;
}
}
@media screen and (min-width: 1025px) {
.box {
background: yellow;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兼容pc和移动端的demo案例</title>
<style>
/* ui 框架 */
.pc {
}
.wap {
display: none;
}
@media screen and (min-width: 320px) and (max-width: 414px) {
.pc {
display: none;
}
.wap {
display: block;
}
}
</style>
</head>
<body>
<input type="text">
<div class="pc">pc端导航条</div>
<div class="wap">移动端导航条</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 263 KiB

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem案例</title>
<style>
body {
margin: 0;
padding: 0;
}
.item {
width: 2.133rem;
height: 2.133rem;
border: 1px solid #000;
float: left;
box-sizing: border-box;
}
@media (min-width: 320px) {
html {
font-size: 50px;
}
}
@media (min-width: 375px) {
html {
font-size: 58.59375px;
}
}
@media (min-width: 640px) {
html {
font-size: 100px;
}
}
@media (min-width: 768px) {
html {
font-size: 120px;
}
}
</style>
</head>
<body>
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 388 B

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.menu {
display: flex;
height: 40px;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.menu li {
width: 20%;
text-align: center;
}
</style>
</head>
<body>
<ul class="menu">
<li>首页</li>
<li>社会</li>
<li>科学</li>
<li>军事</li>
<li>体育</li>
<li>首页</li>
<li>社会</li>
<li>科学</li>
<li>军事</li>
<li>体育</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App底部导航条</title>
<style>
body,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
.footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 55px;
justify-content: space-around;
align-items: center;
border-top: 1px solid #ebebeb;
z-index: 9999;
background: #fff;
}
.footer li {
display: flex;
flex-direction: column;
text-align: center;
}
.footer li img {
width: 30px;
}
.footer li p {
font-size: 12px;
color: #999;
}
.footer li span {
font-size: 12px;
color: #999;
}
.header {
height: 45px;
border-bottom: 1px solid #ebebeb;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #fff;
overflow-x: scroll;
}
.header ul {
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
width: 120%;
}
.content {
margin-top: 46px;
margin-bottom: 56px;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li>首页</li>
<li>社会</li>
<li>科学</li>
<li>军事</li>
<li>体育</li>
<li>财经</li>
<li>人文</li>
</ul>
</div>
<div class="content">
<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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
</div>
<ul class="footer">
<li>
<img src="./icons.png" alt="">
<span>首页</span>
</li>
<li>
<img src="./icons.png" alt="">
<span>订单</span>
</li>
<li>
<img src="./icons.png" alt="">
<span>购物车</span>
</li>
<li>
<img src="./icons.png" alt="">
<span>我的</span>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,35 @@
属性:
1父元素
【常用】display: flex 表示开启弹性盒子
【常用】align-items: center; 垂直对齐方式
【常用】justify-content: space-around; 水平对齐方式
【常用】flex-direction: row; 设置元素的排列方式x y
【常用】flex-wrap: wrap; 设置元素一行排不下的时候是否换行
align-content 定义多根轴线的时候Y对齐方式
2子元素flex-grow【wiedth,margin】align-self【定位】
order: 设置元素的位置,数值越小越靠前
flex-grow: 35; 设置元素的所占空间的比例(放大) 数值越大,元素所占空间越大
flex-shrink设置元素的所占空间的比例缩小 数值越大,元素所占空间越大
flex-basis属性定义了在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto即项目的本来大小。
flex flex-grow, flex-shrink 和 flex-basis
align-self: flex-end; 设置某个子元素和整体不一样的对齐方式
rem
基准值 * 你设置的数值(rem) = 最终网页的尺寸
100px(html) * 2rem == 28px
37.5px * 2rem == 75px
1媒体查询
2: js获取当前屏幕的 dpi然后根据dpi动态的计算出 基准值然后修改html的font-size

View File

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

View File

@@ -0,0 +1,231 @@
.footer {
position: fixed;
width: 100%;
height: 45px;
bottom: 0;
background-color: #fff;
left: 0;
padding-top: 2px;
box-sizing: border-box;
z-index: 9999999;
}
.footer ul {
display: flex;
justify-content: space-around;
align-items: center;
}
.footer ul li{
display: flex;
flex-direction: column;
text-align: center;
}
.footer ul img{
width: 30px;
}
.footer ul span{
font-size: 12px;
color: #999;
}
.footer::before {
content: '';
position: absolute;
width: 100%;
top:0;
left: 0;
height: 1px;
background: #dbdada;
transform: scaleY(0.5);
}
.header {
width: 100%;
height: 50px;
box-sizing: border-box;
background: #1C1B20;
padding: 0 10px;
position: fixed;
left: 0;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 9999999;
}
.header .left_location {
display: flex;
align-items: center;
width: 50%;
}
.left_location div {
font-size: 16px;
color: #fff;
margin-left: 4px;
margin-right: 2px;
}
.left_location::before {
content: "";
width: 15px;
height: 15px;
background-image: url("../img/location.png");
background-size: cover;
}
.left_location::after {
content: "";
width: 15px;
height: 15px;
background-image: url("../img/right.png");
background-size: cover;
}
.header input {
width: 52%;
height: 30px;
border-radius: 100px;
padding: 0 30px;
box-sizing: border-box;
background: #fff url("../img/search.png") no-repeat;
background-size: 15px;
background-position: 8px center;
}
.content {
margin-top: 50px;
margin-bottom: 45px;
}
.menu_list {
display: flex;
flex-wrap: wrap;
padding-top: 13px;
}
.menu_list li {
width: 20%;
text-align: center;
margin-bottom: 12px;
}
.menu_list li img{
width: 44px;
}
.menu_list li p{
font-size: 11px;
color: #333;
}
.shop_title {
position: relative;
text-align: center;
font-size: 17px;
color: #333;
margin-top: 15px;
margin-bottom: 5px;
}
.shop_title::before{
content: '';
position: absolute;
height: 1px;
width: 60px;
background: #666;
transform: scale(0.5);
left: 50%;
margin-left: -90px;
top: 50%;
margin-top: -0.5px;
}
.shop_title::after{
content: '';
position: absolute;
height: 1px;
width: 60px;
background: #666;
transform: scale(0.5);
right: 50%;
margin-right: -90px;
top: 50%;
margin-top: -0.5px;
}
.shop_list .list_top{
height: 40px;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
margin-bottom: 20px;
}
.list_top::before {
content: '';
position: absolute;
width: 100%;
top:0;
left: 0;
height: 1px;
background: #dbdada;
transform: scaleY(0.5);
}
.list_top::after {
content: '';
position: absolute;
width: 100%;
bottom:0;
left: 0;
height: 1px;
background: #dbdada;
transform: scaleY(0.5);
}
.list_top li {
font-size: 14px;
color: #666;
}
.list_top li:nth-child(4){
width: 1px;
height: 20px;
background: #dbdada;
}
.list_content li {
display: flex;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
align-items: center;
margin-bottom: 20px;
}
.content_l {
display: flex;
}
.content_l img {
width: 76px;
height: 57px;
margin-right: 8px;
border: 1px solid #e4e4e4;
}
.l_text h2 {
font-size: 16px;
color: #333;
}
.wjx {
display: inline-block;
}
.wjx span {
width: 10px;
height: 10px;
display: inline-block;
background: url("../img/wjx.png") no-repeat;
background-position: 0 0;
background-size: cover;
}
.a {
margin-left: 4px;
}
.b {
margin-left: 10px;
}
.a,.b{
font-size: 11px;
color: #333;
}
.content_time span,
.text_b span{
font-size: 11px;
color: #333;
}

View File

@@ -0,0 +1,15 @@
.w_1090 {
width: 1090px;
}
.right {
float: right;
}
.left {
float: left;
}
.margin_auto {
margin: 0 auto;
}
.overflow {
overflow: hidden;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 388 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 736 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 955 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 572 B

View File

@@ -0,0 +1,284 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照美图外卖</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="left_location">
<div>信旺·华府骏苑</div>
</div>
<input type="text" placeholder="请输入商家或商品...">
</div>
<div class="content">
<!-- 九宫格菜单 -->
<ul class="menu_list">
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>美食</p>
</li>
</ul>
<div class="shop_title">
附近商家
</div>
<div class="shop_list">
<ul class="list_top">
<li>综合排序</li>
<li>销量最高</li>
<li>距离最近</li>
<li></li>
<li>筛选</li>
</ul>
<ul class="list_content">
<li>
<div class="content_l">
<img src="./img/iii.jpg" alt="">
<div class="l_text">
<h2>唯你一生花店</h2>
<div class="text_xl">
<div class="wjx">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="a">4.6</span>
<span class="b">月售22</span>
</div>
<div class="text_b">
<span>起送 ¥0</span>
<span>配送 ¥0</span>
</div>
</div>
</div>
<div class="content_time">
<span>2小时</span>
<span>30.9KM</span>
</div>
</li>
<li>
<div class="content_l">
<img src="./img/iii.jpg" alt="">
<div class="l_text">
<h2>唯你一生花店</h2>
<div class="text_xl">
<div class="wjx">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="a">4.6</span>
<span class="b">月售22</span>
</div>
<div class="text_b">
<span>起送 ¥0</span>
<span>配送 ¥0</span>
</div>
</div>
</div>
<div class="content_time">
<span>2小时</span>
<span>30.9KM</span>
</div>
</li>
<li>
<div class="content_l">
<img src="./img/iii.jpg" alt="">
<div class="l_text">
<h2>唯你一生花店</h2>
<div class="text_xl">
<div class="wjx">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="a">4.6</span>
<span class="b">月售22</span>
</div>
<div class="text_b">
<span>起送 ¥0</span>
<span>配送 ¥0</span>
</div>
</div>
</div>
<div class="content_time">
<span>2小时</span>
<span>30.9KM</span>
</div>
</li>
<li>
<div class="content_l">
<img src="./img/iii.jpg" alt="">
<div class="l_text">
<h2>唯你一生花店</h2>
<div class="text_xl">
<div class="wjx">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="a">4.6</span>
<span class="b">月售22</span>
</div>
<div class="text_b">
<span>起送 ¥0</span>
<span>配送 ¥0</span>
</div>
</div>
</div>
<div class="content_time">
<span>2小时</span>
<span>30.9KM</span>
</div>
</li>
<li>
<div class="content_l">
<img src="./img/iii.jpg" alt="">
<div class="l_text">
<h2>唯你一生花店</h2>
<div class="text_xl">
<div class="wjx">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="a">4.6</span>
<span class="b">月售22</span>
</div>
<div class="text_b">
<span>起送 ¥0</span>
<span>配送 ¥0</span>
</div>
</div>
</div>
<div class="content_time">
<span>2小时</span>
<span>30.9KM</span>
</div>
</li>
<li>
<div class="content_l">
<img src="./img/iii.jpg" alt="">
<div class="l_text">
<h2>唯你一生花店</h2>
<div class="text_xl">
<div class="wjx">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="a">4.6</span>
<span class="b">月售22</span>
</div>
<div class="text_b">
<span>起送 ¥0</span>
<span>配送 ¥0</span>
</div>
</div>
</div>
<div class="content_time">
<span>2小时</span>
<span>30.9KM</span>
</div>
</li>
<li>
<div class="content_l">
<img src="./img/iii.jpg" alt="">
<div class="l_text">
<h2>唯你一生花店</h2>
<div class="text_xl">
<div class="wjx">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="a">4.6</span>
<span class="b">月售22</span>
</div>
<div class="text_b">
<span>起送 ¥0</span>
<span>配送 ¥0</span>
</div>
</div>
</div>
<div class="content_time">
<span>2小时</span>
<span>30.9KM</span>
</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li><img src="./img/ircon_1.png" alt=""><span>首页</span></li>
<li><img src="./img/ircon_2.png" alt=""><span>订单</span></li>
<li><img src="./img/ircon_3.png" alt=""><span>我的</span></li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS第一课</title>
</head>
<body>
<h2>dddd</h2>
</body>
<script>
// 变量 主要用来存放能够发生改变的数据
// 定义变量 var 变量名;
// 变量赋值 name = 1
// 定义变量名的规则
// 1: 变量名不要出现重复
// 2: 变量名只能以字母或特殊符号开头(_ $),不能用数字开头
// 3: 变量名可以用中文来定义,但是绝对杜绝使用!!!
// 4: 变量名严格区分大小写
// 5: 变量名一般都需要具有含义,写法规则:驼峰命名法 UserInputName
//var name; // 定义
//name = 1; // 赋值
// var name = 2;
var UserInputName = "刘兵a";
// 同时定义多个变量
var a = 1, b = 2, c = 3, d = 4;
// console.log(a);
// 变量(数据)类型
// 1string 字符串 "" '' 包裹起来的
// var name = "2"
// 2: number 数字
// var dd = 9997;
// 3: Boolean 布尔类型 true(真 1) false(假 0)
// 4: Undefined 变量定义了但未赋值
// 5: Null 清空变量
// 6: object 对象 {}
// 1js中描述事物的方式
// 什么叫对象:现实生活中具有某些特征和属性或者功能的集合体
// 车
// var cart = {
// color: 'red',
// speed: '3.2s',
// start: function () {
// console.log("车子启动的功能")
// },
// stop: function() {
// console.log("车子停止的功能")
// }
// };
// console.log(cart.color)
// console.log(cart.speed)
// cart.start()
// cart.stop()
// 2数据类型
// object 三种定义方式
// 1
// var obj1 = new Object();
// obj1.name = "小明" // name: 对象的 key value
// obj1.age = "18岁"
// obj1.ddd = "dddd"
// console.log(obj1.name)
// console.log(obj1['name'])
// 2
// var obj2 = new Object({
// name: '小明',
// age: 18,
// ddd: "dddd"
// });
// 3 这种常用
// var obj3 = {
// name: '小明',
// age: 18,
// ddd: "dddd",
// islike: false,
// like: {
// one: '编程',
// two: '游戏'
// }
// };
// console.log(obj3.like.two);
// 算数运算符
// +
// 1: 进行数学运算 + 两边都应该是number
// 2: 拼接字符串 +
// -
var fff = 1;
// a++ ++在变量后面:先使用变量,使用后再+1
// ++a ++在变量前面:
// console.log( fff++ + (fff--) ) //3
// console.log(fff) // 1
// console.log( (--fff + (fff++)) + (fff++ == fff--) )
// console.log(fff+=1) // fff = fff + 1
// console.log(fff-=1) // fff = fff - 1
// console.log(fff*=1) // fff = fff / 1
// console.log(fff/=1) // fff = fff * 1
// console.log(1 == "1")
// && 表达式两边必须都为true返回结果才为true
console.log( 1 > 2 && 3 == 1 )
// || 表达式两边只要有一个为true那么返回true
console.log( 3 < 4 || 1 < 2)
// ! 真假颠倒
console.log(!0)
console.log(!(fff !== 1));
</script>
</html>

View File

@@ -0,0 +1 @@
console.log("外部js")

Binary file not shown.

After

Width:  |  Height:  |  Size: 602 KiB

View File

@@ -0,0 +1,16 @@
周末任务:
1pc端页面5个页面
https://www.gvrbox.com/home
2移动端页面5个页面
https://m.vmall.com/
js运行在客户端浏览器(服务端)上的脚本语言(不需要编译器编译转换代码)
// 坑array(数组)function函数

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,22 @@
版本控制管理工具(团队项目开发使用的)
git
web端管理界面github.com
svn 老的工具(用的比较少)
git init: 在本地某个文件夹中创建仓库(本地仓库)
.git/
git add -A 将文件夹中所有文件添加到暂存区
git commit -m "备注"
git status
git pull 拉取远程仓库到本地
git push 推送本地代码到远程仓库

View File

@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS第二课</title>
</head>
<body>
<ul>
</ul>
<script>
// 变量
// var name = "dddd"
// name = "dddcsddscds"
// 常量 const
// 场景:
// const name = "lb"
// name = 'dddd'
// js 条件语句
// if switch
// if (1!=1) {
// console.log("b")
// } else {
// console.log("a")
// }
// if (1==1) console.log("true")
// else console.log("false")
// 三元运算符
// 1 == 1
// ?
// 2==2
// ? console.log("2等2")
// : console.log("2=2")
// : console.log("false")
// var isHaveTime = true;
// var monkey = 3000;
// if (monkey > 2000 && isHaveTime) {
// console.log("出去玩")
// } else {
// console.log("不能出去玩")
// }
// if () {
// } else if() {
// } else if () {
// } else {
// }
// var name = 18
// switch (name) {
// case 18:
// break;
// case value:
// break;
// default:
// break;
// }
// 填坑 1 数组 array
// 1
// var list = new Array();
// list[0] = new Array();
// list[0][1] = "1111";
// list[1] = "dedfe"
// list[3] = "dedsdfcsdcwdfe"
// console.log(list);
// 2
// var list = new Array( 1, "age", new Array(4,5,6,7) );
// console.log(list)
// 3
// var list = [1, "age", [4,5,6,7] ]
// console.log(list)
// json object + array来存储数据的一个格式
// xml
// var NewsList = {
// status: 200,
// result: [
// { title: '1111', desc: '简介', class: 'red' },
// { title: '1112', desc: '简介', class: 'blue' },
// { title: '1113', desc: '简介', class: 'green' },
// { title: '1111', desc: '简介', class: 'red' },
// { title: '1112', desc: '简介', class: 'blue' },
// { title: '1113', desc: '简介', class: 'green' }
// ]
// };
// console.log(NewsList.result)
// for 循环
// for (var i =0; i< NewsList.result.length; i++) {
// // document.querySelector("ul").innerHTML +=
// // "<li>"+
// // "<h2 class=" + NewsList.result[i].class + ">"+ NewsList.result[i].title +"</h2>"+
// // "<span>"+ NewsList.result[i].desc +"</span>"+
// // "</li>";
// document.querySelector("ul").innerHTML += `
// <li>
// <h2 class="${NewsList.result[i].class}">${NewsList.result[i].title}</h2>
// <span>${NewsList.result[i].desc}</span>
// </li>
// `;
// console.log(NewsList.result[i])
// }
// 使用js操作网页上的html叫DOM操作
// querySelector 返回的是 dom节点(node)
// 求数组最大数
var nums = [2,1,4,3,6,5,8,7];
var min = nums[0];
var max = nums[0];
for (var i = 0; i<nums.length; i++) {
if (min > nums[i]) {
min = nums[i]
}
if (max < nums[i]){
max = nums[i]
}
}
console.log(min)
console.log("max",max)
// 求和
// var sss = [1,2,3,4,5,6,7,8,9]
// 九九乘法表
// var result = ""
// for(var i = 1; i<=9; i++) {
// for (var j = 1; j <= i; j++) {
// result += `${j} x ${i} = ${i * j}&nbsp;&nbsp;`
// }
// result += "<br/>"
// }
// var i = 1;
// while (i <= 9) {
// var j = 1;
// while (j <= i) {
// result += `${j} x ${i} = ${i * j}&nbsp;&nbsp;`
// j++
// }
// result += "<br/>"
// i++
// }
// document.write(result)
</script>
</body>
</html>

View File

@@ -0,0 +1,10 @@
1function
2事件
3各种案例
4ajax
5各种原生js项目电商app天气预报音乐app

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js事件</title>
</head>
<body>
<button>点我</button>
<script>
// 事件
// 定义事件
// 1: 事件源 登录按钮
// 2: 事件类型 有很多类型 onclick
// 3: 事件处理函数 按钮需要处理的逻辑或者功能
// 第1
document.querySelector("button").onclick = function () {
alert("你点了按钮1")
}
document.querySelector("button").onclick = function () {
alert("你点了按钮2")
}
// document.getElementsByName
// document.getElementsByClassName
// document.getElementById
// document.getElementsByTagName
// 第2
// function tishi () {
// alert("你点了按钮")
// }
// 第3
// document.querySelector("button").addEventListener('click', function(){
// alert("你点了按钮1")
// })
// document.querySelector("button").addEventListener('click', function(){
// alert("你点了按钮2")
// })
</script>
</body>
</html>

View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 方法(函数)</title>
</head>
<body>
<script>
// js 方法(函数) 数据类型之一
// 作用:封装具有相同逻辑或者作用(功能)的代码
// 1定义function 函数名() {}
// 2调用
// 计算长方形面积
// 如果想拿到方法的返回值,使用 return 返回方法的最终计算结果给方法调用者
// 给钱的过程:向方法传递参数
// 不传参数的方法:无参函数(方法)
// 传参数的方法:有参函数(方法)
// arguments 可以将方法的参数全部获取到,不需要定义变量接受参数
function YourName () {
var result;
for(var i =0;i<arguments.length;i++) {
if ( !(i + 1 > 1) ) {
result = arguments[i] * arguments[i+1]
}
}
return result
}
console.log(result)
// var a = 100, b = 300;
// var mianji = YourName(a,b);
// console.log(mianji);
// var a = 1;
// // 方法内部会形成一个独立的作用域
// // 全局作用域
// // 局部作用域
// // 定义变量不加var会被js解析器进行变量提升
// function GolabVar () {
// }
// // 使用 prototype 原型向方法中追加 age变量
// prototype 在方法内里面使用
// 一般封装原生js插件的时候会用到或者模拟类的时候
// 在vue里面是用来注册全局方法的
// GolabVar.prototype.age = 18
// GolabVar.prototype.getName = function () {
// return "刘兵"
// }
// // 初始化方法让方法变为object
// var ddd = new GolabVar()
// console.log(ddd.age)
// console.log(ddd.getName())
// 第二种定义方法的方式
// var GetName = function () {
// }
// function GetName() {}
</script>
</body>
</html>

View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.active_title {
color: red;
}
.active_content {
display: block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="tabs_title">
<li class="active_title">公告</li>
<li>规则</li>
<li>论坛</li>
</ul>
<ul class="tabs_content">
<li class="active_content">公告的内容</li>
<li>规则的内容</li>
<li>论坛的内容</li>
</ul>
</div>
</body>
<script>
var TabsTitle = document.querySelectorAll(".tabs_title li");
var TabsContent = document.querySelectorAll(".tabs_content li");
// 遍历所有的li标签
TabsTitle.forEach( function(val,index) {
// 为每个li标签绑定点击事件
val.onclick = function () {
// 用户点击的时候删除所有li的样式名 active_title active_content
TabsTitle.forEach(function(v, i){
v.className = ""
TabsContent[i].className = ""
})
// 然后为你点击的li标签添加激活样式 active_title active_content
val.className = "active_title"
TabsContent[index].className = "active_content"
}
} )
</script>
</html>

View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照百度搜索提示建议</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 400px;
margin: 30px auto;
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="main">
<input class="search_key" type="text" placeholder="输入关键字">
<ul class="search_list none">
</ul>
</div>
</body>
<script>
// 获取输入框input的html
var searchKey = document.querySelector(".search_key");
// 获取建议列表的父容器
var searchList = document.querySelector(".search_list");
// 搜索建议数组
// 今天天气不错
// <span>天气</span>
var KeyWord = ['今天天气不错','心情不错', '今天不上课','我要学习HTML', '学习JS不错', '天气是阴天'];
// 存放符合用户条件的数据
var NewKeyWord = [];
// 给input绑定输入事件
searchKey.oninput = function (e) {
// 判断用户输入输入内容,或者是否在删除内容
if (searchKey.value.length == 0 || e.data == null) {
// 清空上次搜索的数组
NewKeyWord = []
// 清空上次遗留的html
document.querySelector(".search_list").innerHTML = ""
// 把建议列表隐藏
searchList.className = "search_list none"
// 判断用户是否在删除,如果是 先清除上次的数组和html之后重新匹配运行
e.data == null ? PiPei() : ''
// 输入不为空,开始匹配
} else {
PiPei()
}
}
function PiPei() {
// 遍历搜索建议数组
KeyWord.forEach(function(val,index) {
// 只有在输入的长度不为0的情况下并且能够在 搜索建议数组 能匹配到数值的情况下才保存数据到新数组
if (searchKey.value.length != 0 && val.indexOf(searchKey.value) > -1) {
// 截取符合用户输入的关键词出来然后拼接成html带上颜色
var jqukey = `<span style="color: red">${val.substring(val.indexOf(searchKey.value), val.indexOf(searchKey.value) + searchKey.value.length)}</span>`
// 将拼接好带颜色的字符串 替换到 原本的字符串中,并覆盖原本字符串
val = val.replace(searchKey.value, jqukey)
// 保存到新数组
NewKeyWord.push(val)
}
});
// 遍历渲染到页面
NewKeyWord.forEach(function(val,index){
// 插入li标签到ul里面
document.querySelector(".search_list").innerHTML += `<li>${val}</li>`
});
// 显示 建议列表
searchList.className = "search_list"
}
</script>
</html>

View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.active_title {
color: red;
}
.active_content {
display: block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</div>
</body>
<script>
// 假装这是后端给我们的json数据
var Tabs = {
status: 200,
result: {
tabs_title: [
{ id: 1, title: '公告' },
{ id: 1, title: '规则' },
{ id: 1, title: '论坛' },
{ id: 1, title: '论坛2' }
],
tabs_content: [
{ id: 1, title: '公告的内容' },
{ id: 1, title: '规则的内容' },
{ id: 1, title: '论坛的内容' },
{ id: 1, title: '论坛的内容2' }
]
}
};
// 获取两个父容器ul为 innerHTML 做准备
var TabsTitle = document.querySelector(".tabs_title");
var TabsContent = document.querySelector(".tabs_content");
// 根据数据渲染标题的li标签
function RenderTitle() {
Tabs.result.tabs_title.forEach( function(val,index) {
TabsTitle.innerHTML += `<li class="${ index == 0 ? 'active_title' : '' }">${val.title}</li>`
} )
}
// 根据数据渲染内容的li标签
function RenderContent() {
Tabs.result.tabs_content.forEach( function(val,index) {
TabsContent.innerHTML += `<li class="${ index == 0 ? 'active_content' : '' }">${val.title}</li>`
} )
}
// 绑定点击事件,注意:一定要在 渲染标题和内容之后运行
function BindClick() {
// 获取标题的所有li标签
var TabsTitleLi = document.querySelectorAll(".tabs_title li");
// 获取内容的所有li标签
var TabsContentLi = document.querySelectorAll(".tabs_content li");
TabsTitleLi.forEach( function(val,index) {
val.onmouseover = function () {
TabsTitleLi.forEach(function(v, i){
v.className = ""
TabsContentLi[i].className = ""
})
val.className = "active_title"
TabsContentLi[index].className = "active_content"
}
} )
}
RenderTitle()
RenderContent()
BindClick()
</script>
</html>

View File

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

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照淘宝滚动固定</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
height: 3000px;
background: #8d8d8d;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
height: 60px;
border-bottom: 1px solid #d5d2d2;
margin: 0 auto;
background: #fff;
}
.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<ul class="menu">
<li>左侧</li>
<li>右侧</li>
</ul>
<script>
var body = document.querySelector("body")
body.onscroll = function (event) {
console.log(event)
var Y = document.documentElement.scrollTop;
if (Y > 300) {
document.querySelector(".menu").className = "menu fixed"
} else {
document.querySelector(".menu").className = "menu"
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,69 @@
var timer;
var LiArr = document.querySelectorAll(".yd li");
$(".dh_right").onclick = function () {
OffSetDistance(-520)
changeYd()
}
$(".dh_left").onclick = function () {
OffSetDistance(520)
changeYd()
}
function OffSetDistance(nums) {
var Offset = parseInt($(".lb_img").style.left) + nums;
$(".lb_img").style.left = `${Offset}px`
if (Offset < -1040) {
console.log("没有")
$(".lb_img").style.left = "0px";
}
if (Offset > 0) {
$(".lb_img").style.left = "-1040px";
}
}
function changeYd() {
var index = Math.abs(parseInt($(".lb_img").style.left)) / 520;
LiArr.forEach(function(val){
val.className = ""
})
LiArr[index].className = "active"
}
function BindYdClick() {
LiArr.forEach(function(val,index){
val.onclick = function () {
LiArr.forEach(function(v){
v.className = ""
})
val.className = "active"
$(".lb_img").style.left = `${index * -520}px`;
}
})
}
$(".main").onmouseover = function () {
clearInterval(timer)
}
$(".main").onmouseout = function () {
autoPlay()
}
function autoPlay() {
timer = setInterval( function(){
OffSetDistance(-520)
changeYd()
// $(".dh_right").onclick()
}, 1000 )
}
autoPlay()
BindYdClick()
function $(className){
return document.querySelector(className)
}

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言</title>
<style>
.main {
width: 400px;
height: 350px;
margin: 30px auto;
position: relative;
}
textarea {
width: 100%;
height: 100%;
resize: none;
}
.main span {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<textarea name="" id="" cols="30" rows="10"></textarea>
<span>300/300</span>
</div>
<script>
var totalNums = 300;
$("textarea").oninput = function () {
var syLength = totalNums - $("textarea").value.length;
if (syLength < 0) {
$("textarea").value = $("textarea").value.substring(0,300)
$("span").innerText = `300/0`
} else {
$("span").innerText = `300/${syLength}`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</body>
</html>

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
overflow: hidden;
position: relative;
margin: 30px auto;
}
.daohang {
position: absolute;
width: 520px;
height: 36px;
top: 50%;
margin-top: -18px;
z-index: 2;
}
.fs {
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #000;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.dh_left {
float: left;
}
.dh_right {
float: right;
}
.lb_img{
width: 1560px;
position: relative;
transition: all 0.3s ease;
}
.lb_img li {
float: left;
}
.yd {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -37.5px;
}
.yd li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
float: left;
margin-right: 10px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<div class="daohang">
<div class="fs dh_left"> < </div>
<div class="fs dh_right"> > </div>
</div>
<ul class="lb_img" style="left: 0px">
<li><img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt=""></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1VZo7x4v1gK0jSZFFXXb0sXXa-520-280.jpg_q90_.webp" alt=""></li>
</ul>
<ul class="yd">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="./js/swiper.js"></script>
</html>

View File

@@ -0,0 +1 @@
模仿淘宝右侧,滚动切换激活样式

View File

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

View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js轮播</title>
<link rel="stylesheet" href="./clear.css">
<style>
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
overflow: hidden;
position: relative;
margin: 30px auto;
}
.daohang {
position: absolute;
width: 520px;
height: 36px;
top: 50%;
margin-top: -18px;
z-index: 2;
}
.fs {
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #000;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.dh_left {
float: left;
}
.dh_right {
float: right;
}
.lb_img{
width: 1560px;
position: relative;
transition: all 0.3s ease;
}
.lb_img li {
float: left;
}
.yd {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -37.5px;
}
.yd li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
float: left;
margin-right: 10px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<div class="daohang">
<div class="fs dh_left"> < </div>
<div class="fs dh_right"> > </div>
</div>
<ul class="lb_img" style="left: 0px">
</ul>
<ul class="yd">
</ul>
</div>
</body>
<script src="./swiper.js"></script>
<script>
var ListData = [
{ id: 1, href: 'https://www.baidu.com', imgUrl: 'https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg' },
{ id: 1, href: 'https://www.baidu.com', imgUrl: 'https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg' },
{ id: 1, href: 'https://www.baidu.com', imgUrl: 'https://img.alicdn.com/tfs/TB1VZo7x4v1gK0jSZFFXXb0sXXa-520-280.jpg_q90_.webp' }
];
new Swiper({
time: 1,
containerClassName: '.lb_img',
NavigationClassName: '.yd',
next: '.dh_left',
previous: '.dh_right',
data: ListData
})
</script>
</html>

View File

@@ -0,0 +1,176 @@
// js 封装插件
// 给浏览器使用前端window
// 给nodejs 服务端使用的(后端)
// 自执行函数
// 自执行函数,形成局部作用域
(function (win) {
var defaultSetting = {
time: 3,
containerClassName: '.container',
NavigationClassName: '.navigation',
next: '.next',
previous: '.prev',
autoPlay: false,
data: [],
imgWidth: 0
}
// es5 构造函数
// 主要做 变量的保存和校验
function LunBo(setting) {
defaultSetting.time = setting.time || defaultSetting.time
defaultSetting.containerClassName = setting.containerClassName || defaultSetting.containerClassName
defaultSetting.NavigationClassName = setting.NavigationClassName || defaultSetting.NavigationClassName
defaultSetting.next = setting.next || defaultSetting.next
defaultSetting.previous = setting.previous || defaultSetting.previous
defaultSetting.autoPlay = setting.autoPlay || defaultSetting.autoPlay
defaultSetting.data = setting.data || defaultSetting.data
if ( defaultSetting.data.length == 0 || (document.querySelector(defaultSetting.containerClassName) == null ||
document.querySelector(defaultSetting.NavigationClassName) == null||
document.querySelector(defaultSetting.next) == null||
document.querySelector(defaultSetting.previous) == null)) {
console.error("类名不存在或data数据源为空请仔细检查")
} else {
this.init()
}
}
LunBo.prototype = {
init() {
this.RenderContainer()
this.RenderNavigation()
this.BindPreviousClick()
this.BindNextClick()
setTimeout(() => defaultSetting.imgWidth = document.querySelector("img").width, 300)
},
// 渲染 轮播图的数据到页面
RenderContainer() {
// var ddd = this;
defaultSetting.data.forEach((val,index) => {
this.$(defaultSetting.containerClassName).innerHTML +=
`
<li>
<a target="_blank" href="${val.href}">
<img src="${val.imgUrl}" alt="">
</a>
</li>
`
});
},
// 渲染小圆点
RenderNavigation() {
defaultSetting.data.forEach((val,index) => {
this.$(defaultSetting.NavigationClassName).innerHTML +=
`
<li class="${index == 0 ? 'active' : ''}"></li>
`
});
this.BindYdClick()
},
changeActiveYd() {
var index = Math.abs(parseInt(this.$(defaultSetting.containerClassName).style.left)) / defaultSetting.imgWidth;
var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
LiArr.forEach(function(val){
val.className = ""
})
LiArr[index].className = "active"
},
// 小圆点绑定事件
BindYdClick() {
var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
LiArr.forEach((val,index) => {
val.onclick = () => {
LiArr.forEach(function(v){
v.className = ""
})
val.className = "active"
this.$(defaultSetting.containerClassName).style.left = `${index * -defaultSetting.imgWidth}px`;
}
})
},
// 右侧下一页数
BindPreviousClick() {
this.$(defaultSetting.previous).onclick = () => {
this.OffSetDistance(-defaultSetting.imgWidth)
this.changeActiveYd()
}
},
// 左侧上一页
BindNextClick() {
this.$(defaultSetting.next).onclick = () => {
this.OffSetDistance(defaultSetting.imgWidth)
this.changeActiveYd()
}
},
OffSetDistance(nums) {
var Offset = parseInt(this.$(defaultSetting.containerClassName).style.left) + nums;
// console.log("Offset: ", Offset)
var maxWidth = defaultSetting.imgWidth * (defaultSetting.data.length - 1);
// console.log("maxWidth: ", maxWidth)
this.$(defaultSetting.containerClassName).style.left = `${Offset}px`
if (Offset < -maxWidth ) {
this.$(defaultSetting.containerClassName).style.left = "0px";
}
if (Offset > 0) {
this.$(defaultSetting.containerClassName).style.left = `-${maxWidth}px`;
}
},
$(calssName) {
return document.querySelector(calssName)
}
}
win.Swiper = LunBo
})(window)
// es6 语法糖
// js代码转换工具 babel
// class Lunbo {
// constructor(setting) {
// this.init()
// }
// init () {
// }
// }
// function init() {
// }
// var ddd = new Lunbo({
// id: 3
// });
// ddd.init()

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax跨域</title>
</head>
<body>
</body>
<script>
// ajax 在调用接口的过程中会有一个访问的权限认证,这个过程叫 同源策略
// 同源策略 回去检查前端和后端的访问地址是否完全一致
// 1: 端口
// 2: 协议
// 3: 域名
// 报错
// Access to XMLHttpRequest at 'http://127.0.0.1/index.php?username=lb122&pwd=1234567890' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
// 解决跨域
// 1: cors
// Access-Control-Allow-Origin: *
// 2: jsonp
// jsonp不是ajax请求他是js文件资源请求 + callback
// 3: 服务端代理
//
// 前端http://127.0.0.1:5500/2020-04-08/dddF.html
// 后端http://127.0.0.1:80/index.php
var http = new XMLHttpRequest();
http.open("GET", 'http://127.0.0.1/ziji.php')
http.send()
http.onreadystatechange = function () {
if (http.readyState == 4 ) { // 浏览器自带的
if (http.status == 200) { // 浏览器自带的
console.log(JSON.parse(http.responseText))
} else {
alert("网络不好")
}
}
}
// function getData(res) {
// console.log(res)
// }
</script>
<!-- <script src="http://127.0.0.1/index.php?username=lb122&pwd=1234567890&call=getData"></script> -->
</html>

View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<ul></ul>
</body>
<script>
// ajax 一种无刷新的前后端数据交互的方式
// 传统的以前web开发后端渲染
// 缺点导致页面中的代码量十分的庞大并且代码很乱很杂phpjscsshtmlmysql
// 前后端沟通成本很高
// 现在的前后端分离的开发方式ajax + json
// 后端和数据库打交道负责存储或者读取数据格式化成json格式然后给前端
// 前端使用ajax调用后端给的接口来获取数据然后渲染到页面上给用户看。
// 创建一个ajax 拿出手机
var http = new XMLHttpRequest();
// 配置ajax请求方式 相当于设置拨号的号码
http.open("GET", 'http://127.0.0.1/index.php?username=lb122&pwd=1234567890')
// 发送请求
http.send()
// 监听ajax发送状态
http.onreadystatechange = function () {
if (http.readyState == 4 ) { // 浏览器自带的
if (http.status == 200) { // 浏览器自带的
var res = JSON.parse(http.responseText);
if (res.status == 200) {
alert(res.message)
} else {
alert(res.message)
}
// res.result.forEach((val) => {
// document.querySelector("ul").innerHTML += `<li>${val.title}</li>`
// });
} else {
alert("网络不好")
}
}
}
// var diver = new XMLHttpRequest();
// diver.open("GET","1566561651616")
// diver.send()
// diver.onreadystatechange = function () {
// if(diver.readyState == 4){
// var res = JSON.parse(diver.responseText);
// if (diver.status == 200) {
// alert(res.message)
// } else {
// alert(res.message)
// }
// } else {
// alert("网络不好")
// }
// }
</script>
</html>

Binary file not shown.

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

View File

@@ -0,0 +1,13 @@
<?php
// 菜谱大全
header("Access-Control-Allow-Origin: *");
$menu = $_GET["menu"];
$page = $_GET["page"];
$limit = $_GET["limit"];
$url = "http://apis.juhe.cn/cook/query?key=c3954f8fddc58db4aabdbf05918afcff&menu=".$menu."&rn=".$limit."&pn=".$page;
$data = file_get_contents($url);
echo $data;
?>

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">
<title>分类</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/sm.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="./css/class.css">
</head>
<body>
<div class="left">
<ul>
</ul>
</div>
<div class="right">
<ul>
</ul>
</div>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src="./js/type.js"></script>
<script>
const id = location.search.split("=")[1];
function renderUrl() {
type.result.forEach((val,index)=> {
if (val.parentId === id) {
bindClick( $(".left ul li").eq(index), index)
}
})
}
function RenderLeft() {
type.result.forEach(function (val,index) {
$(".left ul").append(`<li class="${index === 0 ? 'active' : '' }">${val.name}</li>`)
});
$(".left ul li").on('click', function () {
bindClick(this, $(this).index())
})
}
function bindClick(el, index) {
$(".right ul").empty()
el == null ? '' : $(el).addClass("active").siblings().removeClass("active")
const ri = type.result[index].list;
ri.forEach((val,index)=>{
$(".right ul").append(`
<li>
<a href="./list.html?menu_name=${val.name}">
<p>${val.name}</p>
</a>
</li>
`)
})
}
RenderLeft()
bindClick(null, 0)
renderUrl()
</script>
</body>
</html>

View File

@@ -0,0 +1,52 @@
.left{
overflow: hidden;
padding-left: 5px;
box-sizing: border-box;
position: fixed;
height: 100%;
overflow-y: scroll;
}
.left ul{
display: flex;
justify-content: space-around;
flex-direction: column;
height: -2%;
}
.left ul li{
margin: 18px 0;
font-size: 13px;
}
.active {
color: red;
}
.right{
margin-left: 31%;
}
.right ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.right ul li{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 33.333%;
margin-top: 8px;
}
.right ul li a{
font-size: 13px;
color: #1a1a1a;
}
.right ul li p{
margin-top: 8px;
width: 55px;
height: 28px;
font-size: 11px;
color: #666666;
overflow: hidden;
text-align: center;
}

View File

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

View File

@@ -0,0 +1,28 @@
.content {
margin-top: 72px;
}
.search {
width: 100%;
position: fixed;
height: 72px;
left: 0;
top: 0;
background: #fff;
z-index: 999;
}
.search_f {
display: flex;
height: 45px;
background: #f5f5f5;
color: #999;
margin: 16px;
border-radius: 4px;
align-items: center;
padding-left: 16px;
}
.search .icon-search {
}
.search span {
}

View File

@@ -0,0 +1,7 @@
ul{
width:100%;
text-align: center;
}
ul li{
font-size: 40px;
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="./css/sm.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="./css/index.css">
<style>
.swiper-slide img {
width: 100%;
}
</style>
</head>
<body>
<div class="page">
<!-- 这里是页面内容区 -->
<div class="content">
<div class="search">
<div class="search_f">
<label class="icon icon-search" for="search"></label>
<span>搜索百万免费菜谱</span>
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://gw.alicdn.com/imgextra/i1/181/O1CN0139HF6f1DCwHIUUtzZ_!!181-0-lubanu.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gw.alicdn.com/imgextra/i1/51/O1CN01Yq12fx1CFOmySPPy2_!!51-0-lubanu.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://gw.alicdn.com/imgextra/i1/17/O1CN018TnpfG1BzpJyTq1Kq_!!17-0-lubanu.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<ul class="list">
<li>
<a href="./class.html?id=10007">菜系</a>
</li>
<li>
<a href="./class.html?id=10009">西点</a>
</li>
</ul>
</div>
<!-- 工具栏 -->
<nav class="bar bar-tab">
<a class="tab-item external active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">首页</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-star"></span>
<span class="tab-label">收藏</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-settings"></span>
<span class="tab-label">设置</span>
</a>
</nav>
</div>
<!-- popup, panel 等放在这里 -->
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>这是一个侧栏</p>
<p></p>
<!-- Click on link with "close-panel" class will close panel -->
<p><a href="#" class="close-panel">关闭</a></p>
</div>
</div>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<script src='https://sui.ctolog.com/dist/js/sm.js'></script>
<script>
var list = [
{ name: 'lb' },
{ name: 'zhangsan' },
{ name: 'lis' }
];
var a = { name: 'zhangsan' }
function test() {
for (var i = 0; i < list.length; i++) {
if (list[i].name === a.name) {
return true
}
}
return false
}
if (test()) {
console.log("重复了,已经存在")
} else {
console.log("不存在")
}
// var mySwiper = new Swiper ('.swiper-container', {
// direction: 'horizontal',
// loop: true, // 循环模式选项
//
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// }
// })
</script>
</body>
</html>

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