前端学习笔记--HTML/CSS--网页布局

最新推荐文章于 2023-01-07 21:30:23 发布

chiweiya9693

最新推荐文章于 2023-01-07 21:30:23 发布

阅读量103

点赞数

原文链接：https://my.oschina.net/u/3176241/blog/814061

版权

[转]来自于慕课网学习整理。

网页布局

一、一列布局：

完成代码编辑器中的任务1，要求main和footer在浏览器中水平居中。如下图所示：

Css代码:

body{ margin:0; padding:0; font-size:5px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:200px; margin:0 auto;}
.head{ width:100%; height:20px; background:#ccc}
.main{ height:100px; background:#FCC}
.footer{ height:20px; background:#9CF}

ps:用到固定宽度居中方法

Html代码：

<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>

二、二列布局：

完成本次实战练习，快来检验你的实战成果吧！任务最终效果如下：

Css代码:

body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:right}/*右浮动样式*/

HTML代码：

<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>

三、三列布局：

完成本次实战练习，快来检验你的实战成果吧！最终效果如下图所示：

CSS代码：

body{ margin:0; padding:0; font-size:10px; font-weight:bold}
div{ line-height:15px}
.left{ width:50px; height:100px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:100px; margin:0,80px,0,50px;background:#9CF}
.right{ height:100px; width:80px; position:absolute; top:0; right:0; background:#FCC;}

HTML代码：

<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。。</div>
<div class="right">right</div>
</body>