Home Explore Help
Sign In
lovecoding
/
VIP20
6
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

第一阶段

dongxiuling 2 years ago
commit
f46c8c7461
59 changed files with 2175 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      .DS_Store
  2. BIN
      1_html/.DS_Store
  3. 34 0
      1_html/1_test.html
  4. 118 0
      1_html/2_基础标签.html
  5. 35 0
      1_html/3_demo.html
  6. 56 0
      1_html/4_表单元素.html
  7. 80 0
      1_html/5_表格.html
  8. 31 0
      1_html/6_表格布局.html
  9. BIN
      1_html/demo-images/1.jpg
  10. BIN
      1_html/demo-images/2.jpg
  11. BIN
      1_html/images/img01.jpeg
  12. BIN
      1_html/images/jd.gif
  13. BIN
      1_html/images/taobao.png
  14. BIN
      2_css/.DS_Store
  15. 54 0
      2_css/10_display.html
  16. 42 0
      2_css/11_inline-block.html
  17. 93 0
      2_css/12_浮动.html
  18. 32 0
      2_css/13_菜单.html
  19. 32 0
      2_css/14_伪元素.html
  20. 49 0
      2_css/15_盒模型.html
  21. 53 0
      2_css/16_盒模型-demo.html
  22. 58 0
      2_css/17_盒模型.html
  23. 31 0
      2_css/18_外边距（块级元素水平居中）.html
  24. 49 0
      2_css/19_盒模型计算.html
  25. 30 0
      2_css/1_css的使用.html
  26. 3 0
      2_css/1_test.css
  27. 97 0
      2_css/20_复习.html
  28. 119 0
      2_css/21_定位.html
  29. 79 0
      2_css/2_css选择器.html
  30. 37 0
      2_css/3_选择器优先级.html
  31. 38 0
      2_css/4_css基础样式.html
  32. 25 0
      2_css/5_背景图片demo.html
  33. 47 0
      2_css/6_文本字体相关.html
  34. 53 0
      2_css/7_菜单.html
  35. 94 0
      2_css/8_复习.html
  36. 49 0
      2_css/9_基础样式2.html
  37. BIN
      2_css/images/.DS_Store
  38. BIN
      2_css/images/bg.png
  39. BIN
      2_css/images/img01.jpeg
  40. BIN
      2_css/images/img01.jpg
  41. BIN
      2_css/images/img02.jpg
  42. BIN
      2_css/images/爱扣钉HTML基础.pdf
  43. BIN
      3_项目/.DS_Store
  44. 25 0
      3_项目/css/common.css
  45. 317 0
      3_项目/css/index.css
  46. 27 0
      3_项目/font/iconfont.css
  47. BIN
      3_项目/font/iconfont.ttf
  48. BIN
      3_项目/font/iconfont.woff
  49. BIN
      3_项目/font/iconfont.woff2
  50. BIN
      3_项目/images/.DS_Store
  51. BIN
      3_项目/images/bg.png
  52. BIN
      3_项目/images/cart.png
  53. BIN
      3_项目/images/gift-icon.png
  54. BIN
      3_项目/images/hot.png
  55. BIN
      3_项目/images/icon.png
  56. BIN
      3_项目/images/img01.png
  57. BIN
      3_项目/images/logo.png
  58. BIN
      3_项目/images/new.png
  59. 288 0
      3_项目/index.html

BIN
.DS_Store
View File


BIN
1_html/.DS_Store
View File


+ 34 - 0
1_html/1_test.html
View File 

@@ -0,0 +1,34 @@
 
+<!-- 声明文档类型 HTML5的文档类型 -->
 
+<!DOCTYPE html>
 
+<!-- html是根标签 -->
 
+<!-- 
+    html的标签一般是成对出现
 
+    <html></html>
 
+    可以不是成对 如meta标签
 
+    <meta charset="UTF-8">
 
+-->
 
+<html lang="en">
 
+    <!-- head一般不是给用户看的   -->
 
+    <head>
 
+        <!-- 字符编码 防止乱码 -->
 
+        <meta charset="UTF-8">
 
+        <title>淘宝网- 淘！我喜欢</title>
 
+    </head>
 
+    <!-- body 展示给用户的文档中内容 -->
 
+    <body>
 
+        <!-- 标题  h1-h6
 
+        h1最大 h6最小  ，在一个页面中只有一个h1 
+        加粗放大效果 
+        -->
 
+        <h1>我是标题</h1>
 
+        <h2>我是标题</h2>
 
+        <h3>我是标题</h3>
 
+        <h4>我是标题</h4>
 
+        <h5>我是标题</h5>
 
+        <h6>我是标题</h6>
 
+        <!-- 建议：你代码的时候要缩进 -->
 
+    </body>
 
+</html>
 
+
 
+
 
+

+ 118 - 0
1_html/2_基础标签.html
View File 

@@ -0,0 +1,118 @@
 
+<!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 style=" height:2000px;">
 
+    <!-- 
+        注释的快捷键ctrl+? 
+        复制 ctrl+c  粘贴 ctrl+v
 
+    -->
 
+    <!-- 标题  h1-h6
 
+        h1最大 h6最小  ，在一个页面中只有一个h1 
+        加粗放大效果 
+        -->
 
+    <h1>我是标题</h1>
 
+    <h2>我是标题</h2>
 
+    <h3>我是标题</h3>
 
+    <h4>我是标题</h4>
 
+    <h5>我是标题</h5>
 
+    <h6>我是标题</h6>
 
+    我是文字哈哈哈或或或或或或或或或或或或
 
+    <!--
 
+        p 段落,一段文字，没有字体效果 
+        段落之前有空隙 
+    -->
 
+    <p>我是一段文字哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
 
+    <p>我是一段文字哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
 
+
 
+    <p>我是一段文字</p>
 
+
 
+    <!-- 图片 img 
+        src  图片地址/路径
 
+            相对路径  下一级/ 上一级../
 
+            绝对路径  固定不变
 
+        alt  属性  当图片加载不出来的时候，会显示alt中的内容
 
+
 
+        常见图片格式：jpg|jpeg  
+        png 透明图
 
+        gif 动图
 
+    -->
 
+    <img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF">
 
+    <!-- <img src="img01.jpeg" alt="">
 
+    <img src="../img02.jpeg" alt=""> -->
 
+    <img src="../images/img01.jpeg"  >
 
+
 
+    <!-- <img src="../images/img01.jpeg" alt=""> -->
 
+
 
+    <img src="../images/jd.gif" >
 
+    <img src="../images/taobao.jpg" alt="这是一个logo">
 
+
 
+    <!-- 换行 -->
 
+    <br/>
 
+
 
+    <!--
 
+        a标签 超链接 
+    
+        href属性 跳转地址
 
+        target属性 _blank打开新窗口 
+    -->
 
+    <a href="https://www.baidu.com/" >百度</a>
 
+    <a href="https://www.baidu.com/" target="_blank">百度</a>
 
+
 
+
 
+    <!-- html标签 按照语义化使用  -->
 
+
 
+    <!-- 区块  用来划分布局 -->
 
+    <div>我是一个div标签 主要用来布局</div>
 
+    <!-- 线 -->
 
+    <hr/>
 
+
 
+    <!--
 
+        span 可以用来选中文字 给文字单独添加样式 ,本身没有语义化 也没有样式
 
+        i斜体
 
+        stong 加粗
 
+    -->
 
+    <div>我是<strong>一个</strong>div标签 <span style="color:red">主要用</span>来布局hfgdhgfjhdgfjhgfhfh哈哈<i>哈哈</i>哈哈哈哈哈</div>
 
