结构 样式 行为真正的分离

  • 前端初级人员会在页面上单纯的用各个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. Mac下Go2Shell打开配置界面

    open -a Go2Shell --args config

  2. hibernate的AnnotationHelloWorld

    来龙去脉: 最开始sun这个土鳖设计了EJB2.0.EJB2.1那个时代.后来有人发现设计的很烂,不好用,就设计了hibernate,,人们发现用hibernate反而比EJB2.0.2.1好,hib ...

  3. package-info类解读

    类不能带有public.private访问权限.package-info.java再怎么特殊,也是一个类文件,也会被编译成package-info.class,但是在package-info.java ...

  4. Bunder: What does :require => nil in Gemfile mean?

    https://stackoverflow.com/questions/12200215/bunder-what-does-require-nil-in-gemfile-mean Require ni ...

  5. html5电池状态相关API

    var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBa ...

  6. 快速排序分析及实现(C++)

    目录 快速排序算法分析及实现(C++) 算法思想 快速排序步骤 优点分析 C++语言实现 快速排序算法分析及实现(C++) 算法思想 ​ 把n个元素划分为三段:左端Left,中间段middle和右端r ...

  7. MySQL数据库-错误1166 - Incorrect column name 'xxx' 的解决方法

    在用Navicat for MySQL给MySQL数据库修改表的字段时报如下的错误: 解决方法:检查字段里面是不是有空格,去掉就可以了.

  8. Knockout.js Visible绑定

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

  9. 第7天：javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等

    javascript WEB api------DOM document object model 案例 为元素注册点击事件,弹出对话框 <input type="button&quo ...

  10. [PHP] 试题系统研究

    考试科目: 添加考试科目,填写科目名称,选择科目题型(复选框/单选题,多选题,判断题,问答题,填空题) 添加科目章节,填写章节名称,添加章节知识点,填写知识点以英文逗号分隔,直接插入多条记录 开通考场 ...