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)的主页,真 ...
随机推荐
- Qt编写自定义控件5-柱状温度计
前言 柱状温度计控件,可能是很多人练手控件之一,基本上都是垂直方向展示,底部一个水银柱,中间刻度尺,刻度尺可以在左侧右侧或者两侧都有,自适应分辨率改动,有时候为了美观效果,可能还会整个定时器来实现动画 ...
- LeetCode - Subarray sum equals k
Given an array of integers and an integer k, you need to find the total number of continuous subarra ...
- N - Asteroids
Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x N g ...
- SIP消息
SIP消息有两种类型:从客户机到服务器的请求消息(Request)和从服务器到客户机的响应消息(Response). 呼叫控制请求: --INVITE:发起呼叫,并对会话进行描述 --ACK:主叫确认 ...
- 剑指offer——python【第56题】删除链表中的重复节点
题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...
- python——shopping car
# _Author:huang# date: 2017/11/26 # 简单的购物车程序money = input("money:") product_list = [ (&quo ...
- 关于ie浏览器信任站点的代码
1检测用户当前浏览器是否将域名的ip添加信任站点 js代码 //域名ip的获取 var hostname = window.location.hostname; var WshShell ...
- KMP algorithm challenge string.Contains
KMP: public int KMP (ReadOnlySpan<char> content, ReadOnlySpan<char> span) { _next = new ...
- [No0000197]Windows用户都应该知道的运行命令
通过"运行"命令,运行Windows丰富工具的方法.如果您知道工具或任务的相应"运行"命令,那么您就知道访问所述工具或任务的最快方法. 以下是我们最喜欢的Run ...
- 全文索引&&地理空间索引
Ⅰ.全文索引 搜索引擎的实现核心技术,搜索类似where col like '%xxx%';关键字可以出现再某个列任何位置 这种查询条件,B+ tree索引是无法使用的.如果col上创建了索引,因为排 ...