HTML 布局

合理的页面布局非常重要,不仅决定了页面是否美观,更是会影响到用户的体验;不好的页面布局,用户体验会很差,也很难留住用户。

HTML布局的实现方式

1、可以利用Html table表格的方式,构建页面的布局,再进行内容的填充。

2、使用div,配合float或者flex对页面进行布局。

网站布局

大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

xml 复制代码
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>基础教程</title> 
</head>
<body>
 
<div id="container" style="width:520px">
 
<div id="header" style="background-color:#FFA300;">
<h1 style="margin-bottom:0;">主要的网页H1标题</h1></div>
 
<div id="menu" style="background-color:#FF9a00;height:200px;width:120px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#dddddd;height:200px;width:400px;float:left;">
内容在这里</div>
 
</div>
 
</body>
</html>

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

xml 复制代码
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>基础教程</title> 
</head>
<body>
 
<table width="520" border="0">
<tr>
<td colspan="2" style="background-color:#FFB500;">
<h1>主要的网页H1标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFB700;width:120px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#DDDDDD;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
</tr>
</table>
 
</body>
</html>

HTML 布局 - 必不可少的CSS

使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护、定义风格的灵活性。通过修改css样式表文件,就可以改变所有页面的布局。

引用

菜鸟教程

相关推荐
β添砖java1 小时前
CSS网格布局
前端·css·html
木易 士心3 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博3 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中3 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭3 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享3 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom3 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室3 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣4 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻4 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app