CSS 属性书写顺序(重点)

建议遵循以下顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

页面布局分析

为了提高网页制作的效率，布局时通常有以下的布局流程：

  1. 必须确定页面的版心（可视区），我们测量可得知。
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。
  3. 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
  4. 开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。

常用案例分析

头部导航栏

实际开发中不会直接用链接a，而是用无序列表li包含a的做法

css书写规范 & 页面布局规范 &常用案例经验总结的更多相关文章

  1. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  2. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  3. 用div和css样式控制页面布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 【html+css】关于页面布局中遇到的问题记录

    关于行内元素: 行内元素设置width无效, height无效(可以设置line-height), margin上下无效,padding上下无效,margin和padding可设置左右.   text ...

  5. CSS页面布局与网格（上）

    1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...

  6. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

  7. 常用html、CSS、javascript前端命名规范

    无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

  8. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  9. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

随机推荐

  1. P4980-[模板]Pólya定理

    正题 题目链接:https://www.luogu.com.cn/problem/P4980 题目大意 \(n\)个物品图上\(m\)种颜色,求在可以旋转的情况下本质不同的涂色方案. 解题思路 既然是 ...

  2. windows下将Anaconda移位置（C盘转移至D盘）

    1.首先说明一下我的安装情况: (1)Window10系统 (2)Anaconda安装在C盘 2.由于Anaconda安装在C盘经常会涉及权限问题,在安装torch的时候让我萌发了转移磁盘的想法(拒绝 ...

  3. 数字图像处理（一）之灰度转换和卷积python实现

    使用Python实现数字图像处理中如下功能: 彩色图像转成灰度图像 实现图像的相关&卷积操作 实现图像的高斯核卷积 使用的库和python版本如下: imageio:2.9.0 用于读取磁盘中 ...

  4. 11.4.1 LVS-DR

    Virtual Server via Direct Routing(VS-DR): 用直接路由技术实现虚拟服务器｡当参与集群的计算机和作为控制管理的计算机在同一个网段时可以用此方法,控制管理的计算机接 ...

  5. 洛谷4051 JSOI2007 字符加密（SA）

    真是一道良好的SA模板题 首先,由于涉及到从左边移动到右边这个过程,我们不妨直接把字符串复制一遍,接在后面. 然后直接构造后缀数组,按排名从小到大,枚举所有的位置,如果这个后缀的起始点是在原串中的,那 ...

  6. bzoj3073Journeys（线段树优化最短路）

    这里还是一道涉及到区间连边的问题. 如果暴力去做,那么就会爆炸 那么这时候就需要线段树来优化了. 因为是双向边 所以需要两颗线段树来分别对应入边和出边 QwQ然后做就好了咯 不过需要注意的是,这个边数 ...

  7. 创建HTML文档

    目录 创建HTML文档 构筑基本的文档结构 DOCTYPE元素 DOCTYPE元素 代码清单1 使用DOCTYPE元素 html元素 html元素 代码清单2 使用html元素 head元素 head ...

  8. PublishFolderCleaner 让你的 dotnet 应用发布文件夹更加整洁

    大家都知道,在 dotnet 发布时,将会在输出的 publish 文件夹包含所需的依赖.在 .NET Core 开始,引入了 AppHost 的概念,即使是单个程序集,也需要独立的 Exe 可执行文 ...

  9. 【UE4】类的继承层级关系

  10. 软工博客之关于CSDN的移动端软件测评

    关于CSDN的移动端软件测评 项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 软件测评作业 我在这个课程的目标 不求变强,只求做好,成为一颗有用的 ...