CSS 基础教程

CSS 盒子模型

CSS3基础教程

CSS 参考手册

CSS @规则(RULES)

CSS 实例大全 CSS Counter(计数器)

css Layout(网页布局)

CSS布局易于设计。我们可以使用CSS布局来设计我们的网页，例如主页，与我们联系，关于我们等。

有三种设计网页布局的方法：

HTML Div+CSS布局：现在已广泛使用。
HTML表格：速度较慢，较不受欢迎。
HTML框架集：现已弃用。

CSS布局可以包含页眉，页脚，左窗格，右窗格和正文部分。让我们看一个简单的CSS布局示例。

CSS布局示例

示例

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.header{margin:-8px -8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}  
.container{width:100%}  
.left{width:15%;float:left;}  
.body{width:65%;float:left;background-color:pink;padding:5px;}  
.right{width:15%;float:left;}  
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}  
</style>  
</head>  
<body>  
<div class="header"><h2>基础教程 (cainiaoplus.com)</h2></div>  
  
<div class="container">  
<div class="left">  
<p>左边栏</p>  
</div>  
<div class="body">  
<h1>正文</h1>  
<p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p>  
<p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p>  
<p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p>  
<p>页面内容在这里</p><p>页面内容在这里</p><p>页面内容在这里</p>  
<p>页面内容在这里</p>  
</div>  
<div class="right">  
<p>右边栏</p>  
</div>  
</div>  
  
<div class="footer">  
<p>Footer</p>  
</div> 
</body>  
</html>

测试看看‹/›

输出效果:

基础教程 (cainiaoplus.com)

左边栏

正文

页面内容在这里

右边栏

底部

CSS 实例大全 CSS Counter(计数器)