css学习笔记 --初学 css代码风格、布局误区
初学css,记录下初学者需要注意的事项。
一、css 代码风格
1.css 命名语义化。
如类名:
main 主体
container 内容
footer 站底
right、center、left 位置
如文件名:
base.css(css reset) 站点通用
theme.css 主题
2.一律小写,不要有下划线,中线
3.css 属性按照首字母顺序排列
4.css 属性组织模块化,添加适当注释
5.一致性,方便阅读和维护
二、初学者布局误区
网页设计不只是”DIV+CSS“,div只是html提供的众多html标签中一个,是最常用的但不是唯一的。css命名语义化应该与html标签语义化同时进行。
如:
<div><div></div><div></div><div></div></div>
肯定不如
<div><p><span><span><em></em></p></div>
清晰明了
三、效率提升
1、宽高1px图片平铺会消耗资源
2、css expression 极大消耗资源
3、颜色使用16进制,缩写的解析也会消耗时间(蛋囧,更多是为了颜色的掌控)
4、尽量使用外链,不要内嵌
四、初学者设计误区
1、少用flash
2、少用图片,有空白空间也比瞎弄图片瞎贴强
css学习笔记 --初学 css代码风格、布局误区的更多相关文章
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- DIV+CSS学习笔记(CSS)
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
- CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- CSS学习笔记(12)--Flex 布局教程:实例篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
- CSS学习笔记--Div+Css布局实战(入门)
基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- HTML+CSS学习笔记 (13) - CSS代码缩写,占用更少的带宽
标签:HTML+CSS 盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在m ...
随机推荐
- vue-music 关于基础组件 (Tab组件)
定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex === ...
- Windows+QT+Eclipse+MinGW搭建QT开发环境详细教程
Windows+QT+Eclipse+MinGW搭建QT开发环境详细教程 一.准备工具: QT-SDK for Windows:http://get.qt.nokia.com/qtsdk/qt-sd ...
- SOAP消息的结构
概述 介绍SOAP报文的结构,以及获取的方式. 正文 1.其实发送的是SOAP消息 在前面讲述过使用Eclipse的工具Web Services Explorer发送请求.在Actions中填写请求参 ...
- HDU 6073 Matching In Multiplication(拓扑排序)
Matching In Multiplication Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 524288/524288 K ( ...
- Linux-Oracle 安装配置步骤
一.打开 VMware 安装 VMware 解压 ORACLER11.2_redhat.rar 到 D:\...\machine\oracle-linux 打开 VMware, 选择 打开虚拟机 找到 ...
- JZYZOJ 1542 [haoi2015]str 矩阵乘法 dp
http://172.20.6.3/Problem_Show.asp?id=1542 dp+矩阵乘法思路hin好想,对于我这种题目稍微学术就几乎什么也不会的人来说唯一的难点在于读题,因为一心想着划水题 ...
- [USACO 2017 Open Gold] Tutorial
Link: 传送门 A: 由于每个颜色只染色一次就确定了所有要染色的区间 要求染色的次数其实就是求区间最多嵌套多少层,如果有区间相交则无解 以上操作明显可以将左端点排序后用栈来维护 #include ...
- [Codeforces #188] Tutorial
Link: Codeoforces #188 传送门 A: 先全转为正数,后面就全是指数级增长了 #include <bits/stdc++.h> using namespace std; ...
- 【置换群】【枚举约数】hdu6038 Function
把b数组的所有置换群求出来,用数组记录一下每个大小所出现的次数. 然后求a的置换群,对每个置换群求能被其整除的b的置换群的大小总和(只有这些才能满足构造出一个f,且不自相矛盾),然后把它们全都乘起来就 ...
- 【动态规划】POJ2385-Apple Catching
[题目大意] 有两棵树1和2,奶牛Bessie位于树1下,每个单位时间会有一个苹果从其中一棵树掉下来,同时Bessie也可以移动一次,但是Bessie不希望移动超过W次,问T时间内Bessie最多得到 ...