一 切图

通过一个周的切图练习,我发现只有亲自动手后才能通过问题不断加深技术,要熟练掌握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布局部分知识总结的更多相关文章

  1. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  2. CSS布局开篇

    原文: 简书原文:https://www.jianshu.com/p/2c78b927f8c4 开篇 这是我写CSS布局的第一篇文章,之所以将布局从中摘出来单独放一部分是因为我觉得光是布局这块内容就有 ...

  3. <转载>Div+Css布局教程(-)CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  4. Div+Css布局教程(-)CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

  5. 关于CSS和CSS3的布局小知识(干货)

    最近在网站偶然看到的这个网站,进去看了下讲的CSS布局,感觉还不错,讲易懂且实用推荐给大家. http://zh.learnlayout.com/

  6. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  7. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  8. Python之路-python(css布局、JavaScript)

    CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...

  9. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

随机推荐

  1. 关于JS中的this关键字

    在学习js时,应该先了解下this关键字,关于js中的this关键字和其他的面向对象语言中的this是不同的,比如在java中,this指的的是当前对象,而在js中,w3c是这样规定的: 关键字 th ...

  2. 转载 50种方法优化SQL Server数据库查询

    原文地址 http://www.cnblogs.com/zhycyq/articles/2636748.html 50种方法优化SQL Server数据库查询 查询速度慢的原因很多,常见如下几种: 1 ...

  3. Linux 的系统运行级别

    运行级别          说明 0          系统关机状态 1 单用户工作状态,用于root对系统进行维护,此时不予许其他用户使用主机.(类似于windows 的安全模式) 2       ...

  4. TCP/IP他人笔记学习--地址收录

    <TCP/IP详解,卷1:协议>学习笔记——1. 概述   http://www.blogjava.net/amigoxie/archive/2007/08/22/138674.html ...

  5. 图铭Android平台银行卡号识别系统

    随着智能终端(智能手机及平板电脑)及移动通信(3G)的发展,原来运行在PC上的信息系统(如邮件系统.即时通信.网页浏览.协同办公.网络购物.社交网站.博客等)逐渐转移到智能终端设备上.可以预见未来几年 ...

  6. Effective Java2读书笔记-类和接口(四)

    第19条:接口只用于定义类型 这一条就举了一个反例,说有些接口中只包含常量.这是对接口的不良使用.要实现相同的功能,应该使用不可实例化的工具类(第4条说过). public class Physica ...

  7. Effective Java2读书笔记-对于所有对象都通用的方法(二)

    第10条:始终要覆盖toString 这一条没什么好讲的,就是说默认的toString方法打印出来的是类名+@+十六进制哈希码的值.我们应该覆盖它,使它能够展示出一些更为详细清晰的信息,这个看实际情况 ...

  8. Android开源库

    http://blog.csdn.net/xiaanming/article/details/9470223 一.兼容类库 ActionBarSherlock : Action Bar是Android ...

  9. hdu 3339 In Action

    http://acm.hdu.edu.cn/showproblem.php?pid=3339 这道题就是dijkstra+01背包,先求一遍最短路,再用01背包求. #include <cstd ...

  10. 统计的基本操作语法 <第五篇>

    1.创建统计语法: CREATE STATISTICS statistics_name ON { table_or_indexed_view_name } ( column [ ,...n ] ) [ ...