前端项目01 品优购项目 DAY04

詹詹很沾
136 阅读10分钟

DAY 04 品优购项目

学习目标：购物车的悬浮小点的设置

品优购首页布局

2. header制作

  1. shopcar制作

注意：1.count统计部分，需要使用绝对定位来做；2.count统计部分，不要给宽度，因为可能买的件数太多会被撑开；3.注意左下角不是圆角，而其他三个是圆角

加了定位的盒子默认转换为行内块元素，所以需要设置行高，并且行高是可以继承的，在设置购物车浮动文字部分显示时，要注意更改行高，因为文字时居中对齐的，对于不适合的行高来说，文字的显示位置是有问题的。

<div class='count'>8</div>

.count {
     position:absolute;
     /*定位向上移动是负值*/
     top:-5px;
     /*对于文字显示来说，增加数值应该是往右走，所以对于我们盒子的定位来说，是左对齐*/
     left:100px;
     background-color:#e60012;
     /*不设置宽度，但是要设置行高*/
     height:14px;
     /*盒子与文字之间不要太挤，主要利用padding*/
     padding:0 3px;
     /*继承了父的行高，并不适合显示*/
     line-height:14px;
     color:#fff;
     border-radius：7px 7px 7px 0；
}

对于购物车浮动的小圆点的形状设置来说，主要利用的是定位里的知识，即圆角矩形设置四个角，对于该设置来说，其主要就是利用数值来设置圆度，主要分为以下两种情况：

  • 四个角数值相同
border-radius：15px；
  • 对于不同数值来说，需要我们注意的是具体位置
border-radius：左上角 右上角 右下角 左下角

  1. nav制作

  • nav盒子通知栏有高度，并且还有一个下边框，即一条贯穿整个页面的实线。
.nav {
    height:45px;
    border-bottom:2px solid #b1191a;
}
  • nav盒子也是分成两个盒子
  1. 左侧盒子 左侧浮动 dropdown 下拉导航 里面包含了dt dd
  2. 右侧盒子 左侧浮动 navitems 导航栏组
<div class='nav'>
     <div class='w'>
          <div class='dropdown fl'>123</div>
          <div class='navitems fl'>abc</div>
     </div>
</div>

对于左侧盒子来说，其特殊的部分在于包含了一个下拉导航，主要使用类名为dt和dd来设置的，需要注意的是dt和dd是兄弟关系，即并列的div盒子。

<div class='dropdown fl'>
     <div class='dt'>全部商品名称</div>
     <div class='dd'>asd</div>
</div>

.dropdown {
/*此处设置的是左侧大盒子的样式*/
    width:209px;
    height:45px;
}

.dropdown .dt {
    width:100%;
    height:100%;
    background-color:#b1191a;
    font-size:16px;
    color:#fff;
    text-align:center;
    line-height:45px;
}

对于dd部分来说，宽度与dt是一致的，所以我们只用改变高度。

.dropdown .dd {
     height:465px;
     baackground-color:#c81623;
     /*dd的大盒子与最开始的nav重合了，故利用margin高度加上2px，该2px是前面我们设置nav的宽度*/
     margin-top:2px;
}

对于dd部分来说，下拉菜单里的内容其实也就是一个一个的列表，即一个大的ul中间包含了一个一个小li，对于li来说，每一个文字又是一个一个可以打开的链接，而且对于显示来说，最右侧还有一个字体图标。

<div class='dd'>
     <ul>
        <li class='menu_item'><a href='#'>家用电器</a> <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>手机</a> 、
        <a href='#'>数码</a> 、
        <a href='#'>通信</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>电脑</a> 、
        <a href='#'>办公</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>家居</a> 、
        <a href='#'>家具</a> 、
        <a href='#'>家装</a> 、
        <a href='#'>厨具</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>男装</a> 、
        <a href='#'>女装</a> 、
        <a href='#'>童装</a> 、
        <a href='#'>内衣</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>个护化妆</a> 、
        <a href='#'>清洁用品</a> 、
        <a href='#'>宠物</a> 、
        <a href='#'>厨具</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>鞋靴</a> 、
        <a href='#'>箱包</a> 、
        <a href='#'>珠宝</a> 、
        <a href='#'>奢侈品</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>运动户外</a> 、
        <a href='#'>钟表</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>汽车</a> 、
        <a href='#'>汽车用品</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>母婴</a> 、
        <a href='#'>玩具乐器</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>食品</a> 、
        <a href='#'>酒类</a> 、
        <a href='#'>生鲜</a> 、
        <a href='#'>特产</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>医药保健</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>图书</a> 、
        <a href='#'>音像</a> 、
        <a href='#'>电子书</a> 
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>彩票</a> 、
        <a href='#'>旅行</a> 、
        <a href='#'>充值</a> 、
        <a href='#'>票务</a>
        <span class='iconfont icon-xxx'></span></li><li>
        <a href='#'>理财</a> 、
        <a href='#'>众筹</a> 、
        <a href='#'>白条</a> 、
        <a href='#'>保险</a>
        <span class='iconfont icon-xxx'></span></li>

