猫史档案馆

使用 <div> 元素的 H喵L 布局

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位，这个例子使用了四个 <div> 元素来创建多列布局：

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright yamol
</div>
</body>

CSS部分：

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

这里的CSS部分我写在了文件里哦，所以我用到了引用外部样式表，之前讲CSS那一期有提到过哦。

center_image

思考：

这里的布局只是泛泛的谈了一下，其实还有很多比较专业的布局方式，比如说响应式布局。技术这东西嘛，一定要更新换代，但是最基本的还是要会的，地基不打牢，怎么万丈高楼平地起？你说是不是？

猫史档案馆

【Y君学H喵L】第十五期·布局

回复