2021-12-29 html网页布局

HTML布局

网页布局对一个网站的外观是非常重要的，大多数网站可以使用 <div> 或者HTML5中的元素来为页面创建更加丰富的外观。

div布局：

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7 #header{
 8     background-color:skyblue;
 9     color:white;
10     text-align:center;
11     padding:5px;
12 }
13 #nav {
14     line-height:30px;
15     background-color:#eeeeee;
16     height:300px;
17     width:150px;
18     float:left;
19     padding:5px; 
20 }
21 #section {
22     width:350px;
23     float:left;
24     padding:10px; 
25 }
26 #footer {
27     background-color:skyblue;
28     color:white;
29     clear:both;
30     text-align:center;
31     padding:5px; 
32 }
33 </style>
34 </head>
35 <body>
36 
37 <div id="header">
38 <h1>顶部</h1>
39 </div>
40 
41 <div id="nav">
42 <h1>左侧菜单</h1>
43 </div>
44 <div id="section">
45 <h1>右侧内容</h1>
46 </div>
47 <div id="footer">底部</div>
48 
49 </body>
50 </html>
复制代码

HTML5元素布局：

HTML5 语义元素：

元素名称                                   描述

header                                     定义文档或节的页眉   

nav                                           定义导航链接的容器 

section                                     定义文档中的节 

article                                       定义独立的自包含文章

aside                                        定义内容之外的内容（比如侧栏）

footer                                       定义文档或节的页脚   

details                                      定义额外的细节   

summary                                 定义 details 元素的标题   

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7 #header{
 8     width:450px;
 9     background-color:#ef687f;
10     color:white;
11     text-align:center;
12     padding:5px;
13 }
14 #nav {
15     line-height:30px;
16     background-color:#eeeeee;
17     height:300px;
18     width:150px;
19     float:left;
20     padding:5px; 
21 }
22 #section {
23     width:350px;
24     float:left;
25     padding:10px; 
26 }
27 #footer {
28     width:450px;
29     background-color:#ef687f;
30     color:white;
31     clear:both;
32     text-align:center;
33     padding:5px; 
34 }
35 </style>
36 </head>
37 <body>
38 
39 <header id="header">
40 <h1>顶部</h1>
41 </header>
42 
43 <nav id="nav">
44 <h1>左侧菜单</h1>
45 </nav>
46 <section id="section">
47 <h1>HTML5布局</h1>
48 </section>
49 <footer id="footer">底部</footer>
50 
51 </body>
52 </html>
复制代码

 

posted @   admin-xiaoli  阅读(178)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手