结构、表现和行为分离，不仅是一项技术，更主要的是一种思想，当我们拿到一个网页时，先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。，减少HTML与CSS耦合度。

　　案例一：微博对话框

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="智能社 - zhinengshe.com" />
  6. <meta name="copyright" content="智能社 - zhinengshe.com" />
  7. <title>智能社 - www.zhinengshe.com</title>
  8.  
  9. <style type="text/css">
  10. /*reset*/
  11. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}
  12.  
  13. /*公共样式*/
  14. body{ padding-top:50px; line-height:20px}
  15. .userPic{padding:5px; border:1px #ccc solid}
  16. .demo01, .demo02{ margin-bottom:20px}
  17. p{ text-indent:2em}
  18.  
  19. /*初级*/
  20. .demo01{width:600px; overflow:hidden}
  21. .demo01 .left{ width:100px; float:left}
  22. .demo01 .left .userPic{margin-left:20px}
  23. .demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
  24. .demo01 .right h6{ margin-bottom:5px}
  25. .demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}
  26.  
  27. /*中级*/
  28. .demo02{width:600px; overflow:hidden}
  29. .demo02 .userPic{float:left; margin-left:20px}
  30. .demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
  31. .demo02 .right h6{ margin-bottom:5px}
  32. .demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px}
  33.  
  34. /*高级*/
  35. .demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px}
  36. .demo03 h6{ margin-bottom:5px}
  37. .demo03 .dialog p{text-indent: 2em; line-height:20px}
  38. .demo03 .userPic{ float:left; margin:-20px 0 0 -100px}
  39. .demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;}
  40. </style>
  41. </head>
  42.  
  43. <body>
  44. <!---demo01----------------------------------->
  45.     <div class="demo01">
  46.         <div class="left">
  47.             <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
  48.         </div>
  49.  
  50.         <div class="right">
  51.             <span class="pubTime">10分钟前</span>
  52.             <h6>樱桃小丸子</h6>
  53.               <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
  54.         </div>
  55.     </div>
  56.  
  57. <!---demo02----------------------------------->
  58.     <div class="demo02">
  59.         <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
  60.         <div class="right">
  61.             <span class="pubTime">10分钟前</span>
  62.             <h6>樱桃小丸子</h6>
  63.             <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
  64.         </div>
  65.     </div>
  66.  
  67. <!---demo03----------------------------------->
  68.     <div class="demo03">
  69.         <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
  70.         <h5>樱桃小丸子</h5>
  71.         <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
  72.         <span class="pubTime">10分钟前</span>
  73.     </div>
  74.  
  75. </body>
  76. </html>

　　案例二：网页换肤（相同HTML，不同CSS）

一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则的更多相关文章

  1. HTML+CSS结构与表现原则

    CSS网页布局即版式布局,是网页设计师将有限的视觉元素进行有机的排列组合.主要通过CSS的浮动.定位功能来实现UI设计的布局要求. 常见的布局有:一列布局,两列布局,三列布局和混合布局. HTML清除 ...

  2. 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

    1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...

  3. 网页简单布局之结构与表现原则（HTML/CSS）

    结构 样式 行为真正的分离 前端初级人员会在页面上单纯的用各个div把相关内容独立开: 前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写: 前端高级人员会以及其简单的和稳定的方 ...

  4. 【WEB基础】HTML & CSS 基础入门（10）布局与定位

    块级元素和行内元素 HTML里的元素可以分为块级元素和行内元素两大类:

  5. CSS 基础：HTML 标记与文档结构(1)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  6. 网页布局（html＋css基础）

    一.如何用CSS进行网页布局 二.网页布局基础 三.网页简单布局之结构和表现原则 四.CSS Sprite雪碧图应用 什么叫布局? 网页的特点: 网页自适应宽度: 网页长度无限延长: (分栏也叫分列, ...

  7. css基础 -文本溢出 text-overflow:ellipsis;

    .className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...

  8. HTML/CSS基础知识（四）

    WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...

  9. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

随机推荐

  1. Maven学习笔记-02-Maven项目打包配置与测试

    一 Maven项目打包配置 1 为整个项目统一指定字符集 <properties> <project.build.sourceEncoding>UTF-</project ...

  2. Oracle闪回技术之一Oracle 11g 利用FlashTable (闪回表)恢复（用delete）误删的数据

    闪回表,实际上就是将表中的数据快速恢复到过去的一个时间点或者系统改变号SCN上.实现表的闪回,需要用到撤销表空间相关的UNDO信息,通过SHOW PARAMETER UNDO命令就可以了解这些信息.用 ...

  3. C/C+小记

    1.struct与typedef struct struct Student{int a;int b}stu1; //定义名为Student的结构体,及一个Student变量stu1 struct { ...

  4. Ward BRDF实现心得

    最近做了Ward BRDF的实现,相对于之前的lambert,phong来说,Ward是一个真正意义上的各向异性BRDF,但同样的,Ward模型也是一个基于经验的模型,并不是物理上正确的.它由ward ...

  5. how to combine jpg + separate alpha in png?

    http://www.tasharen.com/forum/index.php?topic=4018.msg19784#msg19784 I have tons of large sprites, I ...

  6. C语言转换大小写

    #include <stdio.h> #include <ctype.h> // Contains the tolower prototype void main (void) ...

  7. 整理时下流行的浏览器User-Agent大全

    总结整理时下流行的浏览器User-Agent大全 此文章转至:http://www.360doc.com/content/12/1012/21/7662927_241124973.shtml 用于学习 ...

  8. redis和memcached比较

    1.Memcached采用客户端-服务器的架构,服务器维护了一个键-值关系的数据表,服务器之间相互独立,互相之间不共享数据也不做任何通讯操作.客户端需要知道所有的服务器,并自行负责管理数据在各个服务器 ...

  9. 分页控件-ASP.NET（AspNetPager）

    AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件: <div class="oa-el ...

  10. [Effective JavaScript 笔记] 第6条：了解分号插入的局限

    分号可以省略 js可以在语句结束不强制加分号.(建议还是添加,不添加分号往往会出现不易发现的BUG) function Point(x,y){ this.x=x||0; this.y=y||0; } ...