自适应个人信息布局

最新推荐文章于 2022-03-11 22:45:14 发布

wyhcczz

最新推荐文章于 2022-03-11 22:45:14 发布

阅读量416

点赞数 1

文章标签： html css3 html5 css

本文链接：https://blog.csdn.net/wyhcczz/article/details/105714475

版权

效果显示：在这里插入图片描述

响应式布局最主要使用的语法是：
@media only screen and only screen and(max-width:500px 500px){
.gridmenu{
width:100%;
}
.gridmain{
width:100%;
}
.gridright{
width:100%;
}
}
案例实现效果如下：

<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<style>
body{
background-color: #E1DED6;
}
.content{
display: flex;
flex-wrap: wrap;
margin-top: 40px;
justify-content: space-around;
color: white;
}
.left,.center,.right{
width: 30%;
display: flex;
flex-direction: column;
align-items: center;
}
.left{
order:0;
background: #FFFFFF;
height: 200px;

}

.nav{
text-align: center;
}
.left1{
width: 90%;
height:70px;
margin-top: 20px;
background: url(head.png) no-repeat ;
border: 3px solid #E1DED6
}
.left2{
width: 90%;
height: 70px;
background: url(password.png) no-repeat;
border: 3px solid #E1DED6;
}
.left3{width: 100%;
height: 80px;
background-color: #EF8D32;
margin-top:-10px;
color: white;
cursor:pointer;
}
.center1 img{
margin-top: 5px;
width: 80%;
height: 60%;
border-radius: 30%;


}
.center1{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: #ffffff;


}
.center2{
display: flex;

width: 100%;
height: 70px;
background-color: #EF8D32;
align-items: center;
}
.center2 div{
width: 100%;
margin-top: 8px;

text-align: center;
font-size: 14px;
}
.center2-one{
border-right: 1px solid white;
}
.text1{
font-size: 18px;
color: red;
margin-top: -10px;
width: 100%;
text-align: center;
line-height: 40px;
background-color: #FFFFFF;
}
.right1{width: 100%;
height: 50px;
background-color: #EF8D32;
border: 1px solid indianred;
color: white;
cursor:pointer;

}
.right-images1{
display: inline-block;

width:25px;
margin-top: 10px;
height: 25px;
background: url("sprite.jpg") no-repeat -1px 2px;
}
.right-images2{
display: inline-block;

width:25px;
margin-top: 10px;
height: 25px;
background: url("sprite.jpg") no-repeat -30px 2px;
}
.right-images3{
display: inline-block;
width:25px;
margin-top: 10px;
height: 25px;
background: url("sprite.jpg") no-repeat -60px 2px;
}
.right-images4{
display: inline-block;
width:25px;
margin-top: 10px;
height: 25px;
background: url("sprite.jpg") no-repeat -90px 2px;
}
.left3:hover{
background-color: red;
}
.right1:hover{
background-color: #ee5a32;
}
button{
margin-top: 15px;
float: right;
background-color: #505771;
border-radius: 5px;
border: none;
margin-right: 3px;
}
@media screen and screen and (max-width: 500px 500px) {
.left,.center,.right{
width: 100%;
margin-top: 10px;

}
}

</style>
</head>

<body>
<div class="nav"> 个人信息</div>
<div class="content">
<div class="left">
<span ></span><input type="text" class="left1" placeholder="  | 请输入旧的密码"><br>
<input type="text" class="left2" placeholder="  | 请输入新的密码"><br>
<button class="left3">修改密码</button>
</div>
<div class="center">
<div class="center1"><img src="cute.jpg"/></div>
<div class="text1">可爱小萌妹</div>
<div class="center2">
<div class="center2-one">5.2万<br>粉丝</div>
<div> 1000<br>关注</div>
</div>
</div>
<div class="right">
<div class="right1">
<span class="right-images1"> </span>
<span>个人资料</span>
</div>
<div class="right1">
<span class="right-images2"> </span>
<span>消息</span></button>
<button>13</button>
</div>
<div class="right1">
<span class="right-images3"> </span>
<sapn>设置</sapn>
</div>
<div class="right1">
<span class="right-images4"> </span>
<sapn>退出登录</sapn>
</div>

</div>

</div>

</body>

</html>

wyhcczz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自适应个人信息布局

效果显示：响应式布局最主要使用的语法是：@media only screen and only screen and(max-width:500px 500px){.gridmenu{width:100%;}.gridmain{width:100%;}.gridright{width:100%;}}案例实现效果如下：<DOCTYPE html><ht...
复制链接

扫一扫