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.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- angular.js中提供的基础方法
angular.bind angular.callbacks angular.equals /* *Determines if two objects or two values are equiva ...
- BZOJ 1061 志愿者招募 最小费用流&&线性规划建模
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1061 题目大意: 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主 ...
- 8、Web Service-IDEA-jaxws规范下的 spring整合CXF
前提:开发和之前eclipse的开发有很大的不同! 1.服务端的实现 1.新建项目 此时创建的是web项目 2.此时创建的项目是不完整的需要开发人员手动补充完整 3.对文件夹的设置(满满的软件使用方法 ...
- 3、Web Service-Jaxws（Eclipse版本）
1.概述 开发手段: 使用jdk开发(1.6及以上的版本) 使用CXF框架开发 组成: -服务器端 -客户端 2.使用JDK开发 1).服务器端 -@WebService(SEI和SEI的实现类) - ...
- java读写本地xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <confi ...
- linux(Centos7系统)中安装JDK、Tomcat、Mysql
安装前准备两个工具:(360可以安装) 1.JDK的安装 使用yum命令安装 .查看是否已安装JDK # yum list installed |grep java .卸载CentOS系统Java环境 ...
- Android自定义控件——有弹性的ListView，ScrollView
上一次我们试验了有弹性的ScrollView.详情 这一次,我们来试验有弹性的ScrollView. 国际惯例,效果图: 主要代码: [java] view plaincopy import andr ...
- UVALive - 6837 Kruskal+一点性质（暴力枚举）
ICPC (Isles of Coral Park City) consist of several beautiful islands. The citizens requested constru ...
- iOS：时间相关（18-10-13更）
先整理出时间相关的程序,以后有空再写成单例. 1.日历(NSCalendar) 2.时间格式() 3.时间戳 附录: 1.定时器 1.日历(NSCalendar) 1.想要获取 世纪.年.月.日.时. ...
- Web | ES6的异步编程
js对于异步操作有三个解决方案,分别是Promise,generator,async/await. 下面分别说说这三种方案的一些基础. Promise promise对象用于表示一个异步操作的最终状态 ...