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

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

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

<style>

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

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

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

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

.main{margin:0 30%;height:600px; background:#9CC }

.right{ width:20%; height:600px;background:#FCC; float:right}/*宽度均设为百分比*/

.footer{ height:50px; background:#9F9; clear:both}

</style>

</head>

<body>

<div class="right">right</div>

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

</body>

</html>

DEMO：

在网页制作中，面对设计图，网页制作人员一般要遵循的原则是：先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和变现形式。
倡导结构，样式，行为分离。举例：网页换肤——相同HTML结构，不同CSS样式。

（编辑：焦作站长网）

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

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