Question

您好我想用CSS样式化这个结构HTML，需要创建3行。 1.header 2.maincontent 3.footer！我需要为所有主页添加滚动条，每行只有1个滚动条而不是1个... 就像代码结构一样，我想要标题，主要内容和页脚的样式。等待帮助。

<div id="header">
    <div id="headerLeft">
        <div class="msgs">Mesazh</div>
        <div class="points">Points</div>
    </div>
    <div id="headerRight">
        <div class="hungry">Hungry: </div>Action:

</div>
<div id="maincontent">
     <div class="output">LALALALALALALA</div>
</div>
<div id="footer">
    <div id="footerleft">
        <div class="onlinePlayer">Klevi</div>
    </div>
    <div id="footerCenter">
        <div class="map">harta</div>
        <div class="forum">forumi</div>
        <div class="logout">logout</div>
    </div>
    <div id="footerRight">
         <div class="details">details</div>
         <div class="inventory">inventory</div>
         <div class="support">support</div>
    </div>
</div>
</div>

Answer 1

你今天已经有人问过滚动条2了。

创建布局的基本方法是使用浮动来显示彼此相邻的div。你把这些div放在一个容器中。您可以使用百分比固定柱子或固定。

标题的HTML看起来像

<div class="row">
    <div class="two cols">a</div>
    <div class="one cols">s</div>
</div>

第一个css是div的行或容器。

.row {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #fff;
}

第二个css是每种类型列的基本代码。

.col, .cols {
margin-left: 4.40%;
float: left;
min-height: 1px;
position: relative;
}

下面控制不同列的宽度

.col:first-child, .cols:first-child {
    margin-left: 0px;
}
.row .one.cols {
    width: 30.4%;
}
.row .two.cols {
    width: 65.2%;
}
.row .three.cols {
    width: 99.99999999999999%;
}

以下示例基于ZURB的基础

http://jsfiddle.net/vmbm55fo/

如何设置此结构的样式并添加滚动条？

1 个答案: