Home > Developer > Web Develop
1. Here are some CSS frameworks that provide varying degrees of support for responsive design:
(1) Semantic (HTTP://SEMANTIC.GS);
(2) Skeleton (http://getskeleton.com);
(3) less Framework (http://lessframework.com);
(4) 1140 CSS Grid (http://cssgrid.net);
(5) columnal (http://www.columnal.com)
2. This section focuses on the Columnal grid system and describes how to use it to quickly build the basic layout structure of the site.
Columnal has a built-in mobile grid layout with integrated media queries, and it uses CSS naming similar to the 960.GS framework, a very popular fixed-width grid system that is widely known by developers and designers.
Suppose we now have only one PSD hierarchy on the homepage of the site, and are asked to use HTML and CSS to build the basic layout of the site as quickly as possible.
The columnal grid system supports a maximum of 12 column layouts, and the following examples show how to use Columnal to help us build our website quickly.
3. Steps to use
(1) Go to columnal official website Download columnal compressed package to local, and then unzip.
(2) Make a copy of the page we have written, and then introduce columnal.css to the page and add the correct class to the correct div.
4. The homepage of the website source code is as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<meta name= "viewport" content= "width=divice-width,initial-scale=1.0"/>
<title>and the winner isn ' t...</title>
<body>
<div id= "wrapper" >
<!--the header and the navigation-
<div id= "Header" >
<div id= "logo" >and the winner Is<span>n ' t...</span></div>
<div id= "Navigation" >
<ul>
<li><a href= "#" >Why?</a></li>
<li><a href= "#" >Synopsis</a></li>
<li><a href= "#" >Stills/Photos</a></li>
<li><a href= "#" >Videos/clips</a></li>
<li><a href= "#" >Quotes</a></li>
<li><a href= "#" >Quiz</a></li>
</ul>
</div>
</div>
<!--the Content--
<div id= "Content" >
<p>that films like King Kong,moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>we ' re here to put things right.</p>
<a href= "#" >these should have won »</a>
</div>
<!--the sidebar-
<div id= "sidebar" >
<div class= "Sideblock Unsung" >
<a href= "#" ></a>
<a href= "#" ></a>
</div>
<div class= "Sideblock overhyped" >
<a href= "#" ></a>
<a href= "#" ></a>
</div>
</div>
<!--the footer-->
<div id= "Footer" >
<p>note:our opinion is absolutely correct. You is Wrong,even if you thinkyou is right. That ' s a fact. Deal with ti.</p>
</div>
</div>
</body>
First, to set the #wrapper div as a container for all other elements, append the. Container class:
5. Introduce columnal.css to the page and add the correct class code to the correct div (added in bold)
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<meta name= "viewport" content= "width=divice-width,initial-scale=1.0"/>
<title>and the winner isn ' t...</title>
<link rel= "stylesheet" type= "Text/css " href= "./columnal/code/css/columnal.css"/>
<body>
<div id= "wrapper"class= "Container">
<!--the header and the navigation-
<div id= "Header"class= "Row">
<div id= "logo"class= "Col_12">and the winner Is<span>n ' t...</span></div>
<div id= "Navigation"class= "Row">
<ul>
<li><a href= "#" >Why?</a></li>
<li><a href= "#" >Synopsis</a></li>
<li><a href= "#" >Stills/Photos</a></li>
<li><a href= "#" >Videos/clips</a></li>
<li><a href= "#" >Quotes</a></li>
<li><a href= "#" >Quiz</a></li>
</ul>
</div>
</div>
<divclass= "Row">
<!--the Content--
<div id= "Content"class= "Col_9 Alpha Omega">
Col_3"Src="./images/oscar.jpg "alt=" Atwi_oscar "/>
<Div class= "Col_6 Omega">
<p>that films like King Kong,moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>we ' re here to put things right.</p>
<a href= "#" >these should have won »</a>
</div>
</div>
<!--the sidebar-
<div id= "sidebar"class= "Col_3">
<div class= "Sideblock Unsung" >
<a href= "#" ></a>
<a href= "#" ></a>
</div>
<div class= "Sideblock overhyped" >
<a href= "#" ></a>
<a href= "#" ></a>
</div>
</div>
</div>
<!--the footer-->
<div id= "Footer"class= "Row">
<p>note:our opinion is absolutely correct. You is Wrong,even if you thinkyou is right. That ' s a fact. Deal with ti.</p>
</div>
</div>
</body>
The overall framework is set up, and details can be optimized by adding additional CSS code to the page.
Where: the. Col_x class indicates how many columns the element spans.
Using Columnal grid system to quickly build the basic layout structure of website
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
