结构 样式 行为真正的分离

  • 前端初级人员会在页面上单纯的用各个div把相关内容独立开；
  • 前端中级人员明白相关属性的设置会给元素带来什么改变，从而减少div的书写；
  • 前端高级人员会以及其简单的和稳定的方式实现相应的效果。

代码展示：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <style>

      .demo1 {

        height: 300px;

        width: 500px;

        padding: 5px;

      }

      .demo1 .left {

        float: left;

        height: 280px;

        width: 180px;

      }

      .demo1 .left img {

        background: blue;

        height: 50px;

        width: 50px;

      }

      .demo1 .right {

        float: right;

        height: 280px;

        width: 256px;

        border: 1px solid green;

      }

      .demo2 {

        height: 300px;

        width: 500px;

        padding: 5px;

      }

      .demo2 img {

        float: left;

        background: blue;

        height: 50px;

        width: 50px;

      }

      .demo2 .right {

        float: right;

        height: 280px;

        width: 256px;

        border: 1px solid green;

      }

      .demo3 {

        height: 300px;

        width: 450px;

        padding: 5px;

        margin-left: 50px;

      }

      .demo3 img {

        float: left;

        margin: 10px 0 0 -50px;

        background: blue;

        height: 50px;

        width: 50px;

      }

      .demo3 p {

        float: right;

        height: 280px;

        width: 256px;

        border: 1px solid green;

      }

    </style>

  </head>

  <body>

    <!--初级-->

    <div class="demo1">

      <div class="left">

        <img src="" alt="" />

      </div>

      <div class="right">

        <p>内容</p>

      </div>

    </div>

    <br />

    <!--中级-->

    <div class="demo2">

      <img src="" alt="" />

      <div class="right">

        <p>内容</p>

      </div>

    </div>

    <br />

    <!--高级-->

    <div class="demo3">

      <img src="" alt="" />

      <p>内容</p>

    </div>

  </body>

</html>
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

      /*公共样式*/

      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结构和语义化，然后考虑布局和表现形式。

网页简单布局之结构与表现原则（HTML/CSS）的更多相关文章

  1. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

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

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

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

  3. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  4. WPF简单布局 浅尝辄止

            WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自 ...

  5. 如何优化你的布局层级结构之RelativeLayout和LinearLayout及FrameLayout性能分析

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/51159419 如何优化你的布局层级结构之RelativeLayout和LinearLa ...

  6. aspx网页相对布局

    网页的布局 <body bgcolor="#b6b7bc"> <form id="form1" runat="server" ...

  7. C# 网络编程之网页简单下载实现

    这是根据<C#网络编程实例教程>中学到的知识实现的一个C#网页简单下载器,其中涉及到的知识主要是HTTP协议编程中相关类:HttpWebRequest类.HttpWebResponse类. ...

  8. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  9. FFmpeg源代码简单分析：结构体成员管理系统-AVOption

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

随机推荐

  1. 【Ubuntu】命令记录

    cp 该命令的功能是将给出的文件或目录拷贝到另一文件或目录中,就如同DOS下的copy命令一样,功能非常强大. 语法: cp [选项] 源文件或目录 目标文件或目录 说明:该命令把指定的源文件复制到目 ...

  2. Java:对象的强、软、弱和虚引用的区别

    1．对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从JDK ...

  3. Eclipse/MyEclipse如何快速提取变量（最强帮手）

    不多说,直接上干货! Eclipse里如何快速提取变量? 按alt+shift+l MyEclipse里如何快速提取变量? 按alt+shift+l 成功!快速提取变量 扩展学习 Eclipse/My ...

  4. 几种流行的开源WebService框架Axis1,Axis2,Xfire,CXF,JWS比较

    几种流行的开源WebService框架Axis1,Axis2,Xfire,CXF,JWS比较 来源   XFire VS Axis XFire是与Axis2 并列的新一代WebService平台.之所 ...

  5. 定时删除elasticsearch索引

    从去年搭建了日志系统后,就没有去管它了,最近发现大半年各种日志的index也蛮多的,就想着写个脚本定时清理一下,把一些太久的日志清理掉. 脚本思路:通过获取index的尾部时间与我们设定的过期时间进行 ...

  6. JVM的监控命令

    JVM监控命令基本就是 jps.jstack.jmap.jhat.jstat 几个命令的使用就可以了 JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConsole外 ...

  7. CI中使用log4php调试程序

    下载log4php.我下载的版本是:apache-log4php-2.3.0-src.zip.借压缩,将压缩文件中的src/main/php/文件夹拷贝到CI的application/thrid_pa ...

  8. C++实现二叉排序树

    1.定义 二叉排序树(Binary Sort Tree),又称二叉查找树(Binary Search Tree),亦称二叉搜索树. 二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子 ...

  9. 周记7——ios中picker滑动穿透bug

    Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动 ...

  10. [转]使用ASP.NET Web API 2创建OData v4 终结点

    本文转自:http://www.cnblogs.com/farb/p/ODataAspNetWebAPI.html 开放数据协议(Open Data Protocol[简称OData])是用于Web的 ...