IMWeb小白十天-Day4

来源：互联网发布：怀化学院网络管理系统编辑：程序博客网时间：2024/06/02 02:39

HTML：

<body>    <div id="wrap">        <div class="main">            <span>萌</span>            <div class="text">                <span>萌不可击：</span>                <p>因为太萌，不可被攻击。</p>            </div>        </div>    </div></body>

CSS：

* {    margin: 0; padding: 0;    font-size: 16px;}#wrap {    width: 200px; height: 300px;    /*居中start*/    margin: auto;    position: absolute;    left: 0; top: 0; bottom: 0; right: 0;    /*居中end*/    background: chocolate;    border: 1px solid slateblue;}.main {    position: relative;    height: 100%; /*大小与最外层容器一致*/    border-radius: 3em; /*圆角，露出最外层容器背景色*/    border-top-left-radius: 4em;    background: url("1.jpg");    background-size: cover; /*让图片大小适应容器*/}/*左上角阵营文字样式及定位*/.main>span {    position: absolute;    top: 2px; left: 4px;    color: burlywood;    font: normal normal normal 2em/1 'serif';}/*人物技能栏定位及样式*/.main .text {    position: absolute;    bottom: 0;    padding: 10px;    width: 180px; height: 60px;    color: white;    line-height: 1.5;    background: #000;    border-bottom-left-radius: 3em;    border-bottom-right-radius: 3em; /*不挡着大盒子背景*/    opacity: 0.4;}

效果图：

这里写图片描述

0 0