页面布局 - 走看看

zoukankan html css js c++ java

页面布局

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
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 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
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassass</div>
 </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{
 /*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 class="a" href="#"> 
 <img src="22.jpg">
 </a>
 <div class="b" >
 <a>我的资料</a>
 <a>注销</a>
 </div>
 </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>
 <div class="pg-content">
 <div class="menu left">aa</div>
 <div class="content left">
 
 
 <div style="background-color: purple;">
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassassass
 assassass</div>
 </div>
 </div>
 <div class="pg-footer"></div>

</body>
</html>

position:
 fixed --永远固定在窗口的某个位置
 relative -- 单独无意义
 absolute --第一次定位可以在指定位置，滚轮滚动时不在了
 p标签默认有边距
min- 980px; 当浏览器显示的最小宽度小于980px时,下边会出现滚动条
overflow: auto; 切换两种布局s3.html s4.html
border-radius: 50% 变成圆形

.pg-header .user:hover .b{
 display: block;
 }当鼠标放到user下时，自动设置user下的b标签显示出来

padding:0 20px; 上下0 左移20px

line-height: 1px 图标占自己的高度

S4-1.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>
 .item{
 background-color: #dddddd;
 }
 .item:hover{
 color: red;
 }
 .item:hover .b{
 background-color: green;
 }
 </style>
</head>
<body>
 <div class="item">
 <div class="a">
 
 </div>
 <div class="b">456</div>
 </div>
</body>
</html>

.item:hover .b{} 当鼠标上面这个hover时为b加上这个样式

查看全文

相关阅读:
「LibreOJ β Round #4」子集
 「LibreOJ β Round #4」框架
 「LibreOJ β Round #4」游戏
 [HNOI2008]GT考试
 [HNOI2008]水平可见直线
 UVA 1650 Number String
[USACO14JAN]Recording the Moolympics
UVA 1390 Interconnect
UVA 12520 Square Garden
[HNOI2008]神奇的国度

原文地址：https://www.cnblogs.com/leiwenbin627/p/10703818.html