【WEB】实战之html与css扁平化风格博客

1.重置样式及文件结构

目的：使样式在不同浏览器下保持一致。

如果将系统样式全部清零，那相当于是无论好坏一并打死，并不是一个很好的解决方案，因此使用normalize.css(常规化).

用法：引入：
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">

2.布局

（1）头部：导航页面的布局

首先使用了< header >标签进行包裹，内部放置< nav >

 <header>        <nav>            <ul>                <li class="logo"><a  href="#">张小窝</a></li>                <li><a href="#">111</a></li>                <li><a href="#">111</a></li>                <li><a href="#">111</a></li>            </ul>        </nav>        <div id="banner"></div>   </header>

header是html5中的新标签，用来定义文档的页眉（介绍信息）。
nav标签定义导航链接的部分。

css部分：包括两个重点

1.去除ul，li自身样式
2.解决用户只能用过点击文字访问链接的问题

nav ul{    list-style:none;//去除自带样式    margin:0;}nav ul li{    display:inline-block;//设为内联后，将会横排显示    line-height: 50px;    float:right;    margin-right: 20px;}nav ul li a{    line-height: 50px;    text-decoration: none;    display:inline-block;//设置为内联样式后，就可以改变其高度    height: inherit;//高度设为继承上层父级元素，达到了2的目的}nav ul li.logo{    float:left;}

（2）内容

布局没有难度，具体如下：

<div id="banner">   <div class="inner">    <h1>张小窝</h1>    <p class="sub-reading">ffff</p>    <button>了解我</button>    <div class="more">更多</div>   </div>           </div>

css有如下需要注意的地方：

1.使内容显示在界面的中上部

2.去掉button自带的样式

banner .inner{    max-width: 300px;    text-align: center;//文字居中    margin: auto;//布局居中    position: relative;//控制内容到顶部的距离    top:160px;}#banner .inner h1{    margin:0;}button{    border:none;    background-color: #333;    color:#eee;    padding:10px;}

3.界面效果

参考网址：https://html5up.net/spectralbu‘huo

4.其他CSS知识点盘点

1.img

img的大小不受父元素的约束，会有可能溢出父容器，因此要注意同时设置Img的大小。

2.清除浮动（重要）

.wrapper:after{    content:''    display:block;    clear:both;}

3.< section >
h5新标签，用于标识断落

4.div间无缘无故产生的空隙

如果经过检查不是margin或者padding的原因，可以尝试设置font-size=0，因为空隙可能是不同组件之间的行间距不同导致的空隙的产生。

5.控制两个元素并列显示
.element{
float:left;
width:50%;
box-sizing:border-box
}

6.筛选

.class:first-child.class:nth-child(2).class:nth-child(3)

7.背景图片的控制

background-attachment:fixed;//背景图片固定，不随滚动而滚动background-repeat:no-repeat;//关闭默认的重复显示background-size:cover;//设置平铺background-position:center center;//图片居中