实战整体布局学习上

1.```html

header

main

footer

``` 2.```html

    <!-- 中：搜索框 -->
    <div class="search">
        <div class="logo">JD</div>
        <div class="zoom iconfont icon-xianrenqiu"></div>
        <input type="text" value="台式机组装" class="words">
    </div>

    <!-- 右：登录按钮 -->
    <a href="" class="login">登录</a>

</div>

<!-- 主体 -->
<div class="main">main</div>

<!-- 页脚 -->
<div class="footer">footer</div>

``` 3.```css /* 初始化 */ /* 将所有元素的浏览器给它的默认样式全部重置，由用户自定义， */ /* 以确保每个元素，在所有的浏览器中看上去是完全一样的 */ * { margin:0; padding:0; box-sizing:border-box; }

a {
/* 去掉a的下划线 */
text-decoration: none;
color: antiquewhite;

}

body {
background-color: #f6f6f6;
}

/* :root====html /
:root {
/ 字号是可继承的属性，为了后面使用rem */
font-size:10px
}

body {
/* font-size:16px; /
/ 16px=1.6 * 10px /
/ 10px == 1rem */
font-size: 1.6rem;
}

/* 用媒体查询来动态设置字号，使其在较小的手机上也能看得见 */
@media screen and (min-width: 480px) {
:root {
font-size:12px;
}
}

@media screen and (min-width: 640px) {
:root {
font-size:14px;
}
}

@media screen and (min-width: 720px) {
:root {
font-size:16px;
}
}

4.```css
/* 用于首页的css */
@import url("reset.css");


.header {
   background-color: #e43130;
   color: #fff;
   height: 4.4rem;

   /* 固定定位 */
   position:fixed;
   left: 0;
   right: 0;
   top: 0;
}

.main {
   height: 1000px;

   /* 绝对定位 */
   position:absolute;
   /* top: 必须大于或等于页眉的高度才可以保证主体内容顶部的正常显示 */
   top: 4.4rem;
   left: 0;
   right: 0;
}

.footer {
   background-color: #ccc;
   color: #fff;
   height: 4.4rem;

    /* 固定定位 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}