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. HTML 网页开发、CSS 基础语法——二.互联网原理

    1. 互联网的运行过程 ①用户通过输入网址,发送一个HTTP请求到服务器中去,服务器里面存储了程序员上传的所有网页文件. ② 服务器一旦接收到请求,就会将我们所有的相关网页文件,回传到客户端,通过HT ...

  2. bzoj4589-Hard Nim【FWT】

    正题 题目链接:https://darkbzoj.tk/problem/4589 题目大意 求有多少个长度为\(n\)的数列满足它们都是不大于\(m\)的质数且异或和为\(0\). 解题思路 两个初始 ...

  3. 深入浅出WPF-05.控件与布局

    控件与布局 突出特点:1.专门的UI设计语言XAML,无需像MFC那样使用编程语言设计UI.2.前几代在UI和数据交互方面是由消息Message到控件事件,始终是把UI控件放在主导位置而把数据放在了次 ...

  4. 13万字详细分析JDK中Stream的实现原理

    前提 Stream是JDK1.8中首次引入的,距今已经过去了接近8年时间(JDK1.8正式版是2013年底发布的).Stream的引入一方面极大地简化了某些开发场景,另一方面也可能降低了编码的可读性( ...

  5. 初探计算机网络之TCP/IP网络协议

    网络协议 ​ 在计算机诞生以来,从最原始的单机模式到现在多台计算机协同工作,形成计算机网络,从前很难想象的信息共享.多机合作.大规模计算在今天也早已成了现实.在早期,计算机网络需要解决的痛点,就是怎样 ...

  6. stm32-HAL使用usart发送中断判断发送标志库问题

    前言: stm32是嵌入式MCU开发中最多应用的芯片,很早之前我们开发ST芯一般都是标准库开发,标准库简洁好读,现在要配合CubeMX生成代码,所以官方主推HAL库和LL库,但是HAL代码冗杂很绕,因 ...

  7. 11.5.1 LVS-DR 实验

    lvs-server VIP:10.211.55.99 DIP:10.211.55.23 负载均衡器   rs01 RIP:10.211.55.24 后端服务器   rs02 RIP:10.211.5 ...

  8. 图解java 多线程模式 读书笔记

    第1章"Single Threaded Execution模式--能通过这座桥的只有一个人" 该模式可以确保执行处理的线程只能是一个,这样就可以有效防止实例不一致. 第⒉章&quo ...

  9. Java：常用的容器小记

    Java:常用的容器小记 对 Java 中的 常用容器,做一个微不足道的小小小小记 容器类概述 常见容器主要包括 Collection 和 Map 两种,Collection 存储着对象的集合,而 M ...

  10. Scrum Meeting 1补充会议

    日期:2021年04月24日 会议主要内容概述: 本次会议于11:30举行,对项目架构做出了重要调整,并根据该调整修改了第1次例会报告中后两日计划完成的工作部分. 一.架构调整 会上讨论了用户模块相关 ...