0 0 1 5 - body元素 - 区块五座大山

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

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

就爱看你发的截图

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>
批注 2019-06-07 221658.png

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

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 1 5 - body元素 - 区块五座大山