HTML5页面布局

HTML5页面布局,第1张

1.header,页面的头部

2.nav ,页面的导航部分

3.section,页面中的一个内容区块,由标题和内容组成

4.aside,页面的侧边栏,非正文的内容,与页面的主要内容是分开的,被删除而不会影响页面的内容

5.article,代表一个独立的,完整的相关内容的区块

6.footer,页面或页面中的一个脚注、底部

可以通过DIV来分块布局,然后通过CSS样式来调整大小,颜色等样式。参考代码如下:

<!DOCTYPE html>

<html>

<head>

<style>

#header {

background-color:black

color:white

text-align:center

padding:5px

}

#nav {

line-height:30px

background-color:#eeeeee

height:300px

width:100px

float:left

padding:5px

}

#section {

width:350px

float:left

padding:10px

}

#footer {

background-color:black

color:white

clear:both

text-align:center

padding:5px

}

</style>

</head>

<body>

<div id="header">

<h1>第一层</h1>

</div>

<div id="nav">

第二层左侧

</div>

<div id="section">

第二层右侧

</div>

<div id="footer">

第三层

</div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7034177.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存