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)
Recommend
Forty-nine JavaScript tips and tricks
Table of contents 1. Operation of js integer 2. R...
How to modify the port mapping of a running Docker container
Preface When docker run creates and runs a contai...
innodb_flush_method value method (example explanation)
Several typical values of innodb_flush_method f...
CentOS8 network card configuration file
1. Introduction CentOS8 system update, the new ve...
Special commands in MySql database query
First: Installation of MySQL Download the MySQL s...
Vue button permission control introduction
Table of contents 1. Steps 1. Define buttom permi...
Detailed explanation of how to use binlog2sql to quickly roll back after MySQL misoperation
Preface In daily work or study, it is inevitable ...
Alibaba Cloud Server Tomcat cannot be accessed
Table of contents 1. Introduction 2. Solution 2.1...
Native JS implements a very good-looking counter
Today I will share with you a good-looking counte...
MySQL pessimistic locking and optimistic locking implementation
Table of contents Preface Actual Combat 1. No loc...
Detailed explanation of HTML onfocus gain focus and onblur lose focus events
HTML onfocus Event Attributes Definition and Usag...
Example code showing common graphic effects in CSS styles
Let me briefly describe some common basic graphic...
Vue implements accordion effect
This article example shares the specific code of ...
CentOS 8 system FTP server installation and passive mode configuration detailed tutorial
Table of contents 1. Understand the basics 2. Con...
Solution to Ubuntu 20.04 Firefox cannot play videos (missing flash plug-in)
1. Flash plug-in package download address: https:...