网页简单布局之结构与表现原则（HTML/CSS）

时间：2017-12-29 23:33:47 阅读：246 评论：0 收藏：0 [点我收藏+]

结构样式行为真正的分离

前端初级人员会在页面上单纯的用各个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>

View Code

<!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="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="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="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>

View Code

在网页制作中，面对设计图，网页制作人员一般要遵循的原则是什么？

先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。

网页简单布局之结构与表现原则（HTML/CSS）

标签：top 编写 osi 结构 nbsp 原则 alt text demo1

原文地址：https://www.cnblogs.com/fengxiongZz/p/8146567.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行