鱼C论坛

 找回密码
 立即注册
12
返回列表 发新帖
楼主: 不二如是

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

[复制链接]
发表于 2018-10-14 22:56:15 | 显示全部楼层

就爱看你发的截图
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-12 10:03:54 | 显示全部楼层
同问以上楼上的2个问题
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

同问
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

同问
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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


想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-6-7 22:19:15 | 显示全部楼层

这里只是介绍h5新标签的语义
布局还要再添加css样式
想知道小甲鱼最近在做啥?请访问 -> 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-12-18 13:22:42 | 显示全部楼层
为什么侧边栏不在侧面 而是内容的下面
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-1 09:42:32 | 显示全部楼层
爱了爱了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-12-9 17:39:22 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-22 13:10

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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