css Layout(网页布局)

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

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

  1. HTML Div+CSS布局:现在已广泛使用。

  2. HTML表格:速度较慢,较不受欢迎。

  3. 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>鸟哥教程 (niaoge.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>
测试看看‹/›

输出效果:

鸟哥教程 (niaoge.com)

左边栏

正文

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

页面内容在这里

右边栏

底部