网页布局入门教程如何用CSS进行网页布局

发布时间：2020-03-12 20:28:52 所属栏目：系统来源：站长网

导读：这篇文章主要为大家分享了网页布局入门教程，如何用CSS进行网页布局，介绍了绝对定位布局、混合布局及结构与表现原则，感兴趣的小伙伴们可以参考一下

<div class="footer">footer</div>

</body>

</html>

DEMO：

混合布局04

XML/HTML Code复制内容到剪贴板

<html>

<head>

<style>

body{ margin:0; padding:0; font-size:30px; font-weight:bold}

div{ text-align:center; line-height:50px}

.main{ width:960px; margin:0 auto}/*footer和main未设置宽度*/

.head{ height:100px;background:#9CF}

.left{ width:220px; height:600px; background:#ccc; float:left}

.right{ width:740px; height:600px;background:#FCC; float:right}

.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}

.r_sub_right{ width:200px; height:600px; background:#9FC; float:right}/*540px+200px=740px 注意宽度值的设置*/

.footer{ height:50px; background:#9F9; clear:both}/*使用clear：both清除浮动*/

</style>

</head>

<body>

<div class="r_sub_left">sub_left

</div>

<div class=" r_sub_right">sub_right

</div>

<div class="footer">footer</div>

</body>

</html>

DEMO：

混合布局05（自适应）

XML/HTML Code复制内容到剪贴板

<html">

<head>

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

网页布局入门教程 如何用CSS进行网页布局