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

来源：互联网发布：单片机romram图片编辑：程序博客网时间：2024/05/22 11:35

虽然之前了解部分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哈哈~其中字体样式和原图有误差

0 0