61. 制作页面头部 {ignore}

[toc]

完成的区域：

• 官网的

• 自己写的

1. 学会提取公共样式

比如：

.fl {
    float: left;
}
.fr {
    float: right;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.wrapper {
    width: 950px;
    margin: 0 auto;
}

2. 按回车提交

在书写搜索区域的时候，如果我们想要实现当用户输入完关键字之后，按回车即可实现提交。那么常见的有两种实现方案：

• 使用js

  • 需要监听回车键

• 使用html结构，不使用js

  • 使用 form 元素包裹两个表单元素（一个搜索输入框，一个提交按钮）

使用第二种方法来实现的话，当搜索框聚焦时，我们按下回车键，就相当于点击了提交按钮。

3. 外边距合并的常见解决措施

• 使用 padding 来替代 margin
• 触发 BFC
• 子元素设置为 inline 或 inline-block

细节

• 根据用户显示设备的分辨率，来决定使用的背景图的的清晰度。

页面头部使用到图片的地儿，都做了两套图，查看源代码，会发现它都使用到了属性：background-image: -webkit-image-set:(url(...) 1x, url(...) 2x);

如果用户使用的显示设备的分辨率高，就使用后者的更加清晰的背景图来显示，否则使用前面的背景图来显示。这有点类似于媒体查询。

注意：如果我们直接引入的是更加清晰的那张图片，那么还需要重新设置图片的尺寸，因为更加清晰的那张图片的尺寸默认是相对模糊的那张图片的尺寸的两倍，直接引入，会出问题。

这里以“时间”为例

.header .top .nav li a.link-time {
    /* background: -webkit-image-set(url(../img/ic_shijian_home_nav.png) 1x,
    url(../img/ic_shijian_home_nav@2x.png) 2x) no-repeat left top; */
    background: url(../img/ic_shijian_home_nav@2x.png) no-repeat left top / 40px 20px;
}

background: -webkit-image-set(url(../img/ic_shijian_home_nav.png) 1x, url(../img/ic_shijian_home_nav@2x.png) 2x) no-repeat left top;

如果使用的是这种方式来引入图片的话，那么显示是正常的，不会出现问题。

background: url(../img/ic_shijian_home_nav@2x.png) no-repeat left top / 40px 20px;

但是，如果这样引入的话，那么背景图的尺寸默认是偏大两倍的，我们得根据我们的需要，重新设置背景图的尺寸。

• 分模块写样式

习惯：写样式的时候，添加好注释，标明哪一部分的样式从哪开始，到哪结束；以便后期维护。

比如：

表示页头区域：

/* 页头开始 */

.header {
  height: 90px;
}

...其他css代码

/* 页头结束 */

表示该页的通用样式：

/* 首页通用样式开始 */

.wrapper {
  width: 950px;
  margin: 0 auto;
}

...其他css代码

/* 首页通用样式结束 */

表示该页的统一样式：

/* 统一样式开始 */

button {
  cursor: pointer;
}

...其他css代码

/* 统一样式结束 */

• 每个小区域用边框（或背景）标识出来

每一个小区域，可以先用 border 或者 background 来标识出来，这样就能很清楚地看到这块区域当前所处的问题，使得布局更加直观。

• 图标，i元素

字体图标可以使用 i 元素来表示。

• 重置文本框样式

From：40. 美化表单元素

input,
textarea,
button,
select {
    border: none;
}

input:focus,
textarea:focus,
button:focus,
select:focus {
    outline: none;
    outline-offset: 0;
}

需要知道浏览器默认样式表中给这些表单元素设置的css属性有：

• border
• outline
• outline-offset

然后，只要将它们清除掉即可。

input {
  border: none;
  outline: none;
  outline-offset: 0;
}

button {
  background: initial;
  padding: 0;
}

• input type 为 text 时的背景色

input 文本输入框，默认是带有 background: #fff; 的，如果想要去掉背景，那么可以设置为 background: transparent;

• input 的 placeholder 样式设置

可以通过伪元素选择器 ::placeholder 来选中占位符，并给其设置样式。

• 表单元素（input、select等）默认字体大小：13.333px