soulwyb 发表于 2018-10-14 22:56:15

aswyamato1989 发表于 2017-7-13 08:35
交作业!

就爱看你发的截图{:10_256:}

soulwyb 发表于 2018-10-14 22:57:03

<!doctype>
<html>

<head>
    <title>
      第十五题
    </title>
</head>

<body>
    <header>
      <h1>吴玉斌工作室</h1>
      <nav>
            <ul>
                <li>门户</li>
                <li>论坛</li>
                <li>空间</li>
                <li>VIP通道</li>
            </ul>
      </nav>
    </header>
    <section>
      <h2>小天才养殖场</h2>
      <article>
            <h3>0 1 0 9 - 第一季收官 - 【完结撒花】</h3>
            <p>XXXXX文章内容XXX</p>
      </article>
      <article>
            <h3>XXXXX文章内容XXX</h3>
            <p>XXXXXXxxxxxx</p>
      </article>
    </section>
    <section>
      <h2>吹水阁</h2>
      <article>
            <h3>2017 #吹水阁 - 16 - 扯淡汇报 - 文末彩蛋 | 【欢迎群P(喷)】</h3>
            <p>XXXxxxxxx</p>
      </article>
      <article>
            <h3>VIP至尊会员~请进,有个‘福利’偷偷给你哈~</h3>
            <p>XXXX谁办谁知道</p>
      </article>
    </section>
    <section>
      <h2>QT交流</h2>
      <article>
            <h3> FFFF - Qt大全 - 官网、论坛、GitHub - 【深度扫盲】</h3>
            <p>经典毋庸置疑</p>
            <h3>156-三位一体进进出出-【147-155】</h3>
            <p>建议18岁以上再看</p>
      </article>
      <article>

            <head>
                优化article
            </head>
            <meta charset="utf-8">
            <header>
                <h3>响应小甲鱼老湿号召~|为什么我要变成VIP至尊?!@EveryOne</h3>
            </header>
            <p>你的选择决定你的时间,而你的时间<br>决定你的注意力<br>你最宝贵的注意力自然分清未来你会待在哪个阶层!<br>让编程改变世界!<br>欢迎你的加入!<br>我在这里等你!</p>
            <footer>
                <p>文章发表日期:<time datetime="2016-11-5 15:22:03">2016年11月5日 15:22:03</time></p>
            </footer>
      </article>
    </section>
    <aside>
      <h2>小天才养殖场</h2>
      <p>热帖名字</p>
    </aside>
    <aside>
      <h2>吹水阁经典贴</h2>
      <p>热帖名字</p>
    </aside>
    <aside>
      <h2>qt热帖交流</h2>
      <p>热帖名字</p>
    </aside>
    <footer>
      <p>鱼C版权所有 2017</p>
      <a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a>
    </footer>
</body>

</html>

guohuo888meng@1 发表于 2019-2-12 10:03:54

同问以上楼上的2个问题

guohuo888meng@1 发表于 2019-2-12 10:26:26

土耳其东木白 发表于 2018-5-29 17:20
为什么侧边栏展示在脚下,这个没看懂

同问

guohuo888meng@1 发表于 2019-2-12 10:26:59

Ъγ:_小ツ雨oο 发表于 2017-5-29 16:49
代码 中 最终代码section没放在body里,是不是写错了 http://bbs.fishc.com/forum.php?mod=viewthread& ...

同问

phszhuli 发表于 2019-3-29 09:20:48

<!DOCTYPE html>
<head>
        <meta charset="utf-8">
        <title>body区块</title>
