设计网页，让网页好看：网上找模板

  • 搜 HTML模板
  • BootStrap

一、内容回顾：

HTML

一大堆的标签：块级、行内

　　

CSS

position

background

text-align

margin

padding

font-size

z-index

over-flow

:hover

opacity

float (clear:both)

line-height

border

color

display

　　

二、页面布局之主站页面

主站布局一般不占满页面，分为菜单栏、主页面、底部 上中下三部分。伪代码如下：

<div class='pg-header'>

  <div style='width:980px;margin:0 auto;'>

    内容自动居中

  </div>

</div>

<div  class='pg-content'></div>

<div  class='pg-footer'></div>

　　

三、页面布局之后台布局

后台页面一般分为上面顶部菜单、左侧操作栏、中右为内容三部分。有的后台可能会有个底部栏。

首先，左侧操作栏和中间内容栏怎么分，按照百分比的话，为了防止页面拖拽导致布局变化，可以设置最小宽度：

width: 20%;

min-width: 200px;    /*当宽度小于200像素时生效*/　

其次，左侧操作栏一般都是直接到底的，高度怎么设置呢？

后台管理布局：position:

  • fixed – 永远固定在窗口的某个位置
  • relative – 单独无意义
  • absolute – 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。

1、后台布局之：fixed 实现

只能实现左边菜单栏一直固定在左边的这种情况。

<!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;

        }

        .pg-content .menu{

            position: fixed;

            top: 48px;

            left: 0;

            bottom: 0;

            width: 200px;

            background-color: #dddddd;

        }

        .pg-content .content{

            position: fixed;

            top: 48px;

            right: 0;

            bottom: 0;

            left: 200px;

            background-color: purple;

            overflow: auto;   /***************当内容多时，出现滚动条**************/

          /*不加overflow的话，内容多就不可见了*/

        }

    </style>

</head>

<body>

    <div class="pg-header"></div>

    <div class="pg-content">

        <div class="menu left">a</div>

        <div class="content left">

            <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

        </div>

    </div>

    <div class="pg-footer"></div>

</body>

</html>

　　

2、后台布局之：absolute 实现

通过改一个属性，就可以实现一下两种布局：

  • a. 左侧菜单跟随滚动条
  • b. 左侧以及上部不动

（仅更改了.pg-content .menu的position由fixed变为absolute；.pg-content .content的position由fixed改为absolute)

<!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;

        }

        .pg-content .menu{

            position: fixed;

            top:48px;

            left: 0;

            bottom: 0;

            width: 200px;

            background-color: #dddddd;

        }

        .pg-content .content{

            position: fixed;

            top: 48px;

            right: 0;

            bottom: 0;

            left: 200px;

            overflow: auto;   /*注释不注释，两种布局效果*/

        }

    </style>

</head>

<body>

    <div class="pg-header"></div>

    <div class="pg-content">

        <div class="menu left">a</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: purple;">

                <p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

            </div>

        </div>

    </div>

    <div class="pg-footer"></div>

</body>

</html>

　　

四、后台布局之菜单栏设计

后台管理页面一般顶部菜单栏，左侧有个logo，右侧有登录用户，以及报警信息，会话信息等。

  • 用户头像设计为圆的
border-radius: 50%;       /*设计头像图片是圆的*/
  • 鼠标移动过去之后，多个内容显示出不同的样式
<head>

    <style>

        .item{

            background-color: #dddddd;

        }

        .item:hover{

            color: red;

        }

        .item:hover .b{

            background-color: greenyellow;

        }

    </style>

</head>

<body>

    <div class="item">

        <div class="a">123</div>

        <div class="b">567</div>

    </div>

</body>

　　

  • 引入第三方css插件，好多图标就可以直接用了。

下载图标插件 —> The Icons 地址

总体实现

