首页 > 其他 > 详细

两列布局实例

时间:2014-01-16 00:01:43      阅读:437      评论:0      收藏:0      [点我收藏+]

上次一个朋友问的两列布局,半天没搞定,其实他的html没写好,当然我写的也不咋样,哈哈,今天有空再做一个两列布局,参考糯米团的样子:

bubuko.com,布布扣

html:

bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>两列布局实例</title>
    <link rel="stylesheet" href="./style.csss" />
</head>
<body>
    <div id="contianer">
        <div class="row fix">
            <div class="each-film">
                <img src="./film-one.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票!可升级套餐,黄金大片,超强视听感觉,惊爆你的眼球!</span>
                </div>
            </div>
            <div class="each-film">
                <img src="./film-two.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票!可升级套餐,黄金大片,超强视听感觉,惊爆你的眼球!</span>
                </div>
            </div>
        </div>
        <div class="row fix">
            <div class="each-film">
                <img src="./film-one.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票!可升级套餐,黄金大片,超强视听感觉,惊爆你的眼球!</span>
                </div>
            </div>
            <div class="each-film">
                <img src="./film-two.jpg" alt="filem-one" width="320" height="195"/>
                <div class="film-info">
                    <h2>[2店通用]XX影城</h2>
                    <span>单人影票!可升级套餐,黄金大片,超强视听感觉,惊爆你的眼球!</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
bubuko.com,布布扣

这里的css文件后缀是csss,只是为了说明css文件和后缀名无关,原来还不知道这个...

style.csss:

bubuko.com,布布扣
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#contianer {
    width: 700px;
    margin-top: 100px;
    margin-left: 50px;
    padding: 30px;
    background-color: #d5d5d5;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
}

.fix {
    zoom:1;
}

.fix:after {
     display:block; 
     content:‘clear‘; 
     clear:both; 
     line-height:0; 
     visibility:hidden;
 }

 .each-film {
     float: left;
     margin-bottom: 20px;
     margin-right: 20px;
     padding: 5px;
     /*border: 1px black solid;*/
 }

 .film-info {
     width: 200px;
     margin-top: 13px;
     font: 12px/1.5 Arial,Tahoma,‘宋体‘,Verdana,STHeiTi,sans-serif;
     text-align: left;
 }

 .film-info span {
     font-size: 15px;
 }
bubuko.com,布布扣

两列布局实例

原文:http://www.cnblogs.com/jaw-crusher/p/3516461.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!