srcminiCSS布局易于设计。我们可以使用CSS布局来设计我们的网页, 例如主页, 与我们联系, 关于我们等。
有3种设计网页布局的方法：
- 带有CSS的HTML Div：现在已广泛使用。
- 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>srcmini</h2></div>
<div class="container">
<div class="left">
<p>Left Page</p>
</div>
<div class="body">
<h1>Body Page</h1>
<p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>
<p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>
<p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>
<p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>
<p>Page Content goes here</p>
</div>
<div class="right">
<p>Right Page</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>输出：
评论前必须登录！
注册