960网格系统
2017-04-22 10:12
375 查看
960网格系统:
可以帮助我们在ps中快速布局 |
我们也可以利用css样式表模板快速写网页
两栏布局网页部分代码 |
<!-- 工具栏开始 --> <div id="toolbar"> <div class="container_12"> <div class="grid_12"> 工具栏 </div> </div> </div> <!-- 工具栏结束 --> <div class="container_12"> <!-- 页头开始 --> <div id="header"> <div class="grid_2"> <h2>页头</h2> </div> </div> <!-- 页头结束 --> <!-- 主体开始 --> <div id="mainbody" class="grid_8"> <h2>mainbody 主体</h2> <div class="grid_2 alpha">主体1</div> <div class="grid_2">主体2</div> <div class="grid_2">主体3</div> <div class="grid_2 omega">主体4</div> </div> <!-- 主体结束 --> <!--边栏开始 --> <div id="sidebar" class="grid_4"> <h2>sidebar 边栏</h2> </div> <!--边栏结束 --> <!-- 清除浮动 --> <div class="clear"></div> <!-- 页脚开始 --> <div id="footer"> <h2>页脚</h2> <div class="grid_8"> 页脚1 </div> <div class="grid_2"> 页脚2 </div> <div class="grid_2"> 页脚3 </div> <!-- 页脚结束 --> </div> </div>
三栏布局网页部分代码 |
<!-- 工具栏开始 --> <div data-brackets-id='1256' id="toolbar"> <div data-brackets-id='1257' class="container_12"> <div data-brackets-id='1258' class="grid_12"> 工具栏 </div> </div> </div> <!-- 工具栏结束 --> <div data-brackets-id='1259' class="container_12"> <!-- 页头开始 --> <div data-brackets-id='1260' id="header"> <div data-brackets-id='1261' class="grid_2"> <h2 data-brackets-id='1262'>页头</h2> </div> </div> <!-- 页头结束 --> <!-- 主体开始 --> <div data-brackets-id='1263' id="mainbody" class="grid_6 push_2"> <h2 data-brackets-id='1264'>mainbody 主体</h2> <div data-brackets-id='1265' class="grid_3 alpha">主体1</div> <div data-brackets-id='1266' class="grid_3 omega">主体4</div> </div> <!-- 主体结束 --> <!-- 左边栏开始 --> <div data-brackets-id='1267' id="left-sidebar" class="grid_2 pull_6"> <h2 data-brackets-id='1268'> 左边栏</h2> </div> <!-- 左边栏结束 --> <!--边栏开始 --> <div data-brackets-id='1269' id="sidebar" class="grid_4"> <h2 data-brackets-id='1270'>sidebar 边栏</h2> </div> <!--边栏结束 --> <!-- 清除浮动 --> <div data-brackets-id='1271' class="clear"></div> <!-- 页脚开始 --> <div data-brackets-id='1272' id="footer"> <h2 data-brackets-id='1273'>页脚</h2> <div data-brackets-id='1274' class="grid_8"> 页脚1 </div> <div data-brackets-id='1275' class="grid_2"> 页脚2 </div> <div data-brackets-id='1276' class="grid_2"> 页脚3 </div> <!-- 页脚结束 --> </div> </div>
相关文章推荐
- 960网格系统(960 Grid System)终于推出24列的布局了
- 960 Grid System 网格系统
- 使用960网格系统(960 Grid System)设计网页
- 960 网格系统
- Webgame 设计与开发 第三章基于导航网格的智能寻路系统设计
- [转载]网页栅格系统研究(1):960的秘密
- 网页栅格系统研究:960的秘密
- 创建一个可调大小的图片网格系统(译)
- QSplat:基于多分辨率处理大规模网格的点绘制系统(部分翻译)
- 20个优秀的 CSS 网格系统(CSS Grid Systems)推荐
- Infinispan's GridFileSystem--基于内存的网格文件系统,互联网营销
- 网页栅格系统研究(1):960的秘密
- 推荐14款非常有用的 CSS 网格系统生成工具
- 推荐14款非常有用的 CSS 网格系统生成工具
- 20个优秀的 CSS 网格系统(CSS Grid Systems)推荐
- Infinispan's GridFileSystem--基于内存的网格文件系统
- 我国网格计算的最高成就——高性能计算环境和清华ACI系统
- 网格参考系统
- 基于网格的GIS系统的访问模式
- 网页栅格系统研究(1):960的秘密