结构、表现和行为分离，不仅是一项技术，更主要的是一种思想，当我们拿到一个网页时，先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写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. 数组添加：如何往数组的"null"位置插入数据呢？

    数组添加,当已经存在的一个数组时,如何往数组的"null"位置插入数据呢? 分析: 1.循环遍历数组元素,找出null的位置(下标) 2.设置一个变量,接收null位置下标值 3. ...

  2. Struts2 自定义Result

    注意:我只要是解决自定义返回Json 和异常处理问题 新建一个类 AjaxResult   继承 StrutsResultSupport 看看代码吧 public class AjaxResult e ...

  3. jquery------.resizable()的使用

    index.jsp //加上这两行代码,右下角会有样式效果<link rel="stylesheet" href="//code.jquery.com/ui/1.1 ...

  4. Mongo报如下类似错误时的修改方法Cannot natively represent the long 1396367483000 on this platform

    今天通过php连接mongodb,并读取数据时,其中一个字段为: "createTime":NumberLong("1397524645000"),由于太长,一 ...

  5. 初识A*算法

    写这篇文章的初衷是应一个网友的要求,当然我也发现现在有关人工智能的中文站点实在太少,我在这里抛砖引玉,希望大家都来热心的参与. 还是说正题,我先拿A*算法开刀,是因为A*在游戏中有它很典型的用法,是人 ...

  6. ecshop后台导航修改教程说明

    ecshop后台导航修改教程说明 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2014-06-25   需要操作的文件为: 1.修改admin\includes\in ...

  7. Deep Learning in a Nutshell: Core Concepts

    Deep Learning in a Nutshell: Core Concepts This post is the first in a series I’ll be writing for Pa ...

  8. 高速公路（Highway，ACM/ICPC SEERC 2005,UVa1615)

    I think: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <m ...

  9. 锋利的jQuery-4--给事件添加命名空间

    可以把为元素绑定的多个事件用命名空间规范起来. $(function(){ $("p").bind("mouseover.plugin", function() ...

  10. javascript常量

    javascript中没有常量的概念,虽然许多现代的变成环境可能为您提供了用以创建常量的const语句.对于的自己的变量,可以采用相同的命名约定,并且将他们以静态属性的方式添加到构造函数中. //构造 ...