day5 页面布局
1.主站
<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>
内容自动居中
</div>
</div> <div class='pg-content'></div> <div class='pg-footer'></div>
2.后台管理布局
position：
fixed --永远固定在窗口的某个位置
relative --单独无意义
absolute --第一次定位，可以在指定位置，滚轮滚动时，不在了
c ： 通用模板
overflow: auto; //在a和b模板中进行切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: ;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: ;
bottom: ;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top: 48px;
right: ;
bottom: ;
left: 200px;
overflow: auto; //在a和b模板中进行切换
}
</style>
</head>
<body>
<div class="pg-header"></div> <div class="pg-content">
<div class="menu left">aaa</div> <div class="content left">
<!--<div style="position: fixed;bottom: 0;right: 0;width: 50px;height: 50px">返回顶部</div>-->
<!--<div style="position: absolute;bottom: 0;right: 0;width: 50px;height: 50px">返回顶部</div>-->
<div style="background-color: mediumpurple;">
<p style="margin: 0;">ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p> </div>
</div>
</div> <div class="pg-footer"></div>
</body>
</html>
a 模板 ：左侧菜单跟随滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: ;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
}
.pg-content .menu{
width: %;
background-color: #dddddd;
min-width: 200px;
height: 500px;
}
.pg-content .content{
width: %;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="pg-header"></div> <div class="pg-content">
<div class="menu left">aaa</div> <div class="content left">
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
</div>
</div> <div class="pg-footer"></div>
</body>
</html>
b模板 左侧以及上不动 ****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: ;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
}
.pg-content .menu{
position: fixed;
top:48px;
left: ;
bottom: ;
width: 200px;background-color: #dddddd;
}
.pg-content .content{
position: fixed;
top: 48px;
right: ;
bottom: ;
left: 200px;
background-color: mediumpurple;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div> <div class="pg-content">
<div class="menu left">aaa</div> <div class="content left">
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
</div>
</div> <div class="pg-footer"></div>
</body>
</html>
3.后台布局练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<style>
body{
margin: ;
}
.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 .icons{
padding: 20px;
}
.pg-header .icons:hover{
background-color: #;
} .pg-header .user{
/*width: 160px;*/
/*background-color: wheat;*/
margin-right: 60px;
padding: 20px;
height: 48px;
color: white;
}
.pg-header .user:hover{
background-color: #;
} .pg-header .user .a img{
height: 40px;
width: 40px;
margin-top: 4px;
border-radius: %;
}
.pg-header .user .b{
z-index:;
position: absolute;
top: 48px;
right: -42px;
background-color:white;
color: black;
width: 144px;
display: none;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{
position: absolute;
top: 48px;
left: ;
bottom: ;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top: 48px;
right: ;
bottom: ;
left: 200px;
overflow: auto;
z-index: ;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">老男孩</div> <div class="user right" style="position: relative"> <a class="a" href="#">
<img src="22.png" />
</a>
<div class="b" >
<a>我的资料</a>
<a>注销</a>
</div>
</div> <div class="icons right">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span></span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i> </div>
</div> <div class="pg-content">
<div class="menu left">aaa</div> <div class="content left">
<!--<div style="position: fixed;bottom: 0;right: 0;width: 50px;height: 50px">返回顶部</div>-->
<!--<div style="position: absolute;bottom: 0;right: 0;width: 50px;height: 50px">返回顶部</div>-->
<div style="background-color: mediumpurple;">
<p style="margin: 0;">ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
<p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p> </div>
</div>
</div> <div class="pg-footer"></div>
</body>
</html>
day5 页面布局的更多相关文章
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- Xamarin+Prism开发详解五：页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- Linux磁盘管理.md
df df 即“可用磁盘”disk free,用于显示文件系统的磁盘使用情况.默认情况下 df 命令将以每块 1K 的单位进行显示所有当前已挂载的文件系统,如果你想以人类易读的格式显示 df 命令的输 ...
- 【[HEOI2016/TJOI2016]字符串】
码农题啊 上来先无脑一个\(SA\)的板子,求出\(SA\)和\(het\)数组 我们只需要从\(sa[i]\in[a,b]\)的所有\(i\)中找到一个\(i\)使得\(sa[i]\)和\(rk[c ...
- programming-languages学习笔记--第7部分
programming-languages学习笔记–第7部分 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src ...
- PHP扩展功能 ---- 伪静态
一.入门三部曲 1.什么是伪静态? 改写URL,以静态的url形式访问页面,但其实是用PHP一类的动态脚本来处理的. 2.为什么要用伪静态? 需要动态获取数据,但是又希望能够对搜索引擎友好. 3.怎么 ...
- Springboot时间参数格式化
@Configuration public class DateTimeFormatConfiguration extends WebMvcConfigurerAdapter { @Value(val ...
- jquery css选择器
1. $('node+next') == $('node').next() 2. $('node~siblings') == $('node').nextAll(); 3. :gt(index)大于i ...
- 二叉查找树(二叉排序树)(C语言）
#include<stdio.h> #include "fatal.h" struct TreeNode; typedef struct TreeNode *Posit ...
- 【Dubbo源码阅读系列】服务暴露之远程暴露
引言 什么叫 远程暴露 ?试着想象着这么一种场景:假设我们新增了一台服务器 A,专门用于发送短信提示给指定用户.那么问题来了,我们的 Message 服务上线之后,应该如何告知调用方服务器,服务器 A ...
- Linux下安装pip无法使用的情况
不知道有没有安装成功,首先先卸载软件 sudo apt-get purge --auto-remove python3-pip sudo apt-get update 然后在重新安装 sudo apt ...
- Web | DOM基本操作
基本概念 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使程序对该结构进行访问,从而改变文档的结构,样式和内容.DOM 将文档解析为一个 ...