CSS 教程

CSS 属性

CSS 进阶

CSS 设计

CSS 问题

CSS 其它

CSS 多选题

CSS 面试问题

CSS layout布局

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

有 3 种方法来设计网页布局：

  1. 带有 CSS 的 HTML Div：现在快速且广泛使用。

  2. HTML 表格：缓慢且不太受欢迎。

  3. HTML 框架集：现已弃用。

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

例子 (Example)

<!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>RocSchool</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>页脚</p>  
</div>  
  
</body>  
</html>
自己试试 »

输出：

上一主题 CSS Grid网格 下一主题 没有了
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具