查看“网页布局案例：虾米音乐”的源代码

==网页效果==
https://www.xiami.com

[[文件:web3-7.png|600px]]
==网页布局==
[[文件:web3-8.png|600px]]
===源代码===

 <nowiki><html>
<httml>
<title>我的网页</title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;}
.header{width:100%;height:50px;background:#CFF;}
.b{width:100%;height:200px;background:#CFC;}
.c{width:100%;height:100px;background:#CF9;}
.m-left{width:20%;height:300px;background:#96F;float:left;}
.m-right{width:80%;height:300px;background:#C60;float:left;}
.b1{width:100%;height:100px;background:#C69;}
.b2{width:100%;height:100px;background:#09F;}
.b3{width:100%;height:100px;background:#0FF;}
.clear{clear:both;}
</style>
<body>
<div class="header"></div>
<div class="main">
	<div class="m-left">
        
    </div>
    <div class="m-right"> 
       <div class="b1"></div>
	   <div class="b2"></div>
	   <div class="b3"></div>
    </div>
    <div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html></nowiki>

==插入logo和图片==

==插入文字和表单==