study6

day6/demo/demo.css

@@ -0,0 +1,671 @@
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    box-sizing: border-box;
+}
+/* 头部样式 */
+.header {
+    width: 100%;
+    height: 35px;
+    background: #EEE;
+}
+.header .container {
+    width: 1084px;
+    height: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+}
+.header .container .container-left {
+    float: left;
+}
+.header .container .container-left p {
+    display: inline-block;
+    font-size: 12px;
+    color: #888;    
+    line-height: 35px;
+}
+.header .container .container-left p span {
+    color: #6F26BD;
+}
+.header .container .container-left p:nth-child(2) {
+    margin-left: 25px;
+}
+.header .container .container-right {
+    float: right;
+}
+.header .container .container-right ul {
+    overflow: hidden;
+    line-height: 35px;
+    margin-right: 24px;
+}
+.header .container .container-right ul li {
+    float: left;
+    color: #888;
+    font-size: 12px;
+}
+.header .container .container-right ul li:nth-child(even) {
+    width: 1px;
+    height: 11px;
+    background: #888;
+    margin-top: 13px;
+}
+.header .container .container-right ul li:nth-child(odd) {
+   padding: 0 5px;
+}
+.header .container .container-right ul li:nth-child(3) {
+    color: #6F26BD;
+}
+/* 主体代码 */
+.main {
+    width: 100%;
+    /* background: #00f; */
+}
+/* 第一部分 */
+.main .partOne {
+    width: 1084px;
+    height: 160px;
+    margin: 0 auto;
+    overflow: hidden;
+}
+.main .partOne .logo {
+    width: 176px;
+    height: 100%;
+    float: left;
+}
+.main .partOne .logo img {
+    width: 176px;
+    height: 49px;
+    margin-top: 44px;
+}
+.main .partOne .search {
+    width: 659px;
+    height: 100%;
+    float: left;
+}
+.main .partOne .search .search-top {
+    width: 536px;
+    height: 44px;
+    overflow: hidden;
+    border: 2px solid #6F26BD;
+    margin-left: 123px;
+    margin-top: 43px;
+}
+.main .partOne .search .search-top input {
+    float: left;
+    width: 474px;
+    height: 100%;
+    outline: none;
+    border: none;
+    padding-left: 7px;
+}
+.main .partOne .search .search-top .btn {
+    float: left;
+    font-size: 16px;
+    color: #fff;
+    background: #6F26BD;
+    width: 58px;
+    height: 44px;
+    /* 文字在已知宽高盒子内居中 */
+    text-align: center;
+    line-height: 44px;
+}
+.main .partOne .search .search-bottom {
+    width: 536px;
+    height: 17px;
+    margin-left: 123px;
+}
+.main .partOne .search .search-bottom ul {
+    overflow: hidden;
+}
+.main .partOne .search .search-bottom ul li {
+    float: left;
+    margin-left: 25px;
+}
+.main .partOne .search .search-bottom ul li:first-child {
+    margin-left: 0;
+}
+.main .partOne .search .search-bottom ul li a {
+    font-size: 12px;
+    color: #999;
+}
+.main .partOne .search .search-bottom ul li a:hover{
+    color: red;
+    text-decoration:underline;
+}
+.main .partOne .shopping-car {
+    width: 142px;
+    height: 100%;
+    float: left;
+}
+.main .partOne .shopping-car .content {
+    width: 90px;
+    height: 21px;
+    overflow: hidden;
+    margin-top: 57px;
+    margin-left: 52px;
+}
+.main .partOne .shopping-car img {
+    width: 23px;
+    height: 21px;
+    float: left;
+}
+.main .partOne .shopping-car .object {
+    font-size: 12px;
+    color: #959595;
+    float: left;
+    margin-left: 6px;
+    margin-top: 4px;
+}
+/* 第二部分 */
+.main .partTwo .nav {
+    width: 1084px;
+    margin: 0 auto;
+    height: 50px;
+    position: relative;
+}
+.main .partTwo .nav ul {
+    overflow: hidden;
+    line-height: 50px;
+}
+.main .partTwo .nav ul li {
+    float: left;
+    padding: 0 41.5px;
+}
+.main .partTwo .nav ul li a {
+    font-size: 14px;
+    color: #606060;
+}
+.main .partTwo .nav ul li:first-child{
+    padding: 0 88.5px;
+    background: #6F26BD;
+}
+.main .partTwo .nav ul li:first-child a {
+    color: #fff;
+}
+.main .partTwo .nav ul li:hover{
+    background: #6F26BD;
+}
+.main .partTwo .nav ul li:hover a {
+    color: #fff;
+}
+
+.main .partTwo .nav ul li:first-child:hover{
+    background: red;
+}
+.main .partTwo .nav ul li:first-child:hover a {
+    color: #ff0;
+}
+.main .partTwo .nav .new {
+    position: absolute;
+    top: -5px;
+    left: 478px;
+}
+
+.main .partTwo .nav .hot {
+    position: absolute;
+    top: -5px;
+    left: 751px;
+}
+/* 轮播图 */
+.main .partTwo .banner {
+    width: 100%;
+    height: 576px;
+    position: relative;
+}
+.main .partTwo .banner img {
+    width: 100%;
+    height: 100%;
+}
+.main .partTwo .banner .dialog {
+    width: 261px;
+    height: 546px;
+    /* a=>alpha 0~1 */
+    /* 
+        16=>#fff f00 ff0
+        rgb=>255,255,255
+    */
+    /* background: rgb(red, green, blue); */
+    background: rgba(0, 0, 0,.4);
+    color: #fff;
+    position: absolute;
+    top: 0;
+    left: 319px;
+}
+.main .partTwo .banner .dialog .water {
+    width: 260px;
+    height: 87px;
+    overflow: hidden;
+}
+.main .partTwo .banner .dialog .water .logo {
+    width: 37px;
+    height: 100%;
+    float: left;
+}
+.main .partTwo .banner .dialog .water .logo img {
+    width: 15px;
+    height: 16px;
+    margin-top: 17.5px;
+    margin-left: 14px;
+}
+.main .partTwo .banner .dialog .water .word {
+    width: 216px;
+    height: 100%;
+    float: left;
+    border-bottom: 1px solid #fff;
+}
+.main .partTwo .banner .dialog .water .word .title {
+    width: 193px;
+    height: 22px;
+    margin-top: 17.5px;
+    margin-left: 5px;
+    overflow: hidden;
+    font-size: 16px;
+    line-height: 22px;
+}
+.main .partTwo .banner .dialog .water .word .title:hover {
+    color: #6F26BD;
+}
+.main .partTwo .banner .dialog .water .word .title div:first-child {
+    float: left;
+}
+.main .partTwo .banner .dialog .water .word .title div:nth-child(2) {
+    float: right;
+}
+.main .partTwo .banner .dialog .water .word .list {
+    width: 193px;
+    height: 18px;
+    line-height: 18px;
+    margin-top: 13px;
+    margin-left: 5px;
+}
+.main .partTwo .banner .dialog .water .word .list ul {
+    overflow: hidden;
+}
+.main .partTwo .banner .dialog .water .word .list ul li {
+    float: left;
+}
+.main .partTwo .banner .dialog .water .word .list ul li a:hover {
+    color: #6F26BD;
+}
+.main .partTwo .banner .dialog .water .word .list ul li a {
+    font-size: 13px;
+    color: #fff;
+}
+.main .partTwo .banner .dialog .water .word .list ul li:nth-child(even) {
+    width: 1px;
+    height: 10px;
+    background: #fff;
+    margin-top: 8px;
+}
+.main .partTwo .banner .dialog .water .word .list ul li:nth-child(odd) {
+    padding: 0 4px;
+} 
+.main .partThree .container {
+    width: 1200px;
+    height: 378px;
+    margin: 0 auto;
+    overflow: hidden;
+}
+.main .partThree .container .orders{
+    width: 590px;
+    height: 315px;
+    float: left;
+    margin-top: 11px;
+}
+.main .partThree .container .orders .orders-top {
+    width: 100%;
+    height: 36px;
+    border-bottom: 1px solid #6F26BD;
+}
+.main .partThree .container .orders .orders-top .tit{
+    width: 125px;
+    height: 34px;
+    font-size: 14px;
+    color: #fff;
+    background: #6F26BD;
+    text-align: center;
+    line-height: 34px;
+}
+.main .partThree .container .orders .orders-bottom {
+    width: 100%;
+    height: 260px;
+    margin-top: 21px;
+}
+.main .partThree .container .orders .orders-bottom dl {
+    width: 186px;
+    height: 260px;
+    float: left;
+    margin-left: 10px;
+}
+.main .partThree .container .orders .orders-bottom dl:first-child {
+    margin-left: 0;
+}
+.main .partThree .container .orders .orders-bottom dl dt img {
+    width: 186px;
+    height: 186px;
+}
+/* .main .partThree .container .orders .orders-bottom dl dd {
+    margin-top: 12px;
+} */
+.main .partThree .container .orders .orders-bottom dl dd p {
+    font-size: 14px;
+    color: #666;
+}
+.main .partThree .container .orders .orders-bottom dl dd p span {
+    color: #FF4200;
+    font-size: 12px;
+}
+.main .partThree .container .orders .orders-bottom dl dd .gift {
+    width: 168px;
+    height: 18px;
+    margin-top: 6px;
+    border:1px solid #A6A6A6;
+    border-radius: 4px;
+    overflow: hidden;
+}
+.main .partThree .container .orders .orders-bottom dl dd .gift .gift-left {
+    width: 28px;
+    height: 100%;
+    background: #A6A6A6;
+    border-radius: 4px;  
+    position: relative;
+    margin-left: -1px;
+    float: left;
+}
+.main .partThree .container .orders .orders-bottom dl dd .gift .gift-left img {
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    top: 50%;   
+    left: 50%;   
+    margin-left: -7px;
+    margin-top: -7px;
+    /* top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto; */   
+}
+.main .partThree .container .orders .orders-bottom dl dd .gift .gift-right{
+    width: 139px;
+    height: 100%;
+    float: left;
+    font-size: 13px;
+    color: #A6A6A6;
+    padding-left: 35px;
+    /* text-align: center; */
+    line-height: 18px; 
+}
+.main .partThree .container .orders{
+    margin-left: 20px;
+}
+.main .partThree .container .orders:first-child{
+    margin-left: 0;
+}
+.main .partFour {
+    width: 100%;
+    background: #eee;
+}
+.main .partFour .container {
+    width: 1200px;
+    margin: 0 auto;
+}
+.main .partFour .container .conFirst {
+    width: 100%;
+    height: 556px;
+}
+.main .partFour .container .conFirst .spa {
+    width: 100%;
+    height: 80px;
+    padding: 10px;
+    padding-top: 35px;
+    overflow: hidden;
+}
+.main .partFour .container .conFirst .spa div:first-child {
+    width: 533px;
+    height: 3px;
+    background: #D9D9D9;
+    float: left;
+    margin-left: -10px;
+}
+
+.main .partFour .container .conFirst .spa div:nth-child(2) {
+    margin: -18px 13px 0 15px;
+    float: left;
+}
+.main .partFour .container .conFirst .spa div:nth-child(2) p:first-child{
+    font-size: 26px;
+    color: #E74079;
+} 
+.main .partFour .container .conFirst .spa div:nth-child(2) p:nth-child(2){
+    font-size: 11px;
+    color: #D6D6D6;
+    margin-left: 23px;
+}
+.main .partFour .container .conFirst .spa div:last-child {
+    width: 533px;
+    height: 3px;
+    background: #D9D9D9;
+    float: left;
+    margin-right: -8px;
+}
+
+.main .partFour .container .conFirst .list {
+    width: 1200px;
+    height: 476px;
+    background: #fff;
+    overflow: hidden;
+    border-top: 1px solid #E74079 ;
+}
+.main .partFour .container .conFirst .list .new-hot {
+    width: 118px;
+    height: 100%;
+    background: #fff;
+    float: left;
+    padding-top: 14.4px;
+}
+.main .partFour .container .conFirst .list .new-hot .tit {
+    width: 59px;
+    height: 20px;
+    font-size: 14px;
+    color: #000000;
+    margin-left: 19.2px;
+}
+.main .partFour .container .conFirst .list .new-hot ul {
+    margin-left: 19.2px;
+}
+.main .partFour .container .conFirst .list .new-hot ul li {
+    padding: 3px 0;
+}
+.main .partFour .container .conFirst .list .new-hot ul li a {
+    font-size: 12px;
+    color: #000;
+}
+.main .partFour .container .conFirst .list .new-hot ul li:nth-child(2) a ,
+.main .partFour .container .conFirst .list .new-hot ul li:nth-child(6) a {
+    color:#E74079 ;
+}
+.main .partFour .container .conFirst .list .other {
+    width: 194px;
+    height: 100%;
+    float: left;
+}
+
+.main .partFour .container .conFirst .list .other img {
+    width: 100%;
+    height: 100%;
+}
+.main .partFour .container .conFirst .list .vase {
+    width: 397px;
+    height: 100%;
+    float: left;
+}
+.main .partFour .container .conFirst .list .vase .vase-top {
+    width: 100%;
+    height: 237px;
+    border-bottom: 1px solid #E8E8E8;
+    border-right: 1px solid #E8E8E8;
+    overflow: hidden;
+}
+.main .partFour .container .conFirst .list .vase .vase-top p:first-child {
+    width: 74px;
+    height: 25px;
+    font-size: 16px;
+    color: #000;
+    border-bottom: 1px solid #000;
+}
+.main .partFour .container .conFirst .list .vase .vase-top p:nth-child(2) {
+    font-size: 20px;
+    color: #FF4200;
+    margin-top: 3px;
+    float: left;
+} 
+.main .partFour .container .conFirst .list .vase .vase-top span {
+    font-size: 12px;
+    color: #A6A6A6;
+    text-decoration: line-through;
+    float: left;
+    margin-top: 9px;
+    margin-left: 3px;
+}
+.main .partFour .container .conFirst .list .vase .vase-top .tit {
+    width: 138px;
+    height: 200px;
+    margin-top: 80px;
+    margin-left: 21px;
+    float: left;
+}
+.main .partFour .container .conFirst .list .vase .vase-top img {
+    width: 208px;
+    height: 189px;
+    float: left;
+    margin-top: 22px;
+}
+.main .partFour .container .conFirst .list .vase .vase-bottom{
+    overflow: hidden;
+}
+.main .partFour .container .conFirst .list .vase .vase-bottom .vase-bottom-partOne {
+    width: 198px;
+    height: 238px;
+    border-right: 1px solid #E8E8E8;
+    padding: 48px 0 0 14px;
+    float: left;
+}
+.main .partFour .container .conFirst .list .vase .vase-bottom .vase-bottom-partTwo {
+    float: left;
+    padding: 48px 0 0 14px;
+}
+ .special {
+    width: 164px;
+}
+ .special dt {
+    width: 164px;
+    height: 106px;
+}
+ .special dt img {
+    width: 100%;
+    height: 100%;
+}
+ .special dd p:first-child {
+   width: 48px;
+    margin: 0 auto;
+     font-size: 12px;
+    color: #000;
+}
+ .special dd p:nth-child(2) {
+   width: 84px;
+    margin: 0 auto;
+     font-size: 16px;
+    color: #FF4200;
+} 
+ .special dd p:nth-child(2) span {
+    font-size: 12px;
+    color: #A6A6A6;
+    text-decoration: line-through;
+}
+.main .partFour .container .conFirst .list .tree {
+    width: 199px;
+    height: 100%;
+    float: left;
+    border-right: 1px solid #E8E8E8;
+}
+.main .partFour .container .conFirst .list .tree .treeTop{
+    width: 198px;
+    height: 237px;
+    padding: 48px 0 0 14px;
+    border-bottom: 1px solid #E8E8E8;
+}
+.main .partFour .container .conFirst .list .tree .treeBottom {
+    width: 198px;
+    height: 237px;
+    padding: 48px 0 0 14px;
+}
+.main .partFour .container .conFirst .list .flower {
+    width: 292px;
+    height: 100%;
+    float: left;
+}
+.main .partFour .container .conFirst .list .flower .flower-top {
+    width: 270px;
+    height: 26px;
+    border-bottom: 1px solid #E8E8E8;
+}
+.main .partFour .container .conFirst .list .flower .flower-top .tit {
+    width: 72px;
+    height: 26px;
+    color: #E74079;
+    font-size: 18px;
+    border-bottom: 1px solid #E74079;
+    margin-top: 18px;
+    margin-left: 5.87px;
+} 
+.main .partFour .container .conFirst .list .flower .flower-bottom {
+    margin-left: 6px;
+    overflow: hidden;
+    height: 100%;
+}
+.main .partFour .container .conFirst .list .flower .flower-bottom .team {
+    width: 131px;
+    height: 66px;
+    float: left;
+    margin-top: 32px;
+}
+.main .partFour .container .conFirst .list .flower .flower-bottom .team:nth-child(even) {
+    margin-left: 3px;
+}
+.main .partFour .container .conFirst .list .flower .flower-bottom .team img {
+    width: 84px;
+    height: 23px;
+    margin: 0 auto;
+}
+.main .partFour .container .conFirst .list .flower .flower-bottom .team .water {
+    width: 131px;
+    height: 22px;
+    font-size: 12px;
+    color: #8D8D8D;
+    text-align: center;
+    line-height: 22px;
+    background: #EDEDED;
+    margin-top: 23px;
+}
+.main .partFour .container .end-Logo {
+    width: 100%;
+    height: 76px;
+}
+.main .partFour .container .end-Logo .picture {
+    width: 129px;
+    height: 36px;
+    margin: 30px auto;
+}
+.main .partFour .container .end-Logo .picture img {
+    width: 100%;
+    height: 100%;
+}
+/* 页尾代码 */
+.footer {
+    width: 100%;
+    height: 500px;
+    background: #0f0;
+}

