生活随笔
收集整理的這篇文章主要介紹了
自适应个人信息布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果顯示：
響應式布局最主要使用的語法是：
@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
>
總結
以上是生活随笔為你收集整理的自适应个人信息布局的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
