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.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- How Flask Routing Works
@How Flask Routing Works The entire idea of Flask (and the underlying Werkzeug library) is to map UR ...
- Vuex、Flux、Redux、Redux-saga、Dva、MobX
https://www.jqhtml.com/23003.html 这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 Reac ...
- AESUtil 加密
package com.hxqc.basic.dependency.util; import org.apache.commons.lang.StringUtils; import sun.misc. ...
- BZOJ4653:[NOI2016]区间(线段树)
Description 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x ...
- Kubernetes 学习2 k8s基础概念
一.架构描述 1.基本架构 2.pod ,有两类 a.自主式pod 自我管理的,创建之后,任然是需要提交给API Server,API Server接受之后然后由调度器调度到指定的 node节点,由n ...
- [译] MVP模式的14条规则
笔者在前文<MVP和MVC>中提到了两者的区别,以及MVP日趋流行的原因:即随着各种给力UI框架的发布,View的功能越来越强,已经足以完成一些简单的不需要与后台或其他view交互的eve ...
- js尾巴
js中根据id获取标签: /** * 根据id获取标签 * @param {string}id * @returns {object} */ function $(id) { return typeo ...
- Linux本地数据上传到阿里云OSS
这篇文章主要是介绍如何将服务器本地的数据上传到阿里云OSS的指定bucket中,最重要的参考文档是数据迁移单机部署.我第一次上传数据到OSS上时,步骤要比前面的链接中介绍的要麻烦,ossimport工 ...
- Oracle 存储结构二
创建和管理表空间 创建表空间 典型语句: CREATE SMALLFILE TABLESPACE "JWTS" DATAFILE '/u01/app/oracle/oradata/ ...
- 苹果IPad客户端安装测试软件
背景: 公司在开发一个App应用,需要部署在苹果IPad上进行测试,但是我负责后端开发对安装及测试相关流程不了解.经过一番学习得出以下结论: 1. 首先申请一个苹果的开发账号(一千块左右),大约能注册 ...