JavaWeb · 珊瑚宫心海の个人简历

影月丶暮风

已于 2023-01-11 20:16:55 修改

阅读量157

点赞数

分类专栏：附加实验库文章标签： java webrtc

于 2022-12-26 22:28:50 首次发布

本文链接：https://blog.csdn.net/qq_21893163/article/details/128450230

版权

附加实验库专栏收录该内容

12 篇文章 14 订阅

订阅专栏

成果展示

头像中部部署有map，可以点击跳转；了解更多也可进行跳转，跳到观测枢

心海老婆真可爱！！

HTML布局 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>真珠之智 · 海祇岛现任神巫女</title>
    <link rel="stylesheet" href="233.css">
</head>

<body>
<div class="kc">
    <img src="1.jpg" alt="" class="box-img" usemap="#ASRC2">
    <map name="ASRC2">
        <area shape="circle" coords="100,100,50" alt="中心点击转跳测试"
              href="https://bbs.mihoyo.com/ys/obc/content/2403/detail?bbs_presentation_style=no_header">
    </map>

    <h1 class="name">珊瑚宫心海</h1>

    <table>
        <tr>
            <td align="right" class="btbt">生日</td>
            <td align="center" class="xhlp">2月22日</td>
            <td align="right" class="btbt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td align="right" class="btbt">定位</td>
            <td align="center" class="xhlp">治疗型辅助角色</td>
        </tr>
        <tr>
            <td align="right" class="btbt">所属</td>
            <td align="center" class="xhlp">海祇岛</td>
            <td align="right" class="btbt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td align="right" class="btbt">称号</td>
            <td align="center" class="xhlp">珍珠之智</td>
        </tr>

        <tr>
            <td align="right" class="btbt">武器</td>
            <td align="center" class="xhlp">法器</td>
            <td align="right" class="btbt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td align="right" class="btbt">专武</td>
            <td align="center" class="xhlp">不灭月华</td>
        </tr>
        <tr>
            <td align="right" class="btbt">命之座</td>
            <td align="center" class="xhlp">眠龙座</td>
            <td align="right" class="btbt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td align="right" class="btbt">武器</td>
            <td align="center" class="xhlp">试作金珀</td>
        </tr>
    </table>

    <h2>角色语录</h2>
    <h3>就算是条鱼，也是最能打的那条！</h3>
    <a href="https://bbs.mihoyo.com/ys/obc/content/2403/detail?bbs_presentation_style=no_header"
       class="asdqwe">了解更多</a>
</div>
</body>

</html>

CSS外链样式 233.css

body {
    margin: 0;
    padding: 0;
    background: url(background.png) no-repeat;
    background-size: 1200px 900px;
    /*background-size: cover;*/
    background-position: center;
}

.kc {
    color: rgb(6, 173, 151);
    width: 475px;
    background: rgba(0, 0, 0, 0.2);
    /*透明度*/
    padding: 40px;
    text-align: center;
    margin: auto;
    margin-top: 2%;
    /*与顶部距离*/
    font-family: 'Century Gothic', sans-serif;
}

.kc .box-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /*  透明度*/
}

.kc h1 {
    font-size: 42px;
    letter-spacing: 4px;
    font-weight: 400;
    color: rgb(24, 237, 252);
}

.kc h2 {
    font-size: 24px;
    letter-spacing: 3px;
    font-weight: 300;
    color: rgb(24, 237, 252);
}

.kc h3 {
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 300;
    color: rgb(24, 237, 252);
}

.asdqwe {
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: grey;
}

.btbt {
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: rgb(0, 208, 255);
}

.xhlp {
    /*心海老婆*/
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: rgb(0, 255, 106);
}

.one:hover {
    color: rgb(6, 173, 151);
}