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

结构 样式 行为真正的分离

  • 前端初级人员会在页面上单纯的用各个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结构和语义化，然后考虑布局和表现形式。

 

posted @   Z皓  阅读(1116)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手