利用伪类清楚浮动：

代码：
  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. #include <objsafe.h>//OCX控件在IE8浏览器下不能使用问题

    一.OCX控件开发常见的问题 1.OCX控件在IE8浏览器下不能使用问题 原因:IE8会拦截OCX控件的方法. 解决方法:在OCX控件开发时加入安全接口. (1)在有"Crtl"字 ...

  2. 重写类的Equals以及重写Linq下的Distinct方法

    当自定义一个类的时候,如果需要用到对比的功能,可以自己重写Equals方法,最整洁的方法是重写GetHashCode()方法. 但是,这个方法只适用于对象自身的对比(如if(a==b))以及字典下的C ...

  3. 详解c++指针的指针和指针的引用(转)

    http://www.cnblogs.com/li-peng/p/4116349.html

  4. servlet filter和springMVC拦截器的区别

    参考 http://blog.csdn.net/ggibenben1314/article/details/45341855

  5. 搞定迅雷固件在TP-LINK WR720N,127.0.0.1 9000 获取不到激活码

    本帖最后由 exzzzipad 于 2014-7-2 22:33 编辑 基本情况:设备:TP-LINK WR720N目前固件:[antclan][20120825]720N-4M-NAS-withSA ...

  6. 网络编程（一）：用C#下载网络文件的2种方法

    使用C#下载一个Internet上的文件主要是依靠HttpWebRequest/HttpWebResonse和WebClient.具体处理起来还有同步和异步两种方式,所以我们其实有四种组合. 1.使用 ...

  7. ASP.net 中手工调用WS(POST方式)

    ASP.net 中手工调用WS(POST方式)核心代码:string strUrl="http://localhost:21695/service1.asmx/getmythmod" ...

  8. W5500EVB UDP模式的测试与理解-新华龙电子

    WIZnet 之前已经介绍过W5500EVB 在TCP模式下的两种(Server及Client)数据传输的实现过程,那么传输控制协议中,UDP也是非常常用的,这种无连接的协议在更多场合为用户提供了便捷 ...

  9. QT不同版本编译

    QT发布了不同版本,有一些语法修改,需要修改代码.同时旧版本代码转换需要在pro文件中添加代码greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

  10. vs2010通过添加资源文件，修改win32创建的窗口

    1.右键项目的“资源”,新建资源,生成.rc文件 2.进入资源视图创建icon或menu等资源 3.退出资源视图,编译这个.rc文件 4.项目源代码中添加如下几个头文件 #include " ...