利用伪类清楚浮动：

代码：
  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. 通过单元测试理解spring容器以及dubbo+zookeeper单元测试异常处理

    一.先说一个结论:单元测试与主项目的spring容器是隔离的,也就是说,单元测试无法访问主项目spring容器,需要自己加载spring容器. 接下来是代码实例,WEB主项目出于运行状态,单元测试中可 ...

  2. Oracle 游标示例，带异常处理

    Oracle游标示例一则,带异常处理. DECLARE CURSOR c_dl IS SELECT ID, NSRSBH, WSPZXH, ZXYY_DM, HZRQ, SWJG_DM, GXSJ F ...

  3. APP UI设计及切图规范

    APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...

  4. Python基础篇【第6篇】: Python模块subprocess

    subprocess Python中可以执行shell命令的相关模块和函数有: os.system os.spawn* os.popen*          --废弃 popen2.*         ...

  5. hmtl弹出框样式

    @model Web.Manager.Models.SendMessage @{ ViewBag.Title = "消息发布"; Layout = null;} <link ...

  6. NDK问题总结

    转自 这篇文章中很多东西!!:http://blog.chinaunix.net/uid-20746260-id-3910616.html 1. 创建JNI头文件 在工程目录下输入: javah -c ...

  7. 2、NASA HS3（Hurricane AND Server Storm Sentinel）

    国内访问不到,但是通过ppt可以看到,数据支撑做的很到位,前台展示很炫.  气象领域WebGL应用最好案例的当之无愧啊.这篇全部贴图了. 来自为知笔记(Wiz)

  8. 解决触摸屏设备click事件300ms的延迟的问题

    从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.300ms的等待 ...

  9. GitHub的.gitignore文件设置

    用Eclipse连接GitHub 在本地仓库(最上层文件夹)建立.gitignore文件后,所有子文件夹下对应文件或者文件夹在submit的时候就会被忽略. 我将Eclipse的workspace当作 ...

  10. Programming Entity Framework 翻译(2)-目录2-章节

    How This Book Is Organized 本书组织结构 Programming Entity Framework, Second Edition, focuses on two ways ...