/*第7单元项目7-2社交网站个人信息页面CSS文件*
ul{list-style:none； }
body {
字体系列： ' roboto '，sans-serif；
背景： URL (./images/2.png ) repeat 0px 0px；
font-size: 100%；
}
a {
文本修饰：无；
}
a:hover {
传输： 0.5s全部；
-webkit-transition: 0.5s all；
}
h1 {
文本对齐3360中心；
font-size: 3em；
color: #3C2F24；
margin: 2em 0em 1em 0em；
font-family : '微软雅虎'；
}
. edit {
margin :0 %自动； /*外侧距离：上下0，左右水平为zgdxmt/
后台： # FFf；
}
表单{
padding: 10% 4% 8% 4%；
}
表单沥{
列表样式： none；
width: 100%；
字体权重： 500；
border : 1px固态# CCC；
后台： # FFf；
margin: 1em 0；
Outline :无；
}
input[type='text'] {
width: 83%；
填充：1 em 0em 1em 1.7 em；
color: #858282；
font-size: 15px；
Outline :无；
后台：无；
字体权重： 500；
border :否；
}
. user1 {
高： 20px；
width: 20px；
显示： block；
浮点：左；
margin: 12px -17px 0px 0px；
border-right : 1px固态# 999；
padding: 5px 16px 0 0；
背景： Url (./images/user.png ) no-repeat活泼龙猫2px；
}
. lock1 {
高： 20px；
width: 20px；
显示： block；
浮点：左；
margin: 12px -17px 0px 0px；
border-right : 1px固态# 999；
padding: 5px 16px 0 0；
背景： Url (./images/lock.png ) no-repeat活泼龙猫2px；
}
. submit input[type='submit']{
font-size:20px；
字体权重： 400；
color: #fff；
cursor: pointer；
Outline :无；
padding:21px 20px；
width: 100%；
border :否；
传输： 0.1s全部；
-webkit-transition: 0.1s all；
后台： # ef8d 32；
}
input [ type=' submit ' ] : hover {
背景： # ee5a 32；
}
/* ribbon style */
. h2 h2 {
color: #fff；
font-size: 1.2em；
padding: 7px 9px 5px 27px；
字体权重： 300；
}
//----//
. icon{
>background: url(../images/img-sprite.png);
width: 25px;
height: 23px;
display: inline-block;
float:left;
}
.icon {
background: url(../images/img-sprite.png) no-repeat -1px -2px;
}
.stat{
background: url(../images/img-sprite.png) no-repeat -30px -rydlt;
}
.msg{
background: url(../images/img-sprite.png) no-repeat -62px -2px;
}
.signout{
background: url(../images/img-sprite.png) no-repeat -93px -2px;
}
ul.content {
width: 100%;
margin: 0 auto;
background: #ef8d32;
font-weight: 100;
}
li.button a {
padding: 23.5px 27px;
margin: 0;
display: block;
}
li.button {
list-style: none;
text-align: left;
}
li.menu{
padding: 0;
width: 100%;
border-bottom: 1px solid #CD5F4A;
margin: 0;
}
li.menu:hover {
background: #ee5a32;
}
li.button a:hover{
text-decoration:none;
}
li.button a span{
margin-right: 22px;
}
li.menu.info {
border-bottom: none;
}
li.button i {
background: #505771;
float: right;
padding: rydlt 12px;
font-size: 13px;
display: block;
border-radius: rydlt;
-webkit-border-radius: rydlt;
font-style: normal;/*设置字体样式正常，因为标签表示文本字体为斜体*/
}
a, a:visited {
color:#fff;
}
p{
padding:10px;
text-align:center;
}
.element {
width: 60%;
margin: 0 auto 7em;
padding: 2em;
display: flex; /*设置该div为一个弹性盒容文艺的棉花糖/
flex-flow: row; /*子元素按横轴方向顺序排ymdfbx/
}
.element-left {
margin:0 1.5%;
flex: 3.3 ; /*将容zydct为10份，占三分之欢呼的保温杯/
order: 1; /*排序为第1个子元留胡子的棒棒糖/
}
.element-right {
margin:0 1.5%;
flex: 3.3 ; /*将容zydct为10份，占三分之欢呼的保温杯/
order:2; /*排序为第2个子元留胡子的棒棒糖/
}
.element-last {
margin:0 1.5%;
flex: 3.3 ; /*将容zydct为10份，占三分之欢呼的保温杯/
order:3; /*排序为第3个子元留胡子的棒棒糖/
}
/*--teddy-bear--*/
.teddy-bear {
text-align: center;
}
.teddy-text {
background: #fff;
padding: 1em 1em;
}
.teddy-text h4 {
color: #ee5a32;
font-size: 1.2em;
margin: 0.5em 0 0;
}
.teddy-text img {
border-radius: 70px;/*边框圆角半径为fzdgb/
border: 3px solid #ee5a32;
padding: 活泼的龙猫;
width: 60%;
}
.teddy-follow {
background: #ef8d32;
padding: 0.7em 0em 0.7em 0em;
}
.teddy-follow li {
display: inline-block;
text-align: center;
float: left;
width: 49%;
}
.teddy-follow li h3 {
font-size: 0.95em;
color: #fff;
font-weight: bold;
}
.teddy-follow li p {
font-size: 0.8em;
color: #fff;
}
.teddy-follow li.folw-h {
border-right: 1px solid #fff;
}
.element-bg-img img {
border-radius: 6px 6px 0px 0px;
}
.temperatur h2 {
color: #ee5a32;
font-size: 3.2em;
display: inline-block;
vertical-align: top;
font-family: 'Roboto', sans-serif;
}
.clear{
clear:both; /*粉丝和关注模块清除浮动*/
}
/*--媒体查询--*/
@media(max-width:1366px){
input[type="text"], input[type="password"] {
padding: 1em 0em 1em 0.7em;
}
.user1 {
margin: 12px -3px 0px 0px;
padding: 5px 10px 0 0;
}
.lock1 {
margin: 12px -3px 0px 0px;
padding: 5px 10px 0 0;
}
}
@media(max-width:1280px){
input[type="text"], input[type="password"] {
width: 75%;
}
}
.element {
width: 82%;
margin: 0 auto 6em;
}
form {
padding: 12% 4% 12% 4%;
}
@media(max-width:76活泼的龙猫){
.element {
width: 80%;
}
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% 13% 6%;
}
.teddy-text h4 {
font-size: 0.92em;
}
}
@media (max-width: 640px){
.element{
margin: 0 auto 2em;
flex-flow: column; /*弹性盒中的子元素按纵轴方向排ymdfbx/
}
.element-left,.element-right,.element-last{
order: 0;/*将子元素都设置成同一个值，指按自然顺序排ymdfbx/
margin: 1%;
}
h1 {
font-size: 2em;
margin: 1em 0em 0.5em 0em;
}
form {
padding: 13% 13% 13% 13%;
}
input[type="text"] {
width: 85%;
}
ul.content {
width:100%;
}
}
@media (max-width: 600px){
input[type="text"] {
width: 80%