响应式设计实现个人信息页面

最新推荐文章于 2024-08-22 12:39:53 发布

Volcano_WQL

最新推荐文章于 2024-08-22 12:39:53 发布

阅读量2.9k

点赞数 4

文章标签： html css3 flex

本文链接：https://blog.csdn.net/qq_45614713/article/details/105709745

版权

知识储备：

	1.媒体查询
	2.视口属性
	3.弹性盒布局<---栅格系统

弹性盒介绍

实现效果：

在这里插入图片描述
改变屏幕分辨率后：

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1,maximum-scale=1">
    <title>个人信息页面</title>
    <link href="pjt2.css" rel="stylesheet"
        type="text/css" media="all"/>
</head>
<body>
    <h1>个人信息</h1>
    <div class="element">
    <div class="element-left">
        <div class="edit">
            <form>
                <ul>
                    <li>
                        <input type="text" placeholder="请输入旧密码">
                        <a href="#" class="user">
<!--                            <i class="fa fa-camera-retro"></i>-->
                        </a>

                    </li>
                    <li>
                        <input type="text" placeholder="请输入新密码">
                        <a href="#" class="lock"></a>
                    </li>
                </ul>
            </form>
            <div class="submit">
                <input type="submit" value="修改密码">
            </div>
        </div>
    </div>
        <div class="elemet-right">
            <div class="teddy-bear">
                <div class="teddy-text">
                    <img src="images/IronMan.png"class="img-responsive"/>
                    <h4>Iron Man</h4>
                </div>
                <div class="teddy-follow">
                    <ul>
                        <li class="follow-h">
                            <h3>2.5万</h3>
                            <P>fans</P>
                        </li>
                        <li class="follow-r">
                            <h3>100</h3>
                            <p>关注</p>
                        </li>
                        <div class="clear"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="element-last">
            <ul class="content">
                <li class="menu_btn">
                <a href="#">个人资料
                    <span class="icon pd"></span></a>
            </li>
                <li class="menu_btn">
                    <a href="#">消息
                     <span class="icon msg"></span>
                     <i>13</i>
                    </a>
                </li>
                <li class="menu_btn">
                    <a href="#">设置
                        <span class="icon setting"></span></a>
                </li>
                <li class="menu_btn">
                    <a href="#">退出登录
                        <span class="icon signout"></span></a>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

CSS样式设置：

*{
    margin: 0;
    padding: 0;
    border:0;
}
ul{
    list-style: none;
}
body{
    font-family: 'Roboto',sans-serif;
    font-size: 100%;
    /*继承父元素字体样式*/
    font:inherit;
    background-color: #cacbd1;
}
a{
    text-decoration: none;
}
a:hover{
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
}
.clear{
    /*清除浮动*/
    clear: both;
}
h1{
    font-family: '微软雅黑';
    font-size: 3em;
    color:#3c2f24;
    text-align: center;
    margin:2em 0 1em 0;
}

.element{
    width:60%;
    margin:0 auto 7em;
    padding:2em;
    display: flex;
    /*子元素按横轴方向顺序排列*/
    flex-flow:row;
}
.element-left{
    margin:0 1.5%;
    /*容器十等分*/
    flex:3.3;
    /*order:1;*/
}
.element-right{
    margin: 0 1.5%;
    flex: 3.3;
    order:2;
}
.element-last{
    margin: 0 1.5%;
    flex: 3.3;
    order:3;
}

.edit{
    margin:0 auto;
    background: #fff;
}
form{
    padding: 10% 4% 8% 4%;
}
form li{
    list-style: none;
    width: 100%;
    font-weight: 500;
    border: 1px solid #ccc;
    background: #fff;
    margin:8px 0;

}

.user{
    /*border: 1px solid black;*/
    width:20px;
    height:20px;
    display:block;
    float: left;
    /*margin:12px 0px 0 0;*/
    border-right: 1px solid #999;
    /*padding: 5px 16px 0 0;*/
    background: url("images/user.png") no-repeat 4px 3px;
}
/*a i{*/
/*    margin:-2px;*/
/*}*/

