css布局实现一个房子效果代码-html代码-BFW代码库

css布局实现一个房子效果代码

代码语言：html

代码描述：css布局实现一个房子效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  margin:0;
}
#scene{
  height:90vh;
  width:130vh;
  background:#96D0F1;
  position:relative;
}
#road{
  width:100%;
  height:30%;
  background:#787D85;
  position:absolute;
  top:70%;
}

#house{
  position:absolute;
  width:60%;
  height:40%;
  background:#9F8A75;
  left:20%;
  top:30%;
}

#house::before{
  position:absolute;
  content:'';
  background:#827161;
  height:30%;
  width:96%;
  right:2%;
  bottom:100%;
}

#house::after{
  position:absolute;
  content:'';
  background:#625649;
  height:100%;
  width:60%;
}
#windows{
  position:absolute;
  height:92%;
  width:28%;
  background:#B1E4E7;
  top:8%;
.........完整代码请登录后点击上方下载按钮下载查看