+
 
+    <!-- 列表 无序列表 -->
 
+    <ul>
 
+        <li>HTML</li>
 
+        <li>CSS</li>
 
+        <li>Javascript</li>
 
+    </ul>
 
+
 
+    <ol>
 
+        <li>HTML</li>
 
+        <li>CSS</li>
 
+        <li>Javascript</li>
 
+    </ol>
 
+    <!-- 注意：
 
+        1 加注释 
+        2 缩进规范
 
+        3 标签是可以嵌套的 
+        
+        一般情况下大标签（块级元素）在外 小标签(多个占一行)在内
 
+
 
+        块级元素 自己占一行  h1-h6 p div  ul li
 
+        行级元素 多个占一行  a span strong i 
+
 
+        img
 
+        
+        
+    -->
 
+
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+</body>
 
+</html>

+ 35 - 0
1_html/3_demo.html
View File 

@@ -0,0 +1,35 @@
 
+<!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>
 
+    <!-- 居中 -->
 
+    <center>
 
+        <h1>这是我的个人博客</h1>
 
+        <hr>
 
+        <h2>东风破</h2>
 
+        <a href="">周杰伦</a>
 
+        <p>
 
+            一盏离愁 孤单伫立在窗口<br/>
 
+            我在门后 假装你人还没走<br/>
 
+            旧地如重游 月圆更寂寞<br/>
 
+            夜半清醒的烛火 不忍苛责我<br/>
 
+            一壶漂泊 浪迹天涯难入喉<br/>
 
+            你走之后 酒暖回忆思念瘦<br/>
 
+            水向东流 时间怎么偷<br/>
 
+            花开就一次成熟 我却错过<br/>
 
+            谁在用琵琶弹奏 一曲东风破<br/>
 
+            岁月在墙上剥落 看见小时候<br/>
 
+            犹记得那年我们都还很年幼<br/>
 
+            而如今琴声幽幽 我的等候你没听过<br/>
 
+            <img src="demo-images/1.jpg" alt="">
 
+        </p>
 
+    </center>
 
+
 
+    
+</body>
 
+</html>

+ 56 - 0
1_html/4_表单元素.html
View File 

@@ -0,0 +1,56 @@
 
+<!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>
 
+    <!-- 表单  action提交地址-->
 
+    <form action="" >
 
+        用户名：
 
+        <!-- 文本框 -->
 
+        <input type="text">
 
+        <br/>
 
+        密码：
 
+        <!-- 密码框 -->
 
+        <input type="password">
 
+        <br/>
 
+        性别：
 
+        <!-- 单选框 相同的name属性 -->
 
+        <input type="radio" name="sex">男
 
+        <input type="radio" name="sex">女
 
+        <br/>
 
+        爱好：
 
+        <!-- 复选框  type="checkbox"-->
 
+        <input type="checkbox" name="hobby">唱跳
 
+        <input type="checkbox" name="hobby">篮球
 
+        <input type="checkbox" name="hobby">敲代码
 
+
 
+        <br/>
 
+        学校：
 
+        <!-- 下拉框 -->
 
+        <select>
 
+            <option value="黑工程">黑工程</option>
 
+            <option value="理工">理工</option>
 
+            <option value="黑大">黑大</option>
 
+        </select>
 
+
 
+
 
+        <!-- 文本域 -->
 
+        <textarea cols="50" rows="30"></textarea>
 
+
 
+        <!-- 提交按钮  点击提交按钮的时候 会提交表单 -->
 
+        <input type="submit">
 
+
 
+        <button>按钮</button>
 
+
 
+        <!-- 文件 -->
 
+        <input type="file">
 
+
 
+    </form>
 
+
 
+    
+</body>
 
+</html>

+ 80 - 0
1_html/5_表格.html
View File 

@@ -0,0 +1,80 @@
 
+<!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+CSS -->
 
+    <!-- tr 行  td列 1px   th 表头-->
 
+    <table border="1">
 
+        <tr>
 
+            <td>111</td>
 
+            <td>222</td>
 
+        </tr>
 
+        <tr>
 
+            <td>333</td>
 
+            <td>444</td>
 
+        </tr>
 
+    </table>
 
+    <table border="1">
 
+        <tr>
 
+            <th>姓名</th>
 
+            <th>年龄</th>
 
+        </tr>
 
+        <tr>
 
+            <td>张三</td>
 
+            <td>18</td>
 
+        </tr>
 
+    </table>
 
+
 
+    <!-- 三行三列 -->
 
+    <table border="1">
 
+        <tr>
 
+            <td>张三</td><td>18</td><td>11</td>
 
+        </tr>
 
+        <tr>
 
+            <td>李四</td><td>18</td><td>11</td>
 
+        </tr>
 
+        <tr>
 
+            <td>王五</td><td>18</td><td>11</td>
 
+        </tr>
 
+    </table>
 
+    
+    <table border="1">
 
+        <tr>
 
+            <td>张三</td><td colspan="2">18</td>
 
+        </tr>
 
+        <tr>
 
+            <td>李四</td><td>18</td><td>11</td>
 
+        </tr>
 
+        <tr>
 
+            <td>王五</td><td>18</td><td>11</td>
 
+        </tr>
 
+    </table>
 
+    <!-- 
+         cellpadding="10px" 单元格与内容之间的空隙
 
+         ellspacing="0"  单元格与单元格之间的空隙
 
+     -->
 
+
 
+    <table border="1" cellpadding="10px" cellspacing="0">
 
+        <tr>
 
+            <td rowspan="2">张三</td><td>18</td><td>18</td>
 
+        </tr>
 
+        <tr>
 
+            <td>18</td><td>11</td>
 
+        </tr>
 
+        <tr>
 
+            <td>王五</td><td>18</td><td>11</td>
 
+        </tr>
 
+    </table>
 
+
 
+
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 31 - 0
1_html/6_表格布局.html
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>
 
+</head>
 
+<body>
 
+
 
+    <table border="1">
 
+        <tr>
 
+            <td>
 
+                用户名：<input type="text">
 
+                密码：<input type="password">
 
+            </td>
 
+            <td>
 
+                <img src="../images/img01.jpeg" alt="">
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td>这是我的第一个表格</td>
 
+            <td>
 
+                <h2>今天天气真好</h2>
 
+                <p>是的呢 哈哈哈哈哈哈</p>
 
+            </td>
 
+        </tr>
 
+    </table>
 
+    
+</body>
 
+</html>

BIN
1_html/demo-images/1.jpg
View File


BIN
1_html/demo-images/2.jpg
View File


BIN
1_html/images/img01.jpeg
View File


BIN
1_html/images/jd.gif
View File


BIN
1_html/images/taobao.png
View File


BIN
2_css/.DS_Store
View File


+ 54 - 0
2_css/10_display.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>Document</title>
 
+    <style> 
+        div{
 
+            background: red;
 
+            width: 200px;
 
+            height: 200px;
 
+            display: inline-block;
 
+        }
 
+        h1{
 
+            background: blue;
 
+            width: 300px;
 
+            height: 300px;
 
+            display: inline-block;
 
+        }
 
+        span{
 
+            background: green;
 
+            width: 200px;
 
+            height: 200px;
 
+        }
 
+   
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <!--    
+        块级元素 
+            自己占一行 可以设置宽高
 
+            h1-h6 p ul li div 
+
 
+        行级元素 
+            多个占一行 不能设置宽高
 
+            span a stong i b 
+
 
+        行级块元素  多个占一行  可以设置宽高
 
+            button input 
+
 
+        display:  block块级元素|inline行级元素|inline-block行级块元素|none隐藏
 
+        
+    -->
 
+    <div>哈哈哈</div>
 
+    <h1>ghdshgfsdhgf</h1>
 
+    <span>呵呵呵呵呵呵呵</span> <span>hahahhahahah</span>
 
+
 
+    <input type="text">
 
+
 
+    
+</body>
 
+</html>

+ 42 - 0
2_css/11_inline-block.html
View File 

@@ -0,0 +1,42 @@
 
+<!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{
 
+            list-style: none;
 
+            /*
 
+                解决行级块元素中间的空白 
+                  设置字体大小为0
 
+                  去掉回车加空白 （删除或者注释掉）
 
+                  浮动float
 
+            */
 
+            font-size:0;
 
+        }   
+        li{
 
+            width:120px;
 
+            background: red;
 
+            display: inline-block;
 
+            font-size: 16px;
 
+        }     
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <ul>
 
+        <li>111</li>
 
+        <li>222</li>
 
+        <li>333</li>
 
+        <li>444</li>
 
+        <li>555</li>
 
+    </ul>
 
+
 
+
 
+
 
+
 
+
 
+</body>
 
+</html>

+ 93 - 0
2_css/12_浮动.html
View File 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        ul{
 
+            list-style: none;
 
+            /* 1 给父元素添加一个高度 */
 
+            /* height:23px; */
 
+            /* 2 overflow */
 
+            /* overflow: hidden; */
 
+        }
 
+        li{
 
+            width: 120px;
 
+            background: #f00;
 
+            float: left;
 
+
 
+        }
 
+        h2{
 
+            height: 50px;
 
+            background: green;
 
+        }
 
+
 
+        .clearfix::after{
 
+            content:'';
 
+            /* 块级元素 */
 
+            display: block;
 
+            /* 清除浮动 */
 
+            clear:both;
 
+
 
+        }
 
+
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            float: left;
 
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+            float: left;
 
+        }
 
+
 
+        #div3{
 
+            background: #00f;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 浮动 float:left|right|none 
+        浮动元素的特点： 浮动的元素会脱离文档流，空间释放
 
+                      浮动后的元素既可以设置宽高 又可以多个占一行
 
+
 
+        浮动导致的问题：浮动元素会脱离文档流,空间释放，-> 父元素没有高度(塌陷)->底下的元素会串上来
 
+        解决方式：
 
+            1  给父元素添加一个高度 
+            2  给父元素添加一个overflow:hidden (overflow:hidden 本身是溢出隐藏)
 
+            3  清除浮动 clear:left|right|both 
+                在浮动的元素下边，添加一个'块级'元素，然后清除浮动
 
+            4  3升级版本
 
+                .clearfix::after{
 
+                    content:'';
 
+                    /* 块级元素 */
 
+                    display: block;
 
+                    /* 清除浮动 */
 
+                    clear:both;
 
+                }
 
+    -->
 
+    <ul class="clearfix">
 
+        <li>111</li>
 
+        <li>222</li>
 
+        <li>333</li>
 
+        <!-- <div style="clear:both"></div> -->
 
+    </ul>
 
+
 
+    <h2></h2>
 
+
 
+    <div id="div3" class="clearfix">
 
+        <div id="div1"></div>
 
+        <div id="div2"></div>
 
+    </div>
 
+
 
+    
+
 
+    
+</body>
 
+</html>

+ 32 - 0
2_css/13_菜单.html
View File 

@@ -0,0 +1,32 @@
 
+<!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>
 
+        a{
 
+            width: 94px;
 
+            height: 33px;
 
+            background: #bebebe;
 
+
 
+            /* 浮动 */
 
+            float: left;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+
 
+    <div>
 
+        <a href="#">HOME</a>
 
+        <a href="#">NEWS</a>
 
+        <a href="#">ARTICLES</a>
 
+        <a href="#">FORUM</a>
 
+        <a href="#">CONTACT</a>
 
+        <a href="#">ABOUT</a>
 
+    </div>
 
+    
+</body>
 
+</html>

+ 32 - 0
2_css/14_伪元素.html
View File 

@@ -0,0 +1,32 @@
 
+<!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>
 
+        div{
 
+            background: red;
 
+        }
 
+        /* 伪元素 after在div内容的后边添加一个伪元素 行元素 */
 
+        div::after{
 
+            content:"呵呵";
 
+            background: green;
 
+            
+        }
 
+        div::before{
 
+            content:'嘻嘻'
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>
 
+
 
+        哈哈哈哈哈哈
 
+        <!-- 添加一个元素 -->
 
+        <!-- <span>我是元素</span> -->
 
+    </div>
 
+
 
+</body>
 
+</html>

+ 49 - 0
2_css/15_盒模型.html
View File 

@@ -0,0 +1,49 @@
 
+<!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>
 
+
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+
 
+            /* 边框:粗细 solid实线|dashed虚线|dotted点 颜色   */
 
+            /* transparent透明 */
 
+            border:10px solid #000;
 
+
 
+            /* 内边距  内容和边框之前的距离 */
 
+            /* 上 右  下 左 */
 
+            padding: 20px 30px 40px 50px; 
+            /* 外边距 边框意外的距离 ，一般用来调整两个元素之前的空隙 */
 
+            /* margin:50px; */
 
+            margin:50px 100px;
 
+
 
+
 
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="div1">
 
+        哈哈哈哈哈哈
 
+    </div>
 
+    <div id="div2">
 
+        hehehehhehe
 
+    </div>
 
+
 
+
 
+
 
+    
+
 
+    
+</body>
 
+</html>

+ 53 - 0
2_css/16_盒模型-demo.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>Document</title>
 
+    <style>
 
+        .pro-list{
 
+            width: 230px;
 
+            height: 322px;
 
+            border:1px solid #000;
 
+            float: left;
 
+            margin:0 5px;
 
+            text-align: center;
 
+
 
+        }
 
+        .pro-img{
 
+            width: 150px;
 
+            height: 150px;
 
+            margin:30px 0 40px;
 
+        }
 
+        .pro-title{
 
+            font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
 
+            font-size: 14px;
 
+            color: #666;color: #666;
 
+            padding:0 20px;
 
+
 
+        }
 
+        
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 容器 -->
 
+    <div id="container">
 
+        <div class="pro-list">
 
+            <img class="pro-img" src="images/img01.jpg" alt="">
 
+            <div class="pro-title">科沃斯扫地机器人X1 PRO  OMNI  扫拖一体 机</div>
 
+            <div>5899</div>
 
+        </div>
 
+        <div class="pro-list">
 
+            <img class="pro-img" src="images/img02.jpg" alt="">
 
+            <div class="pro-title">西门子(SIEMENS)洗烘套装 10kg除菌滚筒洗衣机+</div>
 
+            <div>10499</div>
 
+        </div>
 
+    </div>
 
+
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 58 - 0
2_css/17_盒模型.html
View File 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /*   * 通配符 选中所有元素 */
 
+        *{
 
+            margin:0;
 
+            padding: 0;
 
+        }
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            /* 内边距 内容和边框之前的距离 */
 
+            /* padding:20px; */
 
+            /* 上右下左 */
 
+            /* padding:10px 20px 30px 40px; */
 
+            /* 上下   左右 */
 
+            /* padding: 20px 40px; */
 
+            /* 边框： 粗细 实线solid |虚线 dashed 颜色*/
 
+            /* border:5px solid black; */
 
+
 
+            /* 外边距 边框以外的距离*/
 
+            /* margin:100px; */
 
+            /* margin:10px 20px; */
 
+            /* margin:10px 20px 30px 40px ; */
 
+            /* left right top bottom 可以单独设置上下左右 */
 
+            /* padding-top:30px; */
 
+            /* margin-top:40px; */
 
+            
+        }
 
+       
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div id="div1">
 
+        哈哈哈哈 
+    </div>
 
+
 
+    <ul>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        <li>111</li>
 
+        
+    </ul>
 
+    <p>dhjshjfdgshfgj</p>
 
+
 
+
 
+
 
+    
+
 
+</body>
 
+</html>

+ 31 - 0
2_css/18_外边距（块级元素水平居中）.html
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>
 
+        *{
 
+            padding: 0;
 
+            margin: 0;
 
+        }
 
+        /* 行元素 |文本 |行级块元素 水平居中是可以设置父元素text-align:center居中 */
 
+        /* 块级元素 水平居中margin:0 auto;  */
 
+        #div1{
 
+            width: 800px;
 
+            height: 100px;
 
+            background: #f00;
 
+            /* 上下0  左右自适应 */
 
+            margin:0 auto;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div id="div1">
 
+
 
+    </div>
 
+    
+</body>
 
+</html>

+ 49 - 0
2_css/19_盒模型计算.html
View File 

@@ -0,0 +1,49 @@
 
+<!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>
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            border:10px solid #000;
 
+            padding:30px;
 
+            margin:50px;
 
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+
 
+            /* 怪异盒模型 */
 
+            box-sizing: border-box;
 
+            border:10px solid #000;
 
+            padding:30px;
 
+            margin:50px;
 
+
 
+
 
+        }
 
