设计主要首页 div平铺居中并排显示的效果

最新推荐文章于 2024-08-15 14:34:25 发布

原创最新推荐文章于 2024-08-15 14:34:25 发布 · 624 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

CSS笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的网页布局案例，通过多个div元素和iframe的应用展示了基本的网页结构设计与内容嵌套技术。主要内容包括：页面整体布局、浮动定位、边框样式设置及iframe的使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{
	margin-top:5px;
	border:1px solid #F09;
	border-radius:4px;
	width:49.4%;
	height:300px;
	float:left;
	}
	.div2{
	margin-top:5px;
	border:1px solid #F09;
	border-radius:4px;
	width:49.4%;
	height:300px;
	float:right;
	}
</style>
</head>

<body>
<div style="border:1px solid #30F; border-radius:2px; margin-top:5px;
margin-left:15px; margin-right:15px; height:900px;;">

<div id="div1" class="div1">
<iframe src="http://127.0.0.1" width="99%" height="99%" scrolling="no" style="border:0px;" id="ifranme"></iframe>
 </div>

<div id="div2" class="div2"> </div>


<div id="div4" class="div1"> </div>

<div id="div3" class="div2"> </div>
<div id="div5" class="div1"> </div>

<div id="div6" class="div2"> </div>

</div>
</body>
</html>