CSS布局部分知识总结
一 切图
通过一个周的切图练习,我发现只有亲自动手后才能通过问题不断加深技术,要熟练掌握HTML页面编写时候时PHOTOSHOP操作。
以下一些知识点在网络布局时也是很重要的。
1、ul标签在谷歌、火狐等浏览器中默认是有padding值的,而在IE中只有margin值。 2、同一个的class类选择符可以在一个文档中可以重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的优先级要比CLASS大。
3、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding 4、li标签前面的图标推荐使用background-image,而不是list-style-image。
5、在给标签加选择符的时候,一定要在CSS里给选择器加上注释。方便以后修改CSS、而不是盲目的对照着HTML找对应的选择器。 6、定义链接的四种状态要注意先后顺序: Link Visited Hover Active。但是a标签可以只有一个状态。 7、与页面内容无关的图片使用background属性。 8、标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1> 9、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。 10、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
11、浏览器一般都有自己的默认样式,通过word-wrap:break-word;word-break:break-all;清除浏览器的样式。
二 清除浮动
1、 空标签清浮动
在HTML页面中加入空标签,用空标签来清浮动。
空标签〈div class=”clear”> </div>
.clear{
Clear:both;
Height:0;
Overflow:hidden;}
2、 伪类清除浮动
A:after{
Visibility:hidden;
Display:block;
Font-size:0;
Content:””;
Clear:both;
Height:0;
}
但是对于IE6不支持。
三 浅析a标签的4个伪类
CSS伪类可以用于向某些选择器添加特殊的效果,伪类必须知道某些选择器才能使用,而伪类中最经典的就是a标签的伪类。
关于伪类,大家最熟悉的还是a标签的4个伪类:
:link 有链接属性时。
:visited 链接地址已被访问过。
:active 被用户激活(在鼠标点击未释放时发生的事件)
:hover 鼠标悬停时的样式表属性
这四个伪类的排列次序
首先从技术层面上,a的这四个伪类,分别表示了a的四种状态,但a可以只具有一种状态(:link),或者同时具有2种或者三种状态!比如说,任何一个有HREF属性的a标签,在未有任何操作时都已经具备了:link的条件,也就是满足了有链接属性这个条件;如果访问过的a标签,同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上的时候,a标签就同时具备了 :link :visited :hover三种状态。
其次从用户体验的角度,在用户使用超链接的时候,为了最佳的用户体验,要做到下面几点:
第一:不管是否是被访问过的超链接,只要我鼠标移上的时候(:hover)都要有写变化,比如变色、加下划线等等,告诉用户选中的是可以点击的超链接。
第二:不管是否访问过,在a标签被激活时(:active),都应该有相同的样式变化。也就是说,同一个a标签,未访问过时在被用户激活和被访问时再被用户激活时要有相同的样式。这个也很好理解,用户点下同一个超链接时的效果不应该有差别。
第三:访问过的a标签可能要跟没有访问过的a相区分。
从CSS优先级角度,前面的文章讲过具体的css优先级,这里我要说的是对于同一优先级的相冲突样式,浏览器的选择问题。比如:
.test {color:red; color:green;}
或者:
.test {color:red;}
.test {color:green;}
上面两个例子中,大家都知道,对于这个.test指向的内容,浏览器会显示后一个属性设置。也就是color:green.说到这里,很多人可能已经有头绪了。结合上面的三点,不难分析我们为什么要这么排。第一:不管什么情况下鼠标悬停都应该有一个样式变化(:hover),我们就把hover放在最后,防止具备其他状态时,被其他状态的设置覆盖掉。第二:当a被激活时(:active),我们要求不管是否访问过,都应该有相同的样式,也就是这个状态的效果应该能够覆盖未被访问时(:link)与 已访问过(:visited)两种状态。应该放在 :link :hover的后面。第三:被访问过的a(:visited)可能会有不一样的样式属性,用来区别a是否被访问过。也就是说:visited 状态的属性可以覆盖掉:link状态的属性, 即 :visited 要放在 :link 的后面。
我是从书上看的 love and hate。看到这个问题,我们不妨来看下H 和A 的关系。hover 和 active 分别表示鼠标悬浮在 a标签上和鼠标点下没有弹起的时候。不难发现,这两种状态是不会并存的,也不会存在谁要覆盖谁的问题。所以,不管是LVHA还是LVAH ,他们的效果都是一样的。不过用LOVE AND HATE 的方式来记住这个排序是一种不错的方法,推荐新手使用。
CSS布局部分知识总结的更多相关文章
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- CSS布局开篇
原文: 简书原文:https://www.jianshu.com/p/2c78b927f8c4 开篇 这是我写CSS布局的第一篇文章,之所以将布局从中摘出来单独放一部分是因为我觉得光是布局这块内容就有 ...
- <转载>Div+Css布局教程(-)CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- Div+Css布局教程(-)CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- 关于CSS和CSS3的布局小知识(干货)
最近在网站偶然看到的这个网站,进去看了下讲的CSS布局,感觉还不错,讲易懂且实用推荐给大家. http://zh.learnlayout.com/
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- Python之路-python(css布局、JavaScript)
CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
随机推荐
- 微信JS-SDK 接口调用与 php 遇到的坑
问题:config:invalid signature一直爆这个错误 解决: 看我把这些坑都总结了一下:要命的invalid signature. https://segmentfault.com/q ...
- 字典:当索引不好用时 - 零基础入门学习Python025
字典:当索引不好用时 让编程改变世界 Change the world by program 有天你想翻开牛津字典,查找"sadomasochism[ˌseɪdoʊ'mæsəkɪzəm]&q ...
- Lua绑定C++类
原文:http://blog.csdn.net/chenee543216/article/details/12074771 以下是代码: Animal.h文件 #pragma once #ifndef ...
- NSScanner-备
注意:在扫描的时候,如果 空格是不需要扫描的,那么将会忽略空格. 如下代码: 1 NSString *string = @"my age is d 23 34.0"; ...
- include .h 以及.cpp的记录
VC include 路径解析要了解vc中使用#include命令包含头文件所搜寻的路径,必须先了解vc中的几种路径:1. 系统路径 系统路径在vc中是"Tools->Options- ...
- win7 x64 jdk1.7.0_51
1:我的 jdk与jre默认安装在:D:\Program Files\Java 2:配置环境变量(系统变量): (1)新建JAVA_HOME (2)新建CLASSPATH (3)编辑Path,%JAV ...
- Keil "RECURSIVE CALL TO SEGMENT"彻底解决
我们在做菜单程序或通过函数指针调用函数时,如果被调用的函数中有包含了常量字符串,那么经常会出现这样的的错误提示:"RECURSIVE CALL TO SEGMENT"意思是&quo ...
- Video.js网页视频播放插件
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...
- hdu 1506 Largest Rectangle in a Histogram(单调栈)
L ...
- jqGrid源代码分析(一)
废话少说.先上grid.base.js 整体结构图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3B5MTk4ODEyMDE=/font/5a6L5L2 ...