+    </style>
 
+
 
+</head>
 
+<body> 
+    <!-- 盒模型  内容+padding+border+margin组成
 
+
 
+        标准盒模型：标准浏览器下
 
+        计算元素宽度的时候： 内容宽度（200）+ padding + border  
+
 
+        怪异盒模型：ie6以及ie6以下的浏览器，当我们不写DOCTYPE的时候 表现为怪异盒模型
 
+           计算元素宽度的时候：占的宽度就是 设置的width值（200）宽度不变 
+        
+        css3中语法 box-sizing:border-box 怪异盒模型 |content-box标准盒模型
 
+    -->
 
+
 
+    <div id="div1">哈哈哈 </div>
 
+    <div id="div2">呵呵呵</div>
 
+    
+</body>
 
+</html>

+ 30 - 0
2_css/1_css的使用.html
View File 

@@ -0,0 +1,30 @@
 
+<!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>
 
+        h2{
 
+            background: green;
 
+        }
 
+    </style>
 
+
 
+    <!-- 3 外部样式 一般做项目的时候 -->
 
+    <!-- 引入外部css -->
 
+    <link rel="stylesheet" href="1_test.css">
 
+</head>
 
+
 
+<body>
 
+    <!-- 内联样式   -->
 
+    <!-- <h2 style="background: red;">这是一个h标签</h2> -->
 
+    <!-- <h2>这是一个h标签</h2> -->
 
+    <div>ghgg</div>
 
+
 
+
 
+</body>
 
+
 
+</html>

+ 3 - 0
2_css/1_test.css
View File 

@@ -0,0 +1,3 @@
 
+div{
 
+    background: blue;
 
+}

+ 97 - 0
2_css/20_复习.html
View File 

@@ -0,0 +1,97 @@
 
+<!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>
 
+        #div1{
 
+
 
+        }
 
+        p{
 
+
 
+        }
 
+        .aa{
 
+
 
+        }
 
+
 
+        #ul1 li{
 
+
 
+        }
 
+        /* 子代 */
 
+        #ul1 > li{
 
+
 
+        }
 
+
 
+        a:hover{
 
+
 
+        }
 
+
 
+        *{
 
+
 
+        }
 
+
 
+        /* style > id >class > 标签 */
 
+
 
+        /* 基础样式 */
 
+        div{
 
+            width:200px;
 
+            height:200px;
 
+
 
+            background: red url(xx.jpg) no-repeat 0 0;
 
+
 
+            /* 字体 */
 
+            font-size: 16px;
 
+            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
+            font-weight: 400;
 
+            font-style: italic;
 
+            color:green;
 
+
 
+            /* 文本 */
 
+            /* 1水平对齐 */
 
+            text-align: left;
 
+            height: 50px;
 
+            /* 2单行文本垂直对齐 */
 
+            line-height:50px ;
 
+
 
+            /* 文本修饰 underline none line-through  */
 
+            text-decoration: none;
 
+
 
+        }
 
+
 
+        ul{
 
+            list-style: none;
 
+        }
 
+
 
+
 
+        /* display */
 
+        /* display:
 
+            inline   行级元素   多个占一行  不能设置宽高
 
+                span a strong i 
+            block    块级元素   自己占一行  可以设置宽高
 
+                div p ul li h1-h6
 
+            inline-block 行级块元素  多个占一行  可以设置宽高
 
+            
+            none 隐藏
 
+        */
 
+
 
+
 
+        /* 浮动 */
 
+        /* float:left |right |none */
 
+
 
+        
+
 
+
 
+
 
+        /* 盒模型 */
 
+
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+
 
+    
+</body>
 
+</html>

+ 119 - 0
2_css/21_定位.html
View File 

@@ -0,0 +1,119 @@
 
+<!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>
 
+        #div0{
 
+            width: 800px;
 
+            height: 500px;
 
+            background: #ccc;
 
+
 
+            /* margin:100px; */
 
+
 
+            /* 定位挪走父元素 */
 
+            position: relative;
 
+            left:100px;
 
+            top:100px;
 
+        }
 
+
 
+        #div1{
 
+            width: 200px;
 
+            height: 100px;
 
+            background: #f00;
 
+            float: left;
 
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 100px;
 
+            background: #00f;
 
+            float: left;
 
+            /* 相对定位 */
 
+            /* position: relative;
 
+            left:200px;
 
+            top:200px; */
 
+
 
+            position: absolute;
 
+            left:200px;
 
+            top:50px;
 
+
 
+        }
 
+        #div3{
 
+            width: 200px;
 
+            height: 100px;
 
+            background: #0f0;
 
+            float: left;
 
+
 
+        }
 
+
 
+        #div5{
 
+            width: 100px;
 
+            height:200px;
 
+            background: green;
 
+            position: fixed;
 
+            right:0px;
 
+            bottom: 0px;
 
+
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        定位： position
 
+        relative相对定位 1、相对于自己初始位置  2、定位后空间不释放
 
+
 
+        absolute绝对定位 1、相对于最近已定位的祖先元素，如果没有最近已定位的祖先元素，相对于body
 
+                        2、定位后空间释放
 
+
 
+        fixed固定定位    1、相对于页面可视区的位置
 
+                        2、定位后空间释放
 
+
 
+        static   静态的 没有定位 默认值 
+
 
+        
+     -->
 
+
 
+    <div id="div0">
 
+        <div id="div1"></div>
 
+        <div id="div2"></div>
 
+        <div id="div3"></div>
 
+    </div>
 
+
 
+
 
+    <div id="div5"></div>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+    <h1>222222222222222222</h1>
 
+    <h1>111111哈哈哈哈哈哈哈</h1>
 
+
 
+
 
+</body>
 
+</html>

+ 79 - 0
2_css/2_css选择器.html
View File 

@@ -0,0 +1,79 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 标签选择器  通过标签名选中*/
 
+        /* h2{
 
+            background: red;
 
+        } */
 
