HTML布局

最新推荐文章于 2024-07-19 13:18:23 发布

via_noob

最新推荐文章于 2024-07-19 13:18:23 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/wonderJQ/article/details/79976777

HTML 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用HTML中的<div>元素实现基本的网页布局设计，包括顶部标题、侧边菜单、主要内容区域及底部版权信息，并探讨了CSS在布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用<div>写下表代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">主要的网页标题</h1>

</div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>菜单</b>

<br>HTML

<br>CSS

<br>JavaScript

</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div>

</div>

</body>

</html>

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

	即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。