一，搭建网页

1，搭建网页思维

graph TD
分析大框架 -->想好用什么属性去布局大框架里面的大盒子-->再逐一往里嵌套所需的html节点-->html框架完成后用css属性进行美化-->完成网页

在网页制作过程中我们可以采取从外到里，从大框架到小细节的搭建方法，理清思路整理我们的网页内容。然后去分析结构，然后考虑用什么样的属性进行布局；

思维扩散化，想一下在这个区域用什么属性去布局最优解，同时例如选择浮动属性去做浮动我们就要考虑浮动带来的影响，并且有意识的去避免或清除其影响；

遇到bug时应该去控制台查看哪个节点或属性出了问题逐一解决；最主要的是要理解好所用属性的特性以及影响，属性就像一个技能我们只有更了解他我们才更能运用自如；

2，搭建网页内容

1，html部分

在搭建html之前我们应该先把我们所需的文件夹分门别类的搭建好，存放对应的内容

首先呢，我们应该先书写html的基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

在link css的文件的时候，我们应该把公共样式的css写在上面，这样有利于后期的覆盖

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/nike.css">

注意seo的优化，例如像在title，logo，这些地方给予合适的关键词来对我们的seo进行优化，达到提高浏览器排名的效果；

标签选择器语义化，在起类名的时候应该有思维有具体含义要让人看的懂，清楚的表达某块区域内容的作用；

标签语义化，例图的标签都很好的语义化，清晰的能知道每块区域的内容和作用；

     <header>
    </header>
    
     <nav>
    </nav>

    <section>
    </section>
    
    <footer>
    </footer>

2，css部分

1，可以定义一个reset.css的文件对标签进行初始化，再来一个commoon.css把公共样式都写在这个css，最好就是例如nike.css的文件来写我们的css属性；

2，css名要写对，而且不要写太多层级影响效果，而且要注意最好不要出现用标签去写css影响加载；

3，ey='value';名字和内容都要注意写对以及理解其效果和带来的影响，就能给我们对html的"装饰"更加顺利；

二，常用布局

1，三栏布局

当我们利用浮动属性写三栏布局时，html应该写左、右、中的布局方法，才能使得我们的盒子布局能够正常显示在同一行上；

那如果我们的html写的是左，中，右的布局方式呢，我们从运行图就可以看到由于html书写顺序的错误，左盒子左浮动之后，由于左盒子脱离标准流，所以中间的标准流盒子会往上顶，再给右盒子设置右浮动后，由于受到中间盒子的阻挡，所以它无法上去；

而且中间的盒子只能用块级盒子，因为浮动只有块级元素看不到他；

2，两栏布局

这个和三栏布局的方法相同就只是把右边的浮动盒子删掉，就可以实现效果啦；

3，定位布局

需要注意的是position：sticky；和position：fixed；这两个属性有所不同；如果我们用sticky去做吸顶的话，要把吸顶的盒子单独拎到外面也就是和大框架盒子兄弟级才能实现我们想要的效果；

三，bug整理

1，浮动

Q：子盒子设置浮动导致父盒子高度丢失，无法用子盒内容撑开父级盒子

解决方法：

1，给父盒子固定宽高，不推荐使用，容易出现问题；

2，父级清除浮动，清除浮动的方法有给父级，overflo：hidden；内墙法等方法清除；

2，空白折叠现象

Q：当出现了如图的空白折叠现象；

解决方法：我们可以根据设置解决方法的属性的影响大小选择最适合的解决方法；

1，给父盒子font-size:0;

2，设置浮动；

3，定宽影响

不能给外面的大盒子定固宽度，而是应该让宽度去自适应，才能使用不同的屏幕宽度；

编写静态网页