结构、表现和行为分离，不仅是一项技术，更主要的是一种思想，当我们拿到一个网页时，先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写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. Core Animation编程指南

    本文是<Core Animation Programming Guide>2013-01-28更新版本的译文.本文略去了原文中关于OS X平台上Core Animation相关内容.因为原 ...

  2. threading使用心得

    需求:监控多个重要网站(多线程),出现访问异常重试2次,第三次开始告警. 日志模块 import logging import logging.config # 日志配置 LOGCONF_FILENA ...

  3. JAVA敏捷开发环境搭建

    前面介绍了创业型软件公司的工作模式,这里详细介绍下如何实施,第一步是先要搭建环境,有了环境才能开展工作. 整个软件项目分为四个环境 开发本地环境.开发环境.测试环境.IDC环境.和传统C++开发不一样 ...

  4. 初学Hibernate持久化

    hibernate三种持久化对象状态:(持久化对象:Persistent Object=POJO + hbm映射) 1.瞬时状态(临时状态或自由态):PO对象刚创建(即new)开始进入瞬时状态,此时对 ...

  5. apache安装后编译新模块

    1.下载对应版本的源码包 2.解压后找到modules/mappers目录并进入 3.运行如下命令自动编译.安装和修改httpd.conf文件: /usr/sbin/apxs -c -i -a mod ...

  6. Linux建立软连接

    实例:ln -s /home/gamestat    /gamestat linux下的软链接类似于windows下的快捷方式 ln -s a b 中的 a 就是源文件,b是链接文件名,其作用是当进入 ...

  7. 【原创】express3.4.8源码解析之中间件

    前言 注意:旧文章转成markdown格式. 中间件(middleware)的概念来自于TJ的connect库,express就是建立在connect之上. 就如同connect的意思是 连接 一样, ...

  8. git 笔记- 概念

    本文参考书中内容 http://cnpmjs.org/ 镜像文件 下载插件的镜像 可参考fis 对于任何一个文件,在Git 内都只有三 种状态:已提交(committed),已修改(modified) ...

  9. thinkphp中模块和操作映射

    模板和操作映射功能是3.1.2版本支持的对模块和操作设置的映射机制,由于可以通过改变配置动态改变(实际真正改变,并非别名)URL访问地址,加强了应用的安全性,而且,映射机制具有URL不区分大小写访问的 ...

  10. xcode6以后, 使用.pch

    http://blog.csdn.net/lihuiqwertyuiop/article/details/39268101 总结: . 创建.pch文件 . Apple LLVM 6.1 - Lang ...