共计 2833 个字符，预计需要花费 8 分钟才能阅读完成。
心若没有栖息的地方，到哪里都是在流浪。
这篇文章记录了我写静态博客首页的准备工作、思路布局流程，可不要小看了哦????，蛮多小细节需要注意的呢，如果有什么不对的地方，可以告诉我哈
这个静态首页也是对我前两篇文章的实际运用，感兴趣的小伙伴可以跟着我的思路一起敲键盘哦
准备工作
首先，我们要写一个网页，前期的准备工作必不可少，会采取结构与样式相分离的思想，文件目录格式如下：
布局流程
CSS 属性书写顺序
这是扩展的一个知识点，很重要，在实际编写中尽量遵循这样的顺序
- 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 写在最前面）
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient
页面布局分析
- 首先确定页面的版心，即页面的可视区
- 分析页面的行模块，以及每个行模块中的列模块
- 编写网页的时候，还是老话哦，遵循先有结构后有样式的原则
- 运用盒子模型的原理，使用 div+CSS 布局来空着网页的各个模块
页面制作
页面的整个版心的为 1000px，水平居中对齐，我们把版心单独定义为：
.hcenter{
width: 1000px;
margin: 0 auto;
}注意：导入样式表采用的是链式：< link rel=”stylesheet” href=”css/index.css”>
导航栏头部 header 制作
完成后的效果：
分析导航栏布局，外面是一个大盒子包裹着内部四个小盒子，分别为 logo 部分、菜单部分、搜索栏部分以及头像部分，互为兄弟元素，先将布局结构写出来，大框架写出来之后再来添加内容：
logo 部分
<div class="logo">
<img src="images/logo.png" >
</div>上面有写到的 CSS 属性编写顺序，布局定位属性一定要写在前面
.logo{float: left;}以上就实现了 logo 的部分：
导航栏菜单栏
接下来是导航菜单部分，logo 浮动了，要使四个盒子在同一行，四个盒子都需要浮动：
导航栏菜单部分的布局是采用 ul>li>a 的结构
此时我们需要给 menu 设置浮动，但是 li 是竖着的，并未在一行内，所以给 li 也应该设置浮动
.menu{float: left;}
.menu ul li{float: left;}此时的 a 链接显示为：
那我们应该怎么让文字垂直居中且有间距呢，接下来我们具体来实现一下
这里我们不给 menu 设置宽度，给链接设置一个高度，这里就有一个问题了，a 标签要想设置高度是不是应该转换模式呢，所以我们用到了 display
还有一个知识点，文字垂直居中，设置高度为 30px，我们再设置一个 line-height 为 30px，则文字会自动垂直居中。
以上步骤完成之后，我们就可以看到一个垂直居中有间距的导航菜单栏
搜索部分
注意啦，接下来是笔记重要的搜索部分布局????
之前有笔记写过： 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，避免引起其他的问题。 所以我们这里的 search 盒子也需要浮动。
html 结构
<div class="search">
<input type="text" id=""value=" 想搜索什么呢 " />
<button type="button"> 按钮 </button>
</div> 左边的 input 部分的样式比较简单，有一个小细节就是用到了 CSS 属性选择器，选择 input 输入框内的提示问题，设置颜色属性：
现在到了写右边的搜索点击 button 部分，先清除 buton 的默认 border
button{border: none;}✍写完之后可能会发现 input 框和 button 挨着不紧对吧，原来是我们忘记写浮动了，下面我们依次给 input 和 button 添加左浮动。
设置完成之后，觉得鼠标放在 input 框以及 button 上之后，边框太丑了，我们可以取消掉
.search input:focus,button:focus{outline: none;}以上步骤完成之后，效果图如下????
头像部分
接下来是最后一部分，加油呀
头像部分其实很简单，设置一个浮动，有的小伙伴如果想实现，将鼠标放在图像会显示小手，可以使用
header 小细节总结
-
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，应用于本篇 header 就是 header 内的四个盒子均设置了浮动样式。 - 文本垂直居中，这里采用的是，设置盒子高度等于 x，那么我们再设置一个 line-height 等于 x，则元素会垂直居中。
- search 搜索框内的两个元素，这里注意一下哦，因为父级元素 search 设置了浮动，子元素不设置浮动的情况下，可以看到两个子元素相隔有一定的距离，不是我们要的效果，所以我们会给子元素盒子也同时设置两个浮动。
- 由于版心均是水平居中的, 所以我们设置一个公共样式：
/* 版心 1000px 水平居中 */
.hcenter{
width: 1000px;
margin: 0 auto;
}- CSS 属性书写顺序也是一定要养成良好的习惯的，例????：
按照 定位、自身、文本、其他的顺序来对 CSS 属性进行书写
主体部分 banner 制作
完成后的效果：
分析 banner 的布局，背景是一个固定的背景，不会随鼠标的滚动而移动，这里就用到了之前所写的 background 相关属性，中间是一个大盒子水平居中对齐即是版心，左侧一个盒子，右侧一个盒子。
html 布局结构：
我们会先写一个大盒子，放置背景图片，这个背景图片固定的，之后设置一个版心盒子，水平居中，包含的是左右两个盒子。
banner 背景样式
设置背景图片高度以及显示大小：background-size: 100% 100%;
banner 左右盒子样式
两个盒子，可以设置一个左浮动，一个右浮动，这里用到了一个背景透明色样式：background: rgba(0,0,0, .4);
以及透明度：opacity: 0.8;
作品展示页实现
完成后的效果：
页面结构分析
首先是一个大盒子水平居中，版心盒子：hcenter，包裹了两个盒子，上面一个文字部分，下面是项目展示部分盒子：
项目展示部分
此处特别要注意一点，因为我们不确定项目展示部分的高度，所以不写盒子的高度，自然的会用到清除浮动，在最后一个设置有浮动的元素后加一个空元素。
页面底部部分
实现效果：
这是一个很简单的页面底部布局，但是不是常规的底部，这里主要是写一个 footer 包裹整个部分，
这里主要说的是文字隔行部分可以用 dl 标签，比较方便的
项目源代码：
源代码????：静态博客首页