+
 
+        /* 通过设置id 一个页面中id是唯一的 */
 
+        /* id选择器 */
 
+        #title1{
 
+            background: purple;
 
+        }
 
+        /* class 属性 代表一类  类*/
 
+        /* class 选择器 */
 
+        /* .list{
 
+            background: peru;
 
+        } */
 
+
 
+        /* 后代选择器 */  /* 选中id为ul2中的  class名为list的元素  */
 
+        /* #ul2 .list{   
+            background: palevioletred;
 
+        } */
 
+        /* 子代选择器 */
 
+        #ul2 > .list{
 
+            background: palevioletred; 
+        }
 
+
 
+        /* 伪类选择器  */
 
+        a:hover{
 
+            background: gold;
 
+            color: green;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    
+    <h2 id="title1">11111</h2>
 
+    <h2 id="title2">2222</h2>
 
+    <h2 id="title3">33333</h2>
 
+    <h2 id="title4">44444</h2>
 
+    <ul id="ul1">
 
+        <li class="list">1111</li>
 
+        <li>2222</li>
 
+        <li>3333</li>
 
+        <li class="list">4444</li>
 
+    </ul>
 
+
 
+    <ul id="ul2">
 
+        <li class="list">1111</li>
 
+        <li>
 
+            222
 
+            <ul>
 
+                <li class="list">11-222</li>
 
+            </ul>
 
+        </li>
 
+        <li>3333</li>
 
+        <li class="list">4444</li>
 
+    </ul>
 
+
 
+    <a href="#">百度</a>
 
+
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+</body>
 
+</html>

+ 37 - 0
2_css/3_选择器优先级.html
View File 

@@ -0,0 +1,37 @@
 
+<!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>
 
+
 
+        h2{
 
+            background: red;
 
+        }
 
+        #myh2{
 
+            background: green;
 
+        }
 
+        .aa{
 
+            background: pink;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <!-- 选择器的优先级 
+    style内联样式 > id选择器 > class类选择器 | 伪类 > 标签选择器
 
+    1000         100          10                   1
 
+
 
+    id的永远高于class 
+
 
+    #ul1 .aa{  110
 
+
 
+    }
 
+    -->
 
+    <h2 id="myh2" class="aa" >hahahahah</h2>
 
+
 
+    
+</body>
 
+</html>

+ 38 - 0
2_css/4_css基础样式.html
View File 

@@ -0,0 +1,38 @@
 
+<!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>
 
+        div{
 
+            /* 块级元素（自己占一行的元素） 宽度会充满父元素，高度由内容撑的 ，如果设置宽高后，会按照设置的宽高*/
 
+            /* 宽高 */
 
+            width:800px;
 
+            height:800px;
 
+            /* 背景是复合属性 */
 
+            
+            background-color: red;
 
+            background-image: url(images/img01.jpeg);
 
+            /* 背景重复 repeat(默认)|no-repeat */
 
+            background-repeat: no-repeat;
 
+            /* 背景图片位置： 水平 left|center|right  垂直top|center|bottom */
 
+            background-position:center center;
 
+            /* 合并写法 */
 
+            /* background:red  url(images/img01.jpeg) no-repeat -50px 80px; */
 
+        }
 
+
 
+
 
+
 
+
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div>哈哈哈</div>
 
+    
+
 
+</body>
 
+</html>

+ 25 - 0
2_css/5_背景图片demo.html
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>
 
+    <style>
 
+        #div1{
 
+            width: 230px;
 
+            height: 322px;
 
+            background-image: url(images/bg.png);
 
+            background-position: 0 -322px;
 
+            background-size: 690px 644px;
 
+            
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="div1"></div>
 
+
 
+
 
+    
+</body>
 
+</html>

+ 47 - 0
2_css/6_文本字体相关.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #div1 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            /* 文本 对齐方式*/
 
+            /* 水平对齐 left|center|right */
 
+            text-align: right;
 
+            /* 垂直对齐  单行文本垂直对齐 line-height=height*/
 
+            line-height: 200px;
 
+
 
+            /* 字体  默认大小16px  浏览器支持的最小字体 12px*/
 
+            font-size:16px ;
 
+            /* 字体 */
 
+            font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 
+            /* 字粗细 100-900 没有单位 默认值400|normal 700|bold 900|bolder*/
 
+            font-weight: 700;
 
+            /* 字体样式风格italic |normal */
 
+            font-style: italic;
 
+            /* 设置文字颜色 */
 
+            color:rgb(255,0,0);
 
+            /* #f00 */
 
+        
+            
+        }
 
+
 
+
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    哈哈哈哈哈 你好啊
 
+    <div id="div1">
 
+        哈哈哈哈哈 你好啊
 
+    </div>
 
+
 
+</body>
 
+
 
+</html>

+ 53 - 0
2_css/7_菜单.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>Document</title>
 
+    <style>
 
+        a {
 
+            background: #bebebe;
 
+
 
+
 
+            width: 94px;
 
+            height: 33px;
 
+            /* 由于a标签是行元素 行元素的特点 宽度是内容撑的 ,不能设置宽高
 
+            所以我们可以将行元素 切换成切换成行级块元素
 
+            display:inline-block;
 
+            */
 
+            /* 赠送 */
 
+            display: inline-block;
 
+
 
+            /* 水平居中 */
 
+            text-align: center;
 
+            line-height: 33px;
 
+
 
+            /* 文字颜色 */
 
+            color: white;
 
+            font-size: 14px;
 
+            font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体;
 
+            font-weight: 700;
 
+
 
+            /* 去掉a标签的下划线 */
 
+            text-decoration: none;
 
+
 
+        }
 
+
 
