静态博客首页的实现小细节

心若没有栖息的地方，到哪里都是在流浪。

这篇文章记录了我写静态博客首页的准备工作、思路布局流程，可不要小看了哦????，蛮多小细节需要注意的呢，如果有什么不对的地方，可以告诉我哈

这个静态首页也是对我前两篇文章的实际运用，感兴趣的小伙伴可以跟着我的思路一起敲键盘哦

准备工作

首先，我们要写一个网页，前期的准备工作必不可少，会采取结构与样式相分离的思想，文件目录格式如下：

布局流程

CSS 属性书写顺序

这是扩展的一个知识点，很重要，在实际编写中尽量遵循这样的顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 写在最前面）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

页面布局分析

1. 首先确定页面的版心，即页面的可视区
2. 分析页面的行模块，以及每个行模块中的列模块
3. 编写网页的时候，还是老话哦，遵循先有结构后有样式的原则
4. 运用盒子模型的原理，使用 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 小细节总结

1. 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动， 应用于本篇 header 就是 header 内的四个盒子均设置了浮动样式。
2. 文本垂直居中，这里采用的是，设置盒子高度等于 x，那么我们再设置一个 line-height 等于 x，则元素会垂直居中。
3. search 搜索框内的两个元素，这里注意一下哦，因为父级元素 search 设置了浮动，子元素不设置浮动的情况下，可以看到两个子元素相隔有一定的距离，不是我们要的效果，所以我们会给子元素盒子也同时设置两个浮动。
4. 由于版心均是水平居中的, 所以我们设置一个公共样式：

/* 版心 1000px 水平居中 */
.hcenter{
    width: 1000px;
    margin: 0 auto;
}

1. CSS 属性书写顺序也是一定要养成良好的习惯的，例????：

按照 定位、自身、文本、其他的顺序来对 CSS 属性进行书写

主体部分 banner 制作

完成后的效果：

分析 banner 的布局，背景是一个固定的背景，不会随鼠标的滚动而移动，这里就用到了之前所写的 background 相关属性，中间是一个大盒子水平居中对齐即是版心，左侧一个盒子，右侧一个盒子。

html 布局结构：

我们会先写一个大盒子，放置背景图片，这个背景图片固定的，之后设置一个版心盒子，水平居中，包含的是左右两个盒子。

banner 背景样式

设置背景图片高度以及显示大小：background-size: 100% 100%;

banner 左右盒子样式

两个盒子，可以设置一个左浮动，一个右浮动，这里用到了一个背景透明色样式：background: rgba(0,0,0, .4);
以及透明度：opacity: 0.8;

作品展示页实现

完成后的效果：

页面结构分析

首先是一个大盒子水平居中，版心盒子：hcenter，包裹了两个盒子，上面一个文字部分，下面是项目展示部分盒子：

项目展示部分

此处特别要注意一点，因为我们不确定项目展示部分的高度，所以不写盒子的高度，自然的会用到清除浮动，在最后一个设置有浮动的元素后加一个空元素。

页面底部部分

实现效果：

这是一个很简单的页面底部布局，但是不是常规的底部，这里主要是写一个 footer 包裹整个部分，

这里主要说的是文字隔行部分可以用 dl 标签，比较方便的

项目源代码：

源代码????：静态博客首页