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样式表文件,就可以改变所有页面的布局。

引用

菜鸟教程

相关推荐
用户47949283569154 分钟前
面试官:为什么很多格式化工具都会在行尾额外空出一行
前端
知识分享小能手5 分钟前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
一大树5 分钟前
首屏白屏的处理方案~嗖得一下
前端
小old弟7 分钟前
🤔同时发送100个请求?!手撕,并发请求⌨️
前端
533_11 分钟前
[echarts] 更新数据
前端·javascript·echarts
excel12 分钟前
理解 JavaScript 中的迭代器协议与中断行为:for...of vs for...in
前端
幻雨様14 分钟前
UE5多人MOBA+GAS 番外篇:同时造成多种类型伤害,以各种属性值的百分比来应用伤害(版本二)
java·前端·ue5
讨厌吃蛋黄酥18 分钟前
利用Mock实现前后端联调的解决方案
前端·javascript·后端
zzywxc78740 分钟前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
Hello.Reader1 小时前
Rust → WebAssembly 的性能剖析全指南
前端·rust·wasm