前端之制作简单的房子

目的图

代码部分：

//day04_5.html

 

返回

 

//style_5.css

 

/*这是天空*/
#sky{
width: 1900px;
height: 800px;
/*width: 950px;
height: 400px;*/
background-color: #000;

position: relative;
}

 

/*这是月亮*/
#moon1{
width: 100px;
height: 100px;
background-color: white;
margin-top: 0px;
margin-right: 0px;
margin-bottom: auto;
margin-left: auto;
border-radius: 50% 50% 50% 50%;
}

 

#moon2{
width: 75px;
height: 75px;
background-color: black;
margin-top: 0px;
margin-right: 0px;
margin-bottom: auto;
margin-left: auto;
border-radius: 50% 50% 50% 50%;
}

 

/*这是树*/
#tree1{
width:0px;
height:0px;
/*background-color: green;*/
border-top: 40px;
border-right: 40px;
border-bottom: 40px;
border-left: 40px;
border-color: transparent transparent green transparent;
border-style: solid;
/*margin:280px 300px 380px auto;*/

position: absolute;
bottom: 320px;
right: 300px;
}

 

#tree2{
width:0px;
height:0px;
/*background-color: green;*/
border-top: 60px;
border-right: 60px;
border-bottom: 60px;
border-left: 60px;
border-color: transparent transparent green transparent;
border-style: solid;
/*margin:280px 300px 380px auto;*/

position: absolute;
bottom: 260px;
right: 280px;
}

 

#tree3{
width:0px;
height:0px;
/*background-color: green;*/
border-top: 80px;
border-right: 80px;
border-bottom: 80px;
border-left: 80px;
border-color: transparent transparent green transparent;
border-style: solid;
/*margin: ;*/

position: absolute;
bottom: 180px;
right: 260px;
}

 

#trunk{
width: 20px;
height: 200px;
background-color: green;
/*margin-bottom: 0px;*/

position: absolute;
bottom: 0px;
right: 330px;
}

 

/*这是房顶*/
#roof{
width: 0px;
height: 0px;
/*background-color: blue;*/
border-top: 250px;
border-right: 250px;
border-bottom: 250px;
border-left: 250px;
border-style: solid;
border-color:transparent transparent blue transparent;

position: absolute;
bottom: 444px;
left: 700px;
}

 

/*这是烟囱*/
#tun{
width:50px;
height: 80px;
background-color: blue;

position: absolute;
bottom: 584px;
left: 1010px;
}

 

/*这是房间*/
#room{
width: 443px;
height: 443px;
background-color: darkorange;

position: absolute;
bottom: 0px;
left: 728px;
}

 

/*这是窗户*/
#windows{
width: 150px;
height: 150px;
border: 3px;
border-color: white;
border-style: solid;

position: absolute;
bottom: 260px;
left: 37px;
}

 

#box1{
width: 50px;
height: 50px;
border: 2px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 350px;
left: 53px;
}

 

#box2{
width: 50px;
height: 50px;
border: 2px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 350px;
left: 123px;
}

 

#box3{
width: 50px;
height: 50px;
border: 2px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 280px;
left: 53px;
}

 

#box4{
width: 50px;
height: 50px;
border: 2px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 280px;
left: 123px;
}

 

/*这是门*/
#door{
width: 196px;
height: 357px;
border: 5px;
border-color: white;
border-style: solid;

position: absolute;
bottom: 0px;
left: 221px;
}

 

#d-L-1{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 270px;
left: 226px;
}

 

#d-L-2{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 180px;
left: 226px;
}

 

#d-L-3{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 90px;
left: 226px;
}

 

#d-L-4{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 0px;
left: 226px;
}

 

#d-R-1{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 270px;
left: 323px;
}

 

#d-R-2{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 180px;
left: 323px;
}

 

#d-R-3{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 90px;
left: 323px;
}

 

#d-R-4{
width: 96px;
height: 89px;
border: 1px;
border-color: black;
border-style: solid;

position: absolute;
bottom: 0px;
left: 323px;
}

 

/*这是草地*/
#lawn{
width:1900px;
height: 100px;
background-color: green;

position: absolute;
bottom: -100px;
left: 0px;
}

 

/*这是返回链接*/
#link{
position: absolute;

bottom: 2px;
left: 950px;
}

 

 效果图

 

总结：

1、使用div和position的相对定位和绝对定位

2、注意绝对定位要选参照物，如果没有参照物，就以屏幕作为参照；绝对定位：absolute以relative作为参照

3、合理运用浏览器的检查功能来完成

 

2019-07-19 18:40:25

 

 

 

转载于:https://www.cnblogs.com/xiaoguoniu/p/11215176.html