.lock{
    width: 20px;
    height: 20px;
    display: block;
    float: left;
    margin: 10px 0 0 0;
    border-right: 1px solid #999;
    padding: 5px 16px 0 0;
    background: url("images/lock.png") no-repeat 4px 3px;
}
input[type="text"]{
     width:80%;
     padding: 1px 0 1px 1px;
     margin:0 0 0 5px ;
     font-size: 15px;
     color: #858282;
 }
.submit input[type="submit"]{
    width: 100%;
    padding: 21px 20px;
    background: #ef8d32;
    font-size: 20px;
    font-weight: 400;
    color:#fff;
    cursor: pointer;
    transition: 0.1s all;
}
input[type='submit']:hover{
    background: #ee5a32;
}

.teddy-bear{
    text-align: center;
}
.teddy-text{
    background: #fff;
    padding: 1em 1em;
}
.teddy-text h4{
    font-size: 1.2em;
    color: #ee5a32;
    margin:0.5em 0 0;
}
.teddy-text img{
    width: 60%;
    padding: 8px;
    border:3px solid #ee5a32 ;
    border-radius: 70px;
}
.teddy-follow{
    background: #ef8d32;
    padding: 0.7em 0 0.7em 0;
}
.teddy-follow li{
    display: inline-block;
    width:49%;
    float: left;
    text-align: center;
}
.teddy-follow li h3{
    font-size: 0.95em;
    font-weight: bold;
    color: #fff;
}
.teddy-follow li p{
    font-size: 0.8em;
    color: #fff;
}
.follow-h {
    border-right: 1px solid #fff;
}

.content{
    width:100%;
    margin:0 auto;
    background: #ef8d32;
    font-weight: 100;
}
li.menu_btn a{
    padding: 23.5px 27px;
    margin: 0;
    display: block;
}
li.menu_btn{
    list-style: none;
    text-align: left;
    width: 100%;
    margin:0;
    padding:0;
    border-bottom: 1px solid #cd5f4a;
}
li.menu_btn:hover{
    background: #ee5a32;
}
li.menu_btn a:hover{
    text-decoration: none;
}
li.menu_btn a span{
    margin-right: 22px;
}
.content li:nth-last-child(1){
    /*设置最后一个li无下边框*/
    border-bottom: none;
}
i{
    display: block;
    float: right;
    padding: 4px 12px;
    border-radius: 4px;
    background: #505771;
    font-size: 13px;
    font-style: normal;
}
a,a:visited{
    color: #fff;
}
.icon{
    width:25px;
    height:25px;
    display: inline-block;
    float: left;
}
.pd{
    background: url("images/pd.png") no-repeat ;
}
.msg{
    background: url("images/news.png") no-repeat ;
}
.setting{
    background: url("images/setup.png") no-repeat;
}
.signout{
    background: url("images/signout.png") no-repeat;
}

@media (max-width:1366px) {
    input[type="text"]{
        padding: 1em 0 1em 0.7em;
    }
    .user,.lock{
        margin: 12px -3px 0 0;
        padding: 5px 10px 0 0;
    }
}
@media  (max-width:1280px){
    input[type="text"]{
        width: 75%;
    }
    .element{
        width: 82%;
        margin: 0 auto 6em;
    }
    form{
        padding: 12% 4%;
    }
}
@media (max-width: 768px) {
    li.button a{
        padding: 23.5px 16px;
    }
    input[type="text"]{
        width: 60%;
    }
    .teddy-text h4{
        font-size: 1em;
    }
    li.button a{
        padding:  22.5px 10px;
    }
}
@media (max-width: 667px) {
    input[type="text"]{
        width: 70%;
    }
    form{
        padding: 13% 6%;
    }
    .teddy-text h4{
        font-size: 0.92em;
    }
}
@media  (max-width:640px){
    .element{
        margin: 0 auto 2em;
        flex-flow: column;
    }
    .element-left,.element-right,.element-last{
        order: 0;
        margin: 1%;
    }
    h1{
        font-size: 2em;
        margin:1em 0 0.5em 0;
    }
    form{
        padding: 13%;
    }
    input[type="text"]{
        width: 89%;
    }
}
@media (max-width: 600px){
    input[type="text"]{
        width: 80%;
    }
}
@media (max-width: 568px) {
    input[type="text"]{
        width: 70%;
    }
}