一直以来对前端抱有莫名的兴趣，这次换工作后如愿以偿的接手了很多前端的任务。借着之前粗浅的经验上手的还算快，可是深入的方面就不太跟得上了。众所周知，前端的学习离不开实践和积累，为了快速而有效的进步，在此制定了第一阶段的学习任务 -- 收集和实现CodePen上100个前端小项目。此阶段的目的是借着一个个小项目快速熟悉HTML, CSS, JS的简单应用和套路。
下面开始进入正题，第一个项目是我在CodePen上看到的，觉得图案可爱就把代码扒了下来实现了一遍（图案见下图）。这个项目精髓主要在于CSS，研究完这个项目，基本上可以对CSS盒模型，瀑布流模式，DOM分层有基本的掌握。
https://codepen.io/xinxhe/pen/PooQNXJ?editors=1100
image.png
下面是HTML的实现，这里是用了pug，语法上更简洁。可以看出，HTML元素的分层是自外向内的，最外面是一个大的container，向内一层分为了三个大块：笑脸，下划线，和背景装饰物，再向内就是三大块中的各种细节。
div.container
div.smiley__face.smiley__face--01 // 笑脸中间
div.face
div.eyes
div.eye.eye__left
div.eye.eye__right
div.mouth
div.smiley__face.smiley__face--02 // 笑脸左边
div.face
div.eyes
div.eye.eye__left
div.eye.eye__right
div.mouth
div.smiley__face.smiley__face--03 // 笑脸右边
div.face
div.eyes
div.eye.eye__left
div.eye.eye__right
div.mouth
div.underground // 下划线
div.sparkles // 星星和圈圈
div.star.star--01
div.star.star--02
div.star.star--03
div.circle.circle--01
div.circle.circle--02
div.circle.circle--03
div.circle.circle--04
CSS的实现比较长，直接上注释解释。
1 * { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; // padding和border的宽度包含在width和height中 5 } 6 body { 7 display: block; 8 width: 100%; 9 height: 100vh; // 1vh代表浏览器viewport高度的1%. Viewport代表浏览器窗口的大小，如果拖动浏览器边框，浏览器的viewport会根据窗口边界的拖动而改变大小。 10 background: #ecf0f1; 11 } 12 .container { 13 position: relative; // 相对于正常位置。在这里，container的位置确定是相对于body的元件的。 14 display: flex; // 盒模型，可以定义其子组件的排列方式 15 width: 100%; 16 height: 100vh; 17 justify-content: center; // Horizontal alignment，水平居中 18 align-items: center; // Vertical alignment，垂直居中 19 .smiley__face { 20 padding: 10px; 21 position: absolute; // 元件的位置是相对于最近的positioned的父元件来确定的。Positioned的元件是指任何具有position属性但是其值不是static的父元件。在这里，smiley__face的位置是相对于container来定的。 22 display: flex; 23 align-items: flex-start; // 垂直靠顶端排列 24 justify-content: center; 25 border: 12px solid #2c3e50; 26 width: 170px; 27 height: 190px; 28 background: #ffffff; 29 border-radius: 15px; 30 overflow: hidden; 31 .face { 32 background: #f1c40f; 33 width: 100%; 34 height: 120px; 35 border-radius: 5px; 36 display: flex; 37 flex-direction: column; // 定义子元件们的排列方式为竖直的一列。 38 justify-content: center; 39 align-items: center; 40 position: relative; // 位置定义相对于smiley__face，因为smiley__face有position的属性（并且值不是static），并且是最近的父元件 41 overflow: hidden; 42 z-index: 1; // z-index定义了层级关系，数字越大层级越高 43 .eyes { 44 display: flex; 45 justify-content: space-between; // 定义了子元件们之间间隔的平均排列方式 46 align-items: center; 47 height: 20px; 48 width: 60%; 49 .eye { 50 display: block; 51 width: 15px; 52 height: 15px; 53 background: #2c3e50; 54 border-radius: 50px; 55 } 56 } 57 .mouth { 58 display: block; 59 width: 32px; 60 height: 20px; 61 background: #2c3e50; 62 border-top-left-radius:15px; 63 border-top-right-radius:15px; 64 border-bottom-left-radius:50px; 65 border-bottom-right-radius:50px; 66 position: relative; 67 overflow: hidden; 68 &::before { // 舌头 69 content: ""; 70 display: block; 71 width: 20px; 72 height: 10px; 73 background: #e74c3c; 74 border-radius:50%; 75 position: absolute; 76 left: 50%; 77 bottom: 2px; 78 transform: translateX(-50%); // Move 50% of the width of the element 79 } 80 } 81 } 82 &.smiley__face--01 { 83 z-index: 3; 84 } 85 &.smiley__face--02, 86 &.smiley__face--03 { 87 z-index: 2; 88 } 89 &.smiley__face--02 { 90 transform: rotate(-25deg) translate(-100px, -8px) scale(.9); 91 .face { 92 background: #3498db; 93 &::before { // 脸部非阴影部分 94 content: ""; 95 position: absolute; 96 left: 0; 97 top: 0; 98 display: block; 99 width: 70%; 100 height: 100%; 101 background: #0abde3; 102 z-index: -1; 103 transform: skewX(-25deg) translateX(-30%); 104 } 105 } 106 } 107 &.smiley__face--03 { 108 transform: rotate(25deg) translate(100px, -8px) scale(.9); 109 .face { // 脸部非阴影部分 110 background: #ff7f50; 111 &::before { 112 content: ""; 113 position: absolute; 114 left: 0; 115 top: 0; 116 display: block; 117 width: 70%; 118 height: 100%; 119 background:#ff6348; 120 z-index: -1; 121 transform: skewX(25deg) translateX(-30%); 122 } 123 } 124 } 125 } 126 .underground { 127 display: block; 128 width: 200px; 129 margin: 0 auto; 130 border: 6px solid #2c3e50; 131 position: relative; 132 height: 1px; 133 transform: translateY(180px); 134 border-radius: 50px; 135 } 136 .sparkles { 137 position: absolute; 138 display: block; 139 width: 500px; 140 height: 80%; 141 .star { 142 display: block; 143 width: 50px; 144 height: 50px; 145 margin: 20px; 146 position: absolute; 147 overflow: hidden; 148 &::before { // 星星中横杠 149 content: ""; 150 display: block; 151 width: 80%; 152 position: absolute; 153 left: 0; 154 top: 50%; 155 transform: translate(0, -50%); 156 border:4px solid #2c3e50; 157 border-radius: 50px; 158 } 159 &::after { // 星星中竖杠 160 content:""; 161 display: block; 162 height:80%; 163 position: absolute; 164 left:50%; 165 top:50%; 166 transform:translate(-50%,-50%); 167 border:4px solid #2c3e50; 168 border-radius:50px; 169 } 170 &.star--01 { 171 top:10%; 172 left:30%; 173 transform:translate(-30%,-10%) scale(.4); 174 &::before { 175 border-color:#f1c40f; 176 } 177 &::after { 178 border-color:#f1c40f; 179 } 180 &::before, 181 &::after { 182 border-width:6px; 183 } 184 } 185 &.star--02 { 186 top: 20%; 187 left: 90%; 188 transform: translate(-90%, -20%) scale(.3); 189 &::before { 190 border-color: #3498db; 191 } 192 &::after { 193 border-color: #3498db; 194 } 195 &::before, 196 &::after { 197 border-width: 6px; 198 } 199 } 200 &.star--03 { 201 top: 2%; 202 left: 60%; 203 transform: translate(-60%, -2%) scale(.7); 204 &::before { 205 border-color: #ff7f50; 206 } 207 &::after { 208 border-color: #ff7f50; 209 } 210 &::before, 211 &::after { 212 border-width: 5px; 213 } 214 } 215 } 216 .circle { 217 display: block; 218 width: 50px; 219 height: 50px; 220 border-radius: 50px; 221 background: #f1c40f; 222 position: absolute; 223 &.circle--01 { 224 border: 10px solid #f1c40f; 225 background: transparent; 226 top: 10%; 227 left: 15%; 228 transform: translate(-15%, -10%) scale(.5); 229 } 230 &.circle--02 { 231 background: transparent; 232 border: 15px solid #3498db; 233 top: 40%; 234 left: 100%; 235 transform: translate(-100%, -40%) scale(.2); 236 } 237 &.circle--03 { 238 background: #ff7f50; 239 top: 30%; 240 left: 8%; 241 transform: translate(8%, -30%) scale(.3); 242 } 243 &.circle--04 { 244 top: 70%; 245 left: 0%; 246 transform: translate(0%, -70%) scale(.2); 247 } 248 } 249 } 250 }