结构 样式 行为真正的分离

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

代码展示：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.       .demo1 {
  8.         height: 300px;
  9.         width: 500px;
  10.         padding: 5px;
  11.       }
  12.       .demo1 .left {
  13.         float: left;
  14.         height: 280px;
  15.         width: 180px;
  16.       }
  17.       .demo1 .left img {
  18.         background: blue;
  19.         height: 50px;
  20.         width: 50px;
  21.       }
  22.       .demo1 .right {
  23.         float: right;
  24.         height: 280px;
  25.         width: 256px;
  26.         border: 1px solid green;
  27.       }
  28.  
  29.       .demo2 {
  30.         height: 300px;
  31.         width: 500px;
  32.         padding: 5px;
  33.       }
  34.       .demo2 img {
  35.         float: left;
  36.         background: blue;
  37.         height: 50px;
  38.         width: 50px;
  39.       }
  40.       .demo2 .right {
  41.         float: right;
  42.         height: 280px;
  43.         width: 256px;
  44.         border: 1px solid green;
  45.       }
  46.  
  47.       .demo3 {
  48.         height: 300px;
  49.         width: 450px;
  50.         padding: 5px;
  51.         margin-left: 50px;
  52.       }
  53.       .demo3 img {
  54.         float: left;
  55.         margin: 10px 0 0 -50px;
  56.         background: blue;
  57.         height: 50px;
  58.         width: 50px;
  59.       }
  60.       .demo3 p {
  61.         float: right;
  62.         height: 280px;
  63.         width: 256px;
  64.         border: 1px solid green;
  65.       }
  66.     </style>
  67.   </head>
  68.   <body>
  69.     <!--初级-->
  70.     <div class="demo1">
  71.       <div class="left">
  72.         <img src="" alt="" />
  73.       </div>
  74.       <div class="right">
  75.         <p>内容</p>
  76.       </div>
  77.     </div>
  78.     <br />
  79.     <!--中级-->
  80.     <div class="demo2">
  81.       <img src="" alt="" />
  82.       <div class="right">
  83.         <p>内容</p>
  84.       </div>
  85.     </div>
  86.     <br />
  87.     <!--高级-->
  88.     <div class="demo3">
  89.       <img src="" alt="" />
  90.       <p>内容</p>
  91.     </div>
  92.   </body>
  93. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.       /*公共样式*/
  8.  
  9.       body {
  10.         padding-top: 50px;
  11.         line-height: 20px
  12.       }
  13.       .userPic {
  14.         padding: 5px;
  15.         border: 1px #ccc solid
  16.       }
  17.       .demo01,
  18.       .demo02 {
  19.         margin-bottom: 20px
  20.       }
  21.       p {
  22.         text-indent: 2em
  23.       }
  24.       /*初级*/
  25.  
  26.       .demo01 {
  27.         width: 600px;
  28.         overflow: hidden
  29.       }
  30.       .demo01 .left {
  31.         width: 100px;
  32.         float: left
  33.       }
  34.       .demo01 .left .userPic {
  35.         margin-left: 20px
  36.       }
  37.       .demo01 .right {
  38.         width: 458px;
  39.         float: right;
  40.         padding: 20px;
  41.         background-color: #EEF7FF;
  42.         border: 1px solid #CCC
  43.       }
  44.       .demo01 .right h6 {
  45.         margin-bottom: 5px
  46.       }
  47.       .demo01 .right .pubTime {
  48.         float: right;
  49.         color: #999;
  50.         margin-top: -8px
  51.       }
  52.       /*中级*/
  53.  
  54.       .demo02 {
  55.         width: 600px;
  56.         overflow: hidden
  57.       }
  58.       .demo02 .userPic {
  59.         float: left;
  60.         margin-left: 20px
  61.       }
  62.       .demo02 .right {
  63.         width: 458px;
  64.         float: right;
  65.         padding: 20px;
  66.         background-color: #EEF7FF;
  67.         border: 1px solid #CCC
  68.       }
  69.       .demo02 .right h6 {
  70.         margin-bottom: 5px
  71.       }
  72.       .demo02 .right .pubTime {
  73.         float: right;
  74.         color: #999;
  75.         margin-top: -8px
  76.       }
  77.       /*高级*/
  78.  
  79.       .demo03 {
  80.         width: 460px;
  81.         padding: 20px;
  82.         position: relative;
  83.         background-color: #EEF7FF;
  84.         border: 1px solid #CCC;
  85.         margin-left: 100px
  86.       }
  87.       .demo03 h6 {
  88.         margin-bottom: 5px
  89.       }
  90.       .demo03 .dialog p {
  91.         text-indent: 2em;
  92.         line-height: 20px
  93.       }
  94.       .demo03 .userPic {
  95.         float: left;
  96.         margin: -20px 0 0 -100px
  97.       }
  98.       .demo03 .pubTime {
  99.         position: absolute;
  100.         top: 10px;
  101.         right: 20px;
  102.         color: #999;
  103.       }
  104.     </style>
  105.   </head>
  106.  
  107.   <body>
  108.     <!---demo01----------------------------------->
  109.     <div class="demo01">
  110.       <div class="left">
  111.         <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
  112.       </div>
  113.  
  114.       <div class="right">
  115.         <span class="pubTime">10分钟前</span>
  116.         <h6>樱桃小丸子</h6>
  117.         <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
  118.       </div>
  119.     </div>
  120.  
  121.     <!---demo02----------------------------------->
  122.     <div class="demo02">
  123.       <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
  124.       <div class="right">
  125.         <span class="pubTime">10分钟前</span>
  126.         <h6>樱桃小丸子</h6>
  127.         <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
  128.       </div>
  129.     </div>
  130.  
  131.     <!---demo03----------------------------------->
  132.     <div class="demo03">
  133.       <img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
  134.       <h5>樱桃小丸子</h5>
  135.       <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
  136.       <span class="pubTime">10分钟前</span>
  137.     </div>
  138.  
  139.   </body>
  140. </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. 一个比较强大的HTTP请求类，支持文本参数和文件参数。

    一个 http 请求类 ,支持文件上传,从淘宝 top sdk 里面扣出来的,蛮好用的,做个记录而已. 调用代码: Dictionary<string, string> textParas ...

  2. php在单个文件内开启dbug

    1.在文件开头添加如下代码 ini_set('display_errors', true); error_reporting(E_ALL);

  3. Hibernate核心开发接口_SessionFactory详解

    SessionFactory: a)  用来产生和管理Session b)通常情况下每个应用只需要一个SessionFactory c)除非要访问多个数据库的情况 d) 关注两个方法即:  openS ...

  4. java.lang.NoClassDefFoundError: org/springframework/ui/jasperreports/JasperReportsUtils原因

    在springMVC结合jasperReporter中发现的问题 java.lang.NoClassDefFoundError: org/springframework/ui/jasperreport ...

  5. 作为一个编程新手，我再也不怕Flink迷了我的眼！

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由kyledong发表于云+社区专栏 使用 Flink 编写处理逻辑时,新手总是容易被林林总总的概念所混淆: 为什么 Flink 有那么 ...

  6. Nginx教程(6) 负载均衡

    一原理 二例子 在 nginx-1.13.0.tar.gz下测试 upstream test { server 192.168.56.90:8180 weight=1 max_fails=3 fail ...

  7. R语言矩阵matrix函数

    矩阵是元素布置成二维矩形布局的R对象. 它们包含相同原子类型的元素.尽管我们可以创建只包含字符或只逻辑值的矩阵,但是它们没有多大用处.我们使用的是在数学计算中含有数字元素矩阵. 使用 matrix() ...

  8. unity多线程

    多线程概念 多线程,是指实现多个线程并发执行的技术,合理利用多线程可以提升程序的性能,在unity中,一般是避免使用多线程的,unity对多线程的支持并不友好. 协程概念 协程,是指在主线程运行时开启 ...

  9. jsonp/ajax 自己的一些总结

    data.json代码:[{"name": "张三", "age": 18}, {"name": "李四&qu ...

  10. http协议的各类状态码

    http协议的状态码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101( ...