利用伪类清楚浮动：

代码：
  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. git submodule(转载）

    From:http://www.worldhello.net/2010/01/26/425.html 删除 git submodule (git 库子模组) 有两种情况会创建 git submodul ...

  2. vs 配置宏

    Win_$(PROCESSOR_ARCHITECTURE)_$(PlatformArchitecture) <==> Win_x86_64 OR Win_x86_32$(Configura ...

  3. 考虑virtual函数以外的选择

    在C++中,有四种选择可以替代virtual函数的功能: 1.non-virtual interface(NVI)手法,这是一种template method模式.它以public non-virtu ...

  4. java 复制文件

    package com.yunfengtech.solution.business; import java.io.*; public class copy { public static void ...

  5. Android 组件类继承关系结构图

  6. XE6 & IOS开发之免证书真机调试（1）：颁发属于自己的App签名证书（有图有真相）

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.自己给自己颁发证书, ...

  7. 72. Generate Parentheses && Valid Parentheses

    Generate Parentheses Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...

  8. NET映射导致的应用无法访问

    应用环境 IIS 数据库  oracle11G 服务器 windwos2003 企业版 周一早上刚到,听到业务部门的人反应,集团的扫码抢系统登陆不上了,没办法进行出入库操作,大批货物在仓库堆积,承运车 ...

  9. C++设计模式-Strategy策略模式

    Strategy策略模式作用:定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化,不会影响到使用算法的客户. UML图: Strategy模式将逻辑(算法)封装到一个类(Cont ...

  10. DES对称性加密

    using System; using System.Security.Principal; using System.Security.Permissions; using System.Secur ...