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

不二如是 · 发表于 2017-1-11 12:31:35

购买主题 已有 52 人购买 本主题需向作者支付 2 鱼币 才能浏览

MSK · 发表于 2017-7-8 14:07:11

交！作！业！

781318059 · 发表于 2017-1-11 14:19:54

不二如是 · 发表于 2017-1-11 14:21:28

781318059 发表于 2017-1-11 14:19

alltolove · 发表于 2017-1-11 15:05:11

这内容偏少

不二如是 · 发表于 2017-1-11 16:14:25

alltolove 发表于 2017-1-11 15:05
这内容偏少

哈哈，去干别的事情了，现在来填坑～

joker11111 · 发表于 2017-2-12 22:56:25

优化的话只是将utf-8提前了，之前一版的会出现乱码，还有其他要优化的话，我猜就是那个长语句的，感觉可以换行（类似C++中一行代码分行写不下，换行加个\）或者多个<p></p>来做

不二如是 · 发表于 2017-2-13 07:21:48

joker11111 发表于 2017-2-12 22:56
优化的话只是将utf-8提前了，之前一版的会出现乱码，还有其他要优化的话，我猜就是那个长语句的，感 ...

“优化的话只是将utf-8提前了，之前一版的会出现乱码，还有其他要优化的话，我猜就是那个长语句的，感觉可以换行（类似C++中一行代码分行写不下，换行加个\）或者多个<p></p>来做”

实在没看明白。。。

不过谢谢joker，广告打的这么666！

joker11111 · 发表于 2017-2-13 08:29:07

不二如是发表于 2017-2-13 07:21
“优化的话只是将utf-8提前了，之前一版的会出现乱码，还有其他要优化的话，我猜就是那个长语句的，感觉 ...

其实我想问的是：你留的优化article小作业大概是什么意思，没太懂，求指导

不二如是 · 发表于 2017-2-13 08:35:04

joker11111 发表于 2017-2-13 08:29
其实我想问的是：你留的优化article小作业大概是什么意思，没太懂，求指导

“为了显示文章结构，我把<article>标签，简化了。

其实，这个标签可以作为一个独立成分来看，可以拥有自己的header、footer、section。

写一个小例子，留给你自己去优化articl”

只要把header、footer、section都放进article就可以了

shishunfu · 发表于 2017-4-19 15:52:23

本帖最后由 shishunfu 于 2017-4-19 15:54 编辑

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Body四大区块元素</title>
</head>
<body>
        <header><!--<header>创建头部区域。<header> 标签定义文档的页眉（介绍信息）。-->
                <h1>鱼C工作室</h1>
                <nav><!--用nav元素，对应导航信息，就是主菜单。<nav> 标签定义导航链接的部分。-->
                        <ul>
                                <li>门户</li>
                                <li>论坛</li>
                                <li>空间</li>
                                <li>VIP通道</li>
                        </ul>
                </nav>
        </header>

        <section>        <!--<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
                        <h2>HTML5-庖丁解牛</h2>
                <article>        
                        <h3>XXXX.body元素</h3>
                </article>
        </section>

        <section>
                <h2>JavaScript-庖丁解牛</h2>
                <article><!--<article> 标签规定独立的自包含内容。-->
                        <h3>XXXX.jS</h3>
                </article>
        </section>

        <section>
                <h2>优化article</h2>
                <article>
                        <header>
                                <h3>响应小甲鱼老湿号召~|为什么我要变成VIP至尊？！@EveryOne</h3>
                        </header>
                        <section>
                                你的选择决定你的时间,而你的时间<br>决定你的注意力<br>你最宝贵的注意力自然分清未来你会待在哪个阶层！<br>让编程改变世界!<br>欢迎你的加入!<br>我在这里等你!
                        </section>
                        <footer>
                                <p>文章发表日期：<time datetime="2016-11-5 15:22:03">2016年11月5日 15:22:03</time></p>
                        </footer>
                </article>
                
        </section>
        <aside>        <!--<aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。<aside> 的内容可用作文章的侧栏。-->
                <h2>小天才养殖场热贴推荐</h2>
                <p>热贴名字</p>
        </aside>
        <aside>
                <h2>吹水阁经典热贴</h2>
                <p>热贴名字</p>
        </aside>
        <aside>
                <h2>Qt交流热贴</h2>
                <p>热贴名字</p>
        </aside>
        <footer>
                <p>鱼C版权所有2017
                        <a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a></p>
        </footer>
