About the processing of adaptive layout (using float and margin negative margin)
|
Adaptive layout is becoming more and more common in practical applications. Today I will share several demos of adaptive layout, mainly the floating holy grail layout (also called double-wing layout, which is mainly implemented by floating and negative margin). I did not introduce the absolute positioning layout because I think you can understand the following examples. The absolute positioning layout is also very simple. PS: The Holy Grail layout has an advantage, which is that it conforms to the concept of progressive enhancement in front-end development. Because the browser parses the DOM from top to bottom, the Holy Grail layout can put the important content section of the page in front of the DOM and parse it first, while the secondary aside content is placed at the back of the DOM and parsed later. The following example can solve most of the adaptive layout problems in practical applications. Interested students can study it. The code is as follows: 1. Fixed on the left, adaptive on the right (implementation of the Holy Grail layout): Copy code The code is as follows:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> body{margin:0;padding:0} .wrap{ width:100%; float:left} .content{ height:300px;background:green; margin-left:200px} .right{ width:200px; height:300px; background:red; float:left; margin-left:-100%} </style> </head> <body> <div class="wrap"> <div class="content">content</div> </div> <div class="right">aside</div> </body> </html> 2. Fixed on the right, adaptive on the left (implementation of the Holy Grail layout): Copy code The code is as follows:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> body{margin:0;padding:0} .wrap{ width:100%; float:left} .content{ height:300px;background:green; margin-right:200px} .right{ width:200px; height:300px; background:red; float:left; margin-left:-200px;} </style> </head> <body> <div class="wrap"> <div class="content">content</div> </div> <div class="right">aside</div> </body> </html> 3. Fixed left and right sides, adaptive middle: Copy code The code is as follows:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> body{margin:0;padding:0} .wrap{ width:100%; float:left} .content{ height:300px;background:green; margin-left:200px;margin-right:200px} .left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%} .right{ width:200px; height:300px; background:red; float:left; margin-left:-200px} </style> </head> <body> <div class="wrap"> <div class="content">content</div> </div> <div class="left">aside</div> <div class="right">aside</div> </body> </html> |
<<: 3 Tips You Must Know When Learning JavaScript
>>: Introduction to commonly used MySQL commands in Linux environment
Recommend
The difference between the name and id of the a tag's target pointing to the iframe
Copy code The code is as follows: <iframe id=&...
Sample code for generating QR code using js
Some time ago, the project needed to develop the ...
jQuery clicks on the love effect
This article shares the specific code of jQuery&#...
Solution to ERROR 1366 when entering Chinese in MySQL
The following error occurs when entering Chinese ...
Slot arrangement and usage analysis in Vue
The operating environment of this tutorial: Windo...
JavaScript canvas to load pictures
This article shares the specific code of JavaScri...
Explanation of the concept and usage of Like in MySQL
Like means "like" in Chinese, but when ...
A brief discussion on the differences between FTP, FTPS and SFTP
Table of contents Introduction to FTP, FTPS and S...
Detailed explanation of Vue custom instructions
Table of contents Vue custom directive Custom dir...
Node and Python two-way communication implementation code
Table of contents Process Communication Bidirecti...
Vue form input binding v-model
Table of contents 1.v-model 2. Binding properties...
CSS3 to achieve simple white cloud floating background effect
This is a very simple pure CSS3 white cloud float...
Windows uses VMware to create a Linux virtual machine and install the CentOS7.2 operating system
Table of contents 1. Follow the wizard to create ...
Share some uncommon but useful JS techniques
Preface Programming languages usually contain v...
Vue.js front-end web page pop-up asynchronous behavior example analysis
Table of contents 1. Preface 2. Find two pop-up c...