无涯教程网

关注我们

CSS - Layout(网页布局)

CSS - Layout(网页布局)

CSS布局(Layout)易于设计。无涯教程可以使用CSS布局来设计网页，例如主页，与关于我们，联系我们等。

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

HTML Div+CSS - 现在已广泛使用。
HTML Table - 速度慢且不受欢迎。
HTML Frameset - 现已弃用。

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>Learnfk</h2></div>

<div class="container">
<div class="left">
<p>左页</p>
</div>
<div class="body">
<h1>Body Page</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>

输出:

Learnfk

左页

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

页面内容在这里

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-layout.html

来源：LearnFk无涯教程网

右页

页脚

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

React实战进阶45讲 -〔王沛〕

快速上手Kotlin开发 -〔张涛〕

深入浅出计算机组成原理 -〔徐文浩〕

DDD实战课 -〔欧创新〕

性能工程高手课 -〔庄振运〕

用户体验设计实战课 -〔相辉〕

PyTorch深度学习实战 -〔方远〕

结构思考力 · 透过结构看问题解决 -〔李忠秋〕

结构会议力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)