小兔仙项目搭建

原创已于 2022-02-28 10:05:57 修改 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-02-14 15:59:23 首次发布

本文介绍了如何使用精灵图进行前端性能优化，包括精灵图的使用步骤和优势。同时，探讨了项目的基础认知，如DOCTYPE声明、字符编码、SEO优化策略，以及如何设置网页图标。并提到了项目结构的搭建和代码组织。

一、项目样式补充

1.1精灵图

场景：多张小图合并成为一张大图，这张大图片称为精灵图。

优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度。

1.2精灵图使用步骤

1.创建一个盒子，设置盒子的尺寸和小图尺寸相同。

2.将精灵图设置为盒子的背景图片。

3.修改背景图位置。 /*background-image：px px；*/

精灵图一般用行内标签-span-b-i 然后再修改css为块元素display：

2.1设置背景图片大小

background-size：宽度高度；

/*取值*/
数字+px         
百分比         当前盒子自身宽高比
contain       包含，将背景图片等比例缩放，不会超出盒子的最大尺寸
cover         覆盖，将背景图片等比例缩放，直到刚好填满整个盒子，没有空白

2.3background连写

background:color image repeat position/size;

4.1盒子阴影 box-shadow

h-shadow    /*必须，水平偏移，可以负值     px    */    
y-shadow    /*必须，垂直偏移，可以负值     px    */
blur        /*可选，模糊度                px    */
spread      /*可选，阴影扩大              px    */
color       /*可选，颜色*/
inset       /*可选，将阴影改为内部阴影*/

5.1过渡transition

配合hover使用，增强网页的交互体验。

过渡的属性    /*all：所有能过渡的属性都可过渡、ps：width：只有宽可以过渡*/
过渡的时长    /*数字+s（秒）*/
.box｛
    width：200px；
    height：300px；
    background：pink；
    transition：width 1s，background-color 2s；     /*变化少用具体属性，二选一*/
    transition:all 2s;                             /*变化多用all，工作中常用，二选一*/
｝
.box：hover｛
    width：700px；
    background-color:red;
    
｝

二、项目的前置认知

2.1骨架结构标签-DOCTYPE文档说明

<!DOCTYPE html> 文档类型声明，告诉浏览器网页的HTML版本。

2.2骨架结构标签-网页语言

<html lang="en"> 默认为英文常见zh-CN简体中文/en英文

2.3骨架结构标签-字符编码

3.1seo三大标签

seo（Search Engine Optimization）搜索引擎优化/*让网站在搜索引擎上排名靠前*/

提升seo常见方法：

1.竞价排名

2.将网页制作成html后缀

3.标签语义化（在核实的地方使用合适的标签）

4......

3.2标签语义化seo三大标签

1.title：网页标题标签

2.description：网页描述标签

3.keywords：网页关键词标签

4.1ico鼠标设置

三、项目结构搭建’

文件结构 + 一个lib文件夹，用来存框架，字体图标包等。