</body>
</html>

骑着蜗牛狂奔 · 发表于 2017-5-21 22:15:35

英语单词背不下来怎么办？

Ъγ:_小ツ雨oο · 发表于 2017-5-29 16:49:25

代码中最终代码 section 没放在body里，是不是写错了 http://bbs.fishc.com/forum.php?m ... =81346&ctid=539

aswyamato1989 · 发表于 2017-7-13 08:35:54

交作业！

易改乌江水 · 发表于 2018-1-22 16:09:14

本帖最后由易改乌江水于 2018-1-22 16:11 编辑

交作业！！首先是html

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>易改乌江水学习HTML5</title>
                <link href="yucxue.css" rel="stylesheet">
                <base href="http://bba.fishc.com" />
                <base target="_blank" />
        </head>
        <body>
                <header>
                        <h1>易改乌江水</h1>
                        <nav>
                                <ul>
                                        <li>职业</li>
                                        <li>诗词</li>
                                        <li>照片</li>
                                </ul>
                        <nav>
                </header>
                <section>
                        <h2>华南师范大学附属外国语学校</h2>
                        <article>
                                <header>
                                        <h3>第一届初三学生入团仪式</h3>
                                </header>
                                <p>XXXXXXXX</p>
                                <footer>
                                        <p>文章发表日期：<time datetime="2018-1-16 19:27:52">2018年1月16日 19:27:52</time></p>
                                </footer>                                
                        </article>
                        <article>
                        <header>        
                                        <h3>往来鸿儒·博雅华外FORMAL HALL</h3>
                        </header>        
                                <p>XXXXXXxxxxxx</p>
                                <footer>
                                        <p>文章发表日期：<time datetime="2018-1-20 12:05:23">2018年1月20日 12:05:23</time></p>
                                </footer>
                        </article>
                </section>
                <section>
                        <h2>辟蹊诗社</h2>
                        <article>
                                <header>
                                        <h3>2018 #2017诗词手迹</h3>
                                </header>
                                <p>XXXxxxxxx</p>
                                <footer>
                                        <p>文章发表日期：<time datetime="2018-1-3 8:26:46">2018年1月3日 8:26:46</time></p>
                                </footer>
                        </article>
                </section>
                <aside>
                        <h2>辟蹊诗社热贴推荐</h2>
                        <p>热贴名字</p>
                </aside>
                <aside>
                        <h2>华南师范大学附属外国语学校经典热贴</h2>
                        <p>热贴名字</p>
                </aside>
                <footer>
                        <p>易改乌江水版权所有 2018</p>
                        <p>技术支持：<a href="http://bbs.fishc.com">鱼C工作室</a></p>
                </footer>
        </body>
</html>

然后是css

@charset "UTF-8"; 
html{
        height: 100%;
        color: #5599FF;
        font-family: sans-serif;
        }
body{
        background: url(background.jpg);
        background-size: cover;
        background: url(background.jpg) center center;
        margin: 0;
        padding:0;
        position: relative;
        }
#ha
        {
        width: 100%;
        text-align: center;
        }
h1
        {
        font-size: 66px;
        margin-bottom: 22px;
        text-align: center;
        }
a
        {
        font-size: 20px;
        background: #FFDD55;
        padding:9px 22px;
        text-decoration: none;
        color: #FFF;
        border:3px solid #FFDD55;
        border-radius: 3px;
        margin: 5px 33px 5px 33px;
        }
aside
        {
        text-align:right;
        }
header
        {
        font-family: KaiTi;
        }
ul
        {
        font-size: 25px;
        }

最后是几张照片

likesunshine · 发表于 2018-3-9 16:33:49

