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

知识储备：

 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="data: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%;}
}

响应式设计实现个人信息页面相关推荐

响应式设计和移动端优化：如何实现页面在不同设备上的适配和优化
章节一:介绍响应式设计和移动端优化响应式设计是一种使网页能够自适应不同设备和屏幕尺寸的设计方法.它通过使用流式网格布局.媒体查询和弹性图片等技术,使得网页能够在不同分辨率和设备上呈现出最佳的布局和用 ...
HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript
HTML5期末大作业:茶页文化网站设计--气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 ...
页面设计:响应式设计电子商务网站案例学习
响应式设计技术已经比3年前更加成熟而且有了更多的设计.测试工具和设计框架和样式. 不过这些设计大部分用在一些阅读.Blog.简单门户网站中,在电子商务领域少有涉及. 国内大中型电子商务网站基本上没有使 ...
html5设计九宫格页面,Html5响应式设计实现九宫格，html5响应九宫格
Html5响应式设计实现九宫格,html5响应九宫格自从响应式设计的理念提出以来,越来越大的网站采用这种思想.各类大型网站也如雨后春笋般的涌了出来.如:小米商城,天猫等. 至于响应式设计的概念等大家 ...
响应式设计的十个基本技巧
为什么80%的码农都做不了架构师?>>> Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也 ...
响应式设计的真正挑战：RSS
本文讲的是响应式设计的真正挑战:RSS, web 世界丰富多彩,去看看服务器日志吧.那里充斥着爬虫机器人以及运行着各种操作系统,有着各种屏幕尺寸的移动设备和用户代理.你很容易会因为自己使用 web 的 ...
响应式设计PageAdmin个人博客系统源码v4.0.10
介绍: PageAdmin响应式博客系统,适合用于个人网站制作,个人博客的制作,采用响应式设计,在pc.ipad和手机上访问都有很好的浏览体验,功能强大,扩展灵活,支持后台和会员中心发布文章. Pag ...
复杂产品的响应式设计【流程篇】
都说2013年将是响应式设计爆发的一年.一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘"玩客"项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式.中间积累了 ...
（15）：响应式设计
响应式设计,响应式设计的基本原理一.响应式设计是什么 1. 响应式网站设计(Responsive Web design) 是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平 ...

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

知识储备：

实现效果：

代码如下

响应式设计实现个人信息页面相关推荐

最新文章

热门文章