IMWeb小白十天-Day5

来源：互联网发布：linux 查看hba卡型号编辑：程序博客网时间：2024/05/22 00:50

HTML：

<div id="wrap">    <h2><span></span>冥府投资开发建设银行</h2>    <p class="t">生有何欢 死有何苦<br/>魂归来兮 天下大吉</p>    <p class="b">4444 4444 4444 4444 4444</p>    <p class="atm"><span>ATM</span> HELL GS</p>    <div class="b-l"></div></div>

CSS：

* {    margin: 0; padding: 0;    font-family: "宋体";        font-size: 16px;}#wrap {    width: 300px; height: 200px;    /*居中start*/    position: absolute;    left: 0; top: 0; bottom: 0; right: 0;    margin: auto;    /*居中end*/    background: url("2.jpg");    background-size: cover;    border-radius: 0.5em;    box-shadow: 5px 5px 5px #888;}#wrap::before {    content: "";    position: absolute;    bottom: 1.25em; left: 0.25em;    width: 0; height: 0;    border: 8px solid transparent;    border-right-color: brown;}#wrap h2 {    line-height: 36px;    padding-left: 2.75em;}#wrap h2 span {    position: absolute;    top: 0.25em; left: 0.5em;    width: 30px; height: 30px;    background: url("3.jpg") center;    background-size: cover;    border-radius: 50%;}#wrap .t {    width: 100%;    position: absolute;    top: 2em;    line-height: 1.5em;    text-align: center;    font-weight: 700;    font-size: 22px;    color: brown;}.b {    width: 100%;    position: absolute;    bottom: 2.25em;    line-height: 1.5em;    text-align: center;    font-weight: 700;    font-size: 22px;}.b-l {    position: absolute;    bottom: 0.25em; right: 0.5em;    width: 60px; height: 45px;    background: url("5.jpg") center;    background-size: cover;    border-radius: 0.35em;}.atm {    position: absolute;    font-size: 22px;    font-weight: 700;    bottom: 0.8em; left: 1.25em;}.atm span {    font-style: italic;}

效果图：

这里写图片描述

0 0