对于包含很多部分的类名来说，除了一个一个包含的引用，还可以直接对于li进行一个class命名，方便后续的引用[对于这种很多的li，我们方便一下全部设置好类名的方法是，放在同一个位置，按住鼠标滚轮，下拉至我们将要设置的终点，之后再输入文字，此时相当于是对选中的所有增加了我们想要输入的内容]。

对于左侧盒子样式的表现来说，我们可以总结成以下几点：

  1. 在大盒子中包含的是一个一个小盒子
  2. 小盒子左右两边有间隙
  3. 鼠标经过li时，盒子的背景颜色由红色变为白色，并且li盒子中的文字由白色变为红色
.menu_item {
     height:31px;
     line-height:31px;
     /*li左右与大盒子之间都是有间隙的，对于该间隙来说，我们有三种方式：1.li的margin2.ul的padding3.ul的padding*/
     margin:1px;
     padding-left：10px;
}
/*此处使用的是css的鼠标经过样式*/
.menu_item:hover {
     background-color:#fff;
}
/*鼠标经过li里面的a变色*/
.menu_item:hover a {
     color:#c81623;
}
.menu_item a {
     font-size:14px;
     color:#fff;
}
.menu_item span {
     float:right;
     font-size:18px;
     color:#fff;
}

对于右侧盒子的样式来说，相对简单，也可以看成是一个ul下面有很多的li，每一个文字是一个a链接。对于我们的右侧盒子来说，我们可以看到最左侧是更宽一点的，但是我们每个li的字体数可能不同，故我们都不设置宽度，对于中间的空隙来说，我们都是利用padding或者margin来设置的。最左侧更宽一点，所以在最开始的navitems的样式设置中加入margin-left的宽度。

<div class='navitems fl'>
     <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>
     </ul>

.navitems li {
     float:left;
}
.navitems li a {
/*display设置的是什么忘记了*/
     display:block;
     height:45px;
     /*padding的用法，四个位置代表的是什么意思，还需要再看一下*/
     padding:0 25px;
     line-height:45px;
     font-size:16px;
}

DAY 04 品优购项目

学习目标：购物车的悬浮小点的设置

品优购首页布局

2. header制作

  1. shopcar制作

注意：1.count统计部分，需要使用绝对定位来做；2.count统计部分，不要给宽度，因为可能买的件数太多会被撑开；3.注意左下角不是圆角，而其他三个是圆角

加了定位的盒子默认转换为行内块元素，所以需要设置行高，并且行高是可以继承的，在设置购物车浮动文字部分显示时，要注意更改行高，因为文字时居中对齐的，对于不适合的行高来说，文字的显示位置是有问题的。

<div class='count'>8</div>

.count {
     position:absolute;
     /*定位向上移动是负值*/
     top:-5px;
     /*对于文字显示来说，增加数值应该是往右走，所以对于我们盒子的定位来说，是左对齐*/
     left:100px;
     background-color:#e60012;
     /*不设置宽度，但是要设置行高*/
     height:14px;
     /*盒子与文字之间不要太挤，主要利用padding*/
     padding:0 3px;
     /*继承了父的行高，并不适合显示*/
     line-height:14px;
     color:#fff;
     border-radius：7px 7px 7px 0；
}

对于购物车浮动的小圆点的形状设置来说，主要利用的是定位里的知识，即圆角矩形设置四个角，对于该设置来说，其主要就是利用数值来设置圆度，主要分为以下两种情况：

  • 四个角数值相同
border-radius：15px；
  • 对于不同数值来说，需要我们注意的是具体位置
border-radius：左上角 右上角 右下角 左下角

  1. nav制作

  • nav盒子通知栏有高度，并且还有一个下边框，即一条贯穿整个页面的实线。
.nav {
    height:45px;
    boeder-bottom:2px solid #b1191a;
}
  • nav盒子也是分成两个盒子
  1. 左侧盒子 左侧浮动 dropdown 下拉导航 里面包含了dt dd
  2. 右侧盒子 左侧浮动 navitems 导航栏组
<div class='nav'>
     <div class='w'>
          <div class='dropdown fl'>123</div>
          <div class='navitems fl'>abc</div>
     </div>
</div>

对于左侧盒子来说，其特殊的部分在于包含了一个下拉导航，主要使用类名为dt和dd来设置的，需要注意的是dt和dd是兄弟关系，即并列的div盒子。

<div class='dropdown fl'>
     <div class='dt'>全部商品名称</div>
     <div class='dd'>asd</div>
