html 後臺頁面布局
阿新 • • 發佈：2017-08-08
htm clear content bsp 20px ica height use left
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
body{
margin:0;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
.pg-header .header{
margin: 0 auto;
width:100%;
min-width:1080px;
height: 48px;
background-color:#2a6496;
line-height: 48px;
color: white;
}
.pg-header .header .logo{
font-size:16px;
font-weight: 600;
width: 200px;
text-align: center;
padding:0 20px;
}
.pg-header .header .user{
width:150px;
height: 48px;
position: relative;
}
.pg-header .header .user-list{
width:120px;
background-color: grey;
position: absolute;
top:40px;
right:80px;
display:none;
z-index: 10;
}
.pg-header .header .user-list a{
display: block;
}
.pg-header .header .user a img{
height: 32px;
width: 32px;
border-radius: 50%;
padding: 0 5px;
vertical-align: middle;
}
.pg-header .header:hover .user-list{
display: block;
} .pg-content .left_content{ position: absolute; top:48px; left:0; bottom: 0; width:280px; background-color: grey; } .pg-content .right_content{ position: absolute; right:0; top:48px; bottom: 0px; left:285px; background-color: #eeeeee; overflow: auto; } .pg-content .right_content .right_text{ min-width: 780px; background-color: red; z-index: 9; } </style> </head> <body> <div class=‘pg-header‘> <div class=‘header‘> <div class=‘logo left‘>博客</div> <div class=‘user right‘><a><img src=‘head2.jpg‘/>howhy</a></div> <div class=‘user-list‘><a>個人中心</a><a>設置</a></div> </div> </div> <div class=‘pg-content‘> <div class=‘left_content‘></div> <div class=‘right_content‘> <div class=‘right_text‘> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <div> </div> </div> <div class=‘pg-footer‘></div> </body> </html>
} .pg-content .left_content{ position: absolute; top:48px; left:0; bottom: 0; width:280px; background-color: grey; } .pg-content .right_content{ position: absolute; right:0; top:48px; bottom: 0px; left:285px; background-color: #eeeeee; overflow: auto; } .pg-content .right_content .right_text{ min-width: 780px; background-color: red; z-index: 9; } </style> </head> <body> <div class=‘pg-header‘> <div class=‘header‘> <div class=‘logo left‘>博客</div> <div class=‘user right‘><a><img src=‘head2.jpg‘/>howhy</a></div> <div class=‘user-list‘><a>個人中心</a><a>設置</a></div> </div> </div> <div class=‘pg-content‘> <div class=‘left_content‘></div> <div class=‘right_content‘> <div class=‘right_text‘> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <p>erwer</p> <div> </div> </div> <div class=‘pg-footer‘></div> </body> </html>
html 後臺頁面布局