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

　　案例一：微博对话框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style type="text/css">

/*reset*/

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"}

/*公共样式*/

body{ padding-top:50px; line-height:20px}

.userPic{padding:5px; border:1px #ccc solid}

.demo01, .demo02{ margin-bottom:20px}

p{ text-indent:2em}

/*初级*/

.demo01{width:600px; overflow:hidden}

.demo01 .left{ width:100px; float:left}

.demo01 .left .userPic{margin-left:20px}

.demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}

.demo01 .right h6{ margin-bottom:5px}

.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}

/*中级*/

.demo02{width:600px; overflow:hidden}

.demo02 .userPic{float:left; margin-left:20px}

.demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}

.demo02 .right h6{ margin-bottom:5px}

.demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px}

/*高级*/

.demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px}

.demo03 h6{ margin-bottom:5px}

.demo03 .dialog p{text-indent: 2em; line-height:20px}

.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}

.demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;}

</style>

</head>

<body>

<!---demo01----------------------------------->

    <div class="demo01">

        <div class="left">

            <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />

        </div>

        <div class="right">

            <span class="pubTime">10分钟前</span>

            <h6>樱桃小丸子</h6>

              <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>

        </div>

    </div>

<!---demo02----------------------------------->

    <div class="demo02">

        <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />

        <div class="right">

            <span class="pubTime">10分钟前</span>

            <h6>樱桃小丸子</h6>

            <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>

        </div>

    </div>

<!---demo03----------------------------------->

    <div class="demo03">

        <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />

        <h5>樱桃小丸子</h5>

        <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>

        <span class="pubTime">10分钟前</span>

    </div>

</body>

</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. Linux强制访问控制机制模块分析之mls_type.h

    2.4.2 mls_type.h 2.4.2.1文件描述 对于mls_type.h文件,其完整文件名为security/selinux/ss/mls_types.h,该文件定义了MLS策略使用的类型. ...

  2. Entity Framework 学习总结之一：ADO.NET 实体框架概述

    http://www.cnblogs.com/xlovey/archive/2011/01/03/1924800.html ADO.NET 实体框架概述 新版本中的 ADO.NET 以新实体框架为特色 ...

  3. 简单了解Hibernate核心API

    一.SessionFactory 1.它代表的是数据库的连接,其实就是在hibernate.cfg.xml文件中的配置信息 2.可以预定义SQL语句 3.SessionFactory是线程安全的,它维 ...

  4. JavaScript中的位置坐标

    参考来源 http://www.cnblogs.com/tugenhua0707/p/4501843.html screenX.screenY:浏览器屏幕水平.垂直坐标(相对于浏览器内整个屏幕,包括地 ...

  5. DataGridView设置不自动显示数据库中未绑定的列

    项目中将从数据库查出来的数据绑定到DataGridView,但是不想显示所有的字段.此功能可以通过sql语句控制查出来的字段数目,但是DataGridView有属性可以控制不显示未绑定的数据,从UI层 ...

  6. SSN 社会安全号码

    SSN是 Social Security Number 的缩写,译为「社会安全号码」,为美国社会安全卡(Social Security Card)上的 9 位数字.SSN 原本目的是用于追踪个人的纳税 ...

  7. Excel加密的Sheet如何hack

    Excel的加密sheet如何hack: 思路:在VBA中添加穷举法模块函数并运行 源代码: Sub PasswordBreaker() 'Breaks worksheet password prot ...

  8. PHP程序员，因该养成 7 个面向对象的好习惯

    在 PHP 编程早期,PHP 代码在本质上是限于面向过程的.过程代码 的特征在于使用过程构建应用程序块.过程通过允许过程之间的调用提供某种程度的重用. 但是,没有面向对象的语言构造,程序员仍然可以把 ...

  9. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  10. Bridge 使用