小兔鲜-黑马程序员

目录

项目准备

项目目录

link引入的规范

引入seo

favicon页面图标

清除默认样式

定版心

开始项目

快捷导航

头部​编辑

版权区域

banner部分

新鲜好物

生鲜

总代码


项目准备

项目目录

小兔鲜-黑马程序员_第1张图片

列一个结构

小兔鲜-黑马程序员_第2张图片


link引入的规范

 
    
    
    


引入seo

title:小兔鲜儿-新鲜、惠民、快捷!
description:小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。
keywords:小兔鲜儿,食品,生鲜,服装,家电,电商,购物

 小兔鲜儿-新鲜、惠民、快捷!
    
    


favicon页面图标


清除默认样式

/* 清除默认样式的代码 */
/* 去除常见标签默认的 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;
}

定版心

/* 版心 */
.wrapper{
    /* 版心宽度是1240 */
    width: 1240px;
    /* 居中 */
    margin: 0 auto;
}


开始项目

快捷导航

最顶上黑色那块


html部分

请先登录
免费注册
我的订单
会员中心
帮助中心
在线客服
手机版

 
    

定一个跟页面一样宽 最大的盒子 

调一个粉红版心盒子

/* 快捷导航 */
.shortcut{
    /* 宽度和浏览器一样就行了 */
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper{
    height: 52px;
    background-color: pink;
}


先将ul靠右 也就是右浮动

再对里面的li左浮动


.shortcut .wrapper ul{
    float: right;
}
.shortcut .wrapper ul li{
    float: left;
}

文字调整


.shortcut .wrapper ul li{
    float: left;
    /* 文字居中需要跟行高一样就行 */
    line-height: 52px;
}
.shortcut .wrapper ul a{
    /* 内边距上下0 左右16 */
    padding: 0 16px;
    /* 每个右边都有一个小竖杠 */
    border-right: 1px solid #666;
    /* 字体大小 颜色*/
    font-size: 14px;
    color: rgb(255, 255, 255);
}

手机小图

小兔鲜-黑马程序员_第3张图片

 


.shortcut .wrapper ul a span{
    /* span是行内 无宽高 转换行内块 */
    display: inline-block;
    width: 11px;
    height: 16px;
    /* 找图片 */
    background-image: url(../images/sprites.png);
    /* 从精灵图找到手机图片具体位置 background-position(x,y)*/
    background-position: -160px -69px;
    /* 图片居中 */
    vertical-align: middle;
    /* 加一个右间距 */
    margin-right: 8px;
    
}


头部

 布局

小兔鲜-黑马程序员_第4张图片

.header{
    margin: 30px auto;
    height: 70px;
    background-color: pink;
}

分成四块

小兔鲜-黑马程序员_第5张图片


.logo{
    float: left;
    /* 宽度包含两张图片 */
    width: 207px;
    height: 70px;
    background-color: pink;
}
.nav{
    float: left;
    /* 与logo拉开距离 */
    margin-left: 40px;
    height: 70px;
    background-color: rgb(197, 255, 192);
}
.search{
    float: left;
    /* 考虑到nav最右小li的外边距 */
    margin-left: 34px;
    width: 172px;
    height: 30px;
    background-color: rgb(205, 54, 54);
}
.car{
    float: left;
    margin-left: 15px;
    width: 23px;
    height: 23px;
    background-color: rgb(157, 37, 115);
}


logo部分

小兔鲜-黑马程序员_第6张图片

用font-size 0 把a里面的字隐藏

小兔鲜-黑马程序员_第7张图片

 

/* logo搜索引擎优化 */
.logo a{
    /* 转换成块元素 */
    display: block;
    width: 207px;
    height: 70px;
    background-image: url(../images/logo.png);
    /* 背景图大小与盒子保持一致 */
    background-size: contain;
    /* 让a里面的字隐藏 */
    font-size: 0;
}

导航

  

.nav{
    float: left;
    /* 与logo拉开距离 */
    margin-left: 40px;
    height: 70px;
    background-color: rgb(197, 255, 192);
}
.nav ul li {
    float: left;
    width: 48px;
    /* 文字居中 */
    line-height: 70px;
}
.nav li a{
    /* 搞个下边距 方便等下做下划线 */
    padding-bottom: 7px;
}
/* 鼠标接触之后 */
.nav li a:hover{
    color: aquamarine;
    border-bottom: 1px solid aquamarine;
}

搜索

精灵图位置调整用子绝父相

小兔鲜-黑马程序员_第8张图片


.search{
    /* 子绝父相 */
    position: relative;
    float: left;
    /* 考虑到nav最右小li的外边距 */
    margin-left: 34px;
    margin-top: 24px;
    width: 172px;
    height: 30px;
    background-color: rgb(255, 255, 255);
    /* 在下面加上边线 */
    border-bottom: 2px solid #e7e7e7;
}
.search input{
    /* 在左边留出给图片的位置 */
    padding-left: 30px;
    width: 172px;
    height: 28px;

}
.search span{
    /* 调整图片位置 子绝父相 */
    position: absolute;
    left: 2px;
    top: 1px;
    /* span内元素 加宽高 要换成行内块 */
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: rgb(255, 255, 255);
    /* 找精灵图里的 放大镜 */
    background-image: url(../images/sprites.png);
    background-position: -79px -69px;
    
}

购物车

在调整小红点 可以在网页调整好 再输入进vscode

小兔鲜-黑马程序员_第9张图片

 /* 子绝父相 绝对位置自动转化成行内块元素 可以不用display   */


.car{
    /* 子绝父相 */
    position: relative;
    float: left;
    /* 向下居中 */
    margin-top: 28px;
    margin-left: 15px;
    width: 23px;
    height: 23px;
    background-color: rgb(255, 255, 255);
    /* 找精灵图里的 购物车 */
    background-image: url(../images/sprites.png);
    background-position: -119px -69px;
}

.car span{
    /* 子绝父相 绝对位置自动转化成行内块元素 可以不用display   */
    position: absolute;
    right: -13px;
    top: -5px;
    width: 20px;
    height: 15px;
    background-color: #e26237;
    /* 盒子圆角边框 */
    border-radius: 8px;
    /* 设置字体颜色大小 */
    font-size: 13px;
    color: rgb(255, 255, 255);
    /* 居中 */
    text-align:center;
    line-height: 15px;
}

版权区域

小兔鲜-黑马程序员_第10张图片


精灵图部分

    和  如何更改接下来的精灵图

/* 伪元素添加的标签:行内 */
.footer .top  li ::before{
/* 第二个li的图片 */
.footer .top  li:nth-child(2) ::before{

整个代码

  
    

/*  */
.footer{
    height: 342px;
    background-color: #333;
}
.footer .wrapper{
    /* 这个的版心宽度更大 */
    width: 1393px;
}
.footer .top{
    /* 调整位置 */
    padding-top: 59px;
    padding-left: 135px;
    height: 175px;
    /* 加分割线 */
    border-bottom: 3px solid #434343;
}
.footer .top  li{
    /* 子绝父相 */
    position: relative;
    float: left;
    /* 添加右边距 */
    margin-right: 295px;
    width: 195px;
    height: 58px;
    /* background-color: pink; */
    /* span没有行高所以直接在父级加linehigh */
    line-height: 58px;
}
/* 把最右边的li边距改为0 */
.footer li.last{
    margin-right: 0;
}
/* 伪元素添加的标签:行内 */
.footer .top  li ::before{
    /* 精灵图定位 */
    position: absolute;
    left: 0;
    top: 0;
    /* 伪元素语法 */
    content: '';
    width: 58px;
    height: 58px;
    /* 精灵图 */
    background-image: url(../images/sprites.png);
    /* 居中 */
    vertical-align: middle;
}
.footer .top  li span{
    margin-left: 77px;
    font-size: 28px;
    color: #fff;
}
/* 第二个li的图片 */
.footer .top  li:nth-child(2) ::before{
    background-position: -64px 0;
}
/* 第三个 */
.footer .top  li:nth-child(3) ::before{
    background-position: -129px 0;
}

小兔鲜-黑马程序员_第11张图片


 底部小兔鲜-黑马程序员_第12张图片

 

.footer .bottom{
    padding-top: 40px;
    font-size: 14px;
    color: #999;
    text-align: center;
}
/* 超链接字体颜色大小 */
.footer .bottom a{
    font-size: 14px;
    color: #999;
}
.footer .bottom p{
    margin-bottom: 20px;
}

banner部分

小兔鲜-黑马程序员_第13张图片

左右箭头的时候出现的问题 

解决方法就是在浏览器里面调试 background-position: 14px -60px;

小兔鲜-黑马程序员_第14张图片

 
        

/* banner区域 */
.banner{
    
    height: 500px;
    background-color: #fff;
}
.banner .wrapper{
    /* 子绝父相 */
    position: relative;
    height: 500px;
    background-color: pink;
}

 /* 左侧导航 */
 .banner .aside{
    /* 定位 */
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 500px;
    /* 背景色半透明 */
    background-color: rgba(0,0,0,.8);
 }
.banner .aside li{
    /* 文字居中 */
    height: 50px;
    line-height: 50px;
}

.banner .aside a{
    position: relative;
    padding-left: 36px;
    padding-right: 19px;
    /* a是行内元素 转成块 */
    display: block;
    height: 50px;
    width: 250px;
    color: #fff;    
}

.banner .aside a span{
    /* 与最左边的字拉开距离 */
    margin-left: 15px;
    /* span里面的字要小一点 */
    font-size: 14px;
}
/* 鼠标接触后换颜色 */
.banner .aside li :hover{
    background-color: #27ba9b;
}

/* 加小箭头 */
.banner .aside a::after{
    /* after的父级就是a  */
    position: absolute;
    right: 19px;
    top: 19px;
    content: '';
    width: 6px;
    height: 11px;
    background-image: url(../images/sprites.png);
    background-position: -80px -110px;
}

/* /* 箭头 */
/* 两个一起写就用逗号隔开 */ 
.next,
.prev{
    position: absolute;
    top: 228px;
    width: 45px;
    height: 45px;
    /* 半透明 */
    background-color: rgba(0,0,0,0.2);
    background-image: url(../images/sprites.png);
    /* 圆角边框 让盒子变成圆的 */
    border-radius: 50%;
}
.prev{
    left: 260px;
    background-position: 14px -60px;
}
.next{
    right: 10px;
    background-position: -23px -60px;
}

/* 圆点 */
.banner ol {
    position: absolute;
    left: 680px;
    bottom: 30px;

    height: 10px;
}

.banner ol li {
    float: left;
    margin-right: 24px;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    /* 鼠标放上去变成小手样式 */
    cursor: pointer;
}
/* 当前页面的圆点 所以白色 */
.banner ol .current {
    background-color: #fff;
}

新鲜好物

生鲜

小兔鲜-黑马程序员_第15张图片

 
    

    
    

/* 新鲜好物 */

.goods .hd {
    height: 114px;
    line-height: 114px;
}

.goods .hd h2 {
    float: left;
    font-size: 29px;
    font-weight: 400;

    height: 114px;
}

.goods .hd h2 span {
    margin-left: 34px;
    font-size: 16px;
    color: #999;
}

.goods .hd a,
.shengxian .hd .more {
    float: right;
    color: #999;
}

/* 精灵图 >  */
.goods .hd a::after,
.shengxian .hd .more::after {
    content: '';
    display: inline-block;
    margin-left: 13px;
    width: 7px;
    height: 13px;
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
    vertical-align: middle;
}

.goods .bd li {
    position: relative;
    float: left;
    margin-right: 8px;
    width: 304px;
    height: 405px;
    background-color: #f0f9f4;
    text-align: center;
}

.goods .bd li:last-child {
    margin-right: 0;
}

.goods .bd li img {
    width: 304px;
}

.goods .bd li h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 400;
}

.goods .bd li div {
    color: #9a2e1f;
    font-size: 17px;
}

.goods .bd li div span {
    font-size: 23px;
}

.goods .bd li b {
    /* 变成竖直 */
    position: absolute;
    left: 17px;
    top:18px;
    width: 28px;
    height: 51px;
    border: 1px solid #27ba9b;
    border-radius: 2px;
    font-size: 18px;
    color: #27ba9b;
    font-weight: 400;
    line-height: 24px;
}

/* 生鲜 */
.shengxian .hd {
    height: 96px;
    line-height: 96px;
}

.shengxian .hd h2 {
    float: left;
    font-size: 29px;
    font-weight: 400;
}

.shengxian .hd .more {
    float: right;
}

.shengxian .hd ul {
    float: right;
    margin-right: 65px;
}

.shengxian .hd ul li {
    float: left;
}

.shengxian .hd li a {
    padding: 2px 7px;
    margin-left: 6px;
}

.shengxian .hd li a:hover {
    background-color: #27ba9b;
    color: #fff;
}

.shengxian .bd .left {
    float: left;
    width: 240px;
    height: 610px;
    background-color: pink;
}

.shengxian .bd .right {
    float: left;
    width: 1000px;
    height: 610px;
    background-color: skyblue;
}

总代码

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{
    /* 版心宽度是1240 */
    width: 1240px;
    /* 居中 */
    margin: 0 auto;
}
/* 快捷导航 */
.shortcut{
    /* 宽度和浏览器一样就行了 */
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper{
    height: 52px;
    background-color: #333;
}
.shortcut .wrapper ul{
    float: right;
}
.shortcut .wrapper ul li{
    float: left;
    /* 文字居中需要跟行高一样就行 */
    line-height: 52px;
}
.shortcut .wrapper ul a{
    /* 内边距上下0 左右16 */
    padding: 0 16px;
    /* 每个右边都有一个小竖杠 */
    border-right: 1px solid #666;
    /* 字体大小 颜色*/
    font-size: 14px;
    color: rgb(255, 255, 255);
}
.shortcut .wrapper ul a span{
    /* span是行内 无宽高 转换行内块 */
    display: inline-block;
    width: 11px;
    height: 16px;
    /* 找图片 */
    background-image: url(../images/sprites.png);
    /* 从精灵图找到手机图片具体位置 background-position(x,y)*/
    background-position: -160px -69px;
    /* 图片居中 */
    vertical-align: middle;
    /* 加一个右间距 */
    margin-right: 8px;
    
}
.header{
    margin: 30px auto;
    height: 70px;
    /* background-color: pink; */
}
.logo{
    float: left;
    /* 宽度包含两张图片 */
    width: 207px;
    height: 70px;
    background-color: rgb(255, 255, 255);
}
/* logo搜索引擎优化 */
.logo a{
    /* 转换成块元素 */
    display: block;
    width: 207px;
    height: 70px;
    background-image: url(../images/logo.png);
    /* 背景图大小与盒子保持一致 */
    background-size: contain;
    /* 让a里面的字隐藏 */
    font-size: 0;
}

.nav{
    float: left;
    /* 与logo拉开距离 */
    margin-left: 40px;
    height: 70px;
    background-color: rgb(255, 255, 255);
}
.nav ul li {
    float: left;
    width: 48px;
    /* 文字居中 */
    line-height: 70px;
}
.nav li a{
    /* 搞个下边距 方便等下做下划线 */
    padding-bottom: 7px;
}
/* 鼠标接触之后 */
.nav li a:hover{
    color: aquamarine;
    border-bottom: 1px solid aquamarine;
}

.search{
    /* 子绝父相 */
    position: relative;
    float: left;
    /* 考虑到nav最右小li的外边距 */
    margin-left: 34px;
    margin-top: 24px;
    width: 172px;
    height: 30px;
    background-color: rgb(255, 255, 255);
    /* 在下面加上边线 */
    border-bottom: 2px solid #e7e7e7;
}
.search input{
    /* 在左边留出给图片的位置 */
    padding-left: 30px;
    width: 172px;
    height: 28px;

}
.search span{
    /* 调整图片位置 子绝父相 */
    position: absolute;
    left: 2px;
    top: 1px;
    /* span内元素 加宽高 要换成行内块 */
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: rgb(255, 255, 255);
    /* 找精灵图里的 放大镜 */
    background-image: url(../images/sprites.png);
    background-position: -79px -69px;
    
}

.car{
    /* 子绝父相 */
    position: relative;
    float: left;
    /* 向下居中 */
    margin-top: 28px;
    margin-left: 15px;
    width: 23px;
    height: 23px;
    background-color: rgb(255, 255, 255);
    /* 找精灵图里的 购物车 */
    background-image: url(../images/sprites.png);
    background-position: -119px -69px;
}

.car span{
    /* 子绝父相 绝对位置自动转化成行内块元素 可以不用display   */
    position: absolute;
    right: -13px;
    top: -5px;
    width: 20px;
    height: 15px;
    background-color: #e26237;
    /* 盒子圆角边框 */
    border-radius: 8px;
    /* 设置字体颜色大小 */
    font-size: 13px;
    color: rgb(255, 255, 255);
    /* 居中 */
    text-align:center;
    line-height: 15px;
}

/*  */
.footer{
    height: 342px;
    background-color: #333;
}
.footer .wrapper{
    /* 这个的版心宽度更大 */
    width: 1393px;
}
.footer .top{
    /* 调整位置 */
    padding-top: 59px;
    padding-left: 135px;
    height: 175px;
    /* 加分割线 */
    border-bottom: 3px solid #434343;
}
.footer .top  li{
    /* 子绝父相 */
    position: relative;
    float: left;
    /* 添加右边距 */
    margin-right: 295px;
    width: 195px;
    height: 58px;
    /* background-color: pink; */
    /* span没有行高所以直接在父级加linehigh */
    line-height: 58px;
}
/* 把最右边的li边距改为0 */
.footer li.last{
    margin-right: 0;
}
/* 伪元素添加的标签:行内 */
.footer .top  li ::before{
    /* 精灵图定位 */
    position: absolute;
    left: 0;
    top: 0;
    /* 伪元素语法 */
    content: '';
    width: 58px;
    height: 58px;
    /* 精灵图 */
    background-image: url(../images/sprites.png);
    /* 居中 */
    vertical-align: middle;
}
.footer .top  li span{
    margin-left: 77px;
    font-size: 28px;
    color: #fff;
}
/* 第二个li的图片 */
.footer .top  li:nth-child(2) ::before{
    background-position: -64px 0;
}
/* 第三个 */
.footer .top  li:nth-child(3) ::before{
    background-position: -129px 0;
}

.footer .bottom{
    padding-top: 40px;
    font-size: 14px;
    color: #999;
    text-align: center;
}
/* 超链接字体颜色大小 */
.footer .bottom a{
    font-size: 14px;
    color: #999;
}
.footer .bottom p{
    margin-bottom: 20px;
}

/* banner区域 */
.banner{
    
    height: 500px;
    background-color: #fff;
}
.banner .wrapper{
    /* 子绝父相 */
    position: relative;
    height: 500px;
    background-color: pink;
}

 /* 左侧导航 */
 .banner .aside{
    /* 定位 */
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 500px;
    /* 背景色半透明 */
    background-color: rgba(0,0,0,.8);
 }
.banner .aside li{
    /* 文字居中 */
    height: 50px;
    line-height: 50px;
}

.banner .aside a{
    position: relative;
    padding-left: 36px;
    padding-right: 19px;
    /* a是行内元素 转成块 */
    display: block;
    height: 50px;
    width: 250px;
    color: #fff;    
}

.banner .aside a span{
    /* 与最左边的字拉开距离 */
    margin-left: 15px;
    /* span里面的字要小一点 */
    font-size: 14px;
}
/* 鼠标接触后换颜色 */
.banner .aside li :hover{
    background-color: #27ba9b;
}

/* 加小箭头 */
.banner .aside a::after{
    /* after的父级就是a  */
    position: absolute;
    right: 19px;
    top: 19px;
    content: '';
    width: 6px;
    height: 11px;
    background-image: url(../images/sprites.png);
    background-position: -80px -110px;
}

/* /* 箭头 */
/* 两个一起写就用逗号隔开 */ 
.next,
.prev{
    position: absolute;
    top: 228px;
    width: 45px;
    height: 45px;
    /* 半透明 */
    background-color: rgba(0,0,0,0.2);
    background-image: url(../images/sprites.png);
    /* 圆角边框 让盒子变成圆的 */
    border-radius: 50%;
}
.prev{
    left: 260px;
    background-position: 14px -60px;
}
.next{
    right: 10px;
    background-position: -23px -60px;
}

/* 圆点 */
.banner ol {
    position: absolute;
    left: 680px;
    bottom: 30px;

    height: 10px;
}

.banner ol li {
    float: left;
    margin-right: 24px;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    /* 鼠标放上去变成小手样式 */
    cursor: pointer;
}
/* 当前页面的圆点 所以白色 */
.banner ol .current {
    background-color: #fff;
}



/* 新鲜好物 */

.goods .hd {
    height: 114px;
    line-height: 114px;
}

.goods .hd h2 {
    float: left;
    font-size: 29px;
    font-weight: 400;

    height: 114px;
}

.goods .hd h2 span {
    margin-left: 34px;
    font-size: 16px;
    color: #999;
}

.goods .hd a,
.shengxian .hd .more {
    float: right;
    color: #999;
}

/* 精灵图 >  */
.goods .hd a::after,
.shengxian .hd .more::after {
    content: '';
    display: inline-block;
    margin-left: 13px;
    width: 7px;
    height: 13px;
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
    vertical-align: middle;
}

.goods .bd li {
    position: relative;
    float: left;
    margin-right: 8px;
    width: 304px;
    height: 405px;
    background-color: #f0f9f4;
    text-align: center;
}

.goods .bd li:last-child {
    margin-right: 0;
}

.goods .bd li img {
    width: 304px;
}

.goods .bd li h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 400;
}

.goods .bd li div {
    color: #9a2e1f;
    font-size: 17px;
}

.goods .bd li div span {
    font-size: 23px;
}

.goods .bd li b {
    /* 变成竖直 */
    position: absolute;
    left: 17px;
    top:18px;
    width: 28px;
    height: 51px;
    border: 1px solid #27ba9b;
    border-radius: 2px;
    font-size: 18px;
    color: #27ba9b;
    font-weight: 400;
    line-height: 24px;
}

/* 生鲜 */
.shengxian .hd {
    height: 96px;
    line-height: 96px;
}

.shengxian .hd h2 {
    float: left;
    font-size: 29px;
    font-weight: 400;
}

.shengxian .hd .more {
    float: right;
}

.shengxian .hd ul {
    float: right;
    margin-right: 65px;
}

.shengxian .hd ul li {
    float: left;
}

.shengxian .hd li a {
    padding: 2px 7px;
    margin-left: 6px;
}

.shengxian .hd li a:hover {
    background-color: #27ba9b;
    color: #fff;
}

.shengxian .bd .left {
    float: left;
    width: 240px;
    height: 610px;
    background-color: pink;
}

.shengxian .bd .right {
    float: left;
    width: 1000px;
    height: 610px;
    background-color: skyblue;
}

小兔鲜-黑马程序员_第16张图片

 

 

你可能感兴趣的:(css,前端,html)