源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

　　定义dom，容器中包含的3个元素分别代表帽子、胡须和手杖：

 

　　<figureclass="chaplin">

 

　　<spanclass="hat"></span>

 

　　<spanclass="beard"></span>

 

　　<spanclass="stick"></span>

 

　　</figure>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　}

 

　　定义容器尺寸，并设置子元素水平居中：

 

　　.chaplin{

 

　　width:40em;

 

　　height:30em;

 

　　font-size:10px;

 

　　background-color:#eee;

 

　　box-shadow:003emrgba(0,0,0,0.2);

 

　　display:flex;

 

　　flex-direction:column;

 

　　align-items:center;

 

　　}

 

　　定义默认颜色，后面用currentColor引用此颜色：

 

　　.chaplin{

 

　　color:#555;

 

　　}

 

　　画出帽子的轮廓：

 

　　.chaplin{

 

　　position:relative;

 

　　}

 

　　.hat{

 

　　position:absolute;

 

　　width:6.4em;

 

　　height:4.6em;

 

　　background-color:currentColor;

 

　　border-radius:2.3em2.3em00;

 

　　top:1.4em;

 

　　}

 

　　用伪元素画出帽沿：

 

　　.hat::before{

 

　　content:'';

 

　　position:absolute;

 

　　width:10em;

 

　　height:0.8em;

 

　　background-color:currentColor;

 

　　border-radius:0.4em;

 

　　top:calc(100%+0.4em);

 

　　left:calc((100%-10em)/2);

 

　　}

 

　　画出胡子：

 

　　.beard{

 

　　position:absolute;

 

　　width:1.5em;

 

　　height:0;

 

　　top:11.6em;

 

　　border:solidtransparent;

 

　　border-width:00.4em1em0.4em;

 

　　border-bottom-color:currentColor;

 

　　}

 

　　画出手杖的杖杆：

 

　　.stick{

 

　　position:absolute;

 

　　width:0.8em;

 

　　height:10.5em;

 

　　background-color:currentColor;

 

　　bottom:0;

 

　　}

 

　　用::before伪元素画出手杖的握柄：

 

　　.stick::before{

 

　　content:'';

 

　　position:absolute;

 

　　box-sizing:border-box;

 

　　width:5.6em;

 

　　height:3em;

 

　　border:0.8emsolid;

 

　　border-radius:5.6em5.6em00;

 

　　border-bottom:none;

 

　　top:-3em;

 

　　}

 

　　用::after伪元素修饰握柄的端点，使其圆润自然：

 

　　.stick::after{

 

　　content:'';

 

　　position:absolute;

 

　　width:0.8em;

 

　　height:0.8em;

 

　　background-color:currentColor;

 

　　border-radius:50%;

 

　　left:calc(5.6em-0.8em);

 

　　top:-0.4em;

 

　　}

 

　　使手杖水平居中：

 

　　.stick{

 

　　left:calc((100%-(5.6em-0.8em))/2);

 

　　}

 

　　至此，抽象的卓别林形象完成，接下来排版一句他的名言。

 

　　在dom中增加一个.quote元素，并把一句话分为3段：

 

　　<figureclass="chaplin">

 

　　<spanclass="hat"></span>

 

　　<spanclass="beard"></span>

 

　　<spanclass="stick"></span>

 

　　<pclass="quote">

 

　　<span>adaywithout</span>

 

　　<span>laughter</span>

 

　　<span>isadaywasted</span>

 

　　</p>

 

　　</figure>

 

　　定位文字，并竖排3段文字：

 

　　.quote{

 

　　position:absolute;

 

　　left:50%;

 

　　bottom:2.5em;

 

　　font-family:sans-serif;

 

　　text-transform:uppercase;

 

　　font-weight:bold;

 

　　display:flex;

 

　　flex-direction:column;

 

　　}

 

　　调整字号和字间距，使3段文字对齐：

 

　　.quotespan:nth-child(1){

 

　　letter-spacing:0.05em;

 

　　}

 

　　.quotespan:nth-child(2){

 

　　font-size:1.6em;

 

　　}






本文转载自中文网