热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS后台布局实例

下面的例子是一个简单的布局最上面是header,左边是一个logo(老男孩),右边是用户的登录信息中间一大块是内容,内容左侧是菜单,右侧是具体的内容

下面的例子是一个简单的布局


最上面是header,左边是一个logo(老男孩),右边是用户的登录信息


中间一大块是内容,内容左侧是菜单,右侧是具体的内容


CSS 后台布局实例


代码如下:


body的margin为0,确保边上全部填满

absolute 确保位置不变; 注意如果他的父级标签有relative,他相对于这个父级标签的位置不变,否则相对于body的位置不变

overflow 在内容超过标签范围之后会自动加个滚轮

font-awesome插件可以使用现成的小标签


    
    
    
    
    
    
    
    
    
    
    
老男孩    
                              我的资料     注销    
    
                                                  a                         asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

    

asdf

asdf

asdf

asdf

asdf

                             


效果如下



推荐阅读
  • 使用HTML创建弹出框以便用户输入信息
    在做项目的过程中,我们时常需要进行一些弹框操作,比如在后台管理时需要进行的一些增删改操作,这个时候我们需要使用到弹框,或者在 ... [详细]
  • <!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]
  • 移动端常用单位——rem的使用方法和注意事项
    本文介绍了移动端常用的单位rem的使用方法和注意事项,包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值,以适应不同设备的屏幕大小。此外,还提到了rem目前在移动端的主流地位。 ... [详细]
  • css自适应字体样式?如果是一排文字,一个background‘red’;就搞定了。是多行的话,只有根据文字行高,用一张背景图横向重复。css样式自适应分辨率高度和宽度尽量使用百分 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • 本文介绍了一种在PHP中对二维数组根据某个字段进行排序的方法,以年龄字段为例,按照倒序的方式进行排序,并给出了具体的代码实现。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • Tooltips效果,鼠标经过显示提示 ... [详细]
  • JavaScript实现拖动对话框效果
    原标题:JavaScript实现拖动对话框效果代码实现:<!DOCTYPEhtml><htmllan ... [详细]
  • 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
  • 导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 本文讨论了在使用Git进行版本控制时,如何提供类似CVS中自动增加版本号的功能。作者介绍了Git中的其他版本表示方式,如git describe命令,并提供了使用这些表示方式来确定文件更新情况的示例。此外,文章还介绍了启用$Id:$功能的方法,并讨论了一些开发者在使用Git时的需求和使用场景。 ... [详细]
  • php将utf8转为gbk,php utf8怎么转gbk
    phputf8转gbk的方法:首先创建一个PHP示例文件;然后通过“iconv(UTF-8,gbkTRANSLIT,$str);”方法将字符串的 ... [详细]
author-avatar
black丶烽火
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有