<!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"/>

    <!--导入第三方图片插件，目录里两个css，一个压缩版的一个没有压缩（压缩版是一行）-->

    <style>

        body{

            margin: 0;

        }

        .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: #204982;

            text-align: center;

        }

        .pg-header .icons{

            padding: 0 20px;

        }

        .pg-header .icons:hover{

            background-color: #204982;

        }

        .pg-header .user{

            margin-right: 60px;

            padding: 0 20px;

            color: white;

            height: 48px;

            position: relative;

        }

        .pg-header .user:hover{

            background-color: #204982;

        }

        .pg-header .user .a img{

            height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;

        }

        .pg-header .user .b{

            z-index: 20;

            position: absolute;

            /*相对于用户div定位*/

            top: 48px;

            right: 0;

            background-color: white;

            color: black;

            width: 160px;

            display: none;

            font-size: 14px;

            line-height: 30px;

        }

        .pg-header .user .b a{

            padding: 5px;

            color: black;

            text-decoration: none;

        }

        .pg-header .user .b a:hover{

            background-color: #dddddd;

        }

        .pg-header .user:hover .b{

            display: block;

        }

        .pg-header .user .b a{

            display: block;

        }

        .pg-content .menu{

            position: absolute;

            top:48px;

            left: 0;

            bottom: 0;

            width: 200px;

            background-color: #dddddd;

        }

        .pg-content .content{

            position: absolute;

            top: 48px;

            right: 0;

            bottom: 0;

            left: 200px;

            overflow: auto;

            z-index: 9;

        }

        /* 设置消息样式，数字外边加个圆圈 */

        .info {

            border-radius: 50%;

            line-height: 1px;

            background-color: red;

            padding: 10px 7px;

            font-size: 12px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="logo left">

            顺势而为

        </div>

        <div class="user right">

            <a class="a" href="#">

                <img src="22.jpg">

            </a>

            <!--鼠标放在头像上的下拉框-->

            <div class="b">

                <a href="#">我的资料</a>

                <a href="#">注销</a>

            </div>

        </div>

        <div class="icons right">

            <i class="fa fa-commenting-o" aria-hidden="true"></i>

            <!--从图标官网找图标引用语句复制下来 -->

            <span class="info">5 </span>  <!--比如5条消息-->

        </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">a</div>

        <div class="content left">

            <div style="background-color: purple">

                <p style="margin: 0;">a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

            </div>

        </div>

    </div>

    <div class="pg-footer"></div>

</body>

</html>

　　

HTML后台管理页面布局的更多相关文章

  1. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  2. python：页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 用jquery-easyui的布局layout写后台管理页面

    先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...

  4. 老男孩Day16作业：登录、注册、后台管理页面（动态）

    一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...

  5. HTML高级标签（2）————窗体分帧（2）————后台管理页面

    使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...

  6. 8 功能6：后台管理页面，编辑文章,xss攻击

    1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...

  7. go语言实战教程之 后台管理页面统计功能开发（2）

    上节内容介绍了后台管理页面统计功能开发(1),从功能介绍,到接口请求分析和归类,最后是代码设计.经过上节内容的介绍,已经将业务逻辑和开发逻辑解释清楚,本节内容侧重于编程代码实现具体的功能. 当日增长数 ...

  8. Django用户登陆以及跳转后台管理页面3

    Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...

  9. Django用户登陆以及跳转后台管理页面2

    请先写好以下,再来替换文件 Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html from django.shortcuts ...

随机推荐

  1. NLP（二十八）多标签文本分类

      本文将会讲述如何实现多标签文本分类. 什么是多标签分类?   在分类问题中,我们已经接触过二分类和多分类问题了.所谓二(多)分类问题,指的是y值一共有两(多)个类别,每个样本的y值只能属于其中的一 ...

  2. CCF2018 12 2题，小明终于到家了

    最近在愁着备考,拿CCF刷题,就遇到这个难题,最后搜索了一下大佬们的方法,终于解决, 问题描述 一次放学的时候,小明已经规划好了自己回家的路线,并且能够预测经过各个路段的时间.同时,小明通过学校里安装 ...

  3. 字符串学习笔记（二）---- StringBuffer

    一.相关介绍 1.StringBuffer介绍 StringBuffer对象是字符串缓冲区对象,用于存放数据的容器 2.StringBuffer特点 StringBuffer(字符串缓冲区对象)的长度 ...

  4. 分享一下,PHP实现第四方QQ微信扫码登陆,不接入qq互联以及微信开发者平台就可以实现用户对接鹅厂,phpQQ微信扫码登陆

    自己抓的QQ包以及整合了网上一些已经封装好了的代码具体如下:QQ: <?php class QQ extends Curl_Api { //获取登录验证码 public function QRc ...

  5. Nginx知多少系列之(二)安装

    目录 1.前言 2.安装 3.配置文件详解 4.Linux下托管.NET Core项目 5.Linux下.NET Core项目负载均衡 6.Linux下.NET Core项目Nginx+Keepali ...

  6. 微信小程序wx.setStorage(OBJECT)

    关于微信小程序的:wx.setStorage(OBJECT)在官网API介绍到:

  7. Tcl编程第四天，流程控制语句

    1. if {} { } elseif {} { } else { } 注意: 1.关键字 if elseif else 和大括号之间应该留有间距的.如果紧紧挨着会报错. 2.表条件的判断括号为大括号 ...

  8. k8s Service学习

    service的概念 kubernetes service定义了一个抽象概念,一个pod的逻辑分组,一种可以访问的策略---通常称为服务.这组pod能够被service访问到,通常通过label se ...

  9. Java中都通用文件下载（ContentType、文件头、response、out四步骤）

    Java中都通用文件下载(ContentType.文件头.response.out四步骤) 新浪微博:IT国子监(记得关注噢) http://weibo.com/itguozijian   我们就直接 ...

  10. JAVA—线程(Thread)

    1.线程的状态有哪些 我记得在操作系统原理的书上有一张具体的图,暂时找不到书... new:新建状态,被创建出来后未启动时的线程状态. runnable:就绪状态,表示可以运行. blocked:阻塞 ...