四、项目代码成品

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔仙</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <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="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header">
        <div class="wrapper">
            <div class="logo"><img src="./images/logo.png" alt=""></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">
                <input type="text" placeholder="搜一搜">
                <span></span>
            </div>
            <div class="car">
                <span>2</span>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="wrapper">
            <div class="asaide">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">美食<span>面点 干果</span></a></li>
                    <li><a href="#">厨餐<span>数码产品</span></a></li>
                    <li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
                    <li><a href="#">居家<span> 奶粉 玩具 辅食</span></a></li>
                    <li><a href="#">洗护<span>洗发 洗护 美妆</span></a></li>
                    <li><a href="#">孕婴<span> 奶粉 玩具</span></a></li>
                    <li><a href="#">服饰<span>女装 男装</span></a></li>
                    <li><a href="#">杂货<span>户外 图书</span></a></li>
                    <li><a href="#">品牌<span>品牌制造</span></a></li>
                </ul>
            </div>
            <a href="#" class="prev"></a>
            <a href="#" class="next"></a>
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
            </div>
        </div>       
    </div>
    <!-- 商品 -->
    <div class="goods wrapper">
        <div class="hd">
            <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
            <a href="#">查看全部</a>
        </div>
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                     </a
                ></li>
                <li>
                    <a href="">
                        <img src="./uploads/new_goods_2.jpg" alt="">
                        <h3>智能环绕3D空调</h3>
                        <div>￥<span>1299</span></div>
                        <b>新品</b>

                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/new_goods_3.jpg" alt="">
                        <h3>广东软软糯米煲仔饭</h3>
                        <div>￥<span>129</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./uploads/new_goods_4.jpg" alt="">
                        <h3>罗西机械智能手表</h3>
                        <div>￥<span>3399</span></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 人气推荐 -->
    <div class="pop wrapper">
        <div class="hd">
            <p1>人气推荐<p2>人气爆款 不容错过</p2></p1>
      
        </div>
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_1.jpg" alt="">
                        <h3>特惠推荐</h3>
                        <span>我猜得到 你的需要</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_2.jpg" alt="">
                        <h3>爆款推荐</h3>
                        <span>人气好物推荐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_3.jpg" alt="">
                        <h3>场景使用一站买全</h3>
                        <span>编辑精心整理推荐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_4.jpg" alt="">
                        <h3>领券中心</h3>
                        <span>发现更多超值优惠券</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 热门品牌 -->
    <div class="hot">
        <div class="wrapper">
            <div class="hd">
                <p1>热门品牌<p2>国际经典 品质保证</p2></p1>
                <a href="#" class="prev"></a>
                <a href="#" class="next"></a>
            </div>
            <div class="bd clearfix">
                <ul>
                    <li><a href="#"><img src="./uploads/brand_goods_1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/brand_goods_2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/brand_goods_3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/brand_goods_4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/brand_goods_5.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 生鲜 -->
    <div class="fresh wrapper">
        <div class="hd">
            <p>生鲜</p>
            <a href="#" class="more">查看全部</a>
            <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="#">T恤</a></li>
                <li><a href="#">内衣</a></li>
            </ul>
        </div>
        <div class="bd clearfix">
            <a href="#" class="fl">
                <img src="./uploads/fresh_goods_cover.png" alt="">
            </a>
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_1.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_2.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_3.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_4.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_5.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_6.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_7.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_8.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼<br>
                            700g 2条 袋装 <br>
                           海鲜水产 
                        </p>
                        <span>￥<b>49</b></span>                      
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 版权 -->
    <div class="fotter">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li><span>价格亲民</span></li>
                    <li><span>物流快捷</span></li>
                    <li><span>品质新鲜</span></li>
                </ul>
            </div>
            <div class="bottom">
                <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>

base.css

/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 內减模式 */
* {
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "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 {
  vertical-align: middle;
}

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

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

common.css

.wrapper{
    width: 1240px;
    margin: 0 auto;
    /* background-color: pink; */
}
/*快捷导航*/
.shortcut{
    height: 52px;
    line-height: 52px;
    background-color: #333;
}
.shortcut ul{
    float: right;
}
.shortcut ul li{
    float: left;
}
.shortcut li a{
    font-size: 14px;
    color: #dcdcdc;
    padding: 0 16px;
    border-right: 1px solid #666;
}
.shortcut li:last-child a{
    border: 0;
}
.shortcut .wrapper a span{
    display: inline-block;
    margin-right: 8px;
    width: 11px;
    height: 16px;
    background-image: url(../images/sprites.png);
    background-position: -160px -70px;  
    vertical-align: middle;
}
/*头部*/

.header{
    height: 130px;
    background-color: #fff;
}
.header .wrapper{
    margin: 30px auto;
}
.header .logo img{
    float: left;
    width: 207px;
    height: 70px;   
}
.header .nav{
    float: left;
    margin-left: 40px;
}
.header .nav li{
    float: left;
    margin-right: 48px;
    line-height: 70px;
    font-size: 16px;
    color: #333;
}
.header .nav li a{
    padding-bottom: 7px;
}
.header .nav li a:hover{
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
}
.header .search{
    position: relative;
    float: left;
    margin-top: 24px;
    margin-left: 34px;
    width: 172px;
    height: 30px;
    border-bottom: 2px solid #e7e7e7;
}
.header .search input{
    padding-left: 30px;
    width: 172px;
    height: 28px;
}
.header .search span{
    position: absolute;
    top: 0;
    left: 2px;
    width: 18px;
    height: 18px;
    background-image: url(../images/sprites.png);
    background-position: -79px -69px;
}
.header input::placeholder{
    font-size: 14px;
    color: #ccc;
}
.header .car{
    position: relative;
    float: right;
    margin-right: 14px;
    margin-top: 28px;
    width: 23px;
    height: 23px;
    background-image: url(../images/sprites.png);
    background-position: -120px -69px;
}
.header .car span{
    position: absolute;
    left: 15px;
    bottom: 13px;
    width: 20px;
    height: 15px;
    border-radius: 8px;
    background-color: #e26237;
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 15px;
}
/*版权*/
.fotter{
    height: 342px;
    background-color: #333;
}
.fotter .wrapper{
    width: 1393px;
}
.fotter .top{
    padding-top: 59px;
    padding-left: 139px;
    height: 175px;
    border-bottom: 2px solid #434343;
}
.fotter .top li{
    position: relative;
    float: left;
    margin-right: 300px;
    width: 195px;
    height: 58px;    
    line-height: 58px;
}
.fotter .top li:last-child{
    margin-right: 0;
}
.fotter .top li::before{
    position: absolute;
    left: 0;
    top: 0;
    /* display: inline-block; */
    content: "";
    width: 58px;
    height: 58px;
    background-image: url(../images/sprites.png);
    /* vertical-align: middle; */
}
.fotter .top li:nth-child(2)::before{
    background-position: -64px 0;
}
.fotter .top li:nth-child(3)::before{
    background-position: -129px 0;
}
.fotter .top li span{
    padding-left: 77px;
    font-size: 28px;
    color: #fff;
}
.fotter .bottom{
    font-size: 14px;
    color: #999;
    text-align: center;
    padding-top: 41px;
}
.fotter .bottom a{
    color: #999;
    padding-left: 9px;
    padding-right: 12px;
    border-right: 1px solid #999;
}
.fotter .bottom a:last-child{
    border: 0;
}
.fotter .bottom p{
    margin-bottom: 20px;
}

index.css

/*轮播图*/
.banner{
    height: 500px;
    background-color: #f5f5f5;
}
.banner .wrapper{
    position: relative;
    height: 500px;
    background-image: url(../uploads/banner_1.png);
}
.banner .asaide{
    width: 251px;
    height: 500px;
    background-color: rgba(0,0,0,0.8);
}
.banner .asaide ul li{
    line-height: 50px;
}
.banner .asaide ul li a{
    position: relative;
    display: block;
    padding-left: 36px;
    height: 50px;
    font-size: 16px;
    color: #fff;
}
.banner .asaide ul li a:hover{
    background-color: #27ba9b;
}
.banner .asaide ul span{
    margin-left: 15px;
    font-size: 14px;
}
.banner .asaide ul a::after{
    position: absolute;
    right: 19px;
    top: 19px;
    content: "";
    width: 6px;
    height: 11px;
    background-image: url(../images/sprites.png);
    background-position: -80px -110px;
}
.banner .prev,
.banner .next{
    position: absolute;
    top: 228px;
    width: 45px;
    height: 44px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 50%;
    background-image: url(../images/sprites.png);
}
.banner .prev{
    left: 260px;
    background-position: 12px -60px;
}
.banner .next{
    right: 10px;
    background-position: -22px -60px;
}
.banner ol{
    position: absolute;
    top: 459px;
    left: 680px;
    width: 200px;
    height: 10px;
    /* background-color: pink; */
}
.banner ol li{
    float: left;
    margin-right: 24px;
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,.43);
    border-radius: 50%;
    cursor:pointer;
}
.banner ol .current{
    background-color: #fff;
}
/*商品*/
.goods .hd{
    height: 114px;
    /* line-height: 114px; */

}
.goods .hd h2{
    float: left;
    margin-top: 48px;
    font-size: 29px;
    color: #333;
    font-weight: 400;
}
.goods .hd h2 span{
    margin-top: 59px;
    margin-left: 34px;
    font-size: 16px;
    color: #999;
}
.goods .hd a{
    position: relative;
    float: right;
    margin-top: 59px;
    padding-right: 20px;
    font-size: 16px;
    color: #999;
}
.goods .hd a::after{
    content: "";
    position: absolute;
    top: 5px;
    right: 0;
    width: 7px;
    height: 13px;
    /* background-color: pink; */
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
}
.goods .bd li{
    position: relative;
    float: left;
    margin-right: 8px;
    text-align: center;
    width: 304px;
    height: 405px;
    /* background-color: pink; */
}
.goods .bd li:last-child{
    margin-right: 0;
}
.goods .bd li img{
    width: 304px;
    height: 305px;
}
.goods .bd li h3{
    margin-top: 22px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
    font-weight: 400;
}
.goods .bd li div{
    font-size: 17px;
    color: #9a2e1f;
}
.goods .bd li span{
    font-size: 23px;
}
.goods .bd li b{
    position: absolute;
    top: 18px;
    left: 17px;
    width: 28px;
    height: 51px;
    color:#27ba9b;
    font-size: 18px;
    font-weight: 400;
    border: 1px solid #27ba9b;
    border-radius: 3px;
    line-height: 24px;
}
/*人气推荐*/


