css页面布局和导航示例
<html>
<head>
<mce:style type="text/css"><!--
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
--></mce:style><style type="text/css" mce_bogus="1">div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">W3School.com.cn</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>
</body>
</html>
<html>
<head>
<mce:style type="text/css"><!--
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
相关文档：
关于CSS对各个浏览器兼容已经是老生常谈的问题了，.以下内容没有太多新颖, 纯属个人综合网上的文章所得, 有些重复的，懒的删了
一、CSS HACK
HACK概念：
不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到 ......
【作者：rare】
csdn blog css自定义设置
可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格
csdn blog的页面架构基本是由div实现的，整个页面主要由三个div组成，它们的id分别是:
csdnblog_header, csdnblog_sidebar, csdnblog_content。
所以，定义它们的主体样式可以这样:
#csdnblog_heade ......
四个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元素：t ......
IE vs FF
CSS 兼容要点：DOCTYPE 影响 CSS 处理
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一 ......
