Home > Web Front-end > HTML Tutorial > 腾讯微博布局实现_html/css_WEB-ITnose

腾讯微博布局实现_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-06-21 09:43:17
Original
838 people have browsed it

布局 腾讯微博

像腾讯微博那种布局怎么实现,

高人给点提示

回复讨论(解决方案)

<!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下测试通过,其他浏览器未做测试~~):
Copy after login
Copy after login

<!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下测试通过,其他浏览器未做测试~~):
Copy after login
Copy after login


谢谢我已经解决了

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template