利用伪类清楚浮动：

代码：
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>haha</title>
  6. <style>
  7. .left{
  8. float: left;
  9. }
  10. .clearfix:after{
  11. content:'.';
  12. clear: both;
  13. display: block;
  14. visibility: hidden;
  15. height:0;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <divstyle="background-color: red"class="clearfix">
  21. <divclass="left"style="height:100px;background-color: green">1</div>
  22. <divclass="left">2</div>
  23. </div>
  24. </body>
  25. </html>
效果：

 

自定义小尖角：

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. <style>
  7. .icon{
  8. display:inline-block;
  9. border-top:15px solid transparent;
  10. /*transparent 表示透明*/
  11. border-right:15px solid red;
  12. border-bottom:15px solid transparent;
  13. border-left:15px solid transparent;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <divclass="icon"></div>
  19. </body>
  20. </html>
 

后台管理布局一：

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>后台管理布局一</title>
  6. <style>
  7. /*去掉默认的边框*/
  8. body{
  9. margin:0;
  10. }
  11. /*工具栏样式*/
  12. .pg-header{
  13. height:48px;
  14. background-color:#9a9a9a;
  15. }
  16. /*菜单栏样式*/
  17. .pg-body .body-menu{
  18. position: absolute;
  19. top:48px;
  20. left:0;
  21. bottom:0;
  22. width:200px;
  23. background-color:#1abc9c;
  24. }
  25. /*内容样式*/
  26. .pg-body .body-content{
  27. position: absolute;
  28. top:48px;
  29. left:200px;
  30. right:0;
  31. background-color:#8a6d3b;
  32. /*bottom: 0;*/
  33. /*overflow: auto;*/
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <divclass="pg-header"></div>
  39. <divclass="pg-body">
  40. <divclass="body-menu"></div>
  41. <divclass="body-content">
  42. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  43. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  44. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  45. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  46. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  47. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  48. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  49. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  50. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  51. </div>
  52. </div>
  53. <divclass="pg-footer"></div>
  54. </body>
  55. </html>

后台管理布局二：

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>后台管理布局二</title>
  6. <style>
  7. body{
  8. margin:0;
  9. }
  10. .pg-header{
  11. height:48px;
  12. background-color:#2459a2;
  13. }
  14. .pg-body .body-menu{
  15. position: absolute;
  16. top:48px;
  17. left:0;
  18. bottom:0;
  19. width:200px;
  20. background-color: red;
  21. }
  22. .pg-body .body-content{
  23. position: absolute;
  24. top:48px;
  25. left:210px;
  26. right:0;
  27. background-color: green;
  28. bottom:0;
  29. overflow:auto;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <divclass="pg-header"></div>
  35. <divclass="pg-body">
  36. <divclass="body-menu"></div>
  37. <divclass="body-content">
  38. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  39. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  40. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  41. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  42. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  43. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  44. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  45. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  46. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  47. </div>
  48. </div>
  49. <divclass="pg-footer"></div>
  50. </body>
  51. </html>
从上面两个例子可以体会
bottom: 0;
overflow: auto;
同时使用的效果。

web之css伪类的更多相关文章

  1. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  2. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  3. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  4. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  5. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  6. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  7. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  8. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

  9. CSS伪类

    CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...

随机推荐

  1. mysql临时表的产生

    sql执行会生成一个巨大的临时表,当内存放不下时,要全部copy 到磁盘,导致IO飙升,时间开销增大. 额外收获知识收藏如下: 临时表存储 MySQL临时表分为"内存临时表"和&q ...

  2. translate和replace的区别

    今天在oracle数据库中看到replace和translate的嵌套就有点蒙了,于是就上网看了一下,感觉豁然开朗: 今天遇到的问题如下: replace(TRANSLATE(a.deal_msg,' ...

  3. jsoncpp初使用

    一 前言 由于最近一个c++项目需要使用json这种数据格式来传输数据, so上网去寻找合适的类库,毕竟对于这种不是很新的技术, 自己造轮子有点得不偿失. 从百度上翻了翻, 基本上就boost跟jso ...

  4. vbox下创建共享存储

    1.创建共享盘VBoxManage.exe createhd -filename D:\VM\linux01\ocr_vote.vdi -size 2048 -format VDI -variant ...

  5. mvc4 发布，遇到 403.14 问题，并且iis提示打开目录浏览。。。解决办法

    经测试,只需要在web.config的system.web的同级节点,添加如下代码,即可完美运行.原理参考文章:一.<validation validateIntegratedModeConfi ...

  6. eworkflow工作流系统在iis中发布

    eworkflow工作流系统在iis中发布 win7下面的iis发布eworkflow工作流系统,要带虚拟目录的,如发布成http://localhost/eworkflow/login.aspx这样 ...

  7. C程序与Lua脚本相互调用

    Lua脚本是一种可用于C程序开发/测试的工具,本篇介绍一下C程序与Lua脚本如何进行相互调用,更加详细的操作参见<Programing in Lua>.本文分为3个部分:1.Windows ...

  8. JQ判断复选框是否选中

    方法一: if($('#checkbox').is(':checked')) {} 方法二:if ($('#checkbox').attr('checked')) {} 方法三:if ($(" ...

  9. jQuery validate兼容IE8写法

    最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. ...

  10. 关于MAC

    以太LAN网中发送的分组称做帧,包含7个字段 MAC帧格式 前同步码 SFD DA SA 长度或类型 数据域 CRC 7字节,物理层加入 帧首定界符,1字节 目的地址,6字节 源地址,6字节 2字节 ...