主页在一个项目中我们一般命名index.html
我们在 品优购首页.html 中链接初始化css
- 实际项目中最好不要使用中文作为文件名称,这里为了好理解我就使用中文了
- 首页一般命名为 index.html,初始化css一般命名为 base.css ,其余公用css一般命名为 common.css
目录
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改了
至此我们完成了首页部分