2022年7月13日——HTML，文章模块的编写-CFANZ编程社区

效果展示：

2022年7月13日——HTML，文章模块的编写_百度

效果展示说明：

本文主要的，作用为，对于部分模块的编写，可以对于第二个的模块，可以直接复制相应的代码然后，即可生成多个如图2所示的效果，也可改变内容为自己需要的，完善达到，自己的想要的结果。根据自己的想象从而进行编写。。。对于图2所示的效果，可以用于定义多模块的使用，文章的简写的说明等，人物的介绍说明等，也可以修改为左图右文的效果。还有就是文字的使用，改变文字的效果文字的使用，段落等等。

可根据文章的内容，从而自动的改变文章的长度。对于文章的外围的空白部分，可以使用内边距，也可以使用外边距，需要注意的是，内边距会在原有的基础上，撑大我们的盒子，而外边距则是，保证我们的盒子不变，而是改变外围的效果。

注意：还有一点就是，对于，float属性，当使用之后会出现父级别塌陷的情况，可以为父级别定义overflow:hidden从而解决，塌陷的问题。

代码展示：

<!DOCTYPE html>
<html>
  <head>
    <title>7.13</title>
  </head>
  <style>
    *{
      padding: 0;
      margin: 0;
      text-decoration: none;
    }
    div.block{
      width: 1100px;
      background-color: antiquewhite;
      margin: 20px auto;
      border-radius: 20px;
      padding: 50px;
    }
    div.block > h3, div.list > h3{
      line-height: 20px;
      padding-bottom: 20px;
    }
    div.block > span{
      float: right;
    }
    div.block > h3 > span{
      font-size: 12px;
      padding-left: 10px;
    }



    div.list{
      width: 1100px;
      background-color: aqua;
      margin: 20px auto;
      padding: 50px;
      border-radius: 20px;
      overflow: hidden;
    }
    div.list > ol{
      width: 550px;
      float: left;
    }
  </style>
  <body>
    
    <div>
      <h3>日期：2022年7月13日，星期三</h3>
      <ol>
        <li><a href="http://jcaptcha.sourceforge.net/" target="_blank">Jcaptcha官网</a></li>
      </ol>
    </div>
    <div class="list">
      <h3>标题（以下的列表：可以定义为常用的链接等。。。）</h3>
      <ol>
        <li><a href="https://www.baidu.com/" target="_blank">百度</a></li>
        <li><a href="https://tomcat.apache.org/" target="_blank">Tomcat官网</a></li>
        <li><a href="http://archive.apache.org/dist/tomcat/" target="_blank">Tomcat历史版本下载地址</a></li>
      </ol>
      <ol>
        <li><a href="https://www.baidu.com/" target="_blank">百度</a></li>
      </ol>
    </div>
    <div class="block">
      <h3>TITLE<span class="author">作者：张三</span></h3>
      <p>
        CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT，CONTENT。
      </p>
      <span>创建时间：2022年7月13日</span>
    </div>
    
  </body>
</html>