CSS实现简单的横向排列demo_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>
<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>

欢迎大家阅读《css实现简单的横向排列demo_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)