设计主页 > 网站制作 > CSS教程 >

CSS实现简单的横向排列demo

设计前沿收集 /  时间:2006-05-21 09:00
<STYLE>
.
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>&
#36;</font>
    
<font face=webdings>&
#51;</font>
    
<font face=webdings>&
#52;</font>
    
<font face=webdings>&
#53;</font>
    
<font face=webdings>&
#54;</font>
    
<font face=webdings>&
#55;</font>
    
<font face=webdings>&
#56;</font>
    
<font face=webdings>&
#57;</font>
    
<font face=webdings>&
#58;</font>
    
<font face=webdings>&
#59;</font>
    
<font face=webdings>&
#60;</font>
    
<font face=webdings>&
#61;</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>