</head>
<body>
        <header><!--头部区域-->
                <h1>导航</h1>
                <nav><!--菜单导航-->
                        <ul>
                                <li>首页</li>
                                <li>门户</li>
                                <li>论坛</li>
                                <li>空间</li>
                                <li>VIP空间</li>
                        </ul>               
                </nav>
        </header>
        <section>
                <h2>内容板块A</h2>
                <article>
                        <header>
                                <h3>第一章</h3>
                        </header>
                        <p>文章内容</p>
                        <footer>
                                <p>发表日期:<time datetime="2019-03-29 09:00:00">2019-03-29 09:00:00</time></p>
                        </footer>
                </article>
        </section>
        <section>
                <h2>内容板块B</h2>
                <article>
                        <h3>第一话</h3>
                        <p>文章内容</p>
                </article>
        </section>
        <section>
                <h2>内容板块C</h2>
                <article>
                        <h3>第一幕</h3>
                        <p>文章内容</p>
                </article>
        </section>
        <aside><!--侧边栏-->
                <h2>小天才养殖场热帖推荐</h2>
                <p>热帖名称</p>
        </aside>
        <aside>
                <h2>吹水阁经典热贴</h2>
                <p>热帖名称</p>
        </aside>
        <aside>
                <h2>QT交流热帖</h2>
                <p>热帖名称</p>
        </aside>
        <footer><!--页脚区域,放置版权声明、外部连接-->
                <p>Z版权所有2019</p>
                <a >投诉区</a>
        </footer>
</body>

fangfangfengfei 发表于 2019-6-7 22:17:27

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body{
            padding-left:200px;
      }
      ul{
            margin: 0;
            padding: 0;
      }
      li{
            list-style: none;
      }
    </style>
</head>
<body>
    <header>
      <h1>鱼c工作室</h1>
      <nav>
            <ul>
                <li>门户</li>
                <li>论坛</li>
                <li>空间</li>
                <li>vip通道</li>

            </ul>
      </nav>
    </header>
    <main>
      <section>
            <h2>命本无曲路</h2>
            <article>
                  <h3>遇见</h3>
                  <p>重逢的季节多花雨</p>
            </article>
            <article>
                  <h3> 相望</h3>
                  <p>江湖相知亦可相望</p>
            </article>
      </section>
      <section>
            <h2>安可留人心</h2>
            <article>
                  <h3>遇见</h3>
                  <p>重逢的季节多花雨</p>
            </article>
            <article>
                  <h3> 相望</h3>
                  <p>江湖相知亦可相望</p>
            </article>
      </section>
      <section>
            <h2>--.--</h2>
            <article>
                  <header>
                        <h3>响应小甲鱼老湿号召~|为什么我要变成VIP至尊?!@EveryOne</h3>
                  </header>
                  <p>你的选择决定你的时间,而你的时间<br>决定你的注意力<br>你最宝贵的注意力自然分清未来你会待在哪个阶层!<br>让编程改变世界!<br>欢迎你的加入!<br>我在这里等你!
                  </p>
                  <footer>
                        <p>文章发表日期:<time datetime="2016-11-5 15:22:03">2016年11月5日 15:22:03</time></p>
                  </footer>
            </article>
      </section>
    </main>
    <aside>
            <h2>小天才养殖场热贴推荐</h2>
            <p>热贴名字</p>
    </aside>
    <aside>
            <h2>吹水阁经典热贴</h2>
            <p>热贴名字</p>
    </aside>
    <aside>
            <h2>Qt交流热贴</h2>
            <p>热贴名字</p>
    </aside>
    <footer>
            <p>鱼C版权所有 2017</p>
            <a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a>
    </footer>
   
</body>
</html>



fangfangfengfei 发表于 2019-6-7 22:19:15

guohuo888meng@1 发表于 2019-2-12 10:26
同问

这里只是介绍h5新标签的语义
布局还要再添加css样式

你在意在便在 发表于 2019-10-26 10:48:46

<head>
    <meta charser="utf-8">
    <title>让编程改变世界</title>
    <style>
      h1 {
            color:cadetblue;
            text-align: center;
      }
      ul {
            list-style: none;
      }
      li {
            margin: auto 10px;
            display: block;
            float:left;
            color:orangered;
      }
      h2 {
            color: orangered;
      }
      article {
            color: gray;
      }
      aside {
            color:green;
      }
      p {
            color:indianred;
      }
      a {
            text-decoration:none;
            color:pink;
            font-size: 10px;
            /*偷偷藏起来*/
      }
    </style>
