CSS 布局案例

最新推荐文章于 2023-10-21 10:07:51 发布

_wjl_

最新推荐文章于 2023-10-21 10:07:51 发布

阅读量263

点赞数

分类专栏： web前端文章标签： CSS靶心圣杯布局双飞翼布局

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

靶心

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>靶心的制作</title>
	<style>
	.round1 {
		width: 500px;
		height: 500px;
		background-color: blue;
	}
	.round1,
	.round2,
	.round3,
	.round4,
	.round5{
		border: 10px solid #000;
		border-radius: 50%;
		margin: 40px;
	}
	.round1 {
		width: 500px;
		height: 500px;
		background-color: blue;
	}
	.round2 {
		width: 400;
		height: 400px;
		background-color: blue;
	}
	.round3 {
		width: 300px;
		height: 300px;
		background-color: blue;
	}
	.round4 {
		width: 200px;
		height: 200px;
		background-color: blue;
	}
	.round5 {
		width: 100px;
		height: 100px;
		background-color: red;
	}
	</style>
</head>
<body>
	<div class="round1">
	    <div class="round2">
	    	<div class="round3">
	    		<div class="round4">
	    			<div class="round5"></div>
	    		</div>
	    	</div>
	    </div>
	</div>
</body>
</html>

在这里插入图片描述

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局和双飞翼布局</title>
	<style>
	div {
		margin: 0;
		padding: 0;
	}
	.container {
		/* width: 100%; */
		background-color: #eee;
		height: 200px;
		padding: 0px 200px;
		min-width: 400px;
	}
	.left,
	.right {
		width: 200px;
		height: 200px;
		background-color: skyblue;
		float: left;
	}
	.main {
		width: 100%;
		height: 200px;
		background-color: pink;
		float: left;
	}
	.left {
		margin-left: -100%;
		position: relative;
		left: -200px;
	}
	.right {
		margin-left: -200px;
		position: relative;
		right: -200px;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="main">中间栏</div>
		<div class="left">左边栏</div>
		<div class="right">右边栏</div>
	</div>
</body>
</html>

在这里插入图片描述

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼布局</title>
	<style>
	div {
		margin: 0;
		padding: 0;
	}
	.container {
		/* width: 100%; */
		background-color: #eee;
		height: 200px;
		/* padding: 0px 200px; */
		min-width: 400px;
	}
	.left,
	.right {
		width: 200px;
		height: 200px;
		background-color: skyblue;
		float: left;
	}
	.main {
		width: 100%;
		height: 200px;
		background-color: pink;
		float: left;
	}
	.left {
		margin-left: -100%;
		/* position: relative;
		left: -200px; */
	}
	.right {
		margin-left: -200px;
	/* 	position: relative;
	right: -200px; */
	}
	.main_w {
		margin: 0px 200px;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="main">
		    <div class="main_w">中间栏</div>
		</div>
		<div class="left">左边栏</div>
		<div class="right">右边栏</div>
	</div>
</body>
</html>l

_wjl_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 布局案例

靶心<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>靶心的制作</title> <style> .round1 { width: 500px; height: 500px; background-col...
复制链接

扫一扫