+        a:hover {
 
+            background: #cc0000;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+
 
+    <div>
 
+        <a href="#">HOME</a><a href="#">NEWS</a><a href="#">ARTICLES</a><a href="#">FORUM</a><a href="#">CONTACT</a><a
 
+            href="#">ABOUT</a>
 
+    </div>
 
+
 
+</body>
 
+
 
+</html>

+ 94 - 0
2_css/8_复习.html
View File 

@@ -0,0 +1,94 @@
 
+<!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>
 
+    <!-- 基础标签 -->
 
+    <h1>111</h1>
 
+    <p>2222</p>
 
+    <!-- src=""地址  alt图片加载不出来 显示alt中的内容 
+        绝对地址 固定不变
 
+
 
+        相对地址  上一层目录 ../
 
+                下一级目录 /
 
+    -->
 
+    <img src="images/img01.jpeg" alt="xx">
 
+
 
+    <a href="http://www.baidu.com" target="_blank">百度</a>
 
+
 
+    <ul>
 
+        <li>111</li>
 
+        <li>222</li>
 
+        <li>333</li>
 
+    </ul>
 
+    <!-- 布局 区块  -->
 
+    <!-- span 选中文本  -->
 
+    <div>
 
+        hahahahjdf<span style="color:red">收据</span>发给技术的<i>回访</i>跟进<strong>都会</strong>发 hahahahhaha
 
+    </div>
 
+
 
+
 
+    <!-- 表格 -->
 
+    <table border="1">
 
+        <tr>
 
+            <td>111</td>
 
+            <td>222</td>
 
+        </tr>
 
+        <tr>
 
+            <td>111</td>
 
+            <td>222</td>
 
+        </tr>
 
+    </table>
 
+
 
+    <!-- 表单元素 -->
 
+    <form>
 
+        <!-- 文本框 -->
 
+        <input type="text">
 
+        <!-- 密码框 -->
 
+        <input type="password">
 
+        <!-- 单选框 -->
 
+        <input type="radio" name="sex">男
 
+        <input type="radio" name="sex">女
 
+
 
+        <!-- 复选框 -->
 
+        <input type="checkbox" name="hobby">吃饭
 
+        <input type="checkbox" name="hobby">睡觉
 
+        <input type="checkbox" name="hobby">敲代码
 
+
 
+        <!-- 下拉框 -->
 
+        <select>
 
+            <option value="">黑大</option>
 
+            <option value="">理工</option>
 
+            <option value="">黑工程</option>
 
+        </select>
 
+
 
+        <!-- 文本域 -->
 
+        <textarea ></textarea>
 
+
 
+        <button>click</button>
 
+        <input type="submit">
 
+
 
+    </form>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 49 - 0
2_css/9_基础样式2.html
View File 

@@ -0,0 +1,49 @@
 
+<!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{
 
+            list-style: none;
 
+        }
 
+        a{
 
+            /* 文本装饰 underline下划线|none无|line-through中划线 */
 
+            text-decoration: none;
 
+            /* 鼠标 形状 */
 
+            /* cursor: pointer; */
 
+            color:red;
 
+        }
 
+
 
+        span{
 
+            cursor: pointer;
 
+        }
 
+
 
+        
+
 
+
 
+
 
+
 
+
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 背景 字体 文本 -->
 
+    <ul>
 
+        <li>111</li>
 
+        <li>222</li>
 
+        <li>333</li>
 
+    </ul>
 
+
 
+    <a href="#">Baidu</a>
 
+    <span>你好呀</span>
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

BIN
2_css/images/.DS_Store
View File


BIN
2_css/images/bg.png
View File


BIN
2_css/images/img01.jpeg
View File


BIN
2_css/images/img01.jpg
View File


BIN
2_css/images/img02.jpg
View File


BIN
2_css/images/爱扣钉HTML基础.pdf
View File


BIN
3_项目/.DS_Store
View File


+ 25 - 0
3_项目/css/common.css
View File 

@@ -0,0 +1,25 @@
 
+body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
 
+body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
 
+h1,h2,h3,h4,h5,h6{font-size:100%;}
 
+address,cite,dfn,em,var{font-style:normal;}
 
+code,kbd,pre,samp{font-family:courier new,courier,monospace;}
 
+small{font-size:12px;}
 
+ul,ol{list-style:none;}
 
+a{text-decoration:none;}
 
+/* a:hover{text-decoration:underline;} */
 
+sup{vertical-align:text-top;}
 
+sub{vertical-align:text-bottom;}
 
+legend{color:#000;}
 
+fieldset,img{border:0;}
 
+button,input,select,textarea{font-size:100%;}
 
+table{border-collapse:collapse;border-spacing:0;}
 
+.clearfix::after{
 
+    content:'';
 
+    display: block;
 
+    clear: both;
 
+}
 
+/* 公共居中 */
 
+.com-center{
 
+    width:1199px;
 
+    margin:0 auto;
 
+}

+ 317 - 0
3_项目/css/index.css
View File 

@@ -0,0 +1,317 @@
 
+.nav{
 
+    height: 35px;
 
+    background: #EEEEEE ;
 
+
 
+}
 
+.nav-center{
 
+    width: 1199px;
 
+    height: 35px;
 
+    /* background: green; */
 
+    margin:0 auto;
 
+    line-height: 35px;
 
+}
 
+.nav-left{
 
+    float: left;
 
+}
 
+.nav-right{
 
+    float: right;
 
+}
 
+.nav-center a{
 
+    color:#888888 ;
 
+}
 
+
 
+.nav-center .active{
 
+    color: #6F26BD;
 
+}
 
+
 
+.welcome{
 
+    margin-right:25px;
 
+}
 
+/* header头部开始 */
 
+.header{
 
+    height: 151px;
 
+    /* background: red; */
 
+    width: 1199px;
 
+    margin:0 auto;
 
+}
 
+.header-logo{
 
+    float: left;
 
+    padding-top:44px;
 
+    /* background: green; */
 
+}
 
+.header-search{
 
+    float: left;
 
+    /* background: blue; */
 
+    width: 536px;
 
+    height: 151px;
 
+    margin-left:123px;
 
+    margin-right:52px;
 
+}
 
+.header-cart{
 
+    float: left;
 
+    /* background: purple; */
 
+    height:151px;
 
+}
 
+.search-box{
 
+    width: 536px;
 
+    height:44px;
 
+    border:2px solid #6F26BD ;
 
+    margin-top:44px;
 
+}
 
+.search-box input,.search-box button{
 
+    float: left;
 
+    border:none;
 
+}
 
+.search-box button{
 
+    width: 62px;
 
+    height: 44px;
 
+    background: #6F26BD;
 
+    font-size: 16px;
 
+    color:#FFFFFF ;
 
+}
 
+.search-box input{
 
+    width: 474px;
 
+    height: 44px;
 
+    /* 搜索框获取焦点 蓝色边 */
 
+    outline: none;
 
+    padding-left:7px;
 
+    box-sizing: border-box;
 
+}
 
+.search-list{
 
+    padding-top:10px;
 
+}
 
+.search-list a{
 
+    color:#999999 ;
 
+    margin-right: 25px;
 
+    /* 行级元素margin 上下不好使  左右好使  */
 
+    
+}
 
+.header-cart{
 
+    padding-top:56px;
 
+    box-sizing: border-box;
 
+}
 
+.header-cart img{
 
+    /* 设置图片和span中的文字在垂直方向是居中对齐 （默认是居下对齐的） */
 
+    vertical-align: middle;
 
+}
 
+.header-cart span{
 
+    color:#959595;
 
+}
 
+/* 水平菜单 */
 
+.hor-menu{
 
+    width: 1199px;
 
+    height: 50px;
 
+    /* background: #f00; */
 
+    margin: 0 auto;
 
+    padding-left:260px;
 
+    /* 怪异盒模型  */
 
+    box-sizing: border-box;
 
+}
 
+.hor-menu li{
 
+    float: left;
 
+    width: 146px;
 
+    height: 50px;
 
+    line-height: 50px;
 
+    text-align: center;
 
+    font-size: 14px;
 
+
 
+
 
+}
 
+
 
+.new-icon{
 
+    position: absolute;
 
+    top: -9px;
 
+    right: 28px;
 
+}
 
+.new-icon-box{
 
+    position: relative;
 
+}
 
+/* 轮播图开始 */
 
+.slide{
 
+    height: 546px;
 
+    /* background: #EEDED4; */
 
+    background: url(../images/bg.png) center top;
 
+}
 
+.slide-center{
 
+    width: 1199px;
 
+    height: 546px;
 
+    /* background: #f00; */
 
+    margin:0 auto;
 
+    position: relative;
 
+}
 
+.menu{
 
+    height: 596px;
 
+    width: 260px;
 
+    background: rgba(0,0,0,0.4);
 
+    position: absolute;
 
+    top:-50px;
 
+
 
+}
 
+.menu-title{
 
+    color:#fff;
 
+    background: #6F26BD ;
 
+    font-size: 14px;
 
+    height: 50px;
 
+    line-height: 50px;
 
+    text-align: center;
 
+    font-weight: 400;
 
+}
 
+.img-box{
 
+    float: left;
 
+    width: 27px;
 
+    text-align: center;
 
+}
 
+.content-box{
 
+    float: left;
 
+}
 
+/* 给li添加左右内边距，这里边因为没有给li设置宽度，所有不会被撑大 */
 
+.menu-list{
 
+    padding:17px 7px 0 10px;
 
+}
 
+.content-box{
 
+    width:216px;
 
+    border-bottom: 1px solid #fff;
 
+    padding-left:9px;
 
+    box-sizing: border-box;
 
+}
 
+.contente-title{
 
+    font-size: 16px;
 
+    color: #FFFEFE;
 
+}
 
+.content-list{
 
+    color: #FFFEFE;
 
+    font-size: 13px;
 
+    margin:13px 0 10px 0;
 
+}
 
+.img-box{
 
+    padding-top:3px;
 
+}
 
+.menu-list-box{
 
+    padding-top:16px;
 
+    box-sizing: border-box;
 
+}
 
+.img-box .iconfont{
 
+    color: #fff;
 
+    font-size: 20px;
 
+}
 
+.activity{
 
+    width: 590px;
 
+    padding-bottom: 52px;
 
+
 
+    /* height: 400px; */
 
+    /* background: #F00; */
 
+}
 
+.group{
 
+    float: left;
 
+}
 
+.seckill{
 
+    float: right;
 
+}
 
+.activity-center{
 
+    padding-top:41px;
 
+}
 
+.activity-title{
 
+    border-bottom: 1px solid #6F26BD;
 
+}
 
+.activity-title-text{
 
+    width: 125px;
 
+    height: 34px;
 
+    background: #6F26BD;
 
+    color: #fff;
 
+    font-size: 14px;
 
+    text-align: center;
 
+    line-height: 34px;
 
+    margin-bottom: 1px;
 
+}
 
+.ac-pro-list{
 
+    width: 186px;
 
+    float: left;
 
+    margin-right: 10px;
 
+}
 
+.ac-list-box{
 
+    padding-top:19px;
 
+}
 
+.pro-name{
 
+    font-size: 14px;
 
+    color: #666666 ;
 
+    padding-top:12px;
 
+}
 
+.pro-price{
 
+    color: #666666 ;
 
+}
 
+.pro-price span{
 
+    color:#FF4200;
 
+}
 
+.pro-btn{
 
+    width: 168px;
 
+    height: 18px;
 
+    border:1px solid #A6A6A6 ;
 
+    margin-top:6px;
 
+    color:#A6A6A6 ;
 
+    font-size: 13px;
 
+    text-align: center;
 
+    line-height: 18px;
 
+
 
+    /* 边框圆角 */
 
+    border-radius: 5px;
 
+    position: relative;
 
+
 
+}
 
+.btn-icon{
 
+    width: 28px;
 
+    height: 18px;
 
+    background: #A6A6A6 url(../images/gift-icon.png) no-repeat center center ;
 
+    border-radius: 5px;
 
+    position: absolute;
 
+    left:0;
 
+    top:0;
 
+}
 
+/*  */
 
+.c-content{
 
+    height: 800px;
 
+    background: #F5F5F5;
 
+}
 
+.c-content-title{
 
+    height: 80px;
 
+    line-height: 80px;
 
+    color: #E74079 ;
 
+    font-size: 26px;
 
+    text-align: center;
 
+}
 
+.c-hot-box{
 
+    width: 118px;
 
+    height: 476px;
 
+    background: #f00;
 
+    float: left;
 
+}
 
+.c-sp-area{
 
+    width: 192px;
 
+    height: 476px;
 
+    background: #00f;
 
+    float: left;
 
+}
 
+.c-pro{
 
+    width: 594px;
 
+    height: 476px;
 
+    background: #0f0;
 
+    float: left;
 
+}
 
+.c-brand{
 
+    width: 292px;
 
+    height: 476px;
 
+    background: #000;
 
+    float: left;
 
+
 
+}
 
+.c-pro-list{
 
+    width: 198px;
 
+    height: 237px;
 
+    background: #fff;
 
+    float: left;
 
+    border-right: 1px solid #E8E8E8;
 
+    border-bottom: 1px solid #E8E8E8;
 
+    box-sizing: border-box;
 
+}
 
+.c-pro-list-1{
 
+    width: 396px;
 
+}

+ 27 - 0
3_项目/font/iconfont.css
View File 

@@ -0,0 +1,27 @@
 
+@font-face {
 
+  font-family: "iconfont"; /* Project id 3708589 */
 
+  src: url('iconfont.woff2?t=1665885074933') format('woff2'),
 
+       url('iconfont.woff?t=1665885074933') format('woff'),
 
+       url('iconfont.ttf?t=1665885074933') format('truetype');
 
+}
 
+
 
+.iconfont {
 
+  font-family: "iconfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+.icon-muyingleimu:before {
 
+  content: "\e6ef";
 
+}
 
+
 
+.icon-shumajiadianleimu:before {
 
+  content: "\e6f1";
 
+}
 
+
 
+.icon-chongwu:before {
 
+  content: "\e615";
 
+}
 
+

BIN
3_项目/font/iconfont.ttf
View File


BIN
3_项目/font/iconfont.woff
View File


BIN
3_项目/font/iconfont.woff2
View File


BIN
3_项目/images/.DS_Store
View File


BIN
3_项目/images/bg.png
View File


BIN
3_项目/images/cart.png
View File


BIN
3_项目/images/gift-icon.png
View File


BIN
3_项目/images/hot.png
View File


BIN
3_项目/images/icon.png
View File


BIN
3_项目/images/img01.png
View File


BIN
3_项目/images/logo.png
View File


BIN
3_项目/images/new.png
View File


+ 288 - 0
3_项目/index.html
View File 

@@ -0,0 +1,288 @@
 
+<!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/common.css">
 
+
 
+
 
+    <!-- 
+        引用字体图标  字体图标就是字体，所以可以通过调整字体的css调整字体大小 颜色 等
 
+        1 下载 将后缀为ttf、woff、woff2、iconfont.css四个文件 复制到项目目录下
 
+        2 引入iconfont.css
 
+        3 应用于页面 （可以查看demo文件）
 
+    -->
 
+    <link rel="stylesheet" href="font/iconfont.css">
 
+
 
+
 
+    <!--引入外部css文件 -->
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+
 
+
 
+<body>
 
+    <!-- 顶部导航 -->
 
+    <!-- nav是灰色通栏显示的容器 -->
 
+    <div class="nav">
 
+        <!-- 宽度是1199 居中的元素 -->
 
+        <div class="nav-center">
 
+            <!-- 居左的容器 -->
 
+            <div class="nav-left">
 
+                <a href="#" class="welcome">您好，欢迎进入包图购物网</a>
 
+                <a href="#">登录</a>
 
+                <a href="#" class="active">注册</a>
 
+            </div>
 
+
 
+            <!-- 居右的容器 -->
 
+            <div class="nav-right">
 
+                <a href="#">设为首页 ☆</a>
 
+                <a href="#" class="active">加入收藏</a>
 
+                <a href="#">客户服务 </a>
 
+                <a href="#">关注官方微博：</a>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <!-- 头部header -->
 
+    <div class="header">
 
+        <div class="header-logo">
 
+            <img src="images/logo.png" alt="">
 
+        </div>
 
+        <div class="header-search">
 
+            <!-- 上 搜索 -->
 
+            <div class="search-box">
 
+                <input type="text" placeholder="618活动">
 
+                <button>搜索</button>
 
+            </div>
 
+
 
+
 
+            <!-- 下 列表 -->
 
+            <div class="search-list">
 
+                <a href="#">时尚女鞋</a>
 
+                <a href="#">简易家具</a>
 
+                <a href="#">仙女公主裙</a>
 
+                <a href="#">BF风裤子</a>
 
+            </div>
 
+        </div>
 
+        <div class="header-cart">
 
+            <img src="images/cart.png" alt="">
 
+            <span>购物车物品</span>
 
+        </div>
 
+    </div>
 
+
 
+    <!-- 水平分类菜单 -->
 
+    <ul class="hor-menu">
 
+        <li>商城首页</li>
 
+        <li class="new-icon-box">
 
+            所有商品
 
+            <img class="new-icon" src="images/new.png" alt="">
 
+        </li>
 
+        <li>团购专区</li>
 
+        <li class="new-icon-box">
 
+            秒杀专区
 
+            <img class="new-icon" src="images/hot.png" alt="">
 
+        </li>
 
+        <li>实体店</li>
 
+        <li>用户实拍</li>
 
+    </ul>
 
+
 
+    <!-- 轮播图 -->
 
+    <!-- 通栏显示 -->
 
+    <div class="slide">
 
+        <!-- 居中布局 -->
 
+        <div class="slide-center">
 
+            <!-- 左侧菜单 -->
 
+            <div class="menu">
 
+                <h2 class="menu-title">全部商品分类</h2>
 
+                <ul class="menu-list-box">
 
+                    <li class="menu-list clearfix">
 
+                        <!-- 15+6+6 = 27 -->
 
+                        <div class="img-box">
 
+                            <img src="images/icon.png" alt="">
 
+                        </div>
 
+                        <div class="content-box">
 
+                            <div class="contente-title">美容洗护</div>
 
+                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="menu-list clearfix">
 
+                        <!-- 15+6+6 = 27 -->
 
+                        <div class="img-box">
 
+                            <img src="images/icon.png" alt="">
 
+                        </div>
 
+                        <div class="content-box">
 
+                            <div class="contente-title">美容洗护</div>
 
+                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="menu-list clearfix">
 
+                        <!-- 15+6+6 = 27 -->
 
+                        <div class="img-box">
 
+                            <img src="images/icon.png" alt="">
 
+                        </div>
 
+                        <div class="content-box">
 
+                            <div class="contente-title">美容洗护</div>
 
+                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="menu-list clearfix">
 
+                        <!-- 15+6+6 = 27 -->
 
+                        <div class="img-box">
 
+                            <img src="images/icon.png" alt="">
 
+                        </div>
 
+                        <div class="content-box">
 
+                            <div class="contente-title">美容洗护</div>
 
+                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="menu-list clearfix">
 
+                        <!-- 15+6+6 = 27 -->
 
+                        <div class="img-box">
 
+                            <!-- <img src="images/icon.png" alt=""> -->
 
+                            <span class="iconfont icon-muyingleimu"></span>
 
+                        </div>
 
+                        <div class="content-box">
 
+                            <div class="contente-title">美容洗护</div>
 
+                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="menu-list clearfix">
 
+                        <!-- 15+6+6 = 27 -->
 
+                        <div class="img-box">
 
+                            <!-- <img src="images/icon.png" alt=""> -->
 
+                            <span class="iconfont icon-chongwu"></span>
 
+                        </div>
 
+                        <div class="content-box">
 
+                            <div class="contente-title">美容洗护</div>
 
+                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
 
+                        </div>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <!-- 限时秒杀 -->
 
+    <div class="com-center activity-center clearfix">
 
+        <!-- 左边拼单团购 -->
 
+        <div class="activity group">
 
+            <!-- 标题 -->
 
+            <div class="activity-title">
 
+                <div class="activity-title-text">拼单团购</div>
 
+            </div>
 
+            <!-- 列表 -->
 
+            <ul class="ac-list-box">
 
+                <li class="ac-pro-list">
 
+                    <img src="images/img01.png" alt="">
 
+                    <div class="pro-name">美妆商彩妆</div>
 
+                    <div class="pro-price">团购价：<span>￥0：00</span></div>
 
+                    <div class="pro-btn">
 
+                        已结束
 
+                        <div class="btn-icon"></div>
 
+                    </div>
 
+                </li>
 
+                <li class="ac-pro-list">
 
+                    <img src="images/img01.png" alt="">
 
+                    <div class="pro-name">美妆商彩妆</div>
 
+                    <div class="pro-price">团购价：<span>￥0：00</span></div>
 
+                    <div class="pro-btn">
 
+                        已结束
 
+                        <div class="btn-icon"></div>
 
+                    </div>
 
+                </li>
 
+                <li class="ac-pro-list">
 
+                    <img src="images/img01.png" alt="">
 
+                    <div class="pro-name">美妆商彩妆</div>
 
+                    <div class="pro-price">团购价：<span>￥0：00</span></div>
 
+                    <div class="pro-btn">
 
+                        已结束
 
+                        <div class="btn-icon"></div>
 
+                    </div>
 
+                </li>
 
+            </ul>
 
+        </div>
 
+        <!-- 右边限时秒杀 -->
 
+        <div class="activity seckill">
 
+            <!-- 标题 -->
 
+            <div class="activity-title">
 
+                <div class="activity-title-text">拼单团购</div>
 
+            </div>
 
+            <!-- 列表 -->
 
+            <ul class="ac-list-box">
 
+                <li class="ac-pro-list">
 
+                    <img src="images/img01.png" alt="">
 
+                    <div class="pro-name">美妆商彩妆</div>
 
+                    <div class="pro-price">团购价：<span>￥0：00</span></div>
 
+                    <div class="pro-btn">
 
+                        已结束
 
+                        <div class="btn-icon"></div>
 
+                    </div>
 
+                </li>
 
+                <li class="ac-pro-list">
 
+                    <img src="images/img01.png" alt="">
 
+                    <div class="pro-name">美妆商彩妆</div>
 
+                    <div class="pro-price">团购价：<span>￥0：00</span></div>
 
+                    <div class="pro-btn">
 
+                        已结束
 
+                        <div class="btn-icon"></div>
 
+                    </div>
 
+                </li>
 
+                <li class="ac-pro-list">
 
+                    <img src="images/img01.png" alt="">
 
+                    <div class="pro-name">美妆商彩妆</div>
 
+                    <div class="pro-price">团购价：<span>￥0：00</span></div>
 
+                    <div class="pro-btn">
 
+                        已结束
 
+                        <div class="btn-icon"></div>
 
+                    </div>
 
+                </li>
 
+            </ul>
 
+        </div>
 
+
 
+    </div>
 
+    <!-- 美容洗护 -->
 
+    <!-- 有灰色背景通栏显示 -->
 
+    <div class="c-content">
 
+        <!-- 居中 -->
 
+        <div class="com-center">
 
+            <!-- 标题 -->
 
+            <div class="c-content-title">
 
+                美容洗护
 
+            </div>
 
+            <!-- 内容 -->
 
+            <div>
 
+                <!-- hot -->
 
+                <div class="c-hot-box">
 
+
 
+                </div>
 
+                <!-- 专区 -->
 
+                <div class="c-sp-area">
 
+
 
+                </div>
 
+                <!-- 商品 -->
 
+                <div class="c-pro">
 
+                    <ul>
 
+                        <li class="c-pro-list c-pro-list-1">1</li>
 
+                        <li class="c-pro-list">2</li>
 
+                        <li class="c-pro-list">3</li>
 
+                        <li class="c-pro-list">4</li>
 
+                        <li class="c-pro-list">5</li>
 
+                    </ul>
 
+                </div>
 
+                <!-- 热卖品牌 -->
 
+                <div class="c-brand">
 
+
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+
 
+
 
+</body>
 
+
 
+</html>