页面布局-白红宇

页面布局

阅读量：7114 次

发布时间：2019-06-28

本文共 6187 字，大约阅读时间需要 20 分钟。

S2.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.left {

float: left;

}

.right{

float: right;

}

.pg-header{

height:48px;

background-color: #2459a2;

color: white;

}

.pg-content .menu{

position: fixed;

top:48px;

left:0;

bottom:0;

min-width: 200px;

background-color: #dddddd;

}

.pg-content .content{

position: fixed;

top:48px;

right:0;

bottom:0;

left:200px;

background-color: purple;

overflow: auto;

}

</style>

</head>

<body style="margin: 0;">

<div class="pg-header"></div>

<div class="pg-content">

<div class="menu left">aa</div>

<div class="content left">

assassassass

assassass</div>

</div>

<div class="pg-footer"></div>

</body>

</html>

S3.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.left {

float: left;

}

.right{

float: right;

}

.pg-header{

height:48px;

background-color: #2459a2;

color: white;

}

左侧菜单跟随着滚动条上下走动时用这个方法(左侧菜单内容多就用这种)

.pg-content .menu{

position: absolute;

top:48px;

left:0;

bottom: 0;

width:200px;

background-color: #dddddd;

}

.pg-content .content{

position: absolute;

top:48px;

right:0;

bottom:0;

left:200px;

}

</style>

</head>

<body style="margin: 0;">

<div class="pg-header"></div>

<div class="pg-content">

<div class="menu left">aa</div>

<div class="content left">


 
 <div style="background-color: purple;">

assassassass

assassassass

assassass</div>

</div>

<div class="pg-footer"></div>

</body>

</html>

position:

fixed --永远固定在窗口的某个位置

relative -- 单独无意义

absolute --第一次定位可以在指定位置，滚轮滚动时不在了

p标签默认有边距

S4.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

<style>

.left {

float: left;

}

.right{

float: right;

}

.pg-header{

height:48px;

background-color: #2459a2;

color: white;

line-height: 48px;/*文字上下居中*/
}

.pg-header .logo{

width: 200px;

background-color: cadetblue;

text-align: center;/*左右居中*/
}

.pg-header .user{

            /*width:160px;*/
            /**/
            margin-right: 60px;

padding:0 30px;

color: white;

height:48px;

}

.pg-header .user:hover{

background-color: #396bb3;

}

.pg-header .user:hover .b{

display: block;

}

.pg-header .user .a img{

height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;

}

.pg-header .user .b{

z-index: 20;

position: absolute;

top: 48px;

right: 44px;

background-color:white;

color: black;

width: 160px;

text-align: center;

margin: 0 -76px;

display: none;

}

.pg-header .user .b a{

display: block;

}

.pg-header .icons{

padding: 0 20px;

}

.pg-header .icons:hover{

background-color: #396bb3;

}

/*左侧菜单以及上面不动右侧content内容会建滚动条这种用的最多*/
.pg-content .menu{

position: absolute;

top:48px;

left:0;

bottom: 0;

width:200px;

background-color: #dddddd;

}

.pg-content .content{

position: absolute;

min-width: 980px;

top:48px;

right:0;

bottom:0;

left:200px;

overflow: auto;

z-index: 9;

}

</style>

</head>

<body style="margin: 0;">

<div class="pg-header">

<div class="logo left">

腾讯网

</div>

<div class="user right" style="position: relative;">

</a>

<div class="b" >

</div>

<div class="icons right">

</div>

<div class="icons right">

<span style="display: inline-block;line-height: 1px;padding: 10px 7px;background-color: red;border-radius: 50%;font-size: 12px;">6</span>

</div>

<div class="pg-content">

<div class="menu left">aa</div>

<div class="content left">