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
Front-end vue+express file upload and download example
Create a new server.js yarn init -y yarn add expr...
Pure CSS to change the color of the picture
The css technique for changing the color of an im...
Implementing a web player with JavaScript
Today I will share with you how to write a player...
Difference between querySelector and getElementById methods in JS
Table of contents 1. Overview 1.1 Usage of queryS...
Design sharing of the download page of the Pengyou.com mobile client (picture and text)
Let's first look at some simple data: Accordin...
How to install and configure Docker nginx
Download Nginx image in Docker docker pull nginx ...
Detailed explanation of MySQL monitoring tool mysql-monitor
1. Overview mysql-monitor MYSQL monitoring tool, ...
How to start and stop SpringBoot jar program deployment shell script in Linux
Without further ado, let me give you the code. Th...
JavaScript selector functions querySelector and querySelectorAll
Table of contents 1. querySelector queries a sing...
Detailed explanation of MySQL transaction processing usage and example code
MySQL transaction support is not bound to the MyS...
Unzipped version of MYSQL installation and encountered errors and solutions
1 Installation Download the corresponding unzippe...
Summary of naming conventions for HTML and CSS
CSS naming rules header: header Content: content/c...
CSS perfectly solves the problem of front-end image deformation
I saw an article in Toutiao IT School that CSS pe...
Use of VNode in Vue.js
What is VNode There is a VNode class in vue.js, w...
An in-depth summary of MySQL time setting considerations
Does time really exist? Some people believe that ...