div 实现分屏四屏、九屏

最新推荐文章于 2024-06-28 16:30:44 发布

imorris

最新推荐文章于 2024-06-28 16:30:44 发布

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS HTML JavaScript 文章标签： div applet border class function xhtml

本文链接：https://blog.youkuaiyun.com/imorris/article/details/7751056

本文介绍如何利用div元素来创建四平和九屏的屏幕布局效果，通过调整div的border和class属性，实现灵活的网页分区设计。

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

四平效果图：

<!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> 
<title>四屏</title> 


<style type="text/css">
body,html {
	height: 100%;
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: Arial
}

.layout {
	float: left;
	height: 50%;
	width: 50%;
	background: #888;
}

</style>

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
<!--
	$(function() {		
		
		$("#Applet1").click(function(){
			alert("外部div宽：" +$("#left_top").width()+" 	高："+ $("#left_top").height()+"\n"+"内部div宽：" +$("#Applet1").width()+" 	高："+ $("#Applet1").height());
		});
		$("#Applet2").click(function(){
			alert("外部div宽：" +$("#right_top").width()+" 	高："+ $("