写点什么

CSS 页面设计稿构思与实现(一)

用户头像
Augus
关注
发布于: 2 小时前
CSS页面设计稿构思与实现(一)

前言

在我们刚开始学习绘制页面的时候,想必都是直接拿着设计稿通过 HTML,css 就开始画了,其实这样是不对的。


首先我们应该对着设计稿进行整体的构思,观察并发现其中一些共通的地方或要点,思路捋清楚之后,再进行相应代码的编写,这样很大程度上能提高我们的工作效率。

抽出可复用的公共样式

  • 首先我们应该分析设计稿观察有没有一些我们可以复用的样式。这也就是我们之前说到的 base 层。

  • 引入你所需要的组件库,比如 Element,Antd 等,根据你的设计稿可以在相应 UI 库的基础上进行相应的修改。

  • 一般上我们可以先通过在最外层的 html 标签上,添加一些基础公用属性。


html {  background-color: #eee; // 设置默认的背景色  color: #333; // 设置默认的字体颜色}
复制代码


  • 还有根据自己的设计稿,设置默认的 p 标签行高


p{  margin: 0;  line-height: 1.5;}
复制代码


  • img 标签的处理,通过vertical-align:middle可以对图片的空隙进行相应的处理。


img {  width: 100%;  vertical-align: middle;}
复制代码


需要注意的是,这些样式是全局的,作用的是所有页面中相应的标签,所以一定要考考考虑,找到真正全局的样式。


好,今天就到这里了,今天努力的你依然是最棒的。加油,加油,你最棒!加油,加油,你最强!哦豁,Bye Bye!!!

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
CSS页面设计稿构思与实现(一)