.pop .hd p1{
    display: inline-block;
    margin-top: 47px;
    margin-bottom: 40px;
    font-size: 29px;
    color: #333;
}
.pop .hd p2{
    display: inline-block;
    padding-left: 34px;
    font-size: 16px;
    color: #999;
}
.pop .bd li{
    float: left;
    margin-right: 8px;
    width: 304px;
    height: 405px;
    /* background-color: #f00; */
    text-align: center;
}
.pop .bd li:last-child{
    margin-right: 0;
}
.pop .bd li img{
    width: 304px;
}
.pop .bd li h3{
    margin-top: 22px;
    margin-bottom: 10px;
    font-size: 21px;
    color: #333;
}
.pop .bd li span{
    display: inline-block;
    font-size: 16px;
    color: #999;
}
/*热门品牌*/
.hot{
    height: 466px;
    background-color: #f5f5f5;
}
.hot .hd{
    position: relative;
}
.hot .hd p1{
    display: inline-block;
    margin-top: 42px;
    font-size: 29px;
    color: #333;
}
.hot .hd p2{
    margin-left: 35px;
    font-size: 16px;
    color: #999;
}
.hot .hd .prev,
.hot .hd .next{
    position: absolute;
    top: 79px;
    width: 20px;
    height: 20px;
}
.hot .hd .prev{
    right: 33px;
    background-color: #e2e2e2;
    background-image: url(../images/sprites.png);
    background-position: 8px -106px;
}
.hot .hd .next{
    right: 1px;
    background-color: #27ba9b;
    background-image: url(../images/sprites.png);
    background-position: 8px -106px;
}
.hot .bd ul li{
    margin-top: 20px;
}
.hot .bd ul img{
    float: left;
    margin-right: 5px;
    width: 243px;
    height: 306px;
}
.hot .bd ul li:last-child{
    margin-right: 0;
}
/*生鲜*/
.fresh{
    position: relative;
}
.fresh .hd{
    height: 96px;
    line-height: 96px;
}
.fresh p{
    float: left;
    font-size: 29px;
    color: #333;
}
.fresh .hd ul{
    float: right;
    margin-right: 65px;
}
.fresh .hd ul li{
    float: left;
    padding-right: 20px;
    font-size: 16px;
    color: #333;
}
.fresh .hd ul li a{
    padding: 2px 7px;
}
.fresh .hd ul li a:hover{
    color: #fefbfc;
    background-color: #27ba9b;
}
.fresh .hd .more{
    float: right;
    margin-right: 22px;
    font-size: 16px;
    color: #999;
}
.fresh .hd .more::after{
    position: absolute;
    top: 41px;
    right: 0;
    content: "";
    width: 7px;
    height: 13px;
    background-image: url(../images/sprites.png);
    background-position: 1px -110px;
}
.fresh .bd .fl img{
    float: left;
    margin-right: 8px;
    width: 240px;
    height: 610px;
}
.fresh .bd li{
    float: left;
    margin-right: 8px;
    padding: 8px 28px;
    width: 242px;
    height: 304px;
    /* background-color: #0f0; */
}
.fresh .bd li:nth-child(4n){
    margin-right: 0;
}
.fresh .bd ul li{
    position: relative;
}
.fresh .bd ul a::after{
    position: absolute;
    bottom: 0;
    left: 0;

    content: "找相似";
    color: red;
    line-height: 84px;
    text-align: center;
    border-bottom: 8px solid #000;


    width: 242px;
    height: 84px;
    background-color: #27ba9b;

    opacity: 0;
}
.fresh .bd ul li:hover{
    border: 2px solid #27ba9b;
}
.fresh .bd ul li:hover a::after{
    opacity: 1;
}
.fresh .bd ul img{
    /* margin-bottom: 12px;   */
    width: 186px;
    height: 186px;   
}
.fresh .bd ul a p{
    font-size: 16px;
    color: #333;
}
.fresh .bd ul a span{
    font-size: 17px;
    color: #9a2e1f;
}
.fresh .bd ul a b{
    font-size: 23px;
}

成品