设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 1 5 - body元素 - 区块五座大山
12
返回列表 发新帖
楼主: 不二如是

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

[复制链接]
soulwyb
发表于 2018-10-14 22:56:15 | 显示全部楼层
aswyamato1989 发表于 2017-7-13 08:35
交作业！

就爱看你发的截图
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

soulwyb
发表于 2018-10-14 22:57:03 | 显示全部楼层
  1. <!doctype>
  2. <html>

  4. <head>
  5.     <title>
  6.         第十五题
  7.     </title>
  8. </head>

  10. <body>
  11.     <header>
  12.         <h1>吴玉斌工作室</h1>
  13.         <nav>
  14.             <ul>
  15.                 <li>门户</li>
  16.                 <li>论坛</li>
  17.                 <li>空间</li>
  18.                 <li>VIP通道</li>
  19.             </ul>
  20.         </nav>
  21.     </header>
  22.     <section>
  23.         <h2>小天才养殖场</h2>
  24.         <article>
  25.             <h3>0 1 0 9 - 第一季收官 - 【完结撒花】</h3>
  26.             <p>XXXXX文章内容XXX</p>
  27.         </article>
  28.         <article>
  29.             <h3>XXXXX文章内容XXX</h3>
  30.             <p>XXXXXXxxxxxx</p>
  31.         </article>
  32.     </section>
  33.     <section>
  34.         <h2>吹水阁</h2>
  35.         <article>
  36.             <h3>2017 #吹水阁 - 16 - 扯淡汇报 - 文末彩蛋 | 【欢迎群P(喷)】</h3>
  37.             <p>XXXxxxxxx</p>
  38.         </article>
  39.         <article>
  40.             <h3>VIP至尊会员~请进，有个‘福利’偷偷给你哈～</h3>
  41.             <p>XXXX谁办谁知道</p>
  42.         </article>
  43.     </section>
  44.     <section>
  45.         <h2>QT交流</h2>
  46.         <article>
  47.             <h3> FFFF - Qt大全 - 官网、论坛、GitHub - 【深度扫盲】</h3>
  48.             <p>经典毋庸置疑</p>
  49.             <h3>156-三位一体进进出出-【147-155】</h3>
  50.             <p>建议18岁以上再看</p>
  51.         </article>
  52.         <article>

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

  85. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

guohuo888meng@1
发表于 2019-2-12 10:03:54 | 显示全部楼层
同问以上楼上的2个问题
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

guohuo888meng@1
发表于 2019-2-12 10:26:26 | 显示全部楼层
土耳其东木白 发表于 2018-5-29 17:20
为什么侧边栏展示在脚下，这个没看懂

同问
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

guohuo888meng@1
发表于 2019-2-12 10:26:59 | 显示全部楼层
Ъγ:_小ツ雨oο 发表于 2017-5-29 16:49
代码 中 最终代码  section  没放在body里，是不是写错了 http://bbs.fishc.com/forum.php?mod=viewthread& ...

同问
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

phszhuli
发表于 2019-3-29 09:20:48 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <head>
  3.         <meta charset="utf-8">
  4.         <title>body区块</title>
  5. </head>
  6. <body>
  7.         <header><!--头部区域-->
  8.                 <h1>导航</h1>
  9.                 <nav><!--菜单导航-->
  10.                         <ul>
  11.                                 <li>首页</li>
  12.                                 <li>门户</li>
  13.                                 <li>论坛</li>
  14.                                 <li>空间</li>
  15.                                 <li>VIP空间</li>
  16.                         </ul>               
  17.                 </nav>
  18.         </header>
  19.         <section>
  20.                 <h2>内容板块A</h2>
  21.                 <article>
  22.                         <header>
  23.                                 <h3>第一章</h3>
  24.                         </header>
  25.                         <p>文章内容</p>
  26.                         <footer>
  27.                                 <p>发表日期：<time datetime="2019-03-29 09:00:00">2019-03-29 09:00:00</time></p>
  28.                         </footer>
  29.                 </article>
  30.         </section>
  31.         <section>
  32.                 <h2>内容板块B</h2>
  33.                 <article>
  34.                         <h3>第一话</h3>
  35.                         <p>文章内容</p>
  36.                 </article>
  37.         </section>
  38.         <section>
  39.                 <h2>内容板块C</h2>
  40.                 <article>
  41.                         <h3>第一幕</h3>
  42.                         <p>文章内容</p>
  43.                 </article>
  44.         </section>
  45.         <aside><!--侧边栏-->
  46.                 <h2>小天才养殖场热帖推荐</h2>
  47.                 <p>热帖名称</p>
  48.         </aside>
  49.         <aside>
  50.                 <h2>吹水阁经典热贴</h2>
  51.                 <p>热帖名称</p>
  52.         </aside>
  53.         <aside>
  54.                 <h2>QT交流热帖</h2>
  55.                 <p>热帖名称</p>
  56.         </aside>
  57.         <footer><!--页脚区域，放置版权声明、外部连接-->
  58.                 <p>Z版权所有2019</p>
  59.                 <a >投诉区</a>
  60.         </footer>
  61. </body>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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


小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 2019-6-7 22:19:15 | 显示全部楼层
guohuo888meng@1 发表于 2019-2-12 10:26
同问

这里只是介绍h5新标签的语义
布局还要再添加css样式
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 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>
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

安妮宝贝
发表于 2019-12-18 13:22:42 | 显示全部楼层
为什么侧边栏不在侧面 而是内容的下面
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

风吹来了
发表于 2020-4-1 09:42:32 | 显示全部楼层
爱了爱了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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>
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不爱学习的小张
发表于 2023-12-9 17:39:22 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

12
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-5 12:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表