CSS实现简单的横向排列demo

2022-07-15 80酷酷网 80kuku.com

css<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>

 width:99.8%;
 这总宽有97%
 每格32.9=
 我们可以案比例
 只要增加
 内容
 就可以了
 $
 3
 4
 5
 6
 7
 8
 9
 :
 ;
 <
 =
 这里就做一个有分类的
 <a href=网址>变成连结了也是一样哦</a>
 1
 2
 3
 4
 5
 6
 7
 8
 9
 俊~~
 abc
 新主题就放在最上


<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>


不管你生下几个牌子他们总是自己排好的! 
如果你要排四个然后在 width有100%之下他们是每个25% 
如果你要3格就要在31%或32%里请不要变成他的高于!他四周围要有空隙可把margin的数变成margin:2; 
在.cell{里width:30%;都是要以100%来放置

主题
主题
主题
主题
主题
主题
主题
主题
主题
主题
主题
主题
主题
主题



注意外部空隙是margin:2 0;
左右已有预定的了所以变成2px 0 你在2px后面没加上0 那等于左右多加2px变成4px了
user为总宽度有90% 排排站我们都要以100%来计算
歌手一行排4个24.5%包括空隙刚好 排3个32.7%或32.9%;空隙刚好
在歌手(主题)有大量的时 a与a:hover尽量不要用有底色不然速度会有甘扰 
<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">
 A
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 B
 <a href="">歌手</a>
 <a href="">歌手</a>
 C
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
 <a href="">歌手</a>
</div>