HTML页面布局代码示例

页面布局是图形设计的一部分, 用于处理页面上视觉元素的排列。页面布局用于使网页看起来更好。它建立了整体外观, 相对重要性以及图形元素之间的关系, 以实现信息和眼睛运动的顺畅流动, 从而获得最大的效果或影响。

文章图片
页面布局信息：

标头：页面顶部使用的前端部分。 < header> 标记用于在网页中添加标题部分。
导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。
索引/边栏：它包含其他信息或广告, 并不一定总是需要添加到页面中。
内容部分：内容部分是显示内容的主要部分。
页脚：页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部。 < footer> 标记用于在网页中设置页脚。

例子：

< !DOCTYPE html> < html > < head > < title > Page Layout< / title > < style > .head1 { font-size:40px; color:#009900; font-weight:bold; } .head2 { font-size:17px; margin-left:10px; margin-bottom:15px; } body { margin: 0 auto; background-position:center; background-size: contain; }.menu { position: sticky; top: 0; background-color: #009900; padding:10px 0px 10px 0px; color:white; margin: 0 auto; overflow: hidden; } .menu a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 20px; } .menu-log { right: auto; float: right; } footer { width: 100%; bottom: 0px; background-color: #000; color: #fff; position: absolute; padding-top:20px; padding-bottom:50px; text-align:center; font-size:30px; font-weight:bold; } .body_sec { margin-left:20px; } < / style > < / head > < body > < !-- Header Section --> < header > < div class = "head1" > lsbin< / div > < div class = "head2" > A computer science portal for geeks< / div > < / header > < !-- Menu Navigation Bar --> < div class = "menu" > < a href = "https://www.lsbin.com/#home" > HOME< / a > < a href = "https://www.lsbin.com/#news" > NEWS< / a > < a href = "https://www.lsbin.com/#notification" > NOTIFICATIONS< / a > < div class = "menu-log" > < a href = "https://www.lsbin.com/#login" > LOGIN< / a > < / div > < / div > < !-- Body section --> < div class = "body_sec" > < section id = "Content" > < h3 > Content section< / h3 > < / section > < / div > < !-- Footer Section --> < footer > Footer Section< / footer > < / body > < / html >

【HTML页面布局代码示例】输出如下：