=项目实战(比较散的知识点)
第一步 准备开发工具&素材&图纸
-
审查布局类型 ( 上中下 | 上(左右)下 | 左右
-
找版心(内容最宽处,内容宽度最通用处)
-
寻找页面上的公共要素
- 字号
- 颜色
- **背景颜色 **(注意区分是背景颜色还是背景图片)
- 文本颜色 #ccc
- 装饰颜色
- 行高
- 间隙
- 组件: 通用的样式,可以写准备好,后面需要的时候直接调用.
-
搭建结构
剪切后想取消可以按下 ESC
-
所有的轮播 按钮一般都是定位起来的
-
导航条有些是吸顶导航,就是导航条只跟着窗口,一直在窗口的上方.
-
做页面 网页三要素一定要有 可以words description title
-
图片一定要改成英文,不带中文.
-
网页logo 一般都作为h1标题,来看看标准的格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AuGI2mVr-1626005366232)(C:\Users\liu\AppData\Local\Temp\1625918051918.png)]
里面的描述在网页上是不显示的哦,注意后面样式里面处理一下.
-
爬虫都是搜索代码,他不知道你的显示是怎样的,上面的span 写出来只是为了让爬虫爬到.
-
需要做成响应式网页的话,版心宽度写成 min-width/max-width,要做成什么网页看产品设计要求.
-
字体最标准的写法是写成 unicode码
-
transform 无法作用于行内元素,必须是行内块元素,块元素 可以给他加个绝对定位,直接变成块元素.’
-
为了解决部分选择器样式重叠,可以选择使用子代选择器,更方便哦,比如说ul下面的li,li下面的a
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMFt1Ntu-1626005366234)(C:\Users\liu\AppData\Local\Temp\1625920335089.png)]
-
一个页面需要过渡的全部都要过渡,过渡时间自己把控
-
一个网站多个页面,会有相同的样式,我们就可以被他们提出来,后面重做页面的时候直接引入.
比如说首页和小的子页面,都有相同的banner,我们就可以把banner的样式单独写成样式.
但是后面引用的时候记得修改样式的路径.
-
细节: 用图片做背景之前可以提前准备一个和背景颜色相似的颜色,防止背景图片加载不出来的时候不至于变成空白
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0IvyOTAn-1626005366235)(C:\Users\liu\AppData\Local\Temp\1625966300319.png)]no-repeat center/cover 记得要加上;
-
每个大区域命名可能需要一个项目前缀,比如说:
.cq-banner .cq-header .ca-footer 这里的cq就是项目前缀,具体需不需要可以看要求.
-
flex 也可以影响定位元素的位置
-
开发的时候先做top banner footer.
-
当发现多个字组合在一起的小段,其小段的宽度与实际设计的宽度不一样,c出现换行时,需要考虑:html渲染的字体与设计的字体不一样,导致宽度不一样,解决办法1:给它加点字间距,让小段伸缩一下. 中文网站上一般不会让你出现英文标点
.ltl { leter-spacing: -1px; }
解决办法2:
.no-wrap {
word-spacing: nowrap;
}
-
字体默认会有1.6倍行高,会导致整体高度增大,在一些大的公司对于这种细节问题抓得比较严,怎么重置行高呢?(我习惯了在测量间距的时候一行字的底部接着第二行的顶部,为了防止隐藏的行高被忽略,时刻要注意.
.lh12 { line-height: 12px; } 设置字体行高与字体大小相等.
-
网页底部一般都是设置死的,后期基本不会改动.
-
装饰性的线条,可以考虑用伪元素来做
-
经常需要更换的就用图片,而不是用背景图片,给整个盒子加装饰,一般是背景图片
-
图标的话都比较小,小按钮一般都是图标.不确定的话,可以问问产品经理
-
span标签不具备语义性,可以用它来包裹需要隐藏的文本
-
像大背景的区域,如果掌控不好,可以直接设置高度. 但技术好,仔细设计的话就不需要
-
小盒子如果写了高度,考虑设置box-sizing’
.不确定的话,可以问问产品经理
-
span标签不具备语义性,可以用它来包裹需要隐藏的文本
-
像大背景的区域,如果掌控不好,可以直接设置高度. 但技术好,仔细设计的话就不需要
-
小盒子如果写了高度,考虑设置box-sizing’