CSS实现简单的横向排列demo
点击次数：31 次 发布日期：2008-11-26 22:44:28 作者：源代码网
|
源代码网推荐.sp{ width:97%;font-family: Tahoma, Verdana;} 源代码网推荐.sp font, .sp a, .sp a:visited{width:24.5%;padding:3px;margin-bottom:3;text-align:center;border:1px ridge #8099FF;background-color:#BFD9FF;text-decoration: none;} 源代码网推荐.sp a{ color:#006699;} 源代码网推荐.sp a:hover{ color:red;background:#efefef;} 源代码网推荐.sp font.sw { color:#fff;width:99.8%;background-color:#007ACC;font-weight:bold;} 源代码网推荐</STYLE> 源代码网推荐<span class=sp> 源代码网推荐 <font class=sw>width:99.8%;</font> 源代码网推荐 <font>这总宽有97%</font> 源代码网推荐 <font>每格32.9=</font> 源代码网推荐 <font>我们可以案比例</font> 源代码网推荐 <font>只要增加</font> 源代码网推荐 <font>< font >内容< /font ></font> 源代码网推荐 <font>就可以了</font> 源代码网推荐 <font face=webdings color=ctme>$</font> 源代码网推荐 <font face=webdings>3</font> 源代码网推荐 <font face=webdings>4</font> 源代码网推荐 <font face=webdings>5</font> 源代码网推荐 <font face=webdings>6</font> 源代码网推荐 <font face=webdings>7</font> 源代码网推荐 <font face=webdings>8</font> 源代码网推荐 <font face=webdings>9</font> 源代码网推荐 <font face=webdings>:</font> 源代码网推荐 <font face=webdings>;</font> 源代码网推荐 <font face=webdings><</font> 源代码网推荐 <font face=webdings>=</font> 源代码网推荐 <font class=sw>这里就做一个有分类的</font> 源代码网推荐 <a href=网址>变成连结了也是一样哦</a> 源代码网推荐 <font>1</font> 源代码网推荐 <font>2</font> 源代码网推荐 <font>3</font> 源代码网推荐 <font>4</font> 源代码网推荐 <font>5</font> 源代码网推荐 <font>6</font> 源代码网推荐 <font>7</font> 源代码网推荐 <font>8</font> 源代码网推荐 <font>9</font> 源代码网推荐 <font color=peru>俊~~</font> 源代码网推荐 <font color=red>abc</font> 源代码网推荐 <font color=blue>新主题就放在最上</font> 源代码网推荐</span> 源代码网推荐 源代码网推荐<style> 源代码网推荐 .table 源代码网推荐 { 源代码网推荐 width:80%; 源代码网推荐 } 源代码网推荐 .row 源代码网推荐 { 源代码网推荐 margin-bottom:1em; 源代码网推荐 padding: 2px; 源代码网推荐 width:100%; 源代码网推荐 background-color:#BFD9FF; 源代码网推荐 height:90px; 源代码网推荐 border:1px solid #8099FF; 源代码网推荐 } 源代码网推荐 .cell 源代码网推荐 { clear:left; 源代码网推荐 width:32.8%; 源代码网推荐 padding:4px; 源代码网推荐 margin-bottom:3; 源代码网推荐 border:1px ridge #8099FF; 源代码网推荐 background-color:#BFD9FF; 源代码网推荐 } 源代码网推荐</style> 源代码网推荐<span class="table"> 源代码网推荐<span class="row"> 源代码网推荐不管你生下几个牌子 他们总是自己排好的!<br> 源代码网推荐如果你要排四个 然后在 width有100%之下他们是每个25%<br> 源代码网推荐如果你要3格 就要在31%或32%里 请不要变成他的高于!他四周围要有空隙 可把margin的数变成margin:2; <br> 源代码网推荐在.cell{里width:30%;都是要以100%来放置 源代码网推荐</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐<span class="cell">主题</span> 源代码网推荐</span> 源代码网推荐</span> 源代码网推荐 源代码网推荐注意外部空隙是margin:2 0; 源代码网推荐左右已有预定的了 所以变成2px 0 你在2px后面没加上0 那等于左右多加2px变成4px了 源代码网推荐user为总宽度有90% 排排站我们都要以100%来计算 源代码网推荐歌手一行排4个24.5%包括空隙刚好 排3个32.7%或32.9%;空隙刚好 源代码网推荐在歌手(主题)有大量的时 a与a:hover尽量不要用有底色 不然速度会有甘扰<BR> 源代码网推荐<style> 源代码网推荐.user 源代码网推荐{ 源代码网推荐width:90%; 源代码网推荐text-align:left; 源代码网推荐} 源代码网推荐.user a 源代码网推荐{width:32.9%; 源代码网推荐margin:2 0; 源代码网推荐padding-top:4px; 源代码网推荐padding: 3px; 源代码网推荐border:1px solid #bbb; 源代码网推荐TEXT-DECORATION: none; 源代码网推荐} 源代码网推荐.user a:link, .user a:visited, .user a:active 源代码网推荐{ 源代码网推荐color:#4b4b4b; 源代码网推荐background-color:ffe; 源代码网推荐} 源代码网推荐.user a:hover 源代码网推荐{ 源代码网推荐color:#EF520F; 源代码网推荐background-color:f2f2f2; 源代码网推荐} 源代码网推荐.user p 源代码网推荐{text-indent:24px; 源代码网推荐font:175%/1.1em Georgia,Serif; 源代码网推荐margin:0px; 源代码网推荐color:blue; 源代码网推荐} 源代码网推荐</style> 源代码网推荐<center> 源代码网推荐<div class="user"> 源代码网推荐 <p>A</p> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <p>B</p> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <p>C</p> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐 <a href="">歌手</a> 源代码网推荐</div> 源代码网推荐 源代码网供稿. |