day6/demo/demo.html

@@ -0,0 +1,742 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./demo.css">
+</head>
+<body>
+    <!-- 大盒子 -->
+    <div class="box">
+        <!-- 头部 -->
+        <div class="header">
+            <!-- 居中盒子 -->
+            <div class="container">
+                <div class="container-left">
+                    <p>您好，欢迎进入包图网</p>
+                    <p>登录 | <span>注册</span></p>
+                </div>
+                <div class="container-right">
+                    <ul>
+                        <li>设为首页 ☆</li>
+                        <li></li>
+                        <li>加入收藏</li>
+                        <li></li>
+                        <li>客户服务</li>
+                        <li></li>
+                        <li>加入官方微博:</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <!-- 主体 -->
+        <div class="main">
+            <div class="partOne">
+                <div class="logo">
+                    <img src="./images/logo.png" alt="">
+                </div>
+                <div class="search">
+                    <div class="search-top">
+                        <input type="text" placeholder="618活动">
+                        <div class="btn">搜索</div>
+                    </div>
+                    <div class="search-bottom">
+                        <ul>
+                            <li><a href="">时尚女鞋</a></li>
+                            <li><a href="">简易家具</a></li>
+                            <li><a href="">仙女公主裙</a></li>
+                            <li><a href="">BF风裤子</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="shopping-car">
+                    <div class="content">
+                        <img src="./images/car.png" alt="">
+                        <div class="object">购物车物品</div>
+                    </div>
+                </div>
+            </div>
+            <div class="partTwo">
+                <div class="nav">
+                    <ul>
+                        <li><a href="">全部商品分类</a></li>
+                        <li><a href="">商城首页</a></li>
+                        <li><a href="">所有商品</a></li>
+                        <li><a href="">团购专区</a></li>
+                        <li><a href="">秒杀专区</a></li>
+                        <li><a href="">实体店</a></li>
+                        <li><a href="">客户实拍</a></li>
+                    </ul>
+                    <img class="new" src="./images/new.png" alt="">
+                    <img class="hot" src="./images/hot.png" alt="">
+                </div>
+                <div class="banner">
+                    <img src="./images/banner.png" alt="">
+                    <div class="dialog">
+                        <div class="water">
+                            <div class="logo">
+                                <img src="./images/icon1.png" alt="">
+                            </div>
+                            <div class="word">
+                                <div class="title">
+                                    <div>美容洗护</div>
+                                    <div>></div>
+                                </div>
+                                <div class="list">
+                                    <ul>
+                                        <li><a href="">洗发</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">沐浴</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">牙膏</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">洁面</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">卫生巾</a></li>
+                                        <li><a href=""></a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="water">
+                            <div class="logo">
+                                <img src="./images/icon1.png" alt="">
+                            </div>
+                            <div class="word">
+                                <div class="title">
+                                    <div>美容洗护</div>
+                                    <div>></div>
+                                </div>
+                                <div class="list">
+                                    <ul>
+                                        <li><a href="">洗发</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">沐浴</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">牙膏</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">洁面</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">卫生巾</a></li>
+                                        <li><a href=""></a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="water">
+                            <div class="logo">
+                                <img src="./images/icon1.png" alt="">
+                            </div>
+                            <div class="word">
+                                <div class="title">
+                                    <div>美容洗护</div>
+                                    <div>></div>
+                                </div>
+                                <div class="list">
+                                    <ul>
+                                        <li><a href="">洗发</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">沐浴</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">牙膏</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">洁面</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">卫生巾</a></li>
+                                        <li><a href=""></a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="water">
+                            <div class="logo">
+                                <img src="./images/icon1.png" alt="">
+                            </div>
+                            <div class="word">
+                                <div class="title">
+                                    <div>美容洗护</div>
+                                    <div>></div>
+                                </div>
+                                <div class="list">
+                                    <ul>
+                                        <li><a href="">洗发</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">沐浴</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">牙膏</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">洁面</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">卫生巾</a></li>
+                                        <li><a href=""></a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="water">
+                            <div class="logo">
+                                <img src="./images/icon1.png" alt="">
+                            </div>
+                            <div class="word">
+                                <div class="title">
+                                    <div>美容洗护</div>
+                                    <div>></div>
+                                </div>
+                                <div class="list">
+                                    <ul>
+                                        <li><a href="">洗发</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">沐浴</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">牙膏</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">洁面</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">卫生巾</a></li>
+                                        <li><a href=""></a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="water">
+                            <div class="logo">
+                                <img src="./images/icon1.png" alt="">
+                            </div>
+                            <div class="word">
+                                <div class="title">
+                                    <div>美容洗护</div>
+                                    <div>></div>
+                                </div>
+                                <div class="list">
+                                    <ul>
+                                        <li><a href="">洗发</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">沐浴</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">牙膏</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">洁面</a></li>
+                                        <li><a href=""></a></li>
+                                        <li><a href="">卫生巾</a></li>
+                                        <li><a href=""></a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="partThree">
+                <div class="container">
+                    <div class="orders">
+                        <div class="orders-top">
+                            <div class="tit">拼单团购</div>
+                        </div>
+                        <div class="orders-bottom">
+                            <dl>
+                                <dt>
+                                    <img src="./images/red.png" alt="">
+                                </dt>
+                                <dd>
+                                    <p>美妆商彩城</p>
+                                    <p>团购价：<span>￥0.00</span></p>
+                                    <div class="gift">
+                                        <div class="gift-left">
+                                            <img src="./images/gift.png" alt="">
+                                        </div>
+                                        <div class="gift-right">已结束</div>
+                                    </div>
+                                </dd>
+                            </dl>
+                             <dl>
+                                <dt>
+                                    <img src="./images/red.png" alt="">
+                                </dt>
+                                <dd>
+                                    <p>美妆商彩城</p>
+                                    <p>团购价：<span>￥0.00</span></p>
+                                    <div class="gift">
+                                        <div class="gift-left">
+                                            <img src="./images/gift.png" alt="">
+                                        </div>
+                                        <div class="gift-right">已结束</div>
+                                    </div>
+                                </dd>
+                            </dl>
+                            <dl>
+                                <dt>
+                                    <img src="./images/red.png" alt="">
+                                </dt>
+                                <dd>
+                                    <p>美妆商彩城</p>
+                                    <p>团购价：<span>￥0.00</span></p>
+                                    <div class="gift">
+                                        <div class="gift-left">
+                                            <img src="./images/gift.png" alt="">
+                                        </div>
+                                        <div class="gift-right">已结束</div>
+                                    </div>
+                                </dd>
+                            </dl>
+                        </div>
+                    </div>
+                    <div class="orders">
+                        <div class="orders-top">
+                            <div class="tit">拼单团购</div>
+                        </div>
+                        <div class="orders-bottom">
+                            <dl>
+                                <dt>
+                                    <img src="./images/red.png" alt="">
+                                </dt>
+                                <dd>
+                                    <p>美妆商彩城</p>
+                                    <p>团购价：<span>￥0.00</span></p>
+                                    <div class="gift">
+                                        <div class="gift-left">
+                                            <img src="./images/gift.png" alt="">
+                                        </div>
+                                        <div class="gift-right">已结束</div>
+                                    </div>
+                                </dd>
+                            </dl>
+                             <dl>
+                                <dt>
+                                    <img src="./images/red.png" alt="">
+                                </dt>
+                                <dd>
+                                    <p>美妆商彩城</p>
+                                    <p>团购价：<span>￥0.00</span></p>
+                                    <div class="gift">
+                                        <div class="gift-left">
+                                            <img src="./images/gift.png" alt="">
+                                        </div>
+                                        <div class="gift-right">已结束</div>
+                                    </div>
+                                </dd>
+                            </dl>
+                            <dl>
+                                <dt>
+                                    <img src="./images/red.png" alt="">
+                                </dt>
+                                <dd>
+                                    <p>美妆商彩城</p>
+                                    <p>团购价：<span>￥0.00</span></p>
+                                    <div class="gift">
+                                        <div class="gift-left">
+                                            <img src="./images/gift.png" alt="">
+                                        </div>
+                                        <div class="gift-right">已结束</div>
+                                    </div>
+                                </dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="partFour">
+                <div class="container">
+                    <div class="conFirst">
+                        <div class="spa">   
+                            <div></div>
+                            <div>
+                                <p>美容洗护</p>
+                                <p>Beauty care</p>
+                            </div>
+                            <div></div>
+                        </div>
+                        <div class="list">
+                            <div class="new-hot">
+                                <div class="tit">最热HOT</div>
+                                <ul>
+                                    <li><a href="">补水</a></li>
+                                    <li><a href="">洗面奶</a></li>
+                                    <li><a href="">卸妆</a></li>
+                                    <li><a href="">面膜</a></li>
+                                    <li><a href="">美白</a></li>
+                                    <li><a href="">洗发水</a></li>
+                                    <li><a href="">无硅</a></li>
+                                    <li><a href="">沐浴露</a></li>
+                                    <li><a href="">口腔护理</a></li>
+                                    <li><a href="">卫生巾</a></li>
+                                    <li><a href="">精华液</a></li>
+                                    <li><a href="">skin</a></li>
+                                </ul>
+                            </div>
+                            <div class="other">
+                                <img src="./images/woman.png" alt="">
+                            </div>
+                            <div class="vase">
+                                <div class="vase-top">
+                                    <div class="tit">
+                                        <p>水乳精华</p>
+                                        <p>￥1049</p>
+                                        <span>￥1866</span>
+                                    </div>
+                                    <img src="./images/watch.png" alt="">
+                                    
+                                </div>
+                                <div class="vase-bottom">
+                                    <div class="vase-bottom-partOne">
+                                        <dl class="special">
+                                            <dt>
+                                                <img src="./images/flower.png" alt="">
+                                            </dt>
+                                            <dd>
+                                                <p>品牌香水</p>
+                                                <p>￥355<span>￥500</span></p>
+                                            </dd>
+                                        </dl>
+                                    </div>
+                                    <div class="vase-bottom-partTwo">
+                                        <dl class="special">
+                                            <dt>
+                                                <img src="./images/flower.png" alt="">
+                                            </dt>
+                                            <dd>
+                                                <p>品牌香水</p>
+                                                <p>￥355<span>￥500</span></p>
+                                            </dd>
+                                        </dl>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tree">
+                                <div class="treeTop">
+                                    <dl class="special">
+                                        <dt>
+                                            <img src="./images/flower.png" alt="">
+                                        </dt>
+                                        <dd>
+                                            <p>品牌香水</p>
+                                            <p>￥355<span>￥500</span></p>
+                                        </dd>
+                                    </dl>
+                                </div>
+                                <div class="treeBottom">
+                                    <dl class="special">
+                                        <dt>
+                                            <img src="./images/flower.png" alt="">
+                                        </dt>
+                                        <dd>
+                                            <p>品牌香水</p>
+                                            <p>￥355<span>￥500</span></p>
+                                        </dd>
+                                    </dl>
+                                </div>
+                            </div>
+                            <div class="flower">
+                                <div class="flower-top">
+                                    <div class="tit">热卖品牌</div>
+                                </div>
+                                <div class="flower-bottom">
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="conFirst">
+                        <div class="spa">   
+                            <div></div>
+                            <div>
+                                <p>美容洗护</p>
+                                <p>Beauty care</p>
+                            </div>
+                            <div></div>
+                        </div>
+                        <div class="list">
+                            <div class="new-hot">
+                                <div class="tit">最热HOT</div>
+                                <ul>
+                                    <li><a href="">补水</a></li>
+                                    <li><a href="">洗面奶</a></li>
+                                    <li><a href="">卸妆</a></li>
+                                    <li><a href="">面膜</a></li>
+                                    <li><a href="">美白</a></li>
+                                    <li><a href="">洗发水</a></li>
+                                    <li><a href="">无硅</a></li>
+                                    <li><a href="">沐浴露</a></li>
+                                    <li><a href="">口腔护理</a></li>
+                                    <li><a href="">卫生巾</a></li>
+                                    <li><a href="">精华液</a></li>
+                                    <li><a href="">skin</a></li>
+                                </ul>
+                            </div>
+                            <div class="other">
+                                <img src="./images/woman.png" alt="">
+                            </div>
+                            <div class="vase">
+                                <div class="vase-top">
+                                    <div class="tit">
+                                        <p>水乳精华</p>
+                                        <p>￥1049</p>
+                                        <span>￥1866</span>
+                                    </div>
+                                    <img src="./images/watch.png" alt="">
+                                    
+                                </div>
+                                <div class="vase-bottom">
+                                    <div class="vase-bottom-partOne">
+                                        <dl class="special">
+                                            <dt>
+                                                <img src="./images/flower.png" alt="">
+                                            </dt>
+                                            <dd>
+                                                <p>品牌香水</p>
+                                                <p>￥355<span>￥500</span></p>
+                                            </dd>
+                                        </dl>
+                                    </div>
+                                    <div class="vase-bottom-partTwo">
+                                        <dl class="special">
+                                            <dt>
+                                                <img src="./images/flower.png" alt="">
+                                            </dt>
+                                            <dd>
+                                                <p>品牌香水</p>
+                                                <p>￥355<span>￥500</span></p>
+                                            </dd>
+                                        </dl>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tree">
+                                <div class="treeTop">
+                                    <dl class="special">
+                                        <dt>
+                                            <img src="./images/flower.png" alt="">
+                                        </dt>
+                                        <dd>
+                                            <p>品牌香水</p>
+                                            <p>￥355<span>￥500</span></p>
+                                        </dd>
+                                    </dl>
+                                </div>
+                                <div class="treeBottom">
+                                    <dl class="special">
+                                        <dt>
+                                            <img src="./images/flower.png" alt="">
+                                        </dt>
+                                        <dd>
+                                            <p>品牌香水</p>
+                                            <p>￥355<span>￥500</span></p>
+                                        </dd>
+                                    </dl>
+                                </div>
+                            </div>
+                            <div class="flower">
+                                <div class="flower-top">
+                                    <div class="tit">热卖品牌</div>
+                                </div>
+                                <div class="flower-bottom">
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="conFirst">
+                        <div class="spa">   
+                            <div></div>
+                            <div>
+                                <p>美容洗护</p>
+                                <p>Beauty care</p>
+                            </div>
+                            <div></div>
+                        </div>
+                        <div class="list">
+                            <div class="new-hot">
+                                <div class="tit">最热HOT</div>
+                                <ul>
+                                    <li><a href="">补水</a></li>
+                                    <li><a href="">洗面奶</a></li>
+                                    <li><a href="">卸妆</a></li>
+                                    <li><a href="">面膜</a></li>
+                                    <li><a href="">美白</a></li>
+                                    <li><a href="">洗发水</a></li>
+                                    <li><a href="">无硅</a></li>
+                                    <li><a href="">沐浴露</a></li>
+                                    <li><a href="">口腔护理</a></li>
+                                    <li><a href="">卫生巾</a></li>
+                                    <li><a href="">精华液</a></li>
+                                    <li><a href="">skin</a></li>
+                                </ul>
+                            </div>
+                            <div class="other">
+                                <img src="./images/woman.png" alt="">
+                            </div>
+                            <div class="vase">
+                                <div class="vase-top">
+                                    <div class="tit">
+                                        <p>水乳精华</p>
+                                        <p>￥1049</p>
+                                        <span>￥1866</span>
+                                    </div>
+                                    <img src="./images/watch.png" alt="">
+                                    
+                                </div>
+                                <div class="vase-bottom">
+                                    <div class="vase-bottom-partOne">
+                                        <dl class="special">
+                                            <dt>
+                                                <img src="./images/flower.png" alt="">
+                                            </dt>
+                                            <dd>
+                                                <p>品牌香水</p>
+                                                <p>￥355<span>￥500</span></p>
+                                            </dd>
+                                        </dl>
+                                    </div>
+                                    <div class="vase-bottom-partTwo">
+                                        <dl class="special">
+                                            <dt>
+                                                <img src="./images/flower.png" alt="">
+                                            </dt>
+                                            <dd>
+                                                <p>品牌香水</p>
+                                                <p>￥355<span>￥500</span></p>
+                                            </dd>
+                                        </dl>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tree">
+                                <div class="treeTop">
+                                    <dl class="special">
+                                        <dt>
+                                            <img src="./images/flower.png" alt="">
+                                        </dt>
+                                        <dd>
+                                            <p>品牌香水</p>
+                                            <p>￥355<span>￥500</span></p>
+                                        </dd>
+                                    </dl>
+                                </div>
+                                <div class="treeBottom">
+                                    <dl class="special">
+                                        <dt>
+                                            <img src="./images/flower.png" alt="">
+                                        </dt>
+                                        <dd>
+                                            <p>品牌香水</p>
+                                            <p>￥355<span>￥500</span></p>
+                                        </dd>
+                                    </dl>
+                                </div>
+                            </div>
+                            <div class="flower">
+                                <div class="flower-top">
+                                    <div class="tit">热卖品牌</div>
+                                </div>
+                                <div class="flower-bottom">
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                    <div class="team">
+                                        <img src="./images/big.png" alt="">
+                                        <div class="water">xx知名化妆品牌</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="end-Logo">
+                        <div class="picture">
+                            <img src="./images/big.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 页尾 -->
+        <div class="footer"></div>
+    </div>
+</body>
+</html>

day6/三角形.html

@@ -0,0 +1,19 @@
+<!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>
+      div {
+        width: 0;
+        height: 0;
+        border: 40px solid;
+        border-color: red transparent transparent transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>