[成都|内门弟子]JS-韦骁|2022年08月05日的日报-技能树.IT修真院

发表于： 2022-08-05 19:58:51

1 540

昨天css代码中的命名规范有问题，今天修改了一下并且将页面对照示图调试一遍

css代码

html,body{
    background-color: #68cdd5;
    margin: 0;
    padding: 0;
    text-align: center;
    width: auto;
    height: auto;
}

.top{
    overflow: hidden;
    /* text-align: center; */
}

.navigation{
    margin: 0 auto;
    vertical-align: middle;
    height: 40px;
}
.record{
    vertical-align: middle;
    width: 100%;
    height: 70px;
    /* float: left; */
}
.logo{
    margin: 0 auto;
    vertical-align: middle;
    /* text-align: center; */
    height: 135px;
}
.content{
     width: 50%;
     height: 350px;
     margin-left: 25%;
     margin-right: 25%;
}
.qq{
    width: 50%;
    float: left;
    text-align: center;
}
.grapevine-logo{
    width: 50%;
    float: right;
    text-align: center;
}

html代码：

<body>

    <div class="top" style="height: 100%;">
        <img src="tupian/Status%20Bar.png" alt="顶部" style="width: 100%;" >
        <img src="tupian/Ellipse%208.png" alt="符号" style=" float: right; margin-right: 15px;">
        <img src="tupian/Ellipse%208%20副本.png" alt="符号" style=" float: right; margin-right: 3px;">
        <img src="tupian/Ellipse%208%20副本%202.png" alt="符号" style=" float: right; margin-right: 3px;">
        <img src="tupian/Arrow.png" alt="返回" style=" float: left; width: 20px; height:35px;margin-left: 3%">
        <p style="color: white; font-size: 26px;margin:0;float: left">返回</p>
        <p style="font-size: 34px; color: white;  text-align: center; margin:0;">魔镜</p>
    </div>
    <div class="record">
        <img src="tupian/记录页_03.png " alt="记录" style=" float: left; width: 50px;height:50px; margin-left: 2%">
    </div>
    <div class="logo">
        <img src="tupian/整合透底.png" alt="logo" style="width: 190px;height: 75px;">
    </div>
    <div class="content">
        <p style="font-size: 30px; color: white;width: 100%;text-align: center;margin: 0;padding: 0;">
            葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具.
        </p>
    </div>
    <div class="qq">
        <img src="tupian/椭圆%201.png " alt="qq群" style=" width: 90px;height: 90px;">
        <p style=" color:white; font-size:24px;margin: 0;">290560933</p>
        </div>
    <div class="grapevine-logo">
        <img src="tupian/葡萄藤logo.png " alt="葡萄藤logo" style=" width: 90px;height: 90px;">
        <p style=" color:white; font-size: 24px;margin:0;">BJTTeng</p>
    </div>
</body>