How to implement blank space in Taobao with CSS3

Make a blank space for Taobao:

When you shrink the browser page, the content area does not shrink, but the blank space becomes 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;/* 0 for top and bottom, adaptive for left and right*/
			}
		</style>
	</head>
	<body>
		<div class="wrapper"><!-- Background area -->
			<div class="content"></div><!-- Content area-->
		</div>
	</body>
</html>

In this way, when you zoom, the gray part outside is zoomed, and the green part is always in the center.

This is how the text inside is written.

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

This is the end of this article about how to achieve Taobao white space with CSS3. For more relevant CSS3 Taobao white space content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Analysis of examples of using anti-shake and throttling in Vue components

>>: MySQL configuration master-slave server (one master and multiple slaves)

Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

How to implement blank space in Taobao with CSS3

Analysis of the process of deploying pure HTML files in Tomcat and WebLogic

Analysis of the advantages of path.join() in Node.js

Detailed explanation of viewing and setting file permissions on Mac

Example code for using CSS to darken the font color of the selected area when scrolling

Detailed explanation of MySQL Explain

Simple setup of VMware ESXi6.7 (with pictures and text)

Detailed explanation of writing multiple conditions of CSS: not

js to achieve simple product screening function

Automatically build and deploy using Docker+Jenkins

Mysql SQL statement operation to add or modify primary key

Recommend

An article to quickly understand Angular and Ionic life cycle and hook functions

MySQL 5.7.17 installation and configuration method graphic tutorial (Ubuntu 16.04)

MySQL Flush-List and dirty page flushing mechanism

Specific use of lazy loading and preloading in js

How to build a Vue3 desktop application

MySQL 8.0.3 RC is about to be released. Let’s take a look at the changes

JavaScript to achieve all or reverse selection function

View disk IO in Linux and find out the processes that occupy high IO read and write

mysql splits a row of data into multiple rows based on commas

Discussion on the problem of iframe node initialization

Vue implements Dialog encapsulation

Solution to overflow:hidden failure in CSS

Docker-compose steps to configure the spring environment

Detailed example of MySQL joint table update data

Install mysql5.7 on Ubuntu 18.04