品优购项目二（）

最新推荐文章于 2022-03-30 22:56:59 发布

pick豆子

最新推荐文章于 2022-03-30 22:56:59 发布

阅读量506

点赞数

本文链接：https://blog.csdn.net/qq_42964711/article/details/105961795

版权

nav范围

在这里插入图片描述

nav布局

一个大盒子里俩个小盒子
左边盒子里装俩个盒子dt和dd俩个盒子。上面是dt,下面是dd。然后dt和父亲一边大就把dd挤下来了。

在这里插入图片描述

      <div class="dropdown fl" >
          <div class="dt">全部商品分类</div>
          <div class="dd">哒哒哒</div>
      </div>
      //css====================
          width: 100%;
          height: 100%;

div里放12个li 。每个li后面放i 存>
鼠标变白只变li，不变>
加一个内边距，防止浮动元素>靠最右面。

padding：0 10px

6.div的ul的8个li。大小给a。用padding撑开
在这里插入图片描述

.navitems li a{
    display: block;
    height:45px;
    line-height: 45px;
    padding: 0 25px;
    font-size: 16px;
    color:#333;
}

底部footer

底部footer制作，因为底部和头部是共享的。都用common.css.
利用精灵图存放图片。一个li里放一个i和一个div。然后根据精灵图方位求图片。精灵图：就是把图片存放在一起，然后移动距离。浮动的盒子可以直接给大小，所以i不需要转换为块元素。
列表用dl里放dt（标题）和dd（列表）
底部栏。div里放俩个小p。

主体设计

一个大div里面放左右俩个小div

在这里插入图片描述

 2. 焦点图。垂直居中，先走高度一半。然后往回走height一半。一堆小li来回切换，所以是链接。

ul>li>a>img
//==============
            <div class="focus fl">
                <a href="#" class="arrow-l"> < </a>
                <a href="#" class="arrow-r"> > </a>
                <ul>
                    <li><a href=""><img src="upload/banner1.jpg" class="main-img"></a></li>
                </ul>
            </div>
//================================
.arrow-l{
    position: absolute;
    top:50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background-color: pink;
}

小圆圈ol<li*4

.circle li {
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border: 1px solid #fff;
    border-radius: 50%;
    /* 鼠标经过小手 */
    cursor: pointer;
    /* background-color: #fff; */
}

newsflash。一个大div放三个小div
品优购快报：上下俩个div。下面div>li*5
中间：ul>li*12
一行装不下4个li怎么办。保证li父亲ul能装4个li。保证比250px大。为了防止ul比父盒子大，露出一部分，会隐藏溢出。.lifeservice加overflow-hidden。但是最后一个盒子就小了一点，不会影响大局。