day8~day10 京东首页及一个手机商城案例练习，天猫侧边栏实现

还没有做完……

1. 居中：块级元素居中用margin:0,auto;行内元素给父元素text-algin:center
   子元素为block块级元素，居中状态可以为text-align,外面的父元素要居中
   定位中的居中效果：left,right为0,再给一个margin：0，auto;
2. 表单元素要添加form
3. text-align的垂直居中是和内容区（不包括border）高度相同时垂直居中
4. 图片格式：jpg,png,gif,webp
5. 定位：默认inherit，向上找祖先元素；绝对定位时要先给要参考的父元素一个相对定位，否则一直向上查找已定位的祖先元素
6. 定义时:not(:last-of-type)即可排除
7. 雪碧图用背景给，先将要插入的部分设置为行内块，然后给宽高，再给背景才能有效果
8. h1在一个页面中只出现一次，用于优化搜索引擎，使用时将h1设置为透明color:transparent;font-size:1px;再给宽高后给雪碧图添加为背景，即可显示，例如top结束后的logo京东图标
9. a的颜色要单独定义否则不起作用
10. 绝对定位时如果没有给top或其他则默认在父元素的左上角
11. 图层定位：标准流中直接定义图层，有定位时想要设定图层需要设置为同级定位，同为absolute或relative;定位的浮动流比标准流高
12. a不能继承颜色，字体等可以继承
13. h5中多个空格只识别一个空格的显示效果

• 计划任务
  
• 计划任务
  
• 完成任务
  

day7作业讲解——天猫侧边栏实现
图标引入

1. 搜索：iconfont进入阿里巴巴矢量图标页/或其他字体网站
2. 图标添加入库
3. 结束后将全部图标添加至指定文件夹
4. 下载至本地后，可以在demo中查看引入代码
5. 
   链接css到代码中
6. 引入字体图标后，新建样式index.css
7. 在引入图标时，将demo_index网页打开查看symbol中名称可调用
8. 模块为：ul下的li下有两部分：a和div,其中a里有i包着icon图标，div中有strong写三角
9. icon大小用font-size调整
10. 底部用绝对定位，中间用相对定位，li下的div用绝对定位
11. 小三角：上下左确定形状后调整位置
12. opacity：透明度；给ul下的li下的div给透明度，鼠标放上去时向右移动逐渐不透明
    

代码：
字体图标和css引入

    <link rel="stylesheet" href="bin/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="css/index.css"/>

页面布局

<ul class="line-center">
    <li>
        <a href=""><i class="iconfont icon-mao"></i></a>
        <div>会员权益 <strong></strong></div>
    </li>
    <li>
        <a href=""><i class="iconfont icon-shopcart"></i><br>购<br>物<br>车</a>
    </li>
    <li>
        <a href=""><i class="iconfont icon-renminbi"></i></a>
        <div>我的资产 <strong></strong></div>
    </li>
    <li>
        <a href=""><i class="iconfont icon-wujiaoxingkong"></i></a>
        <div>我的收藏<strong></strong></div>
    </li>
    <li>
        <a href=""><i class="iconfont icon-shijian"></i></a>
        <div>我的足迹<strong></strong></div>
    </li>
    <li>
        <a href=""><i class="iconfont icon-chongzhi0101"></i></a>
        <div>充值中心<strong></strong></div>
    </li>
</ul>
    <ul class="line-foot">
        <li><a href=""><i class="iconfont icon-bianji"></i></a>
            <div>用户反馈</div></li>
        <li class="tmcode"><a href=""><i class="iconfont icon-ico"></i></a>
        <div class="appadv">
            <img src="tmicon.jpg" alt=""/>
            <img src="iconfont.png" alt=""/>
        </div>
    </li>
        <li><a href=""><i class="iconfont icon-bianji"></i></a>
            <div>回顶部<strong></strong></div></li>
    </ul>
</div>

样式

*{
 margin:0;
    padding:0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}

.content{
    height:3000px;
}
ul,li{
    list-style: none;
}
/*侧边栏效果*/
.line{
    width:35px;
    height:100%;
    background: #000;
    position: fixed;
    right:0;
    top:0;
}
.line-center{
    position: relative;
    right:0;
    top:20%;
}
.line-foot{
    position: absolute;
    right:0;
    bottom:0;
}
.line ul li a{
    width:35px;
    height:35px;
    color:#fff;
    text-align: center;
    line-height: 35px;
    display: block;
}
.line ul li{
    position: relative;
}
.line-center li>div,.line-foot li:first-of-type>div,.line-foot li:last-of-type>div{
    height:35px;
    width:90px;
    background: #666;
    color:#fff;
    position: absolute;
    top:0;
    left:-150px;
    line-height: 35px;
    text-align: center;
    opacity: 0;
    transition: all .3s linear;

}
.line-center li>div strong,.line-foot li:last-of-type>div strong{
    position: absolute;
    right:-8px;
    top:10px;
    border-top:solid 8px transparent;
    border-left:solid 8px #666;
    border-bottom:solid 8px transparent;
}
.line-center li:nth-of-type(2){
      height:100px;
    padding-top: 10px;

}
.line-center li:nth-of-type(2) a{
    line-height:20px!important;
}
.line ul li:hover{
    background: #f00;
}
.line i{
    font-size: 20px;
}
.line-center li{
    margin-top: 5px;
}
.line-center li:hover div,.line-foot li:first-of-type:hover>div,.line-foot li:last-of-type:hover>div{
    opacity: 1;
    transform: translateX(60px);
}
.appadv{
    width:154px;
    height:207px;
    background:url(../tmiconbg.png) no-repeat;
    position:absolute;
    right: 35px ;
    bottom: -35px;
    padding:45px 0 0 30px;
    opacity: 0;
    transition: opacity .3s linear;
}
.appadv img{
    width:100px;
}
.tmcode:hover div{
    opacity: 1;
}

二、商城

1. 字体bootcss.com中可以下载;字体大小通过rem根据根元素比例调整

2. 固定头部底部fixed：不属于标准流，必须给定宽度100%,否则不显示,（相对定位没有脱离标准流）

3. 图片随屏幕大小自动变化为给图片宽度为100%，再给一个最小宽度

   eg:

    .banner img{
        width:100%;
        min-width:320px;
    }
   

4. c3定义的新盒子模型中，padding会将内容挤小，用于缩小图片

5. small:在父元素的基础上少

6. 小三角的表示：例如，如果是尖角朝上，则左右上，调用时

    border-left: solid 7px transparent;//左
    border-top: solid 7px #555;//上
    border-right: solid 7px transparent;//右
   

7. 弹性盒子：适用于一行中有多个元素，不适用于多行