随便做了一个“严肃”的页面-DIV+CSS
随便做了个相对严肃点的页面，应一个网友要求做的。页面参考的是xfouce.net。
全页DIV+CSS，DIV的排布用的百分比，适合用作DEDE。
严肃点的页面：http://www.djpig.com/1/xfocus/
这个页面适合用作“安全，标准”等类似的方面。
2008-01-06
2007-10-29
CSS的几个小经验点
CSS的使用一直都在进步中，相同的设计不同的解决方案现象是根据每个人的经验所产生的。而高手和入门只差在细节的处理上，完美的效果需要有良好的可扩展性作为基础，好像美工喜欢把内容快的背景修饰为一整张的图片，同样也是为了避免有空的标签在里面（例如空的div只为了背景图），但是同样需要考虑到，当文字增多的时候你需要改背景图片？？不要以为网站不改版，也同样不要责备网站的改版–用户喜欢新鲜感。内容的多少也不要责备编辑的工作：很多时候少内容是无法表达含义的，只要问自己：当初是否考虑到了可扩展性？（更高的要求就是用户会增大网站的字体来适应自己的视力）
当然，同样，产品经理或产品设计需要考虑如何针对美工和设计来提出一个较标准的“页面设计需求”，包括内容数量，宽度（高度）扩展性等等方面。
1. CSS反向浮动法： 反向浮动法是解决两个对象分别置于容器左右两端最好的办法。
2. 用padding来限制内容位置可以最大程度避免IE的框模型错误。
3. 一个被浮动的框式组件必须要有具体的明确宽度值（出自W3C标准）
4. 背景图片的数量会影响到HTML设计时需要的框架数量（图片载体）
5. 对于任意内容量的适应能力，是一个优秀的，可重用模板的重要评价标准。
6. 不设置高度的元素，其高度是由内部内容所决定和影响的。
7. 当一个容器内包容的内容量未知时，尽量使用两张图片，以便适应扩展。
8. 图片的设计最好要大于界面设计时的宽度（高度）来应付内容或字体变化所带来的影响
9. dl的使用需要灵活，可以用于别的应用（W3C标准）
10. 永远没有最好的解决办法，只有更合适的选择。
2007-08-14
CSS学习之背景图像的基础
背景图像基础
CSS中应用背景图像的方式：
body {
background: url(pattern.gif)
}
如何让背景为渐变效果？
页面垂直渐变，需要一个很高但是很窄的渐变图像
body {
background: #ccc url(gradient.gif) repeat-x;
}
防止页面过长，设置背景颜色
纯装饰性图片，可以从内容分离，在HTML中为这个图像创建一个“钩子”，然后使用CSS应用这个图像。
#branding {
height: 200px;
width: 700px;
background: url(brand.gif) no-repeat;
}
在站点每一个标题添加一个符号
h1 {
padding-left: 30px;
background: url(bullet.gif) no-repeat left center;
}
最后两个关键字定义了图像的位置
还可以使用像素或者百分比来定义图像的位置
如果使用像素设置背景位置，那么图像左上角到元素左上角的距离为指定的像素数。所以指定垂直和水平位置都是20像素，那么图像左上角出现在元素左上角下面，左边20像素的位置，如果使用百分比不太一样。是使用图像上的一个对应点。是指图像上距离左上角20%的点定位到父元素上距离左上角20%的位置
不要将像素或百分比等单位与关键字混合使用
2007-08-12
CSS经验分享-精通CSS-DIV定位基础
这篇文章主要讲述了CSS中对DIV及其他框架内容的定位功能，方法及规则。
定位概述：
p ,h1, div等元素常常称为块级元素。意味着元素显示为一块内容。
strong span 等元素为行内元素，因为显示在行中。
可以使用display属性改变生成的框模型，通过将display 属性设置为block 可以让行内元素表现得像块级元素一样。还可以将display 设置为none, 让生成的元素根本没有框，这样这个框及所有内容不再显示。
有情况没有进行显示定义，也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素的开头。即使没有定义为段落，也会被当作段落。
<div>
some text
<p>some more text </p>
</div>
CSS有三种基本定位机制： 普通流，浮动和绝对定位。默认为普通流。
块级框从上倒下，一个接一个排列，框之间的垂直距离由框的垂直空白边计算出来。行内框在一行中水平布置，可以使用水平填充，边框和空白边调整他们的水平间距，但是垂直填充，边框和空白边不影响行内高度，行框的高度可以设置行高。
相对定位
position: relative;
如果对一个元素进行相对定位，它将出现它所在的位置上，然后可以通过设置垂直和水平位置，让这个元素“相对于”起点进行移动。
使用相对定位时，无论是否移动，元素仍然会占据原来的空间，因此会覆盖其他框。
绝对定位
绝对定位使元素的位置与文档流无关，因此不会占据空间。其他元素的布局就像绝对定位的元素不存在一样。
绝对定位的元素的位置相对于最近的已定位祖先元素。
2007-08-11
CSS学习经验分享-CSS自学书籍推荐
最近在系统的自学一下CSS样式，所以把心得和一些概念拿出来跟大家分享下，希望对大家有帮助。同时希望CSS的初学者们能一起交流探讨。
今天先推荐几本自学CSS用的书，希望对大家有帮助。
CSS学习易实用速成的书：别具光芒
这本书内容主要就是网页制作，而且是完全的DIV+CSS，同时已经提供了相应的素材。
该书的内容从图片的切图，到页面的HTML代码及CSS的定义十分详细的进行了讲解，同时配有很合理很到位的图解。而最容易学习和接受的是里面讲的操作完全是使用DreamWeaver来制作的，操作及代码讲解的十分详细和完全。可以很快上手和制作，所以很推荐初学者或急于作页面的朋友看这本书。
CSS最完整最系统的书籍：Css权威指南
这本书是CSS方面内容最权威，内容最全的一本书籍，从最初的基本属性定义到后期的更多的高级属性的定义完全包括进行，并进行了系统的讲解。有条件有时间想系统学习CSS知识的朋友，这本书无疑是最合适的。
CSS高级应用效果讲解：CSS.Mastery.精通CSS
这本书讲解的CSS知识更多的是页面上的各种应用，同时也包括了一些CSS及DIV的基础知识：比如DIV的基本排布准则等。
同时这本书的几个作者也是国外相当牛的CSS样式专家，提供了很多应用样式的解决方法，适合在应用方面对样式有更高需求的朋友学习。
以上书籍猪猪已经都找到了相应的电子版，如果有人需要，可以提供参考与学习，不过有条件的朋友还是支持正版的好，同时平常查阅也会方便。
猪猪现在主要学习的是精通CSS这本书，今后的经验分享会首先从这里开始。希望对大家有些帮助。
作者: 猪猪
原载: 猪窝的CSS学习
版权声明：转载时必须以链接形式注明作者和原始出处及本声明。