十天学会HTML+CSS(第九天)：固定定位

今天学习的知识点是小米商城悬浮工具栏的固定定位。

第一步：添加工具栏盒子

工具栏是相对浏览器视口定位，所以是独立的。所以在最底部单独添加一个大盒子<div class="tools"></div>里面五个超链接，超链接里一张图一句文本。

    <div class="tools">
        <a href="###">
            <img src="./images/tool1.png" alt="">
            <span>手机App</span>
        </a>
        <a href="###">
            <img src="./images/tool2.png" alt="">
            <span>个人中心</span>
        </a>
        <a href="###">
            <img src="./images/tool3.png" alt="">
            <span>售后服务</span>
        </a>
        <a href="###">
            <img src="./images/tool4.png" alt="">
            <span>人工客服</span>
        </a>
        <a href="###">
            <img src="./images/tool5.png" alt="">
            <span>购物车</span>
        </a>
    </div>

第二步：添加样式

开始从外向内添加样式，整体来个背景色。

.tools{
    background-color: #fff;
}

每个超链接固定宽高、文字居中、调整文字颜色大小、加个边框、上方来点内边距。

.tools a{
    display:block;
    text-decoration: none;
    width: 80px;
    height: 90px;
    text-align: center;
    color:orange;
    font-size: 14px;
    border: 1px solid #f5f5f5;
    padding-top:20px;
}

图片固定宽高并居中。搞定，看下效果

.tools a img{
    display:block;
    width: 30px;
    height: 30px;
    margin:auto;
}

第三步：固定定位

用固定定位position: fixed;将工具栏定位到视口右侧。

.tools{
    background-color: #fff;
    position: fixed;
    right:0;
    bottom:10px;
}

第四步：视频教程