CSS 页面布局、后台管理示例
CSS 页面布局、后台管理示例
页面布局
1、头部菜单
2、中间内容/中间左侧菜单
3、底部内容
<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>
内容自动居中
</div>
</div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
网站图片推荐：fontawesome.io
下载：font-awesome-4.7.0 推荐：使用压缩过的min
导入：放入当前路径
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
后台管理示例
后台管理2：加入overflow: auto;后左侧菜单不动
后台管理2：未加入overflow: auto;菜单跟随右侧延伸
后台管理2：两者切换更方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去间距*/
body {
margin: 0;
} .left {
float: left;
} .right {
float: right;
} /*头部菜单*/
.pg-header {
height: 48px;
background-color: #2459a2;
color: white;
} /*左边菜单内的.menu*/
.pg-content .menu {
position: fixed;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: cornflowerblue;
} /*y右边菜单内的.content*/
.pg-content .content {
position: fixed;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
background-color: powderblue;
/*加入滚动条*/
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">菜单</div>
<div class="content left">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
后台管理布局1 ：左侧菜单跟随滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去间距*/
body {
margin: 0;
} .left {
float: left;
} .right {
float: right;
} /*头部菜单*/
.pg-header {
height: 48px;
background-color: #2459a2;
color: white;
} /*左边菜单内的.menu*/
.pg-content .menu {
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: cornflowerblue;
} /*y右边菜单内的.content*/
.pg-content .content {
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
/*加入滚动条*/
/* */
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">菜单</div>
<div class="content left">
<div style=" background-color: powderblue;">
<p style=" margin: 0;">内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
后台管理布局2：左侧以及上部不动 **常用**
后台管理完整版
<!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> /*去页面间距*/
body{
margin: 0;
} /*标签左侧飘起*/
.left{
float: left;
} /*标签右侧飘起*/
.right{
float: right;
} /*头部菜单区域*/
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
/*设置文字上下居中*/
line-height: 48px;
} /*设置网站log区域*/
.pg-header .log{
/*log区域设置菜单大小*/
width: 200px;
background-color: darkblue;
/*设置文字左右居中*/
text-align: center;
} /* 其他图标区域边距设置*/
.pg-header .icons{
padding: 0 20px;
} /*消息提示个数文字背景色*/
.pg-header .zbjj {
border-radius: 50%;
display: inline-block;
padding: 10px 7px;
line-height: 1px;
background-color: red;
font-size: 12px;
} .pg-header .icons:hover{
background-color: darkblue;
} /*添加登陆管理区域*/
.pg-header .user{
/*user区域设置菜单大小*/
margin-right: 60px;
padding: 0 20px;
color: white;
/*飘起后防止出去*/
height: 48px;
/*user文字左右居中*/
/*text-align: center;*/
} /*鼠标点击后背景颜色更改*/
.pg-header .user:hover{
background-color:mediumslateblue ;
} /*用户头像图片*/
.pg-header .user .a img{
height: 40px;
width: 40px;
margin: 4px;
/*图片变为圆形*/
border-radius: 50%;
} /*用户选择框*/
.pg-header .user .b{
position: absolute;
top: 48px;
right: -1px;
width: 160px;
background-color: white;
color: black;
/*解决分层*/
z-index:20;
/*不适用当前函数*/
display: none;
} /*鼠标指向用户管理区域触发用户选择框*/
.pg-header .user:hover .b{
display: block;
} /*用户选择框解决分行*/
.pg-header .user .b a{
display: block;
} /*左边菜单内的.menu*/
.pg-content .menu{
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: cornflowerblue;
} /*y右边菜单内的.content*/
.pg-content .content{
position: absolute;
top:48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto;
z-index: 9;
} </style>
</head>
<body> <!--上部区域-->
<div class="pg-header">
<!--log-->
<div class="log left">
Kevin.Xiang
</div> <div class="user right" style="position: relative">
<!--点击头像跳转-->
<a class="a" href="#">
<!--添加图片-->
<img src="xsk.jpg">
</a>
<div class="b">
<a>我的资料</a>
<a>注销</a>
</div>
</div> <!--消息-->
<div class="icons right">
<i class="fa fa-comment-o" aria-hidden="true"></i>
<!--消息个数-->
<span class="zbjj">5</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">菜单</div>
<div class="content left">
<div style=" background-color: powderblue;">
<p style=" margin: 0;">内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p>
<p>内容</p><p>内容</p><p>内容</p>
</div>
</div>
</div> <!--底层区域-->
<div class="pg-footer"></div> </body>
</html>
后台管理
CSS 页面布局、后台管理示例的更多相关文章
- python：页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Python实例---基于页面的后台管理[简单版]
后台管理菜单 + 母板[css/content/js] 向后台提交数据[2种]: 1. 模态对话框(数据少操作,且Js复杂): form表单 :优点:简单,前端提交后后台处 ...
- css页面布局
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...
- CSS页面布局常见问题总结
在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂 ...
- css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
- CSS页面布局与网格（上）
1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样 ...
- css做的后台管理页面，不考虑ie8一下的
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- 第6天：DIV+CSS页面布局实战
今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...
随机推荐
- 基于EBNF语法的描述
基于JavaCC的语法描述 使用JavaCC从token序列中识别出"语句" “表达式” “函数调用” 等语法单位的方法. 只要为JavaCC描述“语句” “表达式” “函数调用” ...
- window下强制删除文件
在windows系统下,有时候总有一下没办法删除的文件,这个时候可以使用一个命令行脚本强行删除 步骤如下: 把以下代码保存为一个delete.txt文件 DEL /F /A /Q \\?\%1 RD ...
- vue+axios如何操作数据交互
参考: http://www.php.cn/js-tutorial-403543.html
- HTML load事件和DOMCOntentLoaded事件
JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行” 普通script标签会阻塞DOM的解析 DOMcontentLoa ...
- Codeforces 1136 - A/B/C/D/E - (Done)
链接:https://codeforces.com/contest/1136/ A - Nastya Is Reading a Book - [二分] #include<bits/stdc++. ...
- Ubuntu 18.04安装JDK并配置环境变量
1.官网下载jdk 下载链接 http://www.oracle.com/technetwork/java/javase/downloads/index.html 可以根据自己的系统进行下载 2.进行 ...
- jsp (二) 练习
package cn.sasa.serv; import java.io.IOException; import java.sql.SQLException; import java.util.Lis ...
- shell编程之awk命令详解
shell编程之awk命令详解 a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; out ...
- C++提供的四种新式转换--const_cast dynamic_cast reinterpret_cast static_cast
关于强制类型转换的问题,许多书都讨论过,写的最具体的是C++之父的<C++的设计和演化>. 最好的解决方法就是不要使用C风格的强制类型转换,而是使用标准C++的类型转换符:static_c ...
- 使用scrapy入门教程
创建项目 scrapy startprogect demo 创建爬虫 scrapy genspider myDomain madomian.com 直接创建文件也可以 运行爬虫 scrapy craw ...