究极小白的第二篇csdn博客

用div画房子图

第一步将浏览器默认的margin和padding清除掉以及弄个黑夜背景，样式代码如下：

*{
				margin: 0;
				padding: 0;
			}
			.main{
				margin: auto;
				width: 1400px;
				height: 900px;
				background-color: black;
			}

第二步画一个月亮，样式代码如下：

.moon{
				margin-left: 1320px;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background-color: white;
			}

第三步，用一个小黑圆遮住月亮形成月牙，样式代码如下：

.moonhei{
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background-color: black;
				margin-left: 20px;
			}

第四步划分中间放房子以及树的主体部分，代码如下：

<div class="middle">
</div>

第五步画出烟囱和屋顶，样式代码如下：

.yan{
				border-bottom: 70px solid blue;
				border-top: 70px solid blue;
				border-left: 30px solid blue;		
				border-right: 30px solid blue;
				position: relative;
				top:40px;
				left: 350px;
			}
			.wuding{
				margin-top: -90px;
				border-bottom: 220px solid blue;
				border-left: 260px solid transparent;		
				border-right: 260px solid transparent;		
			}

第六步画出屋体部分样式代码如下：

.wumain{
				margin-left: 35px;
				width: 450px;
				height: 450px;
				background-color: darkorange;
			}

第六步画出窗户，样式代码如下：

.chuang{
				position: relative;
				top: 15px;
				left: 15px;
				width: 180px;
				height: 180px;
				border: solid 5px white;
			}
			/* 小窗 */
			.xiaochuang{
				margin-top: 10px;
				margin-left: 10px;
				float: left;
				width: 70px;
				height: 70px;
				border: 2px solid black;
			}

第七步画门，（同桌的一句门怎么不用表格画，一语惊醒梦中人，所以门没有和窗一样用div做而是用了表格，发现简单了很多。）样式代码如下：

.men{
				width: 120px;
				height: 230px;
				border: solid 8px white;
				margin-left: 280px;
			}
			table{
				border: solid 2px black;
				width: 120px;
				height: 230px;
			}
			tr,td{
				border: solid 1px black;
			}

第八步利用边框的透明度以及设置边框的宽度实现画树，样式代码如下：

.tree1{
				margin-top: -550px;
				margin-left: 705px;
				border-bottom: 100px solid lawngreen;
				border-left: 100px solid transparent;		
				border-right: 100px solid transparent
			}
			.tree2{
				margin-left: 675px;
				border-bottom: 130px solid lawngreen;
				border-left: 130px solid transparent;		
				border-right: 130px solid transparent
			}
			.tree3{
				margin-left: 645px;
				border-bottom: 160px solid lawngreen;
				border-left: 160px solid transparent;		
				border-right: 160px solid transparent
			}
			.tree4{
				width: 70px;
				height: 200px;
				background-color: brown;
				margin-left: 770px;
			}

最后一步，加上大家最爱的绿油油的青青草原，样式代码如下：

.lvdi{
				background-color: green;
				width: 1400px;
				height: 100px;
			}

附上html主要部分代码：

<div class="main">
			<div class="moon">
				<div class="moonhei"></div>
			</div>
			<div class=""></div>
			
			<div class="middle">
				<div class="yan"></div>
				<div class="wuding"></div>
				<div class="wumain">
					<div class="chuang">
						<div class="xiaochuang"></div>
						<div class="xiaochuang"></div>
						<div class="xiaochuang"></div>
						<div class="xiaochuang"></div>
					</div>
					
					<div class="men">
						<table cellspacing="0" cellpadding="0">
						<tr>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
						</table>
					</div>
				</div>
				<div class="tree1"></div>
				<div class="tree2"></div>
				<div class="tree3"></div>
				<div class="tree4"></div>
			</div>
			
			
			
			<div class="lvdi"></div>
		</div>

康康效果图：

一不小心又划水了一篇博客（小声bb，嘿嘿。）