有个问题，怎样添加上背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="background.css" rel="stylesheet">
</head>
<body>
<header>
<h1>鱼C工作室</h1>
<nav>
<ul>
<li>门户</li>
<li>论坛</li>
<li>空间</li>
<li>VIP通道</li>
</ul>
</nav>
</header>
</body>
<section>
<h2>小天才养殖场</h2>
<article>
<h3> 0 1 0 9 - 第一季收官 - 【完结撒花】</h3>
<p>xxxxx文章内容xxx</p>
</article>
<article>
<h3>阅读，返鱼币 | 【告知】</h3>
<p>XXXXXXXxxxxxx</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版权所有</p>
<a href="http://bbs.fishc.com/forum.171-1.html">投诉区</a>
</footer>
</html>

R9bot · 发表于 2018-3-13 20:13:12

likesunshine 发表于 2018-3-9 16:33
有个问题，怎样添加上背景图片

<body background="xxx.jpg">

骑着蜗牛狂奔 · 发表于 2018-5-6 16:03:18

<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>Body的四大区块</title>
<style type="text/css">
body{
        background-image: url("img/bc.png");
        color:white;
}
</style>
</head>
<body>
        <header>
                <h1>鱼C</h1>
                <nav>  <!--导航-->
                        <ul>
                                <li>门户</li>
                                <li>论坛</li>
                                <li>空间</li>
                                <li>VIP通道</li>
                        </ul>
                </nav>
                <section> <!--一个板块-->
                        <h2>小天才养殖场</h2>
                        <article> <!--一篇文章-->
                                <header>
                                <h3>0109 - 第一季收官 - 【完结撒花】</h3>
                                </header>
                                <p>XXX文章内容</p>
                        </article>
                </section>
                <section>
                        <h2>吹水阁</h2>
                        <article>
                                <h3>#吹水阁 - 16 - 扯淡汇报 - 文末彩蛋 | 【欢迎群P(喷)】</h3>
                                <p>XXX文章内容</p>
                        </article>
                        <article>
                                <h3>VIP至尊会员~请进，有个‘福利’偷偷给你哈～</h3>
                                <p>XXX文章内容</p>
                        </article>
                </section>
                <section>
                        <h2>QT交流</h2>
                        <article>
                                <h3>FFFF - Qt大全 - 官网、论坛、GitHub - 【深度扫盲】</h3>
                                <P>经典毋庸置疑</P>                                
                        </article>
                </section>
                <aside>
                <h2>小天才养殖场热帖</h2>
                <p>热帖名字</p>
                </aside>
        
                <aside>
                <h2>吹水阁热帖</h2>
                <p>热帖名字</p>
                </aside>
                
                <aside>
                <h2>QT热帖</h2>
                <p>热帖</p>
                </aside>
        </header>
</body >
</html>

rock5442107 · 发表于 2018-5-26 14:23:44

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>有序排列</title>
</head>
<body>
        <h1>魚C工作室</h1>
        <nav>
                <ul>
                        <li>門戶</li>
                        <li>論壇</li>
                        <li>空間</li>
                        <li>VIP通道</li>
                </ul>
        </nav>
        <section>
                <h2>小天才養殖場</h2>
                <articale>
                        <h3> 0 1 0 9 - 第一季收官 - 【完结撒花】</h3>
                        <p>XXXXX文章内容XXX</p>
                </articale>
                <articale>
                        <h3>閱讀，反魚幣</h3>
                        <p>XXXXXXxxxxxx</p>
                </articale>
        </section>
        <section>
                <h2>吹水閣</h2>
                <articale>
                        <h3>2017 #吹水阁 - 16 - 扯淡汇报 - 文末彩蛋 | 【欢迎群P(喷)】</h3>
                        <p>XXXxxxxxx</p>
                </articale>
                <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>Qt交流热贴</h2>
        <p>热贴名字</p>
        </aside>
        <footer>
                <p>鱼C版权所有 2017</p>
        <a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a>
        </footer>
</body>
</html>

交作业了

土耳其东木白 · 发表于 2018-5-29 17:20:47

为什么侧边栏展示在脚下，这个没看懂

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

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 59971 狗仔卡	发表于 2017-1-11 12:31:35 \| 显示全部楼层 \|阅读模式购买主题已有 52 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

评分

浏览过的版块