复杂的布局算是css中的一个难点,我做了一个画图小练习,分享代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.hei {
width: 1315px;
height: 548px;
background-color: #000;
}
.yue {
height: 72px;
}
.da {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #fff;
margin-left: 1245px;
}
.xiao {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #000;
margin-top: -70px;
margin-left: 1259px;
}
.wu {
width: 0;
height: 0;
border-left: 205px solid transparent;
border-right: 205px solid transparent;
border-top: 136px solid transparent;
border-bottom: 136px solid #0001fe;
position: relative;
top: -73px;
/* 和月亮的距离-bordertop=63-136=-73 */
left: 342px;
}
.yan {
width: 57px;
height: 130px;
background-color: #0001fe;
position: relative;
top: -223px;
/* 底和屋顶底齐平=屋顶的移动距离-烟囱的高度=-73-130=-203
底和屋顶底齐平+往上抬20px&#