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

0 12



昨天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>


最终效果



遗留问题:还没有剪img标签的内容放到css代码中 





明天计划:完成接下来的任务。




返回列表 返回列表
评论

    分享到