zoukankan      html  css  js  c++  java
  • 幸福西饼:静态页面制作项目总结

    在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区】和【三个盒子】。写注释,套盒子,复制粘贴。

    CSS

    ①子元素浮动,父元素会高度坍塌,视频里给的解决方法是给父元素写高(弊端:不是每次都知道高是多少)。

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

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

  • 相关阅读:
    English,The Da Vinci Code, Chapter 23
    python,meatobject
    English,The Da Vinci Code, Chapter 22
    English,The Da Vinci Code, Chapter 21
    English,The Da Vinci Code, Chapter 20
    English,The Da Vinci Code, Chapter 19
    python,xml,ELement Tree
    English,The Da Vinci Code, Chapter 18
    English,The Da Vinci Code, Chapter 17
    English,The Da Vinci Code, Chapter 16
  • 原文地址:https://www.cnblogs.com/rosecanoe/p/14374259.html
Copyright © 2011-2022 走看看