您的位置:首页 > 其它

960网格系统

2017-04-22 10:12 375 查看

960网格系统:

可以帮助我们在ps中快速布局

12栏,16栏,24栏







我们也可以利用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>


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: