论坛 › 陕西 › [网页编程]-10 框架标签 div

wloe2gf 发表于 2024-6-29 12:22:03

[网页编程]-10 框架标签 div

    <h2 style="color: black; text-align: left; margin-bottom: 10px;">div 用于对网页模块化划分</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">div 标签<span style="color: black;">能够</span>把文档分割为独立的、<span style="color: black;">区别</span>的部分。它<span style="color: black;">能够</span>用作严格的组织<span style="color: black;">工具</span>，并且不<span style="color: black;">运用</span>任何格式与其<span style="color: black;">相关</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div&gt; 是一个块级元素。这<span style="color: black;">寓意</span>着它的内容自动地<span style="color: black;">起始</span>一个新行</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">大致上<span style="color: black;">能够</span><span style="color: black;">这般</span>理解</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">将一个网页进行<span style="color: black;">这般</span>划分,变成模块,<span style="color: black;">而后</span>在做编辑和布局</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">亦</span><span style="color: black;">便是</span>把网页划成多个格子,方便<span style="color: black;">咱们</span>在每个格子里操作</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-2b3cbde6b99ad61dbd756f9c6ad77732_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span>是<span style="color: black;">必须</span>用CSS的,<span style="color: black;">倘若</span>不懂的话,只要理解下面的代码就<span style="color: black;">能够</span>了</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;!--头部模块--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"top"</span><span style="color: black;">&gt;</span>


      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!--中间提示--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"tips"</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!--中间的展现--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"center"</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"login"</span><span style="color: black;">&gt;</span>


      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>


      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!--底部模块--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"bottom"</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">完整代码</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">top</span><span style="color: black;">{</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">100</span><span style="color: black;">px</span><span style="color: black;">;</span>

      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>
      <span style="color: black;">/*背景颜色*/</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">red</span><span style="color: black;">;</span>

      <span style="color: black;">}</span>

      <span style="color: black;">.</span><span style="color: black;">tips</span><span style="color: black;">{</span>

      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>

      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">40</span><span style="color: black;">px</span><span style="color: black;">;</span>

      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">pink</span><span style="color: black;">;</span>

      <span style="color: black;">}</span>

      <span style="color: black;">.</span><span style="color: black;">center</span><span style="color: black;">{</span>

      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>

      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">475</span><span style="color: black;">px</span><span style="color: black;">;</span>

      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">palegreen</span><span style="color: black;">;</span>

      <span style="color: black;">}</span>

      <span style="color: black;">.</span><span style="color: black;">bottom</span><span style="color: black;">{</span>

      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>

      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">150</span><span style="color: black;">px</span><span style="color: black;">;</span>

      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">paleturquoise</span><span style="color: black;">;</span>

      <span style="color: black;">}</span>

      <span style="color: black;">.</span><span style="color: black;">login</span><span style="color: black;">{</span>

      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">350</span><span style="color: black;">px</span><span style="color: black;">;</span>

      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>

      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">#ffffff</span><span style="color: black;">;</span>

      <span style="color: black;">/*相对定位*/</span>
      <span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">relative</span><span style="color: black;">;</span>

      <span style="color: black;">left</span><span style="color: black;">:</span> <span style="color: black;">950</span><span style="color: black;">px</span><span style="color: black;">;</span>

      <span style="color: black;">top</span><span style="color: black;">:</span> <span style="color: black;">10</span><span style="color: black;">px</span><span style="color: black;">;</span>


      <span style="color: black;">}</span>

      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;!--头部模块--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"top"</span><span style="color: black;">&gt;</span>


      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!--中间提示--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"tips"</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!--中间的展现--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"center"</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"login"</span><span style="color: black;">&gt;</span>


      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>


      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!--底部模块--&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"bottom"</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;!--
      </span><span style="color: black;"> div本身是<span style="color: black;">无</span>任何的含义
      </span><span style="color: black;"> div：<span style="color: black;">功效</span><span style="color: black;">便是</span>把网页进行模块化的划分
      </span><span style="color: black;">--&gt;</span>


    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果截图</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-f54a471c91ac935f094d6de73c42ab4d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>

JameBond 发表于 2024-8-24 03:12:03

外贸B2B平台有哪些？

听听海 发表于 2024-9-9 09:44:52

你的见解独到，让我受益匪浅，非常感谢。

7wu1wm0 发表于 2024-10-15 11:40:02

楼主节操掉了，还不快捡起来！

1fy07h 发表于 2024-11-7 12:28:26

i免费外链发布平台 http://www.fok120.com/

查看完整版本: [网页编程]-10 框架标签 div