</div>

.dropdown {
/*此处设置的是左侧大盒子的样式*/
    width:209px;
    height:45px;
}

.dropdown .dt {
    width:100%;
    height:100%;
    background-color:#b1191a;
    font-size:16px;
    color:#fff;
    text-align:center;
    line-height:45px;
}

对于dd部分来说，宽度与dt是一致的，所以我们只用改变高度。

.dropdown .dd {
     height:465px;
     baackground-color:#c81623;
     /*dd的大盒子与最开始的nav重合了，故利用margin高度加上2px，该2px是前面我们设置nav的宽度*/
     margin-top:2px;
}

对于dd部分来说，下拉菜单里的内容其实也就是一个一个的列表，即一个大的ul中间包含了一个一个小li，对于li来说，每一个文字又是一个一个可以打开的链接，而且对于显示来说，最右侧还有一个字体图标。

<div class='dd'>
     <ul>
        <li class='menu_item'><a href='#'>家用电器</a> <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>手机</a> 、
        <a href='#'>数码</a> 、
        <a href='#'>通信</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>电脑</a> 、
        <a href='#'>办公</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>家居</a> 、
        <a href='#'>家具</a> 、
        <a href='#'>家装</a> 、
        <a href='#'>厨具</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>男装</a> 、
        <a href='#'>女装</a> 、
        <a href='#'>童装</a> 、
        <a href='#'>内衣</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>个护化妆</a> 、
        <a href='#'>清洁用品</a> 、
        <a href='#'>宠物</a> 、
        <a href='#'>厨具</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>鞋靴</a> 、
        <a href='#'>箱包</a> 、
        <a href='#'>珠宝</a> 、
        <a href='#'>奢侈品</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>运动户外</a> 、
        <a href='#'>钟表</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>汽车</a> 、
        <a href='#'>汽车用品</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>母婴</a> 、
        <a href='#'>玩具乐器</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>食品</a> 、
        <a href='#'>酒类</a> 、
        <a href='#'>生鲜</a> 、
        <a href='#'>特产</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>医药保健</a>
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>图书</a> 、
        <a href='#'>音像</a> 、
        <a href='#'>电子书</a> 
        <span class='iconfont icon-xxx'></span></li>
        <li>
        <a href='#'>彩票</a> 、
        <a href='#'>旅行</a> 、
        <a href='#'>充值</a> 、
        <a href='#'>票务</a>
        <span class='iconfont icon-xxx'></span></li><li>
        <a href='#'>理财</a> 、
        <a href='#'>众筹</a> 、
        <a href='#'>白条</a> 、
        <a href='#'>保险</a>
        <span class='iconfont icon-xxx'></span></li>

对于包含很多部分的类名来说，除了一个一个包含的引用，还可以直接对于li进行一个class命名，方便后续的引用[对于这种很多的li，我们方便一下全部设置好类名的方法是，放在同一个位置，按住鼠标滚轮，下拉至我们将要设置的终点，之后再输入文字，此时相当于是对选中的所有增加了我们想要输入的内容]。

对于左侧盒子样式的表现来说，我们可以总结成以下几点：

  1. 在大盒子中包含的是一个一个小盒子
  2. 小盒子左右两边有间隙
  3. 鼠标经过li时，盒子的背景颜色由红色变为白色，并且li盒子中的文字由白色变为红色
.menu_item {
     height:31px;
     ine-height:31px;
     /*li左右与大盒子之间都是有间隙的，对于该间隙来说，我们有三种方式：1.li的margin2.ul的padding3.ul的padding*/
     margin:1px;
     padding-left：10px;
}
/*此处使用的是css的鼠标经过样式*/
.menu_item:hover {
     background-color:#fff;
}
/*鼠标经过li里面的a变色*/
.menu_item:hover a {
     color:#c81623;
}
.menu_item a {
     font-size:14px;
     color:#fff;
}
.menu_item span {
     float:right;
     font-size:18px;
     color:#fff;
}

对于右侧盒子的样式来说，相对简单，也可以看成是一个ul下面有很多的li，每一个文字是一个a链接。对于我们的右侧盒子来说，我们可以看到最左侧是更宽一点的，但是我们每个li的字体数可能不同，故我们都不设置宽度，对于中间的空隙来说，我们都是利用padding或者margin来设置的。最左侧更宽一点，所以在最开始的navitems的样式设置中加入margin-left的宽度。

<div class='navitems fl'>
     <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>
     </ul>

.navitems li {
     float:left;
}
.navitems li a {
/*display设置的是什么忘记了*/
     display:block;
     height:45px;
     /*padding的用法，四个位置代表的是什么意思，还需要再看一下*/
     padding:0 25px;
     line-height:45px;
     font-size:16px;
}
avatar
文章
阅读
粉丝