静态小米官网首页仿站笔记

github链接：https://github.com/Flower-F/mi-imitation
在这次仿站中加深了对部分html和css知识点的记忆，也了解到了自己知识的不足，尤其是布局结构还不合理，css的书写较为冗余。

一些知识点的总结

1、iconfont

这次的字体图标均来源于阿里巴巴矢量图标库（www.iconfont.cn），实现方面我部分使用了i标签，部分使用了伪元素。

在下图部分，我认为使用i标签实现起来会比用伪元素简单，因为此部分的布局规整，但是图标不一样。

但是对于下图这种图标一致的情况，使用伪元素的优势还是非常明显的：

使用伪元素不会影响html文件的结构和可读性，样式调整也可以同时进行。使用i标签无疑是会影响html结构的。因此在不影响书写方便性的情况下，应该尽量使用伪元素实现。

在查看部分网页源码后，我还学到了一个很有用的技巧，就是给input(type为submit)的value值设置为一个字体图标（比如放大镜），并给该标签设置一下font-family，按钮里面就可以出现该字体图标，十分方便。如下：

<input type="submit" class="search-button" value="">

关于这个搜索框的实现，我的方法是让搜索框和提交按钮都添加浮动，从而避免了搜索框和提交按钮可能对不齐的情况。

2、logo和slogan

logo和slogan的实现需要特别注意。

一个标准的logo写法，html里面需要包括一个h1标签，里面需要包含一个导向主页的a标签，并且需要写明title属性，此外还需要加上一行关键性的文本。

<div class="logo"><h1><a href="index.html" title="小米官网">小米官网</a></h1>
</div>

接下来通过css指定图片及其大小，最后隐藏文本。

.logo {background: url(../images/logo.png) no-repeat;background-size: 56px 56px;text-indent: -9999px;overflow: hidden;
}

隐藏文本有两个方法，一种是直接

font-size:0;

另一种是

text-indent: -9999px;
overflow: hidden;

sloagn的实现相似，只不过它的文本不需要使用h1标签包含，也不需要a标签，只需要直接隐藏文本。

在查看源码后，我发现小米官方把文本隐藏的内容专门封装成了一个类，应当学习。

3、精灵图

小米的banner图里面左右切换的按钮使用的是精灵图（如下）。

精灵图的使用记得把坐标改为负数。查看点的坐标可以在ps按F8查看信息。

background-position: -83px 0;/*x坐标负数 y坐标负数*/
background-image: url(../images/change.png);

按钮使用绝对定位，复习一下绝对定位的居中技巧：先top:50%，再把margin-top设置图片大小一半的负值。水平居中同理。

top: 50%;
margin-top: -35px;/*图片70px*/

4、hover时控制其他的元素

如图需要hover时控制其他的元素，那么共有三种情况：

控制a的子元素b：

.a:hover .b

控制a的同级兄弟元素b：使用+号

.a:hover + .b

控制a的就近元素b：使用~符号

a:hover ~ .b

另外，此处的三角形使用border实现。示例代码如下：

.triangle {width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #f9f9f9 transparent;/*上右下左*/
}

特别记得要加border-style属性，我就因为这个出bug了。。。

5、尾部实现（dl dt dd）

尾部此部分内容一般使用dl、dt、dd配合实现的。每一列为一个dl，然后标题是dt，内容是dd。