小米网站主页面大模块——小模块+导航（浮动案例）

本文链接：https://blog.csdn.net/qq_45708377/article/details/125928728

本文是前端CSS初学笔记，通过小米模块案例讲解大模块、小模块及导航标签的实现。首先介绍如何初始化页面并创建粉色导航栏，接着详细阐述大模块中的轮播图布局和小模块的居中对齐方法，最后讨论了导航标签的构建。重点涉及到margin:0 auto的使用，以及在布局中避免float和margin:0 auto的冲突。

摘要由CSDN通过智能技术生成

前端CSS初学笔记-小米模块案例

在这里插入图片描述

一.大模块案例

目标图：在这里插入图片描述
1.初始化页面
在style中定义margin和padding为0

/*初始化 去除标签默认的margin和padding*/
*{
    margin: 0;
    padding: 0;
}

1.在body中定义头部标签

<body>
    <!-- 网页的头部 -->
    <div class="header"></div>
</body>

在style中设置格式
        .header{
            height: 40px;
            background-color: #333;
        }

2.定义粉色导航栏

<!-- 网页的导航  body中-->
<div class="nav"></div>

在style中设置格式

        .nav{
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;    /*为了使模块居中*/
        }

margin: 0 auto;的作用：
①对DIV设置margin:0 auto样式，是为了让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。
②为什么要设置margin:0 auto？
设置此样式让DIV布局水平居中于浏览器中，目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式，会造成布局在有的浏览器中居中有的浏览器靠左。
③margin:0 auto和float不能重复使用
如果要让DIV布局居中浏览器中，加入margin:0 auto就不能加入float浮动样式，避免逻辑错误，造成布局居中不兼容。

3.定义网页轮播图
先定义大框架banner，再在内部定义left和right小框架，但是需要使用浮动float元素将左侧的框架移到左侧，将右侧的框架移到右侧，否则left和right都是块级元素，会分成两行。

    <!-- 网页的轮播图 body中-->
    <div class="banner">
        <div class="left"></div>
        <div class="right"></div>
    </div>

       /* style中*/
        .banner{
            width: 1226px;
            height: 460px;
            background-color: blue;
            margin: 0 auto;   /*对div适用*/
        }
        .left{
            float: left;
            width:234px;
            height:460px;
            background-color:#ffa500;
        }
        .right{
            float: right;
            height:460px;
            width:992px;
            background-color:#87ceeb}

所有代码
<!--  -->