自适应布局

关注

原创最新推荐文章于 2026-03-07 06:04:56 发布 415 阅读 AI 写同款· GEO 优化 ›

自适应布局与响应式布局！！！ 自适应布局和响应式布局都可以使用媒体查询来创建响应式网页，但它们的设计理念和应用方式有所不同。选择哪种方法取决于具体的需求和项目目标。如果需要为特定的设备提供最佳的用户体验，并且愿意为每个设备创建和维护单独的布局，那么自适应布局可能是更好的选择。如果需要创建一个能够适应任何屏幕尺寸的布局，并且希望减少开发工作量，那么响应式布局可能是更合适的选择。阅读详情

最近一直遇到布局的问题，我一直觉得这个东西就是慢慢写，慢慢调整，哪里有什么技巧。可是在遇到几次之后我就觉得，这个是有技巧的。终于被我发现了我笔试为什么挂了，因为我真的太傻了。

呵呵，这是我2天前写的草稿，昨天笔试又忘记了。累。

关于布局首先最先“想到”的是div，但是还有tabled的实现方法，昂。。。。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		.div{
			width: 100%;
			height: 500px;
			
		}
		.div1{
			float: left;
			width: 33.3%;
			height: 500px;
			background-color: blue;
		}
		.div2{
			float: left;
			width: 33.4%;
			height: 500px;
			background-color: green;
		}
		.div3{
			float: right;
			width: 33.3%;
			height: 500px;
			background-color: yellow;
		}
		.box{
			/*overflow: hidden;*/
			width: 100%;
			height: 500px;
			
		}
		.box1{
			float: left;
			width: 200px;
			height: 500px;
			background-color: orange;
		}
		.box2{
		
			height: 500px;
			background-color: red;
			position: relative;
			overflow: hidden;
			/*margin-right: 400px;*/
		}
		.box3{
			float: right;
			width: 200px;
			height: 500px;
			background-color: green;
		}
		.full{
			z-index: -1;
			width: 100%;
		/*	//height: 100%;*/
			min-height: 200px;
			
			background-color: blue;
		}
		table{
			text-align: center;
			width: 100%;
			height: 200px;
		}
		tr:nth-of-type(1)>td:nth-of-type(1){
			width: 200px;
			background-color: red;
		}
		tr:nth-of-type(1)>td:nth-of-type(2){
			

			background-color: yellow;
		}
		tr:nth-of-type(1)>td:nth-of-type(3){
			width: 200px;
			background-color: orange;
		}


		tr:nth-of-type(2)>td:nth-of-type(1){
			width: 200px;
			background-color: yellow;
		}
		tr:nth-of-type(2)>td:nth-of-type(2){
			

			background-color: green;
		}	


		tr>td{

		
		}
		/*.child{
			border: 1px solid blue;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: blue;
			background-image: url('./排序.jpg');

		}*/

		.child{
			top: 50%;
			left: 50%;
			
			position: absolute;
			background-color: blue;
			
			transform: translate(-50%,-50%);

		}
	</style>
</head>
<body>
	<div class="div">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
	<!-- <div class="box"> -->
		<div class="box1"></div>
		<div class="box3">
			
		</div>
		<div class="box2">
			<!-- <img class="child" src="./排序.jpg"> -->
			<div class="child">
				<img class="child" src="./排序.jpg" width="200px" height="130px">
			</div>
		</div>		
	<!-- </div> -->  
	<div class="full">
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
		123333</br>
	</div>
	<table cellspacing="0">
		<tr><td>yes</td><td>ok</td><td>no</td></tr>
		<tr><td>1</td><td colspan="2">2</td></tr>

	</table>
</body>
</html>

各种，现在都用的到的布局吧。