1.2 简单主页布局-只使用到float与衍生网格

Home Page

我对这次的结果很满意。（个人链接）

html文件

    

        
        

            

                
简介
                
爱好
                
能力
            
            点赞
        
        
    


    

        
        

            
XXX
            
男，22岁
就读于XXXX大学
一个热爱互联网的“搬砖工人”
            
        
        
    

0 头部文件

调整全局盒模型

:root {
    box-sizing: border-box;
}
*,::before,::after {
    box-sizing: inherit;
    
}

由于内容简单不使用 “保持距离”

/*body * + * {
    margin-top: 1.5em;
}*/

内容自适应

.container {
    width: 540px;
    margin: 0 auto;
    overflow: auto;
}
@media (min-width: 576px) {
    .container {
        width: 540px;
    }
    main .pokemon {
        width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        width: 720px;
    }
    main .pokemon {
        width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

body清零、全局字体、背景色

body {
    margin: 0;
    color: #fff;
    font-family:  "黑体", "华文仿宋", Arial, sans-serif;
    background-color: #fee8b8;
}

1.Header

一般先将内容分级，分为：左边logo，右边items

1.1 logo

logo规定尺寸 header中以高为准, 3字符高度 3em。
img是inline元素，会出现下端有非padding、非margin的空格，本是用来行内的desceder空间。用 display:block; 消除或者修改 vertical-align: bottom; 设置消除。

.suni {
    height: 3em;
    vertical-align: bottom;
}

1.2 items

向右对齐 float: right; 由于float没有竖直对齐办法，而header高度固定，故使用 margin-top 定位。直接添加图片比伪元素更简单~~~~

.items {
    float: right;
    margin-top: 23.6px;
}

消除列表、连接格式

header ul {
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
}
header li {
    display: inline;
    padding: 0 1em;
}
header a {
    text-decoration: none;
    color: inherit;
}

1.3 添加色彩

背景较为深色映衬白底文字，上宽下窄形成落地效果，button加深添加层次感。

header {
    padding: 1em 0 0.5em;
    background-color: #75daad;
    box-shadow: -2px 4px 4px #999;
    margin-bottom: 2px; 
}
header button {
    color: inherit;
    background-color: #1eb2a6;
    padding: .4em .5em;
    border-radius: .5em;
    border: none;
    font-family: inherit;
    box-shadow: -1px 2px 1px #777;
    margin-bottom: 2px;
    cursor: pointer;
}
header button img {
    width: 1em;
    margin-right: .5em;
}

2.main

内容布局，以背景图，居中为主题。

2.1 全部居中

块级元素， margin: 0 auto 居中。

main {
    background-color: inherit;
}
main img {
    display: block;
    margin: 0 auto;
}
.logo {
    width: 18em;
}
.intro {
    width: 20em;
    margin: 0 auto;
    text-align: center;
    text-shadow: -1px 1.5px 2px #999;
}
.pokemon {
    width: 831px;
}

2.2 视觉效果

卡通折纸风格凸显浪漫。

.intro p {
    font-size: 1.2rem;
    line-height: 1.5em;
}
.intro input {
    color: inherit;
    background-color: inherit;
    border-radius: .5em;
    border: 2px solid white;
    margin-bottom: 2px;
    background-color: #f6d186;
    font-size: 1.1rem;
    font-family: "华文中宋", "黑体";
    box-shadow: -1px 2px 1px #aaa;
    cursor: pointer;
}

压缩资源

由于确定了图片尺寸，于是用PS进行合适压缩。修复网页资源反应慢的问题。