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
How to define input type=file style
Why beautify the file control? Just imagine that a...
Detailed tutorial on installing Python 3.8.1 on Linux
This example takes the installation of Python 3.8...
CSS Reset style reset implementation example
Introduction: All browsers come with default styl...
Element UI table realizes drop-down filtering function
This article example shares the specific code for...
Nginx rewrite regular matching rewriting method example
Nginx's rewrite function supports regular mat...
Vue implements small search function
This article example shares the specific code of ...
How to place large images in a small space on a web page
Original source: www.bamagazine.com There are nar...
Common writing examples for MySQL and Oracle batch insert SQL
Table of contents For example: General writing: S...
MySQL 8.0.11 MSI version installation and configuration graphic tutorial
This article shares the installation and configur...
Solution to large line spacing (5 pixels more in IE)
Copy code The code is as follows: li {width:300px...
WebStorm cannot correctly identify the solution of Vue3 combined API
1 Problem Description Vue3's combined API can...
How to install Linux online software gcc online
Linux online installation related commands: yum i...
How to use Spark and Scala to analyze Apache access logs
Install First you need to install Java and Scala,...
Implementation and usage scenarios of JS anti-shake throttling function
Table of contents 1. What is Function Anti-shake?...
How to optimize MySQL query speed
In the previous chapters, we introduced how to ch...