</head>
<body>
      <header>
      <meta charset="utf-8">
                <h1>鱼C工作室</h1>
                <nav>
                        <ul>
                              <li>门户</li>
                              <li>论坛</li>
                              <li>空间</li>
                              <li>VIP通道</li>
                        </ul>
                </nav>
      </header>
      <br>
      <hr>
</body>
<section>
      <h2>小天才养殖场</h2>
      <article>
                <h3> 0 1 0 9 - 第一季收官 - 【完结撒花】</h3>
                <p>XXXXX文章内容XXX</p>
      </article>
      <article>
                <h3> 阅读,返鱼币 | 【告知】</h3>
                <p>XXXXXXxxxxxx</p>
      </article>
</section>
<section>
      <h2>吹水阁</h2>
      <article>
                <h3>2017 #吹水阁 - 16 - 扯淡汇报 - 文末彩蛋 | 【欢迎群P(喷)】</h3>
                <p>XXXxxxxxx</p>
      </article>
      <article>
                <h3>VIP至尊会员~请进,有个‘福利’偷偷给你哈~</h3>
                <p>XXXX谁办谁知道</p>
      </article>
</section>
<section>
      <h2>Qt交流</h2>
      <article>
                <h3> FFFF - Qt大全 - 官网、论坛、GitHub - 【深度扫盲】</h3>
                <p>经典毋庸置疑</p>
                <h3>156-三位一体进进出出-【147-155】</h3>
                <p>建议18岁以上再看</p>
      </article>
</section>
<aside>
      <h2>小天才养殖场热贴推荐</h2>
      <p>热贴名字</p>
</aside>
<aside>
      <h2>吹水阁经典热贴</h2>
      <p>热贴名字</p>
</aside>
<aside>
      <h2>Qt交流热贴</h2>
      <p>热贴名字</p>
</aside>
<footer>
      <p>鱼C版权所有 2017</p>
      <a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a>
</footer>

安妮宝贝 发表于 2019-12-18 13:22:42

为什么侧边栏不在侧面 而是内容的下面

风吹来了 发表于 2020-4-1 09:42:32

爱了爱了

826286149 发表于 2020-12-16 20:17:56

<!doctype html>
<html>
<head>
<title>..</title>
<meta charset="UTF-8">
<style>
                body{
                background-image:url("test.jpg")
                }
</style>



</head>
       <body>
          <header><h1>鱼c工作室</h1></header>
          <nav><p>导航栏</p>
                          <ul>
                                <li>门户</li>
                                <li>论坛</li>
                                <li>空间</li>
                                <li>vip通道</li>
                          </ul>
          </nav>
          <main>
                  <section>
                                <h2>小天才养殖场</h2>
                           <h3>0109-第一季收官-完结撒花</h3>
                           <article>xxx文章内容xxx</article>
                          <h3>阅读反鱼币</h3>
                                <article>xxx文章内容xxx</article>
                  </section>
                  <section>
                                <h2>吹水阁</h2>
                           <h3>2017#吹水阁-16-扯淡汇报-文末彩蛋!</h3>
                           <article>xxx文章内容xxx</article>
                          <h3>VIP至尊会员</h3>
                                <article>xxx文章内容xxx</article>
                  </section>
                  <section>
                                <h2>qt交流</h2>
                           <h3>ffff-qt大全-官网,论坛,github</h3>
                           <article>经典毋庸置疑</article>
                          <h3>156-三位一体进进出出</h3>
                                <article>18岁以上观看</article
                  </section>
                  <aside>
                                <h2>小天才养殖场热帖推荐</h2>
                                <p>热帖名字</p>
                                <h2>吹水阁经典热帖</h2>
                                <p>热帖名字</p>
                                <h2>qt交流热帖</h2>
                                <p>热帖名字</p>
                  </aside>
          </main>
          <footer>
          鱼c版权所有 2020
          <p><a href="http://bbs.fishc.com">投诉区</a></p>
          </footer>
          
       </body>
</html>

不爱学习的小张 发表于 2023-12-9 17:39:22

{:10_257:}
页: 1 [2]
查看完整版本: 0 0 1 5 - body元素 - 区块五座大山