首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

腾讯微博格局实现

2013-06-26 
腾讯微博布局实现像腾讯微博那种布局怎么实现,高人给点提示布局腾讯微博[解决办法]!DOCTYPE HTMLhtml

腾讯微博布局实现
像腾讯微博那种布局怎么实现,
腾讯微博格局实现
高人给点提示 布局 腾讯微博
[解决办法]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
.container {
    -webkit-column-width: 160px;
    -moz-column-width: 160px;
    -o-colum-width: 160px;
    -webkit-column-gap: 1px;
    -moz-column-gap: 1px;
    -o-column-gap: 1px;
}
div:not(.container) {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #D9D9D9;
border::#CCC 1px solid;
    display: inline-block;
    width: 157px;
    position: relative;
    margin: 2px;
}
.title {
    line-height: 80px;
    font-size: 18px;
    color: #900;
    text-align: center;
    font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<section>
    <div class="container">
        <div style="height:80px" class="title">纯CSS3瀑布布局</div>
        <div style="height:260px"></div>
        <div style="height:65px"></div>
        <div style="height:120px"></div>
        <div style="height:145px"></div>
        <div style="height:90px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>
        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
        <div style="height:65px"></div>
        <div style="height:230px"></div>
        <div style="height:140px"></div>


        <div style="height:85px"></div>
        <div style="height:20px"></div>
        <div style="height:145px"></div>
        <div style="height:50px"></div>
        <div style="height:145px"></div>
        <div style="height:160px"></div>
        <div style="height:240px"></div>
    </div>
</section>
</body>
</html>
运行效果(FireFox,Google Chrome下测试通过,其他浏览器未做测试~~):

热点排行