html学习笔记（2）——页面布局之浮动布局

最新推荐文章于 2025-05-26 20:21:04 发布

Ghostlas

最新推荐文章于 2025-05-26 20:21:04 发布

阅读量923

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/Ghostlas/article/details/46432131

html 专栏收录该内容

4 篇文章

订阅专栏

本文记录了初学者使用HTML实现田字格页面布局的过程，通过浮动布局完成四宫格的设计。虽然代码较长，但展示了基础的HTML布局技巧。

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

做了一个田字格的页面布局：因为是初学，所以代码比较长，日后学了类还能进一步缩减。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ghost's first Web</title>
<style>
#main{
width:104px;
height:104px;
background:#CCC;
}

#ltside{
width:50px;
height:50px;
background:#C36;
float:left;
margin:1px;
}
#rtside{
width:50px;
height:50px;
background:#FF9;
float:right;
margin:1px;
}
#luside{
width:50px;
height:50px;
background:#9CC;
float:left;
margin:1px;
}

#ruside{
width:50px;
height:50px;
background:#F09;
float:right;
margin:1px;
}
</style>
</head>
<body>
<div id="main">
<div id="ltside">1</div>
<div id="rtside">2</div>
<div id="luside">3</div>
<div id="ruside">4</div>
</div>
</body>

</html>