网页布局案例：WordPress博客

来自CloudWiki
跳转至： 导航， 搜索

网页效果图

Web8-16.png

源网页：https://www.suxing.me

网页布局图

  • Web8-17.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.header{width:100%;
        height:50px;
		background:#333;}
.main{width:80%;
      margin:0 auto;
	  height:600px;}
.m1{width:70%;
    height:600px;
	background:#060;
	float:left;}
.m1-1{width:100%;
      height:300px;
	  background:#09C;}
.m1-2{width:100%;
      height:150px;
	  background:#963;}
.m1-3{width:100%;
      height:150px;
	  background:#09C;}
.m2{width:30%;
    height:600px;
	background:#9F0;
	float:left;}
.m2-1{width:100%;
      height:200px;
	  background:#F93;}
.m2-2{width:100%;
      height:200px;
	  background:#369;}
.clear{clear:both;}	 
.footer{height:100px;
        width:100%;
		background:#CCC;}

</style>
<title>无标题文档</title>
</head>

<body>
        <div class="header"></div>
        <div class="main">
            <div class="m1">
                <div class="m1-1"></div>
                <div class="m1-2"></div>
                <div class="m1-3"></div>
              </div>
            <div class="m2">
                <div class="m2-1"></div>
                <div class="m2-2"></div>
              </div>
            <div class="clear"></div>
          </div>
        <div class="footer"></div>
</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=网页布局案例：WordPress博客&oldid=15524”