前端学习-简单项目练习01-小兔鲜

一些笔记

使用flex-wrap换行（一行一个元素）

ul {
    display: flex;
    flex-wrap: wrap;
}

ul li {
    flex: 100%;
}

html中让img撑满整个div

div要设置宽高，img也要有宽高且均为100%，最重要的是img要给display: block。

<div id="mainDiv" style="width: 100%; height: 100%">
	<!-- 让图片撑满DIV -->
    <img src="/logo/bg.png"
         style="display: block; width: 100%; height: 100%"
         />
</div>

怎么让li不换行排列

本来我是用 给ul加上display:flex；
看起来实际上对li元素加上float：left就可以

精灵图

• 使用i元素

<i class="sprites"></i>

• 为元素设置宽高、增加背景图

.xtx_topic ul li .social i {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 14px;
    margin-right: 5px;
    top: 2px;
    background-image: url(./images/website/sprites.png);
    background-size: 400px 400px;
    background-repeat: no-repeat;
}

• 调整位置

.xtx_topic ul li .social .like i {
    background-position: -120px -110px;
}

怎么让元素的高度等于宽度

.xtx_footer .contact dl dd {
    float: left;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}