随笔分类 -  读书笔记-前台技术

读书笔记--精通CSS高级Web标准解决方案（八）---布局
摘要：一、总论万变不离其宗，所有的CSS布局技术根本都是3个基本概念：定位、浮动和外边距操纵。实际上，布局是CSS最容易的部分。二、布局计划在进行网页布局之前，最好在纸上将布局的大体结构画出来，最好能够事先想好哪些部分用哪些HTML元素，哪些文字用那些字体字号等。三、常见布局技巧和实现方式1、让页面内容居中常见的做法是只需要定义容器div的宽度，然后将水平外边距设置为auto。但是在混杂模式中的IE6不支持margin:auto，好在IE将text-align:center误解为让所有的东西都居中，包括容器div，而不是文本，所以可以利用。body { text-align: center; ... 阅读全文
posted @ 2013-05-04 23:30 ll2012 阅读(215) 评论(0) 推荐(0)
读书笔记--精通CSS高级Web标准解决方案（六）---无序列表样式
摘要：这部分讲解在web2.0中用得最多的ul已经li元素的CSS应用技巧。1、基本列表样式现在很少人直接用ul的内置样式，所以一般在使用ul的第一步就是去掉默认的ul样式，去左边的图标，去缩进：ul{ margin:0; padding:0; list-style-type:none; } 2、创建基本的导航条这个没什么好说的，比较简单，就是书上提到的一个小细节，如果把顶边框设置的比背景色浅，而让底边框深一点，就会实现一种斜面的立体效果。实现代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ... 阅读全文
posted @ 2013-05-03 23:27 ll2012 阅读(292) 评论(0) 推荐(0)
读书笔记--精通CSS高级Web标准解决方案（五）---链接样式
摘要：这部分和上一节的内容类似，都是提供一些常用的CSS实践。一、对链接应用样式1、对于链接简单的处理方式，一般是应用CSS伪类来让链接在各种状态下表现，用到的伪类基本如下：a:link：未被访问到；a:visited：被访问过的；a:hover：鼠标放在上面；a:active:鼠标点击时；a:focus：通过键盘移动链接上时。有一点小技巧：如果设置了a:hover {text-decoration:underline;} a:link {text-decoration:none;} ，这样当鼠标悬浮到链接上去时，一样还是没有下划线，因为它被后面的:link给覆盖了，所以，要注意伪类的顺序，按如下. 阅读全文
posted @ 2013-05-03 22:31 ll2012 阅读(200) 评论(0) 推荐(0)
读书笔记--精通CSS高级Web标准解决方案（四）---CSS背景以及圆角框实现
摘要：这一部分主要分析一些常见页面效果的实现方式，很有实际价值。从中可以知道一些很不错的效果，实现起来都是比较简单的。一、背景图效果1、基础知识：背景图可以水平或垂直平铺，也可以不平铺，需要注意的是，在设置背景图的同时，还可以设置背景色。为了简便，CSS提供了background属性的简写版本:h1{ background:#ccc url(img/bullet.gif) no-repeat left center;}个人觉得，对于背景图，有两个特点特别重要：一是可以设置背景图的的位置，很多效果都是基于这一点实现的。基于这一点，还产生了CSS Sprits的技术，个人觉得CSS Sprits的... 阅读全文
posted @ 2013-05-02 23:35 ll2012 阅读(291) 评论(0) 推荐(0)
读书笔记--精通CSS高级Web标准解决方案（三）---CSS盒模型、浮动与定位
摘要：一、盒模型1、盒模型是CSS的基石之一，每个元素被看做是一个矩形框，这个框有元素的内容、内边距、边框和外边距组成。如果给元素添加背景，则背景处于元素以及其内边距组成的区域。CSS2.1还支持outline属性，与border属性不停，轮廓绘制在元素框之上，所以它不影响元素的大小与定位。IE7以及更低版本不支持。2、内边距、边框、外边距都是可选的，默认为0。但是很多元素由用户代理设置外边距和内边距，因此可以用通用选择器进行覆盖。*{padding:0px;margin:0px}，但这种技术不区分元素，所以对option等元素有不利影响。因此使用全局reset把内边距、外边距显式的设为0更安全。3 阅读全文
posted @ 2013-05-01 00:28 ll2012 阅读(497) 评论(1) 推荐(0)
读书笔记--精通CSS高级Web标准解决方案（二）---CSS基础之CSS选择器
摘要：一、选择器1、比较少用的一个标签：blockquote：<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。2、常用的伪类：all unvisited links：a:link，all visited links: a:visited，鼠标在上悬浮的连接:a:hover，获得焦点的input:input:focus，另外还有：active。:link和:visited称为连接伪类，只能用于锚元素，:hover、:active、: 阅读全文
posted @ 2013-04-30 18:34 ll2012 阅读(248) 评论(0) 推荐(0)
读书笔记--精通CSS高级Web标准解决方案（一）---CSS基础
摘要：书籍介绍：第二版，作者Andy Budd，陈建瓯翻译。读完这本书感觉还是获益良多，读完之后，对之前不是很清晰的概念有了进一步认识，比如盒子模型、定位与浮动。最重要的收获是知道了一些常见的css效果的实现方式，比如圆角、tab页，tip框等，而且书中给出的实现方式都非常的简单，只是使用css，而没有使用任何js就可以实现很好的效果。另外，书写得很容易理解，读起来很快，一周就可以读完，例子也很详细。总之，是本好书。第一章：基础知识1、css与html的关系，html控制内容，css控制表现，html文档应该尽量选择有意义的标签，在完全屏蔽css结构时，也能呈现良好的可读性。2、关于css的id和类 阅读全文
posted @ 2013-04-28 13:18 ll2012 阅读(184) 评论(0) 推荐(0)