Tuding布局演示

索引

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tuding布局演示</title>
<link href="../styles/layout.css" rel="stylesheet" type="text/css">
<style type="text/css">
span { display:block; border:1px solid #666666; overflow:hidden; text-align:center; background:#F1F1F1; }
.main span { background:#882D71; color:#FFFFFF; }
.n1 span { background:#E673C9; color:#FFFFFF; }
.n2 span { background:#F2B6E3; color:#882D71; }
.container { padding:1px 0; }
</style>
</head>
<body class="fixed">
<h1>Tuding布局演示</h1>
<hr>
<div class="container m">
	<div class="main"><span>m-default</span></div>
</div>
<div class="container mn">
	<div class="main"><span>m-default</span></div>
	<div class="n1"><span>n-default</span></div>
</div>
<div class="container nm">
	<div class="main"><span>m-default</span></div>
	<div class="n1"><span>n-default</span></div>
</div>
<div class="container mnn">
	<div class="main"><span>m-default</span></div>
	<div class="n1"><span>n1-default</span></div>
	<div class="n2"><span>n2-default</span></div>
</div>
<div class="container nmn">
	<div class="main"><span>m-default</span></div>
	<div class="n1"><span>n1-default</span></div>
	<div class="n2"><span>n2-default</span></div>
</div>
<div class="container nnm">
	<div class="main"><span>m-default</span></div>
	<div class="n1"><span>n1-default</span></div>
	<div class="n2"><span>n2-default</span></div>
</div>
<hr>
<div class="container nm">
	<div class="main" style="width:910px;"><span>m910</span></div>
	<div class="n1" style="width:30px"><span>n30</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:870px;"><span>m870</span></div>
	<div class="n1" style="width:70px"><span>n70</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:830px;"><span>m830</span></div>
	<div class="n1" style="width:110px"><span>n110</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:790px;"><span>m790</span></div>
	<div class="n1" style="width:150px"><span>n150</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:750px;"><span>m750</span></div>
	<div class="n1" style="width:190px"><span>n190</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:710px;"><span>m710</span></div>
	<div class="n1" style="width:230px"><span>n230</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:670px;"><span>m670</span></div>
	<div class="n1" style="width:270px"><span>n270</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:630px;"><span>m630</span></div>
	<div class="n1" style="width:310px"><span>n310</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:590px;"><span>m590</span></div>
	<div class="n1" style="width:350px"><span>n350</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:550px;"><span>m550</span></div>
	<div class="n1" style="width:390px"><span>n390</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:510px;"><span>m510</span></div>
	<div class="n1" style="width:430px"><span>n430</span></div>
</div>
<div class="container nm">
	<div class="main" style="width:470px;"><span>m470</span></div>
	<div class="n1" style="width:470px"><span>n470</span></div>
</div>
<hr>
<div class="container mn">
	<div class="main" style="width:910px;"><span>m910</span></div>
	<div class="n1" style="width:30px"><span>n30</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:870px;"><span>m870</span></div>
	<div class="n1" style="width:70px"><span>n70</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:830px;"><span>m830</span></div>
	<div class="n1" style="width:110px"><span>n110</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:790px;"><span>m790</span></div>
	<div class="n1" style="width:150px"><span>n150</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:750px;"><span>m750</span></div>
	<div class="n1" style="width:190px"><span>n190</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:710px;"><span>m710</span></div>
	<div class="n1" style="width:230px"><span>n230</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:670px;"><span>m670</span></div>
	<div class="n1" style="width:270px"><span>n270</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:630px;"><span>m630</span></div>
	<div class="n1" style="width:310px"><span>n310</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:590px;"><span>m590</span></div>
	<div class="n1" style="width:350px"><span>n350</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:550px;"><span>m550</span></div>
	<div class="n1" style="width:390px"><span>n390</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:510px;"><span>m510</span></div>
	<div class="n1" style="width:430px"><span>n430</span></div>
</div>
<div class="container mn">
	<div class="main" style="width:470px;"><span>m470</span></div>
	<div class="n1" style="width:470px"><span>n470</span></div>
</div>
<hr>
<div class="container mnn">
	<div class="main" style="width:310px;"><span>m310</span></div>
	<div class="n1" style="width:310px"><span>n310</span></div>
	<div class="n2" style="width:310px"><span>n310</span></div>
</div>
<div class="container nmn">
	<div class="main" style="width:310px; left:320px;"><span>m310</span></div>
	<div class="n1" style="width:310px"><span>n310</span></div>
	<div class="n2" style="width:310px"><span>n310</span></div>
</div>
<div class="container nnm">
	<div class="main" style="width:310px;"><span>m310</span></div>
	<div class="n1" style="width:310px"><span>n310</span></div>
	<div class="n2" style="width:310px"><span>n310</span></div>
</div>
<hr>
<div class="container mnn">
	<div class="main" style="width:470px;"><span>m470</span></div>
	<div class="n1" style="width:230px"><span>n230</span></div>
	<div class="n2" style="width:230px"><span>n230</span></div>
</div>
<div class="container nmn">
	<div class="main" style="width:470px; left:240px;"><span>m470</span></div>
	<div class="n1" style="width:230px"><span>n230</span></div>
	<div class="n2" style="width:230px"><span>n230</span></div>
</div>
<div class="container nnm">
	<div class="main" style="width:470px;"><span>m470</span></div>
	<div class="n1" style="width:230px"><span>n230</span></div>
	<div class="n2" style="width:230px"><span>n230</span></div>
</div>
</body>
</html>

Last edited Dec 17, 2010 at 4:29 AM by bubujie, version 6

Comments

No comments yet.