如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
用div标签确定网页布局的方法
来源：互联网
2023-03-16 19:11:00 497
本文介绍一下，用div标签进行网页排版的方法。
工具/原料
- 电脑
- 浏览器
- runoob测试页
- notepad
方法/步骤
代码是：
!DOCTYPE html>
html>
head>meta charset="utf-8">/head>
body>
div id="container" style="width:365px">
div id="header" style="background-color:green;">
h1 style="margin-bottom:0;">
big>big>big>标题/big>/big>/big>/h1>/div>
div id="menu" style="background-color:#FFD700;
height:100px;width:80px;float:left;">
b>菜单/b>br>HTMLbr>CSSbr>JavaScript/div>
div id="content" style="background-color:#EEEEEE;
height:100px;width:200px;float:left;">内容/div>
div id="footer"style="background-color:#FFA500;
clear:both;text-align:center;">哈哈哈/div>
/div>
/body>
/html>
布局效果见下图。
下面，我们逐层来认识这个代码。
把这个代码复制到notepad里面，可以看到，第一个div>标签和最后一个/div>标签是一对。
也就是说，别的div>标签都是嵌套在这个里面。
注意：
当鼠标放在某个标签上，与之配对的标签会高亮显示；
div>标签，表示一个区块。
把内层所有的区块删掉，只保留最外层区块（粗体部分）：
!DOCTYPE html>
html>
head>meta charset="utf-8">/head>
body>
div id="container" style="width:365px">/div>
/body>
/html>
id="container"表示这个区块是一个容器；
style="width:365px"表示容器的宽度是365个像素，高度不限。
由于没有内容，所以在网页里面看不到任何内容。
在容器里面加入标题：
div id="header" style="background-color:green;">
h1>big>big>big>标题/big>/big>/big>/h1>/div>
其中：
id="header"表示这是一个标题；
style="background-color:green;"表示这个区块的背景色是绿色；
这个区块的宽度与容器宽度一样，这是一种自适应的宽度；
这个区块的高度，取决于字体。
再加入一个菜单区块：
div id="menu" style="background-color:pink;
height:100px;width:80px;float:left;">
b>菜单/b>br>Abr>Bbr>C/div>
其中：
id="menu"表示这是一个菜单；
style="background-color:pink;"表示背景色是粉色；
height:100px;width:80px;表示区块高100像素，宽80像素；
float:left;表示这个区块位于容器左侧。
如果菜单的内容超过了区块的范围，区块不会随之变大：
div id="menu" style="background-color:pink;
height:50px;width:50px;float:left;">
b>菜单/b>br>Abr>Bbr>CCCCCCCCC/div>
正文区块，用来输入文字内容：
div id="content" style="background-color:orange;
height:80px;width:200px;float:left;">
b>内容/b>/div>
注意：
这个区块没有指定位置，所以，它会紧贴上一个模块，且顶端持平。
但是，如果两个并排的区块的宽度之和大于容器的宽度，后面的区块就会被迫换行。
当某个区块的宽度大于容器的宽度，容器只能纵容它。
容器用footer来封底：
div id="footer"style="background-color:yellow;
clear:both;text-align:center;">底层/div>
注意：封底的区块，高度和宽度，都是自适应的。
注意事项
- 这所有的网页布局，就是简单的拼凑。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
上一篇：怎么把动态图插入到网页里面 下一篇：html5 svg世界地图热点动画特效
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)