Home >Web Front-end >HTML Tutorial >960CSS architecture_html/css_WEB-ITnose
960CSS architecture_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:281303browse
960 is a quick layout template, 960 official website: 960.gs. It divides the web page into 12 blocks, 16 blocks, and 24 blocks.
Files inside
templates: templates for various design software
code: CSS templates (embedded into web pages)
app_plugins: software plug-ins
sketch_sheets: document templates
960photoshop plug-in action installation, path 960-Grid-System-masterapp_pluginsphotoshop960_GRIDS.atn
Open photoshop’s action panel, drag and drop the 960_GRIDS.atn file into the panel, complete, and then you can quickly create a grid layout.
Call CSS, container_12, 12-column layout. First define a frame, and then divide the number of grids.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>两栏布局网页</title><link href="css/960_12_col.css" rel="stylesheet" type="text/css" /><link href="css/reset.css" rel="stylesheet" type="text/css" /><link href="css/text.css" rel="stylesheet" type="text/css" /></head><body> <div class="container_12"> <div id="header">header</div> <div id="mainbody" class="grid_8"><a >mainbody</a></div> <div id="sidebar" class="grid_4">sidebar</div> <div class="clear"></div> <div id="footer">footer</div> </div></body></html>
12-column layout:
To be continued....