html脚注制作,幸福西饼:静态页面制作项目总结
在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多。
这个项目主要是复刻【幸福西饼】的主站和产品列表页,纯静态页面,没有任何JS的成分,借此机会熟悉下html和css的用法。下面是一些技术要点记录。页面制作思路
切图
切图拉线观察总体布局,这部分没自己动手,工具是photoshop,后期学一下补篇技术日记。
布局实现
布局实现这块我认为可以调整下思路:
视频中老师教的方法是依次制作导航栏、banner和脚注部分(也可能是考虑到这样设计比较容易掌握教学节律)。
我认为先打好大布局草稿(使用背景色辅助)再逐步制作小区域好些,符合自顶向下的设计逻辑。
大区域制作
大区域基本都用
注意事项:
①如果盒子乱跑,需要检查div嵌套问题(debug了半小时)。
②注意html和css分离的逻辑。不要把布局引入到html里。
③记得测量版心距。
④如果子类设置了margin-top,父类需要加overflow:hidden,防止外边距合并。
⑤float:left 大坑预警。这篇写得很不错:https://blog.csdn.net/liugefangqie/article/details/88606236
主页
导航栏
html
视频里用的是
CSS
①伪类选择器
在这里由于第一个元素和最后一个元素与其他元素的间距不同,CSS中使用了伪类进行处理。:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
这篇写得比较好:https://blog.csdn.net/weixin_38134581/article/details/83504080发现: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是好习惯,方便自己后期检查图片对应,也方便残障人士使用页面阅读器。
html脚注制作,幸福西饼:静态页面制作项目总结相关推荐
- HTML5期末大作业——中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品
HTML5期末大作业--中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品 常见 ...
- 网站在制作时用静态页面好还是动态页面利于网站优化
网站在制作时用静态页面好还是动态页面利于网站优化 文章目录 前言 一.静态页面 二.动态页面 总结 前言 如果对seo有了解的朋友都应该比较清楚,常见的url表现形式有静态.动态.伪静态三种.如果是严 ...
- 利用html标记制作静态网页,使用HTML制作网页《静态网页制作》.ppt
使用HTML制作网页<静态网页制作> 表单的执行原理 Internet 1 2 客户端:请求登录,通过表单填写账户信息 服务器端:验证发来的账号信息,然后给出反馈 客户端和服务器类似两人沟 ...
- 使用html5静态页面的总结,幸福西饼:静态页面制作项目总结
在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多. 这个项目主要是复刻[幸福西饼]的主站和产品列表页,纯静态页面, ...
- 静态页面制作—Magnet
利用html+css进行制作静态网页制作,熟悉项目制作流程,建立起编写代码习惯. 一.项目分析 1.以下为静态网页的效果图,此文章目的利用html+css完成效果图: 2.此页面为三栏式结构,div+ ...
- 微享商盟系统功能与小程序开发方案(静态页面制作)
在平时开发程序的过程中,自己经常会写一些控制台小程序进行测试某个功能,事后我们会寻找这些小程序, 如果不仔细管理,经常会找不到. 由于每个控制台小程序都有自己独立的 Main方法,所以我们不能把他们都 ...
- HTMLCSS仿京东详情页静态页面制作总结
目录 1.页面效果 2.页面分析 3.页面制作 (1)产品介绍模块编辑 (2)产品细节模块编辑 1.页面效果 接上面 2.页面分析 头部导航栏和底部栏跟前面的大相径庭,这里就不再总结了. 详情页的 ...
- 用phpcms如何将静态页面制作成企业网站(中)
上篇博客中讲到了该修改网页的中间部分 中间的内容是这样的,有标题和内容,里面的内容被代码替代,运行起来就这样的 里面的内容就可以在后台管理那里添加 再来看代码部分 <div class=&quo ...
- 用phpcms如何将静态页面制作成企业网站(下)
上篇讲到了子页部分 这样的 有分页选择 列表项的代码部分 最后输出变量pages就可以了 看一下运行的效果 点击下一页 再来改一下子页显示的样式 点击人才将会出来的一个子页面 路径要统一 再来更改后台 ...
- 用phpcms如何将静态页面制作成企业网站(上)
首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页 运行一下,看看 是这样的 然后打开phpcms文件,上篇博客中有提到, ...
最新文章
- 怎么学python-如何高效学 Python?
- 让我安静的写会儿代码
- 计算机考试word教程,职称计算机考试Word教程:段落格式的编辑
- 陪孩子看完这几部高分纪录片,胜过出国亲子游!
- Hystix熔断解决雪崩问题
- java实现数组排序代码_Java使用选择排序法对数组排序实现代码
- 知识点old1908
- alook浏览器_alook浏览器下载-Alook浏览器iOS版下载 苹果版v10.8-PC6苹果网
- hive如何确定map数量和reduce数量?
- 实用软件工程(张海藩)复习笔记
- 高中数学建模优秀论文_数学建模优秀论文范文
- vue3过渡动画详解
- 【czy系列赛】czy的后宫4 bzoj1925 [Sdoi2010]地精部落
- SciPy教程 - 稀疏矩阵库scipy.sparse
- 广告roi怎么计算公式_什么是广告ROI?ROI计算公式是什么? ROI怎么计算?ROI影响因素有哪些?...
- 人们熟知的一句名言是:“天才是1%的灵感加99%的汗水。”可如果没有那1%的灵感,世界上所有的汗水也就仅仅是一桶汗水而已。...
- java的弱引用_理解Java中的弱引用(Weak Reference)
- 骐骥一跃 驽马十驾-数据库触发器
- 你有思考过:垃圾“强制”分类的背后到底为什么吗?
- NameNode Last Checkpoint报错误[Checkpoint Critical]
热门文章
- ajax poker,《使命召唤15》大逃杀模式介绍 人物解锁方法一览
- authorized_keys 不允许的操作
- python与环境统计学--两样本均值的差异显著性检验之z检验,t检验和对应例题代码展示(一)
- Java实现Excel导入导出(附Demo)
- 流量负载_指挥流量:揭开互联网规模负载平衡的神秘面纱
- 计算机处理器份额,处理器市场份额排名 英特尔X86架构继续领先
- Java输出书名,输入书名 输出该书的信息 中java程序怎么设计
- 切蛋糕问题【小学二年级奥数】
- RK3399平台开发系列讲解(USB网卡)5.47、USBNET驱动模型
- 报错:TracerWarning: Output nr 1. of the traced function does not match the corresponding output of the