后台管理页面布局
一、整体分布简单的一个页面布局,头部、左侧菜单栏,右侧内容,头部和菜单栏固定位置,内容部分如果很长就会出现滚动条 两种方法能实现,其实两种差别只有一个属性不一样。 1.1 使用position:fixed 1.先定义三个div标签
2.设定头部样式,高48px,背景色蓝色
顶部出现一个蓝色长条
3.在pg_content里划分出两个区域,一个左侧菜单栏,一个右侧内容区 一般会要求左侧菜单栏能固定位置,一直显示在左侧,高度就是整个浏览器高度 左侧增加一个灰色长条:
4.同样我们想要右侧的内容区也能像菜单栏一样,固定位置、并占据整个右侧位置。并且在内容过长时,会出现滚动条(overflow实现) 当内容很长时,会出现滚动条:
1.2 使用position:absolute ? 第二种方法相比第一种方法,只需将position:fixed改为position:absolute 再为content增加一个最小宽度的属性,当浏览器缩小时,小于一定宽度是,就会出现横滚动条,可以防止页面内容布局错乱,但是这样header也需要修改一下,加了最小宽度以后,header在有横滚动条时宽度无法满屏 整体效果和上一个差不多:
二、头部设计2.1 头部左侧增加logo (1)首先定义两个经常用到的float css样式
(2)在header下定义一个div 增加了logo:
2.2 header右侧增加登入信息 (1)头像 右侧个人信息其实只要一个头像,鼠标移到头像上时,会有信息框出现 出现头像:
(2)增加一个div,用于显示信息和操作,其位置相对于peron_info固定 这样完成后还是不行,因为看不到这个标签,我们需要对pg_header也增加一个z-index属性,设置值为10
? (3)默认情况下是看不到info这个标签的,所以还需要对info的css样式增加display:none属性 (4)显示info标签 增加了display:none后,信息标签默认看不到,现在的需求是鼠标移到person_info这个div标签时,info标签显示 鼠标移到头像出就显示信息:
? ? 2.3 插入图标 ? 头部信息中通常还有邮件和提醒服务存在,也就是插入一下图标,登入后提示一下信息需要处理。 需要的图标可以在https://fontawesome.com中去下载,并放到自己的项目中。
(1)寻找图标 在下载图标的网站上寻找需要的图标
点击相应的图标,拷贝
(2)增加邮件和铃铛的图标 效果:
(3)增加消息数量显示 如果有3封邮件,就在邮件旁边显示数字3 效果:
?
完整html: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |