小米手机|青训营

一开始我的footer盒子需要在foot盒子下面的，可是foot里面的所有小盒子都加了左浮动，导致所有的盒子都脱标，没有标准流盒子去占位置 于是我给我的footer盒子加了浮动之后盒子就没有再页面上显示 经过后来的思考发现我可以给我的foot加一个大盒子，把那些浮动的小盒子全部放进foot的大盒子中，这样就占了个位置，下面的盒子不至于占浮动的位置 如果class为footer的标签没加浮动，标签会占用前面加了float的标签的位置（因为标签加float了就脱离了原来的位置，原来的位置就空出来了，后面没有加float的标签会补上去），如果给class为footer的标签加了float，就会和加了float的class为foot的标签显示在一行上（当然前提是没有宽度限制，本案例应该属于这种情况），所有就出了屏幕显示区域，看不见了。

<title>Document</title>
<style>

通配符选择器 * { 清除所有内外边距 margin: 0; padding: 0; box-sizing: border-box; }

    .nav {
        height: 500px;
        width: 350px;
        margin: 0 auto;
    }
    清除浮动
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;

    }
    .clearfix:after {
        clear: both;
    }

    .phone {
        height: 200px;
        width: 250px;
        background-color: red;
        margin: 0 auto;
    }

    .phone img {
    图像大小占满.phone盒子的全部
        width: 100%;
        height: 100%;
    }

    .nav h4 {
    给h4标题不加粗
        font-weight: 400;
        color: #ffa500;
        margin-top: 30px;
    }

    .nav h3 {

h3是块级元素，将h3转换为行内块元素 display: inline-block; color: red; margin-top: 20px; font-weight: 400; }

    .nav h6 {
        display: inline-block;

加上删除线 text-decoration: line-through; color: #a9a9a9; }

    .foot {
        height: 40px;
    }
    .foot .one {
    左浮动
        float: left;
        color: #a9a9a9;
        margin-top: 10px;

    }

    .foot .one::after {
        content: '87%';
        color: red;
    }

    .foot .two {
        /* display: inline-block; */

一浮动全部浮动 float: left; margin-top: 10px; margin-left: 5px; padding撑开盒子 padding: 1px; height: 15px; width: 180px; border: 1px solid red; 边框的圆角形状 border-radius: 7px; }

    .foot .two .tian {
        float: left;
        transition: all 1s ease .4s;
    }

    .two:hover .tian {
        width: 80%;
        height: 100%;
        background-color: red;
    }

    .foot .three {
        float: right;
        margin-top: 10px;
        color: #a9a9a9;
        margin-right: 5px;
    }

    .nav .footer {
        /* position: relative; */
        height: 60px;
        /* margin-top: 50px; */
        /* width: 300px; */
        background-color: #b22222;
        color: #a9a9a9;
        font-weight: 700;
        text-align: center;
        line-height: 60px;
        font-size: 20px;

    }

</style>

<div class="nav">
    <div class="phone">
        <img src="转存失败，建议直接上传图片文件 华为.jpg" alt="转存失败，建议直接上传图片文件">
    </div>
    <h4>Apple苹果iphone 6s plus (a1699) 32G 金色移动联通通信4G手机</h4>
    <h3>￥6088</h3>
    <h6>￥6988</h6>
    <div class="foot">
        <p class="one">已售</p>
        <p class="two">
            <span class="tian"></span>
        </p>
        <p class="three">剩余29件</p>
    </div></div>

    <div class="footer">立即抢购</div>
</div>

这是成果图