2007-11-18 12:41
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：
　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
　　2、内容部分又可分为侧边栏、主体内容；
　　3、底部，包括一些版权信息。
　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

　　DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#Pa ......

    头：header
　　内容：content/container
　　尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　登录条：loginbar
　　标志：logo
　　广告：banner
　　页面主体：main
　　热点：hot
　　新闻：news
　　下载：download
　　子导航：subnav
　　菜单：menu
　　子菜单：submenu
　　搜索：search
　　友情链接：friendlink
　　页脚：footer
　　版权：copyright
　　滚动：scroll
　　内容：content
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　小技巧：tips
　　栏目标题：title
　　加入：joinus
　　指南：guild
　　服务：service
　　注册：regsiter
　　状态：status
　　投票：vote
　　合作伙伴：partner
　　(二)注释的写法:
　　/* Footer */
　　内容区
　　/* End Footer */
　　(三)id的命名:
　　(1)页面结构
　　容器: container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航： ......

关于CSS对各个浏览器兼容已经是老生常谈的问题了，.以下内容没有太多新颖, 纯属个人综合网上的文章所得, 有些重复的，懒的删了
 
一、CSS HACK
 
HACK概念：
不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,
 
HACK规则：
 
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
 
             IE6 IE7 FF
*             √ √ ×
!important     × √ √
 
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE ......

【作者：rare】
csdn blog css自定义设置
可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格
csdn blog的页面架构基本是由div实现的，整个页面主要由三个div组成，它们的id分别是:
csdnblog_header, csdnblog_sidebar, csdnblog_content。
所以，定义它们的主体样式可以这样:
#csdnblog_header
{
    //头部的风格
}
#csdnblog_sidebar
{
    //侧边栏的风格
}
#csdnblog_content
{
    //主体内容的风格
}
这三个div又被两个div包裹起来了，它们的id分别是csdnblog_allwrap, csdnblog_midwrap
这两个还可以定义整个页面的整体样式
#csdnblog_allwrap
{
    //你想要的风格
}
#csdnblog_midwrap
{
    //你想要的风格
}
页面的头部由以下几部分组成
1、h1，显示blog的用户自定义标题
#csdnblog_header h1
{
    //标题风格设置
}
2、h2，显示用户自定义的blog描述
#csdnblog_header h2
{
    //blog描述风格设置
}
3、ul, id为personalnav, 个人导航列表
#csdnblog_header ul#personalnav
{
&n ......

四个css工具：fonts,grids,reset,base
使元素标准化的reset.css
以下普通而常用的元素都将margin和padding值标准化到0
the document body
div and p 
所有list 元素：dl,dt,dd,ul,ol,li
标题级元素：h1,h2,h3,h4,h5,h6
pre和blockquote元素
某些表单元素：form,fieldset,input,textarea
table元素：th，td
接下来要标准化的元素是table元素，将其border设为0，图像元素的border也设为0.
防止在某些浏览器中字体会变斜体或粗体，一下元素将font-style和font-weight设为normal:
address
caption
cite
code
dfn
em
strong
th
var
接下来的规则是对有序和无序的html list元素 ，设置list-style为 none。将caption和th元素的对齐方式都严格设为左对齐
所有的标题级元素的font-size设为100%，font-weight:normal，有效地将所有标题类型设为相同的尺寸和粗细。
最后提供的样式规则是针对:before和:after，他将伪元素前后插入的内容设为空。
关于:before伪元素，在元素内容之前插入内容。这个伪元素允许创作人员在元素内容最前插入生成内容。默认地，这个伪元素是行内元素，不过可以使用display改变这一点。
<style>
di ......

不可换行 <NOBR></NOBR> （不换行）
 
overflow
版本：CSS2　 兼容性：IE4+ NS6+　继承性：无
 
语法：
 
overflow : visible | auto | hidden | scroll
 
参数：
 
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对
象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条
 
说明：
 
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的
overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果
设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格
。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为overflow。
示例：
 
body { overflow: hidden; }
div { overflow: scroll; height: 100p ......