【电商11】main & focus图片的html方式

focus图片的html方式——放在li里面

• 尽量少用100% 有讲究hhh

• 父子两者都有margin-top而造成的盒子塌陷情况

• 轮播图是用js控制ul

html

    <div class="w">
        <div class="main">
            <!-- focus模块 -->
            <div class="focus">
                <!-- 轮播图是用js控制ul -->
                <ul>
                    <li><img src="upload/focus1.png" alt=""></li>
                </ul>
            </div>
            <!-- newsflash模块 -->
            <div class="newsflash"> </div>
        </div>
    </div>

index.css(是index喽)

.main {
    height: 445px;
     980px;
    margin-left: 220px;
    margin-top: 10px;   /* main的父亲元素是body，一定没有margin-top，所以不会有两者都有margin-top而造成的盒子塌陷情况 */
}

.focus {
    float: left;
    height: 100%;
     721px;
    background-color: green;
}

.newsflash {
    float: right;       /*两者中间正好有个缝隙*/
    height: 100%;   /* 尽量少用100% 有讲究hhh*/
     250px;
    background-color: blue;
}