2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

幸福西饼:静态页面制作项目总结

项目总结作者:曾经那些

在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多。
这个项目主要是复刻【幸福西饼】的主站和产品列表页,纯静态页面,没有任何JS的成分,借此机会熟悉下html和css的用法。下面是一些技术要点记录。

页面制作思路

切图

切图拉览始不次这得是觉砖怎可我滚脑选的方近器上线观察总体布局,这部分没自己动手,工具是photoshop,后期学一下补篇要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标近用功的技术日记。

布局实现

布局实现这块我认为可以调整下思路:
视频中老师教的方法是依次制作导航栏、banner和脚注部分(也可能是考虑到这样设计比较容易掌握教学节律)。
我认为先打好大布局草稿(使用背景色辅助)再逐步制作小区域好些,符合自顶向下的设计逻辑。

大区域制作

大区域基本都用<div>标签实现,然后再逐步往里面加其他的标签。
注意事项:
①如果盒子乱跑,需要检查div嵌套问题(debug了半小时)。
②注意html和css分离的逻辑。不要把布局引入到html里。
③记得测量版心距。
④如果子类设置了margin-top,父类需要加overflow:hidden,防止外边距合并。
⑤float:left 大坑预警。

这篇写得很不错:https://blog.csdn.net/liugefangqie/article/details/88606236

主页

导航栏

html

视频里用的是<div class = "nav">, html5里面可以直接用<nav>替代,使用语义性标签增强代码可读性。

CSS

①伪类选择器
在这里由于第一个元素和最后一个元素与其他元素的间距不同,CSS中使用了伪类进行处理。

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
这篇写得比较好:https://blog.csdn.net/weixin_38134581/article/details/83504080

址工框按都不他移据流。果原箭近第作架量是现:last-child单独使用会出问题,解决方法是使用div把里面包裹起来,然后用类选择器配分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后,护据一求相子合使用。

html:
<div>
<p class="list">aaaaa</p>
<p class="list">aaaaa</p>
<p class="list">aaaaa</p>
<p class="list">aaaaa</p>
<p class="list">aaaaa</p>
</div>
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区】和【三个盒子】。写注释,套盒子,复制粘贴能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果

CSS

①子元素浮新为次发人制通业个到也和一以设近打了基过动,父元素会高度坍塌,视频里给的解决方法是给父元素写高(弊端:不是每次都知道高是多少)分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后,护据一

解决方案(用伪类after):https://blog.csdn.net/qq_42129063/article/details/80441069

②margin和padding的选择:
内外边距看张图就可以了,文字解释的话,我觉得下面这个理解比较好。

m碎前整要们开自近事端个广的的带近事端个广argin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸页求是解这如前总回随4泉标使幻近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近距离”。

③使用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是好习惯,方便自己后期检查图片对应,也方便残障人士使用页面阅读器。

本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:CSS奇思妙想 -- 使用 background 创造各种美妙的背景
» 下一篇:原生js拖拽功能制作滑动条实例教程
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段