使用html5静态页面的总结,幸福西饼：静态页面制作项目总结

在coursera上学完了密歇根大学开的前端入门课，仍然不得要领，听朋友建议从网上找了个实站项目跟着撸了一遍代码，感悟比单纯上课多得多。

这个项目主要是复刻【幸福西饼】的主站和产品列表页，纯静态页面，没有任何JS的成分，借此机会熟悉下html和css的用法。下面是一些技术要点记录。

页面制作思路

切图

切图拉线观察总体布局，这部分没自己动手，工具是photoshop，后期学一下补篇技术日记。

布局实现

布局实现这块我认为可以调整下思路：

视频中老师教的方法是依次制作导航栏、banner和脚注部分(也可能是考虑到这样设计比较容易掌握教学节律)。

我认为先打好大布局草稿(使用背景色辅助)再逐步制作小区域好些，符合自顶向下的设计逻辑。

大区域制作

大区域基本都用

标签实现，然后再逐步往里面加其他的标签。

注意事项：

①如果盒子乱跑，需要检查div嵌套问题(debug了半小时)。

②注意html和css分离的逻辑。不要把布局引入到html里。

③记得测量版心距。

④如果子类设置了margin-top，父类需要加overflow:hidden，防止外边距合并。

⑤float:left 大坑预警。

主页

导航栏

html

视频里用的是

， html5里面可以直接用替代，使用语义性标签增强代码可读性。

CSS

①伪类选择器

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

发现:last-child单独使用会出问题，解决方法是使用div把里面包裹起来，然后用类选择器配合使用。

html：

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

内容来源于网络如有侵权请私信删除

使用html5静态页面的总结,幸福西饼：静态页面制作项目总结相关推荐

html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:电影网站设计--迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游 ...
度假村房间预订HTML5模板，里面总共有6个子页面，适合度假酒店预订网站模板。
度假村房间预订HTML5模板,里面总共有6个子页面,适合度假酒店预订网站模板.不仅仅是首页,二级页面,三级页面,登陆,购物车等,页面齐全功能齐全 js+css+html (img,字体均有),前端 ...
HTML5期末大作业：鲜花超市网站设计——鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:鲜花超市网站设计--鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作作品介绍 1.网页作品简介 ...
期末作业成品代码——红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:婚庆网站设计--红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
python3读取网页_python3+selenium获取页面加载的所有静态资源文件链接操作
软件版本: python 3.7.2 selenium 3.141.0 pycharm 2018.3.5 具体实现流程如下,废话不多说,直接上代码: from selenium import webd ...
[html] HTML5的video在手机端如何实现进来页面时就自动播放？
[html] HTML5的video在手机端如何实现进来页面时就自动播放? 理想情况autoplay=true.但是现实是:基本所有浏览器都屏蔽了这个属性. 能实现的现在只有微信了,微信有一套自己的规 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...

使用html5静态页面的总结,幸福西饼：静态页面制作项目总结

使用html5静态页面的总结,幸福西饼：静态页面制作项目总结相关推荐

最新文章

热门文章