第九天笔记

前端项目学习

项目目录

xtx-pc
- images文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
- uploads文件夹：存放非固定使用的图片素材，例如：商品图、宣传图、需要上传的图片
- iconfont文件夹：字体图标素材
- css 文件夹：存放CSS文件(link标签引入)
  - base.css：基础公共样式(最先引入)
  - common.css：各个网页相同模块的重复样式，例如：头部、底部
  - index.css：首页CSS样式
- index.html：首页HTML文件

SEO（搜索引擎优化）

提升 SEO 的常见方法：

竞价排名
将网页制作成 html 后缀
标签语义化
……

网页头部 SEO 标签

title：网页标题标签
description：网页描述
keywords：网页关键词

<meta name="description" content="xxx">
<meta name="keywords" content="xxx">
<title>xxx</title>

Favicon 图标

Favicon图标：网页图标，出现在浏览器标题栏，增加网站辨识度。

图标：favition.ico 一般存放到网站的根目录里面

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

版心

wrapper 版心宽度：1240px

common.css 设置即可

头部

结构：.header > logo + 导航（nav） + 搜索（search） + 购物车（cart）

注意

logo：使用 h1 > a，a放关键字并设置字号 0px 来提升搜索引擎优化
导航：下边界线加给 a 而不是 hover，确保悬停时从下间距开始显示边界线
搜索：浏览器解析 input 优先生效自己的默认宽度，宽度设置为 0 重置宽度使 flex: 1生效
购物车：子绝父相中 left 默认向右撑开，right默认向左撑开

底部

index 区域

新鲜好物（goods）

结构：标题（title） + 内容（bd）

提示：多区域样式共用

同上

生鲜（fresh）

标题结构：右侧（right） > 菜单（ul） ＋查看全部

代码

base.css

/* 去除常见标签默认的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5  "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

common.css

/* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper {
  margin: 0 auto;
  width: 1240px;
}

/* 快捷导航 */
.shortcut {
  height: 52px;
  background-color: #333;
}

.shortcut .wrapper {
  display: flex;
  justify-content: end;

  height: 52px;
  /* background-color: pink; */
}

.shortcut ul {
  display: flex;
  line-height: 52px;
}


.shortcut li a {
  padding: 0 15px;
  border-right: 1px solid #999;
  font-size: 14px;
  color: #fff;
}

.shortcut li:last-child a {
  border-right: none;
}

.shortcut li .iconfont {
  margin-right: 4px;
  vertical-align: middle;
}

.shortcut li .login {
  color: #5Eb69c;
}


/* 头部区域 */
.header {
  display: flex;
  margin-top: 22px;
  margin-bottom: 22px;
  height: 88px;
  /* background-color: pink; */
}

/* logo区域 */
.logo {
  margin-right: 40px;
  width: 200px;
  height: 88px;
  /* background-color: blue; */
}

.logo a {
  display: block;
  width: 200px;
  height: 88px;
  font-size: 0px;
  background-image: url(../images/logo.png);
}

/* 导航区域 */
.nav {
  margin-top: 33px;
  margin-right: 28px;
}

.nav ul {
  display: flex;
}

.nav li {
  margin-right: 47px;
}

.nav li a {
  padding-bottom: 10px;
}

.nav li a:hover {
  border-bottom: 2px solid #5EB69C;
  color: #5EB69C;
}

/* 搜索区域 */
.search {
  display: flex;
  margin-top: 33px;
  margin-right: 45px;
  width: 170px;
  height: 34px;
  border-bottom: 2px solid #F4F4F4;
}

.search .iconfont {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  color: #CCC;
}

.search input {
  flex: 1;
  width: 0;
}

.search input::placeholder {
  font-size: 16px;
  color: #CCC;
}


/* 购物车区域 */
.cart {
  position: relative;
  margin-top: 32px;
}

.cart .iconfont {
  font-size: 24px;
}

.cart i {
  position: absolute;
  top: 1px;
  left: 15px;
  padding: 0 6px;
  height: 15px;
  background-color: #E26237;
  border-radius: 8px;
  font-size: 14px;
  color: #FFFEFE;
  line-height: 15px;
}


/* 底部区域 */
.footer {
  height: 580px;
  background-color: #F5F5F5;
}

/* 服务区域 */
.service {
  padding: 60px 0;
  height: 178px;
  border-bottom: 1px solid #E8E8E8;
}

.service ul {
  display: flex;
  justify-content: space-evenly;
}

.service li {
  display: flex;
  width: 190px;
  height: 58px;
  /* background-color: pink; */
}

.service li h5 {
  margin-right: 20px;
  width: 58px;
  height: 58px;
  background-image: url(../images/sprite.png);
}

.service li p {
  font-size: 28px;
  line-height: 58px;
}

.service li:nth-child(2) h5 {
  background-position: 0 -58px;
}

.service li:nth-child(3) h5 {
  background-position: 0 -116px;
}

.service li:nth-child(4) h5 {
  background-position: 0 -174px;
}

/* 帮助中心区域 */
.help {
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  padding: 60px 0;
  height: 300px;
  /* background-color: pink; */
}

.help .left {
  display: flex;
}

.help .left dl {
  margin-right: 84px;
}

.help .left dl:last-child {
  margin-right: 0;
}

.help .left dt {
  margin-bottom: 30px;
  font-size: 18px;
}

.help .left dd {
  margin-bottom: 10px;
}

.help .left a {
  color: #969696
}

.help .left a:hover {
  color: #5Eb69c
}

.help .left .iconfont {
  color: #5Eb69c;
}

.help .right ul {
  display: flex;
}

.help .right li:first-child {
  margin-right: 55px;
}

.help .right .pic {
  margin-bottom: 10px;
  width: 120px;
  height: 120px;
}

.help .right p {
  color: #969696;
  text-align: center;
}

/* 版权区域 */
.copywrite {
  text-align: center;
}

.copywrite p {
  margin-bottom: 10px;
  color: #969696;
}

.copywrite p a {
  margin: 0 10px;
  color: #969696;
}

index.css

/* 首页内容的样式 */

/* banner 区域 */
.banner {
  height: 500px;
  background-color: #f5f5f5;
}

.banner .wrapper {
  position: relative;
  height: 500px;
  /* background-color: pink; */
  /* 为了避免三张图片都显示，父级可以设置溢出隐藏属性 */
  overflow: hidden;
}

.banner .pic {
  display: flex;
  /* flex布局的关系。子级图片会被挤小，想要原图的效果则加宽 */
  width: 3720px;
}

/* 侧导航区域 */
.subnav {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.42);
}

.subnav li {
  display: flex;
  justify-content: space-between;
  padding-left: 30px;
  padding-right: 12px;
  height: 50px;
  /* background-color: pink; */
  line-height: 50px;
  color: #FFF;

  cursor: pointer;
}

.subnav li a {
  margin-right: 5px;
  font-size: 14px;
  color: #fff;    
}

.subnav li .classify {
  margin-right: 14px;
  font-size: 16px;
}

.subnav li .iconfont {
  font-size: 14px;
}

.subnav li:hover {
  background-color: #00be9a;
}

/* 圆点指示器 */
.banner ol {
  display: flex;
  position: absolute;
  bottom: 17px;
  right: 16px;
}

.banner ol li {
  margin-left: 8px;
  width: 22px;
  height: 22px;
  /* background-color: pink; */
  border-radius: 50%;
  cursor: pointer;
}

.banner ol li i {
  display: block;
  margin: 4px;
  width: 14px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

/* 选中转态 li 半透明，i 白色 */
.banner ol .current {
  background-color: rgba(255, 255, 255, 0.5);
}

.banner ol .current i {
  background-color: rgba(255, 255, 255);
}


/* 公共样式 */
/* 新鲜好物区域 */
.title {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 30px;
  height: 42px;
  /* background-color: pink; */
}

.title .left {
  display: flex;
}

.title .left h3 {
  margin-right: 35px;
  font-size: 30px;
}

.title .left p {
  align-self: flex-end;
  color: #A1A1A1;
}

.title .right .more {
  line-height: 42px;
  color: #A1A1A1;
}

.title .right .more .iconfont {
  margin-left: 10px;
}

/* 好物内容 */
.bd ul {
  display: flex;
  justify-content: space-between;
}

.bd li {
  width: 304px;
  height: 404px;
  background-color: #EEF9F4;
}

.bd li pic {
  width: 304px;
  height: 304px;
}

.bd li .txt {
  text-align: center;
}

.bd li h4 {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 20px;
}

.goods .bd p {
  font-size: 18px;
  color: #AA2113;
}

.goods .bd p span {
  margin-left: 3px;
  font-size: 22px;
}

/* 人气推荐区域 */
.recommend bd li {
  background-color: #fff;
}

.recommend bd p {
  color: #A1A1A1;
}

/* 热门品牌区域 */
.brand {
  margin-top: 60px;
  height: 468px;
  background-color: #F5F5F5;
}

.brand .wrapper {
  overflow: hidden;
  height: 468px;
  /* background-color: pink; */
}

.brand .title {
  position: relative;
  margin-bottom: 40px;
}

.brand .button {
  display: flex;
  position: absolute;
  bottom: -25px;
  right: 0;
}

.brand .button a {
  margin-left: 12px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: #fff;
}

.brand .button .prev {
  background-color: #ddd;
}

.brand .button .next {
  background-color: #00BE9A;
}

.brand .bd li {
  width: 244px;
  height: 306px;
}

/* 生鲜区域 */
.fresh .title {
  margin-top: 60px;
  margin-bottom: 20px;
}

.title .right {
  display: flex;
}

.title .right ul {
  display: flex;
  margin-right: 58px;
  margin-top: 10px;
}

.title .right a {
  display: block;
  margin-left: 6px;
  padding: 0 7px;
  height: 20px;
  line-height: 20px;
}

.title .right ul .active {
  background-color: #00BE9A;
  color: #fff;
}

/* 生鲜内容区域 */
.content {
  display: flex;
  justify-content: space-between;
}

.content .left {
  width: 248px;
  height: 610px;
}

.content .right {
  width: 968px;
  height: 610px;
}

.content .right ul {
  display: flex;
  flex-wrap: wrap;
}

.content .right li {
  position: relative;
  padding: 10px 21px 0;
  width: 242px;
  height: 305px;
  border: 2px solid #fff;
  
  /* 为了隐藏绿色的cover */
  overflow: hidden;
}

.content .pic {
  width: 200px;
  height: 180px;
}

.content .info {
  margin-top: 14px;
  margin-bottom: 5px;
  height: 60px;
  line-height: 19px;
}

.content .price {
  color: #AF2F22;
}

.content .price span {
  font-size: 22px;
}

/* 产品底部绿色区域 */
.content li .cover {
  position: absolute;
  left: 0;
  bottom: -86px;
  padding-top: 15px; 
  width: 242px;
  height: 84px;
  background-color: #00BE9A;
  text-align: center;
  color: #fff;
  transition: all 0.5s;
}

.content .cover p:nth-child(1) {
  font-size: 18px;
}

.content .cover p:nth-child(2) {
  margin: 3px auto 6px;
  width: 120px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.11);
}

.content .cover p:nth-child(3) {
  font-size: 13px;
}

.content .cover p:nth-child(3) .iconfont {
  font-size: 14px;
}

/* 默认鼠标悬停到 li 显示cover */
.content .right li:hover .cover {
  bottom: 0;
}

.content .right li:hover {
  border: 2px solid #00BE9A;
}


/* 最新专题区域 */
.topic {
  margin-bottom: 40px;
}

.topic .title {
  margin-top: 100px;
}

.topic-bd ul {
  display: flex;
  justify-content: space-between;
}

.topic-bd li {
  width: 405px;
  height: 355px;
  /* background-color: pink; */
}

.topic-bd .pic {
  position: relative;
  width: 405px;
  height: 288px;
}

.topic-bd .txt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  width: 405px;
  height: 67px;
  font-size: 14px;
  color: #666;
}

.topic-bd .txt .left {
  display: flex;
}

.topic-bd .txt .left p {
  margin-right: 20px;
}

.topic-bd .txt .left p:nth-child(1) {
  color: #AF2F22;
}

/* 定位区域 - 文字 */
.topic-bd .cover {
  position: absolute;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 15px;
  width: 405px;
  height: 90px;
  background-image: linear-gradient(180deg, rgba(137,137,137,0.00) 0%, rgba(0,0,0,0.90) 100%);
}

.topic-bd .cover .left {
  color: #fff;
}

.topic-bd .cover .left h4 {
  margin-bottom: 4px;
  font-size: 20px;
}

.topic-bd .cover .right {
  padding: 0 7px;
  height: 25px;
  background-color: #fff;
  color: #AA2113;
  font-size: 15px;
}

