first commit

历届学生/罗朝/项目练习/一号店/css/clear.css

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

历届学生/罗朝/项目练习/一号店/css/index.css

@@ -0,0 +1,573 @@
+.header {
+  background: #f4f4f4;
+  border-bottom: 1px solid #e5e5e5;
+  height: 30px;
+}
+.left_menu li{
+  float: left;
+  line-height: 30px;
+}
+.left_menu li:first-child:hover .drop_address{
+  display: block;
+}
+.left_menu .iconfont{
+  color: #ff4040
+}
+.icon-dizhi {
+  margin-left: 10px;
+}
+.left_menu p {
+  font-size: 12px;
+  padding-left: 3px;
+  vertical-align: bottom;
+  color: #666;
+}
+.left_menu li:last-child {
+  margin-left: 20px;
+}
+.left_menu li:fast-child {
+  position: relative;
+}
+.drop_address {
+  position: absolute;
+  border: 1px solid #dbdbdb;
+  background: #fff;
+  top: 30px;
+  padding: 15px 0px 15px 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: none;
+  z-index: 9999;
+}
+.search_city input{
+  width: 135px;
+  height: 26px;
+  padding: 0 8px 0 5px;
+  background: url("../img/address_search.png");
+  background-repeat: no-repeat;
+  background-position: 4px 5px;
+  box-sizing: border-box;
+  padding-left: 26px;
+  border: 1px solid #dbdbdb;
+}
+.search_city {
+  width: 100%;
+}
+.search_city span,
+.hot_city span,
+.find_city .chart_title {
+  font-size: 12px;
+  font-weight: bold;
+  color: #666;
+  padding-right: 10px;
+}
+.find_city span {
+  width: 22px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  color: gray;
+  font-size: 12px;
+  background: #eee;
+  margin-right: 5px;
+  padding-right: 0;
+  display: inline-block;
+}
+.chart span {
+  margin-top: 5px;
+  float: left;
+}
+.hot_city ul{
+  width: 600px;
+}
+.hot_city ul li{
+  padding: 0 21px 5px 0;
+}
+.hot_city ul li a{
+  font-size: 12px;
+}
+.hot_city {
+  overflow: hidden;
+    border-bottom: 1px dotted #e0e0e0;
+}
+.close {
+  right: 11px;
+  top: -2px;
+  color: #ccc;
+  font-size: 16px;
+}
+.right_menu li{
+  float: left;
+  line-height: 30px;
+  font-size: 12px;
+  color: #666;
+}
+.right_menu li a{
+  font-size: 12px;
+  color: #666;
+}
+.right_menu li:first-child {
+  margin: 0 10
+}
+.right_menu li:nth-child(2) {
+  margin-left:8px;
+}
+.right_menu li:nth-child(3) {
+  margin:0 15px;
+  border-left: 1px solid #f4f4f4;
+  border-right: 1px solid #f4f4f4;
+}
+.right_menu li:first-child a{
+  color: #ff4040;
+}
+.right_menu li:last-child {
+  padding: 0 7px;
+}
+.right_menu .iconfont {
+  vertical-align: top;
+}
+.logo{
+  margin-top: 1px;
+}
+.logo_center {
+  overflow: hidden;
+}
+.logo_new {
+  width: 140px;
+  height: 140px;
+}
+.logo_new_text {
+  width: 160px;
+  height: 90px;
+  right: 0;
+  top: 30px;
+}
+.logo_left {
+  position: relative;
+  width: 300px;
+  height: 140px;
+}
+
+.search_right {
+  padding-top: 50px;
+}
+.search_right_input input {
+  width: 100%;
+  border-radius: 100px;
+  height: 38px;
+  line-height: 38px;
+  color: #333;
+  background: #fcfcfc;
+  border: 1px solid #e2e2e2;
+  padding-left: 32px;
+  box-sizing: border-box;
+}
+.search_right_input {
+  width: 512px;
+}
+.cart_shop {
+  width: 120px;
+  height: 20px;
+  padding: 9px 0 9px;
+  border: 1px solid #e2e2e2;
+  border-radius: 100px;
+  background: #fff;
+  text-align: center;
+  line-height: 20px;
+  color: #333;
+  font-size: 16px;
+  margin-left: 17px;
+}
+.icon-sousuo {
+  right: 13px;
+  top: 6px;
+  font-size: 20px;
+}
+.icon-gouwuche {
+  font-size: 19px;
+}
+.search_list {
+  padding-top: 8px;
+  padding-left: 32px;
+}
+.search_list a{
+  color: #aaa;
+  font-size: 14px;
+  margin-right: 10px;
+  line-height: 19px;
+}
+.menu {
+  height: 38px;
+}
+.menu_center ul li {
+  float: left;
+  margin-left: 30px;
+  line-height: 38px;
+  position: relative;
+}
+
+.menu_center ul li .menu_dropmenu{
+  position: absolute;
+  width: 1070px;
+  height: 410px;
+  background: #ff0;
+  top: 38px;
+  background-color: #fff;
+  border: 1px solid #ff4040;
+  z-index: 99999;
+  display: none;
+}
+.menu_center .active:hover .menu_dropmenu {
+  display: block;
+}
+.menu_center ul li a{
+  font-size: 16px;
+  color: #333;
+}
+.menu_center .active {
+  width: 140px;
+  height: 38px;
+  text-align: center;
+  line-height: 38px;
+  font-size: 16px;
+  background-color: #ff4040;
+  box-sizing: border-box;
+}
+.menu_center .active a{
+  color: #fff;
+}
+.icon-caidan {
+  padding-right: 13px;
+  font-size: 12px;
+}
+.banner {
+  width: 100%;
+  height: 400px;
+  background: url("../img/banner_1.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;;
+}
+.banner ul {
+  left: 50%;
+  bottom: -10px;
+  margin-left: -300px;
+}
+.banner ul li {
+  float: left;
+  margin-right: 10px;
+  width: 110px;
+  height: 40px;
+  background: #fff;
+  text-align: center;
+  color: #333;
+  font-size: 14px;
+  line-height: 40px;
+}
+.on_active {
+  background-color: #333 !important;
+  color: #fff !important;
+}
+.advertisement {
+  height: 110px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.shop_list_center {
+  height: 362px;
+}
+
+.item {
+  width: 530px;
+  height: 362px;
+  margin-right: 10px;
+  background-color: #fff;
+  padding: 22px 20px 18px;
+  box-sizing: border-box;
+
+}
+.list_shop_items .item:last-child{
+  margin-right: 0px;
+}
+.item_title h3 {
+  font-size: 26px;
+  color: #493188;
+  margin-right: 7px;
+  float: left;
+}
+.item_title span {
+  font-size: 16px;
+  color: rgba(69,52,127,0.7);
+  display: inline-block;
+  height: 37px;
+  line-height: 37px;
+}
+.item_info {
+  width: 490px;
+  height: 130px;
+  margin-top: 21px;
+  background: url("../img/item_info_back.jpg");
+  background-size: cover;
+  box-sizing: border-box;
+}
+.item_info_zhezhao {
+  width: 490px;
+  height: 130px;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  z-index: 0;
+  opacity: .4;
+}
+.shop_titles,
+.info_title,
+.img_list {
+  z-index: 3;
+  margin-top: 25px;
+}
+.shop_titles {
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.img_list li {
+  float: left;
+  width: 80px;
+  height: 80px;
+  background: #fff;
+  margin-right: 10px;
+}
+.img_list li img {
+  width: 60px;
+  height: 60px;
+  margin: 10px 10px 10px 10px;
+  transition: all 0.2s ease-in;
+}
+
+.info_title .info_title_sub{
+  font-size: 18px;
+  color: #fff;
+  height: 18px;
+  font-weight: bold;
+  line-height: 18px;
+}
+.info_title_sp {
+  color: #fff;
+  font-size: 16px;
+  margin-top: 8px;
+  height: 16px;
+  line-height: 16px;
+  font-weight: lighter;
+}
+.enter {
+  width: 63px;
+  height: 23px;
+  border: 1px solid #fff;
+  border-radius: 100px;
+  margin-left: 20px;
+  font-size: 14px;
+  color: #fff;
+  text-indent: 12px;
+  line-height: 20px;
+  margin-top: 15px;
+  box-sizing: border-box;
+  cursor: pointer;
+  text-align: center;
+}
+.icon-jiantou1 {
+  font-size: 14px;
+}
+.img_list {
+  margin-left: 15px;
+}
+.gold_color{
+  color: #AC8602 !important;
+}
+.img_list li:hover img {
+  margin-left: 4px;
+}
+
+.imported_center {
+  background: #fff;
+  margin-top: 20px;
+  overflow: hidden;
+}
+.imported_center_left {
+  width: 899px;
+  height: 421px;
+  padding: 22px 20px 18px;
+  box-sizing: border-box;
+}
+.imported_center_right {
+  width: 170px;
+  height: 421px;
+  float: left;
+  border-left: 1px solid #f6f6f6;
+}
+.imported_center_left .item_title h3 {
+  color: #B77347;
+  font-weight: initial;
+}
+.imported_center_left .item_title span {
+  color: rgba(183,115,71,0.7);
+}
+
+.imported_list {
+  margin-top: 20px;
+}
+.list_hot {
+  width: 189px;
+  height: 334px;
+  background: url("../img/item_back.jpg") no-repeat;
+  background-size: cover;
+}
+.list_hot ul li {
+  width: 74px;
+  height: 23px;
+  text-align: center;
+  line-height: 23px;
+  color: #fff;
+  margin-right: 9px;
+  margin-bottom: 9px;
+  float: left;
+  background: #ecc5ab;
+  border: 1px solid #f7e8de;
+  font-size: 14px;
+  font-weight: lighter;
+}
+.list_hot ul{
+  padding-left: 14px;
+  padding-top: 20px;
+}
+.imported_list_items{
+  width: 335px;
+}
+.imported_list_items_top {
+  width: 100%;
+  height: 167px;
+  background-color: #faf7f6;
+}
+.items_top_left {
+  margin-top: 40px;
+  margin-left: 30px;
+}
+.items_top_left p {
+  color: #793a11;
+  font-size: 14px;
+}
+.items_top_left span {
+  font-size: 14px;
+  color: #b77347;
+}
+.items_top_left button {
+  margin-top: 15px;
+  color: #e49337;
+  text-align: center;
+  width: 78px;
+  height: 27px;
+  line-height: 25px;
+  background: #faf7f6;
+  border: 1px solid rgba(228,147,55,0.5) !important;
+}
+.items_top_left+img{
+  margin-top: 40px;
+  width: 110px;
+  height: 110px;
+  float: right;
+  margin-right: 30px;
+}
+.items_bottom_left {
+  width: 167px;
+  height: 167px;
+  position: relative;
+  border-right: 1px solid #f6f6f6;
+}
+.items_bottom_left img {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 90px;
+  height: 90px;
+}
+.s_ti {
+  margin-top: 15px;
+  margin-left: 15px;
+}
+.s_ti p {
+  font-size: 14px;
+  color:#666;
+  font-weight: 300;
+}
+.s_ti span {
+  font-size: 14px;
+  color:#666;
+  font-weight: bolder;
+}
+.clear_border {
+  border: none;
+}
+
+.imported_center_right {
+  background: url("../img/paihangbang.png") no-repeat;
+  background-size: 71px 71px;
+  background-position: right top;
+}
+.imported_center_right p {
+  font-size: 16px;
+  margin-top: 20px;
+  margin-left: 20.5px;
+  color: #333;
+  margin-bottom: 7px;
+}
+.imported_center_right span {
+  font-size: 14px;
+  margin-left: 20.5px;
+  color: #999;
+}
+.imported_center_right ul li {
+  width: 90px;
+  height: 90px;
+  position: relative;
+  background-color: #fff;
+  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.07);
+  margin-bottom: 11px;
+}
+.imported_center_right ul li img{ 
+  margin-top: 15px;
+  margin-left: 15px;
+  width: 60px;
+  height: 60px;
+}
+.imported_center_right ul li div {
+  position: absolute;
+  font-size: 12px;
+  color: #fff;
+  width: 40px;
+  height: 16px;
+  text-align: center;
+  font-weight: bold;
+  left: 0;
+  top: 0;
+}
+.imported_center_right ul li:first-child div {
+  background: url("../img/top1.png") no-repeat;
+  background-size: cover;
+}
+.imported_center_right ul li:nth-child(2) div {
+  background: url("../img/top2.png") no-repeat;
+  background-size: cover;
+}
+.imported_center_right ul li:last-child div {
+  background: url("../img/top3.png") no-repeat;
+  background-size: cover;
+}
+
+.imported_center_right ul{
+  margin: 0 auto;
+  width: 90px;
+  margin-top: 13px;
+}

历届学生/罗朝/项目练习/一号店/css/public.css

@@ -0,0 +1,43 @@
+/* 公共的使用次数比较多的css代码 */
+
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+.back-fff{
+  background: #fff;
+}
+.width-1070 {
+  width: 1070px;
+}
+.margin-auto {
+  margin: auto;
+}
+
+.display-block {
+  display: inline-block;
+}
+.position-relative {
+  position: relative;
+}
+.position-absolute {
+  position: absolute;
+}
+.overflow-hidden{
+  overflow: hidden;
+}
+
+
+.margin-left-transition {
+  transition: all 0.6s;
+}
+
+.margin-left-start:hover {
+  margin-right: 40px;
+}
+
+.lef-start:hover {
+  right: 20px;
+}

历届学生/罗朝/项目练习/一号店/index.html

@@ -0,0 +1,673 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./css/clear.css">
+  <link rel="stylesheet" href="./css/public.css">
+  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1137546_y5ssb5pudm.css">
+
+  <link rel="stylesheet" href="./css/index.css">
+  <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
+
+  <title>1号店(yhd.com)_全球超市，轻松到家！</title>
+</head>
+<body>
+  
+
+  <div class="main">
+    <!-- 网站最顶部的导航 -->
+    <div class="header">
+      <div class="header_center width-1070 margin-auto">
+        <ul class="left_menu">
+          <li>
+            <i class="iconfont icon-dizhi left"></i>
+            <p class="left">送货地址：上海</p>
+            <div class="drop_address">
+              <div class="search_city position-relative">
+                <span>搜索城市：</span>
+                <input type="text" placeholder="请输入城市名称">
+                <div class="close position-absolute">X</div>
+              </div>
+              <div class="hot_city">
+                <span class="left">热门城市：</span>
+                <ul class="left">
+                  <li><a href="">上海市</a></li>
+                  <li><a href="">上海市</a></li>
+                  <li><a href="">上海市</a></li>
+                  <li><a href="">上海市</a></li>
+                  <li><a href="">上海市</a></li>
+                  <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>
+                </ul>
+              </div>
+              <div class="find_city">
+                <div class="chart_title left">按字母查找 </div>
+               <div class="chart left">
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+                 <span>A</span>
+               </div>
+              </div>
+              <br>
+              <div class="hot_city">
+                  <span class="left">热门城市：</span>
+                  <ul class="left">
+                    <li><a href="">上海市</a></li>
+                    <li><a href="">上海市</a></li>
+                    <li><a href="">上海市</a></li>
+                    <li><a href="">上海市</a></li>
+                    <li><a href="">上海市</a></li>
+                    <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>
+                  </ul>
+                </div>
+            </div>
+          </li>
+          <li>
+            <i class="iconfont icon-laba left"></i>
+            <p class="left">网警提示</p>
+          </li>
+        </ul>
+        <ul class="right_menu right">
+          <li>
+            晚上好,请 <a href="">登录</a>
+          </li>
+          <li>
+            <a href="">注册</a>
+          </li>
+          <li>
+            <i class="iconfont icon-wode"></i>
+            <a href="">会员俱乐部</a>
+          </li>
+          <li>
+            <i class="iconfont icon-dingdan"></i>
+            <a href="">我的订单</a>
+          </li>
+        </ul>
+      </div>
+      
+    </div>
+    <!-- logo和搜索部分 -->
+    <div class="logo back-fff">
+      <div class="logo_center width-1070 margin-auto">
+        <div class="logo_left left">
+          <img class="logo_new" src="./img/logo_new@2x.png" alt="">
+          <img class="logo_new_text position-absolute" src="./img/logo_new_text.jpg" alt="">
+        </div>
+        <div class="search_right right">
+          <div class="search_right_input left position-relative">
+            <input type="text" placeholder="飞利浦空气净化器">
+            <i class="iconfont icon-sousuo position-absolute"></i>
+            <div class="search_list">
+              <a href="">半导体</a>
+              <a href="">半导体</a>
+              <a href="">半导体</a>
+              <a href="">半导体</a>
+              <a href="">半导体</a>
+              <a href="">半导体</a>
+              <a href="">半导体</a>
+            </div>
+          </div>
+          <div class="cart_shop left">
+            <i class="iconfont icon-gouwuche"></i>
+            购物车
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 下拉菜单部分 -->
+    <div class="menu back-fff">
+     <div class="menu_center width-1070 margin-auto">
+        <ul>
+          <li class="active">
+            <a href="">
+              <i class="iconfont icon-caidan"></i>
+              全部类目
+              <i class="iconfont icon-jiantou"></i>
+            </a>
+            <div class="menu_dropmenu">
+
+            </div>
+          </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 class="banner position-relative">
+      <ul class="position-absolute">
+        <li class="on_active">健康早餐</li>
+        <li>休闲零食</li>
+        <li>个人清洁</li>
+        <li>喜力</li>
+        <li>DW</li>
+      </ul>
+    </div>
+
+    <div class="advertisement overflow-hidden">
+      <div class="advertisement_center width-1070 margin-auto">
+        <img src="./img/adb.png" alt="adb">
+      </div>
+    </div>
+
+    <div class="shop_list">
+      <div class="shop_list_center width-1070 margin-auto">
+        <!-- 超级品牌 -->
+        <div class="list_shop_items">
+          <div class="item left">
+            <a href="" class="item_title">
+              <h3>超级品牌</h3>
+              <span>/ 超级品牌/精品汇聚</span>
+            </a>
+            <div class="item_info position-relative">
+              <div class="item_info_zhezhao position-absolute"></div>
+              
+              <img class="shop_titles position-relative  left" src="./img/user_logos.jpg" alt="">
+              <div class="info_title position-relative  left">
+                <div class="info_title_sub">百事食品专场</div>
+                <div class="info_title_sp">欢乐钜惠</div>
+                <div class="enter">
+                  进入 <i class="iconfont icon-jiantou1"></i>
+                </div>
+              </div>
+              <ul class="img_list left position-relative">
+                <li><img src="./img/1.jpg" alt=""></li>
+                <li><img src="./img/2.png" alt=""></li>
+                <li><img src="./img/3.jpg" alt=""></li>
+              </ul>
+            </div>
+            <div class="item_info position-relative">
+                <div class="item_info_zhezhao position-absolute"></div>
+                
+                <img class="shop_titles position-relative  left" src="./img/user_logos.jpg" alt="">
+                <div class="info_title position-relative  left">
+                  <div class="info_title_sub">百事食品专场</div>
+                  <div class="info_title_sp">欢乐钜惠</div>
+                  <div class="enter">
+                    进入 <i class="iconfont icon-jiantou1"></i>
+                  </div>
+                </div>
+                <ul class="img_list left position-relative">
+                  <li><img src="./img/1.jpg" alt=""></li>
+                  <li><img src="./img/2.png" alt=""></li>
+                  <li><img src="./img/3.jpg" alt=""></li>
+                </ul>
+              </div>
+          </div>
+          <div class="item left">
+              <a href="" class="item_title">
+                <h3 class="gold_color">超级品牌</h3>
+                <span class="gold_color">/ 超级品牌/精品汇聚</span>
+              </a>
+              <div class="item_info position-relative">
+                <div class="item_info_zhezhao position-absolute"></div>
+                
+                <img class="shop_titles position-relative  left" src="./img/user_logos.jpg" alt="">
+                <div class="info_title position-relative  left">
+                  <div class="info_title_sub">百事食品专场</div>
+                  <div class="info_title_sp">欢乐钜惠</div>
+                  <div class="enter">
+                    进入 <i class="iconfont icon-jiantou1"></i>
+                  </div>
+                </div>
+                <ul class="img_list left position-relative">
+                  <li><img src="./img/1.jpg" alt=""></li>
+                  <li><img src="./img/2.png" alt=""></li>
+                  <li><img src="./img/3.jpg" alt=""></li>
+                </ul>
+              </div>
+              <div class="item_info position-relative">
+                  <div class="item_info_zhezhao position-absolute"></div>
+                  
+                  <img class="shop_titles position-relative  left" src="./img/user_logos.jpg" alt="">
+                  <div class="info_title position-relative  left">
+                    <div class="info_title_sub">百事食品专场</div>
+                    <div class="info_title_sp">欢乐钜惠</div>
+                    <div class="enter">
+                      进入 <i class="iconfont icon-jiantou1"></i>
+                    </div>
+                  </div>
+                  <ul class="img_list left position-relative">
+                    <li><img src="./img/1.jpg" alt=""></li>
+                    <li><img src="./img/2.png" alt=""></li>
+                    <li><img src="./img/3.jpg" alt=""></li>
+                  </ul>
+                </div>
+            </div>
+        </div>
+
+
+      </div>
+    </div>
+
+    <div class="imported">
+      <div class="imported_center width-1070 margin-auto">
+        <div class="imported_center_left left">
+            <a href="" class="item_title">
+              <h3>品质进口</h3>
+              <span>/ 给你完美生活</span>
+            </a>
+
+            <div class="imported_list">
+              <div class="list_hot left">
+                <ul>
+                  <li>进口饼干</li>
+                  <li>进口牛奶</li>
+                  <li>进口水</li>
+                  <li>进口糖巧</li>
+                  <li>葡萄酒</li>
+                  <li>进口油</li>
+                </ul>
+              </div>
+              <div class="imported_list_items left">
+                <div class="imported_list_items_top">
+                  <div class="items_top_left left">
+                    <p>进口休闲零食</p>
+                    <span>爆款直降</span> <br>
+                    <button>点击进入</button>
+                  </div>
+                  <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                </div>
+                <div class="imported_list_items_bottom">
+                  <div class="items_bottom_left left">
+                    <div class="s_ti">
+                      <p>恒都澳洲牛腩</p>
+                      <span>￥26.8</span>
+                    </div>
+                    <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                  </div>
+                  <div class="items_bottom_left clear_border left">
+                    <div class="s_ti">
+                      <p>恒都澳洲牛腩</p>
+                      <span>￥26.8</span>
+                    </div>
+                    <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                  </div>
+                </div>
+              </div>
+              <div class="imported_list_items left">
+                  <div class="imported_list_items_bottom overflow-hidden">
+                    <div class="items_bottom_left left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                    </div>
+                    <div class="items_bottom_left clear_border left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                    </div>
+                  </div>
+                  <div class="imported_list_items_top">
+                    <div class="items_top_left left">
+                      <p>进口休闲零食</p>
+                      <span>爆款直降</span> <br>
+                      <button>点击进入</button>
+                    </div>
+                    <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                  </div>
+              </div>
+            </div>
+        </div>
+        <div class="imported_center_right left">
+          <p>进口食品热销榜 </p>
+          <span>爆款热卖 实时更新</span>
+          <ul>
+            <li>
+              <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+              <div>TOP1</div>
+            </li>
+            <li>
+              <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+              <div>TOP2</div>
+            </li>
+            <li>
+              <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+              <div>TOP3</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="imported">
+        <div class="imported_center width-1070 margin-auto">
+          <div class="imported_center_left left">
+              <a href="" class="item_title">
+                <h3>品质进口</h3>
+                <span>/ 给你完美生活</span>
+              </a>
+  
+              <div class="imported_list">
+                <div class="list_hot left">
+                  <ul>
+                    <li>进口饼干</li>
+                    <li>进口牛奶</li>
+                    <li>进口水</li>
+                    <li>进口糖巧</li>
+                    <li>葡萄酒</li>
+                    <li>进口油</li>
+                  </ul>
+                </div>
+                <div class="imported_list_items left">
+                  <div class="imported_list_items_top">
+                    <div class="items_top_left left">
+                      <p>进口休闲零食</p>
+                      <span>爆款直降</span> <br>
+                      <button>点击进入</button>
+                    </div>
+                    <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                  </div>
+                  <div class="imported_list_items_bottom">
+                    <div class="items_bottom_left left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                    </div>
+                    <div class="items_bottom_left clear_border left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                    </div>
+                  </div>
+                </div>
+                <div class="imported_list_items left">
+                    <div class="imported_list_items_bottom overflow-hidden">
+                      <div class="items_bottom_left left">
+                        <div class="s_ti">
+                          <p>恒都澳洲牛腩</p>
+                          <span>￥26.8</span>
+                        </div>
+                        <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                      </div>
+                      <div class="items_bottom_left clear_border left">
+                        <div class="s_ti">
+                          <p>恒都澳洲牛腩</p>
+                          <span>￥26.8</span>
+                        </div>
+                        <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                      </div>
+                    </div>
+                    <div class="imported_list_items_top">
+                      <div class="items_top_left left">
+                        <p>进口休闲零食</p>
+                        <span>爆款直降</span> <br>
+                        <button>点击进入</button>
+                      </div>
+                      <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                    </div>
+                </div>
+              </div>
+          </div>
+          <div class="imported_center_right left">
+            <p>进口食品热销榜 </p>
+            <span>爆款热卖 实时更新</span>
+            <ul>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP1</div>
+              </li>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP2</div>
+              </li>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP3</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+    </div>    
+
+    <div class="imported">
+        <div class="imported_center width-1070 margin-auto">
+          <div class="imported_center_left left">
+              <a href="" class="item_title">
+                <h3>品质进口</h3>
+                <span>/ 给你完美生活</span>
+              </a>
+  
+              <div class="imported_list">
+                <div class="list_hot left">
+                  <ul>
+                    <li>进口饼干</li>
+                    <li>进口牛奶</li>
+                    <li>进口水</li>
+                    <li>进口糖巧</li>
+                    <li>葡萄酒</li>
+                    <li>进口油</li>
+                  </ul>
+                </div>
+                <div class="imported_list_items left">
+                  <div class="imported_list_items_top">
+                    <div class="items_top_left left">
+                      <p>进口休闲零食</p>
+                      <span>爆款直降</span> <br>
+                      <button>点击进入</button>
+                    </div>
+                    <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                  </div>
+                  <div class="imported_list_items_bottom">
+                    <div class="items_bottom_left left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                    </div>
+                    <div class="items_bottom_left clear_border left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                    </div>
+                  </div>
+                </div>
+                <div class="imported_list_items left">
+                    <div class="imported_list_items_bottom overflow-hidden">
+                      <div class="items_bottom_left left">
+                        <div class="s_ti">
+                          <p>恒都澳洲牛腩</p>
+                          <span>￥26.8</span>
+                        </div>
+                        <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                      </div>
+                      <div class="items_bottom_left clear_border left">
+                        <div class="s_ti">
+                          <p>恒都澳洲牛腩</p>
+                          <span>￥26.8</span>
+                        </div>
+                        <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                      </div>
+                    </div>
+                    <div class="imported_list_items_top">
+                      <div class="items_top_left left">
+                        <p>进口休闲零食</p>
+                        <span>爆款直降</span> <br>
+                        <button>点击进入</button>
+                      </div>
+                      <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                    </div>
+                </div>
+              </div>
+          </div>
+          <div class="imported_center_right left">
+            <p>进口食品热销榜 </p>
+            <span>爆款热卖 实时更新</span>
+            <ul>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP1</div>
+              </li>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP2</div>
+              </li>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP3</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+    </div>    
+  
+    <div class="imported">
+        <div class="imported_center width-1070 margin-auto">
+          <div class="imported_center_left left">
+              <a href="" class="item_title">
+                <h3>品质进口</h3>
+                <span>/ 给你完美生活</span>
+              </a>
+  
+              <div class="imported_list">
+                <div class="list_hot left">
+                  <ul>
+                    <li>进口饼干</li>
+                    <li>进口牛奶</li>
+                    <li>进口水</li>
+                    <li>进口糖巧</li>
+                    <li>葡萄酒</li>
+                    <li>进口油</li>
+                  </ul>
+                </div>
+                <div class="imported_list_items left">
+                  <div class="imported_list_items_top">
+                    <div class="items_top_left left">
+                      <p>进口休闲零食</p>
+                      <span>爆款直降</span> <br>
+                      <button>点击进入</button>
+                    </div>
+                    <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                  </div>
+                  <div class="imported_list_items_bottom">
+                    <div class="items_bottom_left left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                    </div>
+                    <div class="items_bottom_left clear_border left">
+                      <div class="s_ti">
+                        <p>恒都澳洲牛腩</p>
+                        <span>￥26.8</span>
+                      </div>
+                      <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                    </div>
+                  </div>
+                </div>
+                <div class="imported_list_items left">
+                    <div class="imported_list_items_bottom overflow-hidden">
+                      <div class="items_bottom_left left">
+                        <div class="s_ti">
+                          <p>恒都澳洲牛腩</p>
+                          <span>￥26.8</span>
+                        </div>
+                        <img class="margin-left-transition lef-start" src="./img/sss.jpg" alt="">
+                      </div>
+                      <div class="items_bottom_left clear_border left">
+                        <div class="s_ti">
+                          <p>恒都澳洲牛腩</p>
+                          <span>￥26.8</span>
+                        </div>
+                        <img class="margin-left-transition lef-start" src="./img/cede.jpg" alt="">
+                      </div>
+                    </div>
+                    <div class="imported_list_items_top">
+                      <div class="items_top_left left">
+                        <p>进口休闲零食</p>
+                        <span>爆款直降</span> <br>
+                        <button>点击进入</button>
+                      </div>
+                      <img class="margin-left-transition margin-left-start" src="./img/items.png" alt="">
+                    </div>
+                </div>
+              </div>
+          </div>
+          <div class="imported_center_right left">
+            <p>进口食品热销榜 </p>
+            <span>爆款热卖 实时更新</span>
+            <ul>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP1</div>
+              </li>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP2</div>
+              </li>
+              <li>
+                <img src="./img/5af8f2dbN57a92e01.jpg" alt="">
+                <div>TOP3</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+    </div>  
+  
+    <!-- 这里面是网站主体内容 -->
+
+
+    <!-- 版权部分 -->
+    <div class="footer"></div>
+  </div>
+
+
+</body>
+</html>