Home > Developer > Web Develop
This article simply explains how to use CSS3 to implement a simple responsive layout:
HTML5 file:
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name ="viewport" content="width = device-width, Initial-scale=1 "> <title>index01</title> <link href="style01.css" type="text/css" rel=" Stylesheet "></head><body> <div class="heading"></div> <div class="container"> <div class="Left"></div> <div class="main"></div> <div class="Right"></div> </div> <div class="footing"></div></body></html>CSS3 File:
*{margin:0Px;Padding0Px;}. Heading,. Container,. Footing{margin:TenPX Auto;}. Heading{Height: -Px;Background-color:red;}. Left,. Right,. Main{Height: -Px;Background-color:yellow;}. Footing{Height: -Px;Background-color:gray;}<!--media="Only screen and (max-width:640px)"As long as the width of the rendering screen is not greater than640PX When you use this style sheet--@media screen and(Min-width:960PX) {. Heading,. Container,. Footing{width:960Px;}. Left,. Main,. Right{Float:left;Height -Px;}. Left,. Right{width: $Px;}. Main{margin:0Px5Px;Width550Px;}. Container{Height: -Px;}} @media Screen and(Min-width: -px and(Max-width:960PX) {. Heading,. Container,. Footing{width: -Px;}. Left,. Main{Float:left;Height -Px;}. Right{Display:none;}. Left{width: thePx;}. Main{width:435Px;Margin-left:5Px;}. Container{Height: -Px;}} @media Screen and(Max-width: -PX) {. Heading,. Container,. Footing{width: -Px;}. Left,. Right{width: -Px;Height -Px;}. Main{margin-top:TenPx;Width -Px;Height $Px;}. Right{margin-top:TenPx;}. Container{Height:420Px;}}The code of this article can implement the same interface and display different layouts under different width of the rendering width.
HTML5--use CSS3 for simple responsive layouts
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
