第二期之 CSS

本文章主要讨论 ** 当我们拿到一个页面时,我们怎么用 CSS 完成这个页面**

先弄清楚布局

当我们拿到一个页面时,我们首先得搞清楚这个页面从大的部分可以分成几个 div ,这几个大的 div 的位置是怎样的,例如:

jianshu

简书的首页,我们便可以将这个页面分为三个大的 div

  • 最左边的黑色的那一块的图标列表
  • 中间的那个图片
  • 右边的正文那一部分
    所以这个时候我们可以先完成这部分,即先将整个页面分为这三部分。* 这个时候我们需要考虑一下自适应 。*

定位某个元素

当我们分出 div 后,我们就开始完成其中具体的 元素,这个时候就涉及一个问题,如何给某个具体的 元素定位?

在给具体的元素定位时,我们有以下元素

  • float

  • 用法
    这里面有一个概念,叫 ** 文档流 ,它指的是所谓的文档流实际上是一种民间说法,正常称谓应该指的是常规流(normal flow)**,个人感觉这两者应该是“阀值”与“阈值”的关系。从直观上理解正常流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下,一行接一行,每一行从左至右。

  • position

  • 这个属性共有三个值 absolute,relative,fixed,static

  • 用法

  • overflow

  • 用法

确定具体位置

  • 使用 margin,padding 来给某个元素确定具体位置(当某个元素份的具体位置既可以用 margin,padding设置时,推荐大家用margin,不用padding)
  • 盒子模型

设置元素的样式

接下来我们就可以给元素设置样式,包括,颜色,字体,边框,等等

在这个环节大家一定要认真观察这整个页面的每一个元素的样式,你会发现其实有很多的元素他们的样式是一样或者相似的,这个时候我们就可以共用他们的样式,而不用写那么多余的代码。

在这里,推荐大家用 less 文件来写 css 样式,less 文件的好处看这里:http://lesscss.org/

按照上面这种思路,相信当大家拿到一个页面时,就会有一定的思路去完成这个页面,而不会没有思路,乱调样式了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 5,830评论 0 17
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,598评论 0 8
  • FreeCodeCamp - HTML5 and CSS 发现原来在另外一台电脑学 FreeCodeCamp 的时...
    付林恒阅读 13,127评论 2 17
  • 上一篇讲完了佛罗伦萨画派早期的三位重要画家,乔托、马萨乔和波提切利。这篇文章接着讲佛罗伦萨画派鼎盛时期的达芬奇、米...
    JonnyHoang阅读 6,698评论 0 4

友情链接更多精彩内容