观注别人的后台

对后台进行区块划分

目标，完成后台管理的布局

完成大体框架的布局

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!--开始 头部-->
<header></header>
<!--结束 头部--><!--开始 广告栏-->
<div class="adv"></div>
<!--结束 广告栏--><!--开始 主体-->
<section>
<!--    开始 主体左边--><div class="bdLeft"></div>
<!--    结束 主体左边--><!--    开始 主体右边--><div class="bdRight"></div>
<!--    结束 主体右边--></section>
<!--结束 主体--><!--开始 底部-->
<footer></footer>
<!--结束 底部--></body>
</html>

头部

通知栏广告 .adv

主体栏 .body

主体-左边 bdLeft

主体-右边 bdRight

底部

把样式，特效，图文资源专门安排一个目录存放

建立静态目录

html页面导入需要的静态文件

开始写样式，先写头部

阶段代码，样式代码：

*{margin:0;padding:0;list-style: none;text-decoration: none;
}header{background-color: yellow;height: 60px;min-width: 1200px;}

样式-主体结构完成

*{margin:0;padding:0;list-style: none;text-decoration: none;
}.clearfix:after{content:"";clear:both;display: block;
}/*头部*/
header{background-color: yellow;height: 60px;min-width: 1200px;
}/*广告*/
.adv{background-color: green;width: 1200px;height: 60px;margin: 10px auto;
}/*主体*/
section{width: 1200px;background-color: pink;margin: auto;
}section .bdLeft{width: 20%;/*background-color: blue;*//*height: 300px;*/float: left;}section .bdRight{width: 80%;background-color: gray;/*height: 300px;*/float: left;
}

头部的布局分析

css-演练-完成一个后台管理页面-不完整版相关推荐

利用vue编写一个后台管理页面
目录前期的准备: 项目的目录结构: 代码编辑: 1.登录界面(Login.vue文件)登录与注册切换的功能 2.注册界面(zhuce.vue文件) 3.首页(利用组件的方法完成) 兄弟们多话不说直接 ...
后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
Vue使用elementUI实现一个后台管理
Vue使用elementUI实现一个后台管理功能效果思路功能分析 1.安装 2.main.vue 3.App.vue 4.views (1) Home.vue (2) Classify.vue ...
使用妹子UI 开发后台管理页面
使用 Amaze UI 开发漂亮的后台管理页面,管理端登录页面.管理端列表页面.管理端保存页面. 页面布局样式使用固定定位和flex实现. 创作时间:2022年10月9日09:21:36 登录页面效果 ...
后台管理页面基本布局方式
经典页面布局简易后台管理页面布局 1 左边菜单栏固定 2 header固定高度(宽度自适应) 3 主体统计列表(宽度自适应) 代码如下 html <div class="main&q ...
Vue后台管理页面总体结构及主要功能设计
后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密.退出菜单.中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局.其中导航菜单可以用el-menu配 ...
用jquery-easyui的布局layout写后台管理页面
先在官网下载easyui文档引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...
二基于Django 简单后台管理页面
<1> 整个后台页面布局项目基于python的Django框架进行开发 ①实现用户登录 ②实现用户对自己数据的增删改查 (1)在app cmdb的models.py下创建用户数据表:用户表 ...
bootstrap搭建后台管理页面
bootstrap搭建后台管理页面管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚.其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了i ...

css-演练-完成一个后台管理页面-不完整版

观注别人的后台

完成大体框架的布局

头部

通知栏广告 .adv

主体栏 .body

主体-左边 bdLeft

主体-右边 bdRight

底部

把样式，特效，图文资源专门安排一个目录存放

开始写样式，先写头部

样式-主体结构完成

头部的布局分析

css-演练-完成一个后台管理页面-不完整版相关推荐

最新文章

热门文章