十天小白训练营day04—作业任务

虽然之前了解部分css基础知识，但是进度还是跟不上，明天就是第五天了，希望自己能走快一点，所以今天的作业，选个三国杀卡片，图片如下:

下面写代码,先是HTML部分：

<div id="box1">
    <div class="box2">
        <p class="p1">蜀</p>
        <p class="p2">马<br/>超</p>
        <div class="box2-01">馬術</div>
        <div class="box2-02">鐡骑</div>
        <div class="box2-03">
        <pre><b>锁定技,</b>当你计算与其他角色的距离
时，始终-1。
当你使用[杀]指定一名角色为目标后，
你可以进行判定，若结果为 &hearts;或&diams;，
此[杀]不可被闪避。
        </pre>
        </div>  
    </div>
</div>

这里的box2的背景我是直接找的背景图片插入的，下面是css代码部分：

*{
    margin:0px;
    padding:0px;
}
#box1{
    width:360px;
    height:513px;
    /*border:1px solid red;*/
    background-color:#000;
    border-radius:15px;
    position:absolute;
    left: 450px;
    top:50px;
}
.box2{
    width:330px;
    height:480px;
    /*border:1px solid red;*/
    background-image: url(img/bj.png);
    position:absolute;
    left: 15px;
    top:16px;
}
.p1{
    font-family: "方正舒体";
    color:#f2cc23;
    font-size:55px;
    position:absolute;
    left: 13px;
}
.p2{
    font-family: "方正舒体";
    color:#FFF;
    font-size:55px;
    position:absolute;
    left: 9px;
    top: 205PX;
}
.box2-01{
    width:54px;
    height:16px;
    /*border:1px solid red;*/
    font-family: "黑体";
    font-size: 15px;
    position:absolute;
    left: 20px;
    top:381px;
}
.box2-02{
    width:54px;
    height:16px;
    /*border:1px solid red;*/
    font-family: "黑体";
    font-size: 15px;
    position:absolute;
    left: 20px;
    top:419px;
}
.box2-03{
    width:239px;
    height:80px;
    /*border:1px solid red;*/
    font-family: "微软雅黑";
    font-size: 13px;
    position:absolute;
    left: 82px;
    top:378px；
}

最后效果如下，有事迟到一天，，，懒癌晚期+严重拖延症患者O(∩_∩)O哈哈~其中字体样式和原图有误差