CSS3 implementation of Taobao blank method

Posted on

Make a blank on Taobao:

When you are reducing the browser page, its content area is not reduced, it is left blank smaller.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrapper{
				height: 30px;
				background-color: gray;
			}
			.content{
				width: 1200px;
				height: 30px;
				background-color: #0f0;
				Margin: 0 Auto; / * up and down 0, left and right adaptive*/
			}
		</style>
	</head>
	<body>
		< div class = "wrapper" > <! -- background area -- >
			< div class = "content" > < / div > <! -- content area -- >
		</div>
	</body>
</html>

So when you zoom in and out, you zoom in and out on the gray part, and the green part is always in the middle.

That’s how the words inside are written


<div>
<ul style="float: left;"></ul>
<ul style="float: right;"></ul>
</div>

So far, this article about CSS3’s implementation of Taobao blank method is introduced here. For more relevant CSS3 Taobao blank content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Leave a Reply

Your email address will not be published.