CSS几个示例
1.GridSystem页面布局<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"><html><head><style type="text/css">/* reset */html{color:#666;background:#FFF;}body{text-align:center;font:13px/1.7 Verdana, Simsun, Arial, Helvetica, "Microsoft YaHei", Mingliu;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;}img{border:none;}li{list-style:none;}img,object,textarea{vertical-align:top;}input,select,button{vertical-align:middle;}button{height:24px;*padding:0 3px;overflow:visible;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6,input,textarea,select,address,caption,cite,code,dfn,em,th,var,abbr,acronym{font-size:100%;font-style:normal;}q:before,q:after{content:"";}legend{color:#000;}ins{text-decoration:none;}div{padding:0;margin:0;zoom:1;}div:after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* common */.page{margin:0 auto;text-align:left;}.float_left{float:left;}.float_right{float:right;}.txt_left{text-align:left;}.txt_center{text-align:center;}.txt_right{text-align:right;}.clear_both{clear:both;}.module{margin:0 5px;margin-bottom:10px;padding:5px;border:1px solid #ccc;}/* 960 grid 24 colums */.grid_1{width:40px;}.grid_2{width:80px;}.grid_3{width:120px;}.grid_4{width:160px;}.grid_5{width:200px;}.grid_6{width:240px;}.grid_7{width:280px;}.grid_8{width:320px;}.grid_9{width:360px;}.grid_10{width:400px;}.grid_11{width:440px;}.grid_12{width:480px;}.grid_13{width:520px;}.grid_14{width:560px;}.grid_15{width:600px;}.grid_16{width:640px;}.grid_17{width:680px;}.grid_18{width:720px;}.grid_19{width:760px;}.grid_20{width:800px;}.grid_21{width:840px;}.grid_22{width:880px;}.grid_23{width:920px;}.grid_24{width:960px;}</style></head><body><div id="hd"><div class="page grid_24"><div class="masthead module txt_right"><a href="http://www.v-ec.com">VEC</a>·<a href="http://www.w3cgroup.com">W3CGroup</a>·<a href="http://www.easyui.org.cn">EasyUI</a>·<a href="http://www.jslab.org.cn">JSLab</a></div><div class="logo module"><a href="http://www.v-ec.com"><img src="http://www.v-ec.com/ijc/vec_logo.png" alt="v-ec.com"></a></div><div class="search module txt_center"><form action="?"><label>grid_24</label><input type="text" /><button type="submit">搜索</button></form></div></div></div><div id="bd"><div class="page grid_24"><div class="grid_8 float_left"><div class="module"><p>grid_8</p></div></div><div class="grid_16 float_left"><div class="grid_11 float_left"><div class="module"><p>grid_11</p></div></div><div class="grid_5 float_left"><div class="module"><p>grid_5</p></div></div><div class="grid_16 clear_both"><div class="module"><p>grid_16</p></div></div></div></div><div class="page grid_24"><div class="grid_8 float_left"><div class="module"><p>grid_8</p></div></div><div class="grid_11 float_left"><div class="module"><p>grid_11</p></div></div><div class="grid_5 float_left"><div class="module"><p>grid_5</p></div></div></div><div class="page grid_24"><div class="grid_19 float_left"><div class="module"><p>grid_19</p></div></div><div class="grid_5 float_left"><div class="module"><p>grid_5</p></div></div></div><div class="page grid_24"><div class="grid_16 float_left"><div class="module"><p>grid_16</p></div></div><div class="grid_8 float_left"><div class="module"><p>grid_8</p></div></div></div><div class="page grid_24"><div class="grid_8 float_left"><div class="module"><p>grid_8</p></div></div><div class="grid_8 float_left"><div class="module"><p>grid_8</p></div></div><div class="grid_8 float_left"><div class="module"><p>grid_8</p></div></div></div><div class="page grid_24"><div class="grid_8 float_left"><div class="module"><p>grid_8</p></div></div><div class="grid_16 float_left"><div class="module"><p>grid_16</p></div></div></div></div><div id="ft"><div class="page grid_24"><div class="module txt_center"><p>Copyright © 1998 - 2009 W3CGroup. All Rights Reserved</p></div></div></div></body></html>
2.CSS style 三角
<style type="text/css"> span { width: 0px; height: 0px; } span.left { border-left: 90px solid white; border-bottom: 160px solid red; } span.right { border-right: 90px solid white; border-bottom: 160px solid red; }</style><div align="center"> <span class="left"></span> <span class="right"></span></div>
3.css中使用js代码确定位置
<style type="text/css">#postBar {position:fixed;left:0px;bottom:0;_position:absolute;_top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight);}</style>
4.DIV列表表格布局
<style type="text/css">#test{width:290px;background:#eee;}#test ul{overflow:hidden;zoom:1;margin:0;padding:0 5px 10px 5px;}#test li{display:inline;float:left;width:60px;height:60px;margin:10px 5px 0;list-style:none;background:#333;}</style><div id="test"><ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li><li>fff</li><li>ggg</li><li>hhh</li><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li><li>fff</li><li>ggg</li><li>hhh</li></ul></div>
页:
[1]