实现安卓pc互通页面，响应式布局实现个人信息

<<1

已于 2023-03-12 22:36:21 修改

阅读量81

点赞数

文章标签： css html css3

于 2023-03-12 22:34:18 首次发布

本文链接：https://blog.csdn.net/weixin_63742939/article/details/129482443

版权

这是一个HTML页面示例，包含响应式设计，用于显示个人信息和密码修改表单。页面在大屏幕和小屏幕设备上均能自适应布局。用户可以输入旧密码和新密码进行修改，同时展示了用户的头像、昵称、粉丝数和关注数。页面底部有导航菜单，包括个人资料、消息、设置和退出登录选项。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" href="1.css">
   <style>
       *{
           padding: 0;
           margin: 0;
           list-style: none;

       }

       body{
           background-image: url("images/2.png") ;
           width: 100%;
           height:100%;
       }
       .element{
           display: flex;
           justify-content: space-around;
           margin: 10% auto;

       }

       .element-left{
           width: 30%;
           height:100%;

       }

       .element-right{
           width: 35%;
           height:100%;

       }
       .element-last{
           width: 30%;
           height:100%;
           position: relative;
           background-color: #32cd32;
       }

       @media screen and (max-width:640px){

           body{

               width: 100%;
               height:100%;
           }
           .element{
               width: 95%;
               display: flex;
               flex-flow: column;
           }

           .element-left{
               width: 100%;
               order: 1;

           }

           .element-right{
               width: 100%;
               order: 2;
               margin-top: 8px ;

           }

           .element-last{
               width: 100%;
               order: 3;
               margin-top: 8px ;

           }

}

   </style>
   </head>
   <body>
       <h1>个人信息</h1>
       <div class="element">
           <div class="element-left">
               <div class="a">
               <input type="text" placeholder="请输入旧密码">
               <input type="password" placeholder="请输入新密码">

               </div>
               <input type="submit" value="修改密码">
           </div>


           <div class="element-right">
               <div class="b">
                   <img src="images/boy.png">
                   <h2>棒球小子</h2>
               </div>
               <div class="d">
                   <div class="f">
                       <h3>2.5万</h3>
                       <h3>粉丝</h3>
                   </div>

                   <div class="e">
                       <h3>100</h3>
                       <h3>关注</h3>
                   </div>

                   <div class="g"></div>
               </div>

           </div>


           <div class="element-last">
               <ul>
                   <li>
                       <div id="e"><img src="images/1.png" alt=""></div>
                       <div id="f">个人资料</div>
                   </li>
                   <li>
                       <div id="e"><img src="images/a.png" alt=""></div>
                       <div id="f">消息</div>
                   </li>
                   <li>
                       <div id="e"><img src="images/3.png" alt=""></div>
                       <div id="f">设置</div>
                   </li>
                   <li>
                       <div id="e"><img src="images/4.png" alt=""></div>
                       <div id="f">退出登入</div>
                   </li>
               </ul>
               <div>13</div>
           </div>

       </div>
   </body>
</html>

/* css部分，图片需要自己设置*/

h1 {
text-align: center;
line-height: 100px;
}

.a {
   width: 100%;
   height: 200px;
   background-color: #ffffff;

text-align: center;

   display: block;
   margin-left: auto;
   margin-right: auto;

}

input[type="text"] {
   width: 80%;
   height: 30px;
   background: url("images/profile.png") no-repeat;
   /*设置图片的地址*/
   background-position: 15px 8px;
   /*图片在input中的位置离左边的距离和离右边的距离*/
   padding-left: 50px;
   border: 1px solid red;
   margin: 30px 0
}

input[type="password"] {
   width: 80%;
   height: 30px;
   background: url("images/lock.png") no-repeat;
   /*设置图片的地址*/
   background-position: 15px 8px;
   /*图片在input中的位置离左边的距离和离右边的距离*/
   padding-left: 50px;
   border: 1px solid red;

}

input[type="submit"] {
   width: 100%;
   height: 50px;
   background-color: #32CD32;
   color: #ffffff;
   border: 1px solid #32CD32;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.b {
   width: 100%;
   height: 300px;
   background-color: #ffffff;
   text-align: center;
   color: #32CD32;

}

.b>img {
   border-radius: 50px 50px 50px 50px;
   border: 3px solid #32CD32;
   margin: 10px 0
}

.d {
   width: 100%;
   height: 100px;
   background-color: #32CD32;
   color: #ffffff;

display: flex;
position: relative;
}

.f {
   width: 49%;
   color: white;
   text-align: center;
   line-height: 35px;
   margin-top: 2%;

}

.e {
   height: 90px;
   width: 49%;
   color: white;
   text-align: center;
   line-height: 35px;
   margin-top: 2%;
}

.g {
   width: 2%;
   height: 80px;
   border-left: 1.5px solid white;
   position: absolute;
   left: 50%;
   top: 8px;
}

       ul{
           width: 100%;
           height: 98%;

       }


       li{
           width: 100%;
           height: 25%;
           border-bottom: 2px solid red;
           color: white;
           display: flex;
       }

       #e{
           width: 20%;
           margin-left: 20px;
           margin-top: 30px;
       }
       #f{
           width: 80%;
           margin-left: 5px;
           margin-top: 30px;
       }

       .element-last>div{
           width: 40px;
           height: 30px;
           background-color: slategray;
           color: white;
           line-height: 30px;
           text-align: center;
           position:absolute;
           top: 90px;
           right: 35px;
       }