, html5里面可以直接用替代,使用语义性标签增强代码可读性。
CSS
①伪类选择器
在这里由于第一个元素和最后一个元素与其他元素的间距不同,CSS中使用了伪类进行处理。
发现:last-child单独使用会出问题,解决方法是使用div把里面包裹起来,然后用类选择器配合使用。
html:
aaaaa
aaaaa
aaaaa
aaaaa
aaaaa
css:
.list:last-child:{border-bottom:0}
②居中常用的一些设置:
水平居中:
margin: 0 auto; (盒子常用,使用时需要定义了元素的width)
text-align: center; (文本居中)
垂直居中:
使用height和line-height进行文字垂直居中(把数值设置成一样的就可以了,适用于单行文本)
※这个项目里没有用到display:flex,在这里记录下方法(给父元素display:flex;而子元素align-self:center)
③固定导航栏:
position: fixed;
left:0;
top:0;
z-index:10; /*指定层级,位于其他元素上方*/
注意导航栏下面的区域需要给margin-top,否则会被盖住。
主页的主要区域
html
主要区域被分为【banner区】和【三个盒子】。写注释,套盒子,复制粘贴。
CSS
①子元素浮动,父元素会高度坍塌,视频里给的解决方法是给父元素写高(弊端:不是每次都知道高是多少)。
②margin和padding的选择:
内外边距看张图就可以了,文字解释的话,我觉得下面这个理解比较好。
margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
③使用nth-of-type选择器处理多块“长得很像”区域中不同子元素的样式。
:nth-child和:nth-of-type的区别。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
:nth-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素。
脚注
html里可以指定脚注的类名称为copyright。
CSS可以考虑把导航栏与脚注栏的代码放到一起,命名为“public.css”,实现多个页面的复用。
商品列表页
①怪异盒
因为每个商品都呆在一个固定宽高的框里,使用box-sizing:border-box进行怪异盒声明。
标准盒模型宽度实际占有的位置大小: 宽+左右padding+左右border+左右margin
怪异盒模型内容区长度的计算方式是:width(content+border+padding)+margin
②最右边的产品可以选择结构伪类选择器去掉margin-right。
③图片和【文字】需要并排时,调整图片比调整块方便。
④主要区域的高度不能给死,否则无法往下滑动。
其他想法
①输入分号时需要下意识检查输入法。
②写alt是好习惯,方便自己后期检查图片对应,也方便残障人士使用页面阅读器。
内容来源于网络如有侵权请私信删除