26.品优购首页

主页在一个项目中我们一般命名index.html

我们在 品优购首页.html 中链接初始化css

• 实际项目中最好不要使用中文作为文件名称，这里为了好理解我就使用中文了
• 首页一般命名为 index.html，初始化css一般命名为 base.css ，其余公用css一般命名为 common.css

目录

1  头部

1.1  代码部分

1.2  要注意的问题

1.2.1  版心问题

1.2.2  命名问题

1.2.3  竖线

2  搜索部分

2.1  代码部分

2.2  要注意的问题

2.2.1  logo的seo优化

2.2.2  热词

2.2.3  购物车上的图标

3  导航部分

3.1  代码部分

3.2  要注意的问题

3.2.1  hover的距离

3.2.2  多个链接

3.2.3  右侧箭头对齐

3.2.4  快报模块

3.2.5  快报内容过长省略

4  今日推荐部分

4.1  代码部分

4.2  要注意的问题

4.2.1  图片间的竖线

4.2.2  图片大小

5  猜你喜欢部分

6  内容部分

7  尾部

8  favicon与title

---

1  头部

头部是这个部分，这里面除了免费注册有跳转网页的，其余的都是空链接，下面是要做成的样子

1.1  代码部分

我的html是这样的

这里可以发现我的head中是没做seo优化的，如果感兴趣的话可以看一下这个P304中的七分钟到最后黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

css名称是首页头部，内容是这样的，文件名称是 首页头部.css

在上面的css中，我们虽然有单独的标签header，但是我们注意标签选择器的优先级太低，高工程化的代码是要加上类名的

像头部，尾部这种被多个页使用的css，我们通常会写在一起，并命名为common.css

1.2  要注意的问题

1.2.1  版心问题

当页面比例变化时，它的效果是这样的

而我的就变成这样了

出现这个问题是由于没有定版心，我们现在在初始化css中加入版心，版心宽度为1200px，居中显示

之后把这个类给头部

这样我们就不会因为页面比例而导致内容位置变化了

1.2.2  命名问题

视频中的头部是这一部分

我们定义的头部只是上面灰色的部分，视频中将灰色的部分给了一个shortcut(快速导航)的类名，包含在common.css中

1.2.3  竖线

这里的竖线我们是在css中添加的

• 这里另外注意，写nth-child的时候，不要写6-n，这样不会生效，n一定要放在第一个参数中

在视频中他是用多个li做的

然后css中这样写

2  搜索部分

左侧是一个图片链接，链接的是主页，中间下面的链接都是空链接，右面我的购物车也是空链接

图像的话我们找到它的css就可以给它搞下来

2.1  代码部分

我的html是这样的

这里input的type最好用search，除了有text没有的功能，语义也更强些

css是这样的,名称为首页搜索部分.css

2.2  要注意的问题

2.2.1  logo的seo优化

这个我没做，感兴趣的话可以看一下P310与P311 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

2.2.2  热词

页面的这个地方叫做热词部分，一般给类名为hotwords，我们上面并没有给

2.2.3  购物车上的图标

这个图标并不是一个图片，而是用三个圆角加一个非圆角做的，在我的代码中这个部分被命名为message_num

这里最好不要给宽度，因为后面有可能会有好几百条的情况，比如我现在把消息个数设置为800个

当然如果是几千几万，建议配合后端作为999+的形式，但如果过多也不是说不行

另外定位的时候最好采用left定位，这样位数多了盒子会向右侧挤。如果采用right，那么他就会向左侧挤

3  导航部分

我的代码中这部分是导航部分

下面特别长的那条线我没弄，我觉得不是很好看，如果想弄的话，就不要给nav w的类，在nav中放一个div，其中的div有w类，nav给下边框就可以了

视频中的导航仅包含这部分

其余的部分他命名为main

3.1  代码部分

html

css

3.2  要注意的问题

3.2.1  hover的距离

这里放上去是要与左侧有一点距离的

我在hover中加入做边框实现这种效果

当鼠标经过li的时候，链接的文字由白变红，我们是这样写的

3.2.2  多个链接

在实际使用中，像家用电器，手机，数码，通信，这些每一个都要做一个链接，我在代码中没有做

那样只能在html中加入多个a标签，顿号最好不要放在a标签中，就像这样

因为后面可能会加改变a样式的这种需求

3.2.3  右侧箭头对齐

我们使用的是右浮动，然后给padding-right

视频中用的是子绝父相的方法，子是after元素，父是li元素

3.2.4  快报模块

我在代码中用的是表格，项目中最好不要使用表格，而是使用一个一个的div，使用表格并没有感觉很好布局，反而有时会很麻烦

在视频中的这个部分，使用的是设置比父对象大的ul，然后对ul的父对象进行overflow:hidden，这样就巧妙地解决了一行摆不了四个与多余边框的情况，可以看一下P331 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

视频中的做法缺点是最右侧的四个li会少几像素，个位数的像素其实也很难察觉到

这里在实际使用中不会使用相同的图标，一般的做法是使用js循环出来

3.2.5  快报内容过长省略

这个我没做，如果想做的话参考一下这个 20.溢出文本用省略号表示_Suyuoa的博客-CSDN博客

4  今日推荐部分

4.1  代码部分

html

css

4.2  要注意的问题

4.2.1  图片间的竖线

这里使用的after伪元素，对其设置宽高，然后子绝父相设置位置

4.2.2  图片大小

后续再上传上来的图片不一定与现在的尺寸一样，所以最好在这里把img的宽高写死，这样最多造成图像的失真而不会影响整体布局，我这里的做法是把盒子的宽高写死了，再大的图或再小的图也不会影响布局

5  猜你喜欢部分

html

css

6  内容部分

html

我这里用了三个article标签，在实际应用中，这一部分叫做楼层区(命名为floor)，配合电梯导航使用，应该把他们放在一个盒子中

电梯导航就是这部分，功能是用js做的

我们当前只做死的界面，我就没把他放到同一个盒子中

css

7  尾部

尾部是这部分

html

css，尾部的css在视频中被放到了common.css中

唯一要注意的就是这一块的命名

这一块是版权部分，一般命名为copyright

8  favicon与title

之后我们换这里的图标

favicon我比较喜欢最后换，因为这样我可以知道我哪个网页做完了，哪个网页没做完

方法在这里有，我就不赘述了 附录4-favicon图标_Suyuoa的博客-CSDN博客

换完之后不要忘了将title改了

至此我们完成了首页部分