CSS - Layout(网页布局)

CSS - Layout(网页布局) 首页 / CSS入门教程 / CSS - Layout(网页布局)

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

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

无涯教程网

  1. HTML Div+CSS  - 现在已广泛使用。
  2. HTML Table         - 速度慢且不受欢迎。
  3. 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无涯教程网

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

技术教程推荐

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

ZooKeeper实战与源码剖析 -〔么敬国〕

互联网人的英语私教课 -〔陈亦峰〕

微信小程序全栈开发实战 -〔李艺〕

Flink核心技术与实战 -〔张利兵〕

Spring Cloud 微服务项目实战 -〔姚秋辰(姚半仙)〕

反爬虫兵法演绎20讲 -〔DS Hunter〕

云原生架构与GitOps实战 -〔王炜〕

云时代的JVM原理与实战 -〔康杨〕

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