.topic-bd .cover .right span {
  font-size: 18px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 导航区域 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#" class="login">请先登录</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="#"><span class="iconfont icon-mobile-phone"></span>请先登录</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部区域 -->
  <div class="header wrapper">
    <!-- logo区域 -->
    <div class="logo">
      <h1><a href="#">小兔鲜</a></h1>
    </div>
    <!-- 导航区域 -->
    <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>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <!-- 搜索区域 -->
    <div class="search">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜">
    </div>
    <!-- 购物车区域 -->
    <div class="cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div>
  </div>

  <!-- banner 区域 -->
  <div class="banner">
    <div class="wrapper">
      <!-- 图片 --> 
      <ul class="pic">
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
      </ul>
      <!-- 侧导航 -->
      <div class="subnav">
        <ul>
          <li>
            <div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">没事</a><a href="#">面点</a><a href="#">干果</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">居家</a><a href="#">玩具</a><a href="#">奶粉</a><a href="#">辅食</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
        </ul>
      </div>
      <!-- 圆点指示器 -->
      <ol>
        <li class="current"><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
      </ol>
    </div>
  </div>

  <!-- 新鲜好物区域 -->
  <div class="goods wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>新鲜好物</h3>
        <p>新鲜出炉 品质靠谱</p>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
            <div class="txt">
              <h4>KN95级莫兰迪色防护口罩</h4>
              <p>￥<span>79</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods2.png" alt=""></div>
            <div class="txt">
              <h4>紫檀外独板三层普洱茶盒</h4>
              <p>￥<span>566</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
            <div class="txt">
              <h4>法拉蒙高颜值记事本可定制</h4>
              <p>￥<span>58</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
            <div class="txt">
              <h4>科技布布艺沙发</h4>
              <p>￥<span>3579</span></p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 人气推荐区域 -->
  <div class="recommend wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>人气推荐</h3>
        <p>人气爆款 不容错过</p>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend1.png" alt=""></div>
            <div class="txt">
              <h4>特惠推荐</h4>
              <p>￥<span>我猜得到 你的想要</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend2.png" alt=""></div>
            <div class="txt">
              <h4>爆款推荐</h4>
              <p>￥<span>人气好物推荐</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend3.png" alt=""></div>
            <div class="txt">
              <h4>节日礼品一站买全</h4>
              <p>￥<span>编辑尽心整理推荐</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/recommend4.png" alt=""></div>
            <div class="txt">
              <h4>鲜花园艺</h4>
              <p>￥<span>给生活增加仪式感</span></p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 热门品牌区域 -->
  <div class="brand">
    <div class="wrapper">
      <!-- 标题 -->
      <div class="title">
        <div class="left">
          <h3>热门品牌</h3>
          <p>国际经典 品质认证</p>
        </div>
        <div>
          <div class="button">
            <a href="#" class="prev">
              <i class="iconfont icon-arrow-left-bold"></i>
            </a>
            <a href="#" class="next">
              <i class="iconfont icon-arrow-right-bold"></i>
            </a>
          </div>
        </div>
      </div>
      <!-- 内容 -->
       <div class="bd">
        <ul>
          <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
          <li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
        </ul>
       </div>
    </div>
  </div>

  <!-- 生鲜区域 -->
  <div class="fresh wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>生鲜</h3>
      </div>
      <div class="right">
        <ul>
          <li><a href="#" class="active">热门</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>
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="left">
        <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>双味千层，手抓饼烤肉组合</h4>
                  <p>240g/袋 4片装</p>
                  <p>加热即食</p>
                </div>
                <p class="price">￥<span>89.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh2.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>云南甘蔗慢熬红糖馒头</h4>
                  <p>220g/袋 5个装</p>
                  <p>加热即食</p>
                </div>
                <p class="price">￥<span>9.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh3.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>日式风味小圆饼</h4>
                  <p>圆形【海盐味】</p>
                  <p>糖果零食</p>
                </div>
                <p class="price">￥<span>588.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh4.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>全麦奶油浓香小面包</h4>
                  <p>50g*12袋</p>
                  <p>美味西点</p>
                </div>
                <p class="price">￥<span>69.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh5.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>秘制外皮五福摩提大福点心</h4>
                  <p>150g/盒</p>
                  <p>美味西点</p>
                </div>
                <p class="price">￥<span>39.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh6.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>水果面膜韩国蜂蜜柚子茶</h4>
                  <p>560g/瓶</p>
                  <p>冲调饮品</p>
                </div>
                <p class="price">￥<span>89.99</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh7.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>浓情比利时巧克力礼盒装</h4>
                  <p>2406g/盒</p>
                  <p>糖果零食</p>
                </div>
                <p class="price">￥<span>120.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#">
              <div class="pic"><img src="./uploads/fresh8.png" alt=""></div>
              <div class="txt">
                <div class="info">
                  <h4>抹茶奶油小蛋糕礼盒装</h4>
                  <p>220g/盒</p>
                  <p>加热即食</p>
                </div>
                <p class="price">￥<span>60.00</span></p>
              </div>
            </a>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 最新专题区域 -->
  <div class="topic wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>最新专题</h3>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="topic-bd">
      <ul>
        <li>
          <div class="pic">
            <img src="./uploads/topic1.png" alt="">
            <!-- 定位区域 -->
            <div class="cover">
              <div class="left">
                <h4>吃这些美食才不算辜负自己</h4>
                <p>餐厨起居洗护好物</p>
              </div>
              <div class="right">￥<span>29.9</span><span>起</span></div>
            </div>
          </div>
          <div class="txt">
            <div class="left">
              <p>
                <i class="iconfont icon-favorites-fill"></i>
                <span>1220</span>
              </p>
              <p>
                <i class="iconfont icon-browse"></i>
                <span>1800</span>
              </p>
            </div>
            <div class="right">
              <p>
                <i class="iconfont icon-comment"></i>
                <span>246</span>
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./uploads/topic2.png" alt="">
            <!-- 定位区域 -->
            <div class="cover">
              <div class="left">
                <h4>吃这些美食才不算辜负自己</h4>
                <p>餐厨起居洗护好物</p>
              </div>
              <div class="right">￥<span>29.9</span><span>起</span></div>
            </div>
          </div>
          <div class="txt">
            <div class="left">
              <p>
                <i class="iconfont icon-favorites-fill"></i>
                <span>1220</span>
              </p>
              <p>
                <i class="iconfont icon-browse"></i>
                <span>1800</span>
              </p>
            </div>
            <div class="right">
              <p>
                <i class="iconfont icon-comment"></i>
                <span>246</span>
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./uploads/topic3.png" alt="">
            <!-- 定位区域 -->
            <div class="cover">
              <div class="left">
                <h4>吃这些美食才不算辜负自己</h4>
                <p>餐厨起居洗护好物</p>
              </div>
              <div class="right">￥<span>29.9</span><span>起</span></div>
            </div>
          </div>
          <div class="txt">
            <div class="left">
              <p>
                <i class="iconfont icon-favorites-fill"></i>
                <span>1220</span>
              </p>
              <p>
                <i class="iconfont icon-browse"></i>
                <span>1800</span>
              </p>
            </div>
            <div class="right">
              <p>
                <i class="iconfont icon-comment"></i>
                <span>246</span>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 底部区域 -->
  <div class="footer">
    <div class="wrapper">
      <!-- 服务区域 -->
      <div class="service">
        <ul>
          <li>
            <h5></h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5></h5>
            <p>物流快捷</p>
          </li>
          <li>
            <h5></h5>
            <p>品质新鲜</p>
          </li>
          <li>
            <h5></h5>
            <p>售后无忧</p>
          </li>
        </ul>
      </div>
      <!-- 帮助中心区域 -->
      <div class="help">
        <div class="left">
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>配送方式</dt>
            <dd><a href="#">配送运费</a></dd>
            <dd><a href="#">配送范围</a></dd>
            <dd><a href="#">配送时间</a></dd>
          </dl>
          <dl>
            <dt>关于我们</dt>
            <dd><a href="#">平台规则</a></dd>
            <dd><a href="#">联系我们</a></dd>
            <dd><a href="#">问题反馈</a></dd>
          </dl>
          <dl>
            <dt>售后服务</dt>
            <dd><a href="#">售后政策</a></dd>
            <dd><a href="#">退款说明</a></dd>
            <dd><a href="#">取消订单</a></dd>
          </dl>
          <dl>
            <dt>服务热线</dt>
            <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
            <dd><a href="#">客服电话 400-0000-000</a></dd>
            <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
          </dl>
        </div>
        <div class="right">
          <ul>
            <li>
              <div class="pic"><img src="./images/wechat.png" alt=""></div>
              <p>微信公众号</p>
            </li>
            <li>
              <div class="pic"><img src="./images/app.png" alt=""></div>
              <p>APP下载二维码</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 版权区域 -->
      <div class="copywrite">
        <p>
          <a href="#">关于我们</a>|
          <a href="#">帮助中心</a>|
          <a href="#">售后服务</a>|
          <a href="#">配送与验收</a>|
          <a href="#">商务合作</a>|
          <a href="#">搜索推荐</a>|
          <a href="#">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜</p>
      </div>
    </div>
  </div>
</body>
</html>

总结

如代码中注释

HTML5+CSS304-前端项目学习

前端项目学习

项目目录

SEO（搜索引擎优化）

Favicon 图标

版心

导航

头部

注意

底部

index 区域

新鲜好物（goods）

热门品牌（brand）

生鲜（fresh）

最新专题（topic）

代码

base.css

common.css

index.css

index.html

总结

前端项目学习

项目目录

SEO（搜索引擎优化）

Favicon 图标

版心

导航

头部

注意

底部

index 区域

新鲜好物（goods）

人气推荐（recommend）

热门品牌（brand）

生鲜（fresh）

最新专题（topic）

代码

base.css

common.css

index.css

index.html

总结