易截截图软件、单文件、免安装、纯绿色、仅160KB

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;


相关文档:

DIV CSS网页布局兼容性的要点与诀窍总

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 多设一 ......

用JS来切换CSS,很好很简单

假如我们想通过前台自主选择CSS样式来达到改变颜色、风格等目的的话,用JS调用CSS文件就OK。
先做两个(或多个)CSS文件。
style_1.css 代码:
body{background-color: #ccff66;}
......
style_2.css 代码:
body{background-color: #ff0000;}
......
JS代码如下:
<link rel="stylesheet" rev="stylesheet" ......

【CSS入门】八、DIV CSS 块状元素和内联元素

我们先来分析一下块级元素、内联级元素的定义和解析:
  
块元素(block
element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。
“form"
这个块元素比较特殊,它只能用来容纳其他块元素。
  如果没有css的作用,块元素
......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号