鱼C论坛

 找回密码
 立即注册
查看: 2144|回复: 20

[系列教程] 0 0 1 5 - body元素 - 区块五座大山

[复制链接]
最佳答案
213 
发表于 2017-1-11 12:31:35 | 显示全部楼层 |阅读模式
购买主题 本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2017-7-8 14:07:11 | 显示全部楼层
交!作!业!
temp4.PNG
turtle_看图王.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-8 14:15

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 加油~

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-1-11 14:19:54 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-1-11 14:21:28 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
55 
发表于 2017-1-11 15:05:11 | 显示全部楼层
这内容偏少
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-1-11 16:14:25 | 显示全部楼层

哈哈,去干别的事情了,现在来填坑~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
3 
发表于 2017-2-12 22:56:25 | 显示全部楼层
11.jpg

22.jpg
优化的话只是将utf-8提前了,之前一版的会出现乱码,还有其他要优化的话,我猜就是那个长语句的,感觉可以换行(类似C++中一行代码分行写不下,换行加个\)或者多个<p></p>来做
555.jpg
44.jpg
222.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-2-13 07:21:48 | 显示全部楼层
joker11111 发表于 2017-2-12 22:56
优化的话只是将utf-8提前了,之前一版的会出现乱码,还有其他要优化的话,我猜就是那个长语句的,感 ...

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

实在没看明白。。。

不过谢谢joker,广告打的这么666!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
3 
发表于 2017-2-13 08:29:07 | 显示全部楼层
不二如是 发表于 2017-2-13 07:21
“优化的话只是将utf-8提前了,之前一版的会出现乱码,还有其他要优化的话,我猜就是那个长语句的,感觉 ...

其实我想问的是:你留的优化article小作业大概是什么意思,没太懂,求指导
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2017-2-13 08:35:04 | 显示全部楼层
joker11111 发表于 2017-2-13 08:29
其实我想问的是:你留的优化article小作业大概是什么意思,没太懂,求指导

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

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

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

只要把header、footer、section都放进article就可以了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-4-19 15:52:23 | 显示全部楼层
本帖最后由 shishunfu 于 2017-4-19 15:54 编辑

交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Body四大区块元素</title>
  6. </head>
  7. <body>
  8.         <header><!--<header>创建头部区域。<header> 标签定义文档的页眉(介绍信息)。-->
  9.                 <h1>鱼C工作室</h1>
  10.                 <nav><!--用nav元素,对应导航信息,就是主菜单。<nav> 标签定义导航链接的部分。-->
  11.                         <ul>
  12.                                 <li>门户</li>
  13.                                 <li>论坛</li>
  14.                                 <li>空间</li>
  15.                                 <li>VIP通道</li>
  16.                         </ul>
  17.                 </nav>
  18.         </header>

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

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

  31.         <section>
  32.                 <h2>优化article</h2>
  33.                 <article>
  34.                         <header>
  35.                                 <h3>响应小甲鱼老湿号召~|为什么我要变成VIP至尊?!@EveryOne</h3>
  36.                         </header>
  37.                         <section>
  38.                                 你的选择决定你的时间,而你的时间<br>决定你的注意力<br>你最宝贵的注意力自然分清未来你会待在哪个阶层!<br>让编程改变世界!<br>欢迎你的加入!<br>我在这里等你!
  39.                         </section>
  40.                         <footer>
  41.                                 <p>文章发表日期:<time datetime="2016-11-5 15:22:03">2016年11月5日 15:22:03</time></p>
  42.                         </footer>
  43.                 </article>
  44.                
  45.         </section>
  46.         <aside>        <!--<aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。<aside> 的内容可用作文章的侧栏。-->
  47.                 <h2>小天才养殖场热贴推荐</h2>
  48.                 <p>热贴名字</p>
  49.         </aside>
  50.         <aside>
  51.                 <h2>吹水阁经典热贴</h2>
  52.                 <p>热贴名字</p>
  53.         </aside>
  54.         <aside>
  55.                 <h2>Qt交流热贴</h2>
  56.                 <p>热贴名字</p>
  57.         </aside>
  58.         <footer>
  59.                 <p>鱼C版权所有2017
  60.                         <a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a></p>
  61.         </footer>
  62. </body>
  63. </html>
复制代码
0011.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-21 22:15:35 | 显示全部楼层
英语单词背不下来怎么办?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-5-29 16:49:25 | 显示全部楼层
代码 中 最终代码  section  没放在body里,是不是写错了 http://bbs.fishc.com/forum.php?m ... =81346&ctid=539
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2017-7-13 08:35:54 | 显示全部楼层
交作业!
015.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
发表于 2018-1-22 16:09:14 | 显示全部楼层
本帖最后由 易改乌江水 于 2018-1-22 16:11 编辑

交作业!!首先是html
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>易改乌江水学习HTML5</title>
  6.                 <link href="yucxue.css" rel="stylesheet">
  7.                 <base href="http://bba.fishc.com" />
  8.                 <base target="_blank" />
  9.         </head>
  10.         <body>
  11.                 <header>
  12.                         <h1>易改乌江水</h1>
  13.                         <nav>
  14.                                 <ul>
  15.                                         <li>职业</li>
  16.                                         <li>诗词</li>
  17.                                         <li>照片</li>
  18.                                 </ul>
  19.                         <nav>
  20.                 </header>
  21.                 <section>
  22.                         <h2>华南师范大学附属外国语学校</h2>
  23.                         <article>
  24.                                 <header>
  25.                                         <h3>第一届初三学生入团仪式</h3>
  26.                                 </header>
  27.                                 <p>XXXXXXXX</p>
  28.                                 <footer>
  29.                                         <p>文章发表日期:<time datetime="2018-1-16 19:27:52">2018年1月16日 19:27:52</time></p>
  30.                                 </footer>                               
  31.                         </article>
  32.                         <article>
  33.                         <header>       
  34.                                         <h3>往来鸿儒·博雅华外FORMAL HALL</h3>
  35.                         </header>       
  36.                                 <p>XXXXXXxxxxxx</p>
  37.                                 <footer>
  38.                                         <p>文章发表日期:<time datetime="2018-1-20 12:05:23">2018年1月20日 12:05:23</time></p>
  39.                                 </footer>
  40.                         </article>
  41.                 </section>
  42.                 <section>
  43.                         <h2>辟蹊诗社</h2>
  44.                         <article>
  45.                                 <header>
  46.                                         <h3>2018 #2017诗词手迹</h3>
  47.                                 </header>
  48.                                 <p>XXXxxxxxx</p>
  49.                                 <footer>
  50.                                         <p>文章发表日期:<time datetime="2018-1-3 8:26:46">2018年1月3日 8:26:46</time></p>
  51.                                 </footer>
  52.                         </article>
  53.                 </section>
  54.                 <aside>
  55.                         <h2>辟蹊诗社热贴推荐</h2>
  56.                         <p>热贴名字</p>
  57.                 </aside>
  58.                 <aside>
  59.                         <h2>华南师范大学附属外国语学校经典热贴</h2>
  60.                         <p>热贴名字</p>
  61.                 </aside>
  62.                 <footer>
  63.                         <p>易改乌江水版权所有 2018</p>
  64.                         <p>技术支持:<a href="http://bbs.fishc.com">鱼C工作室</a></p>
  65.                 </footer>
  66.         </body>
  67. </html>
  68.                
复制代码

然后是css
  1. @charset "UTF-8";
  2. html{
  3.         height: 100%;
  4.         color: #5599FF;
  5.         font-family: sans-serif;
  6.         }
  7. body{
  8.         background: url(background.jpg);
  9.         background-size: cover;
  10.         background: url(background.jpg) center center;
  11.         margin: 0;
  12.         padding:0;
  13.         position: relative;
  14.         }
  15. #ha
  16.         {
  17.         width: 100%;
  18.         text-align: center;
  19.         }
  20. h1
  21.         {
  22.         font-size: 66px;
  23.         margin-bottom: 22px;
  24.         text-align: center;
  25.         }
  26. a
  27.         {
  28.         font-size: 20px;
  29.         background: #FFDD55;
  30.         padding:9px 22px;
  31.         text-decoration: none;
  32.         color: #FFF;
  33.         border:3px solid #FFDD55;
  34.         border-radius: 3px;
  35.         margin: 5px 33px 5px 33px;
  36.         }
  37. aside
  38.         {
  39.         text-align:right;
  40.         }
  41. header
  42.         {
  43.         font-family: KaiTi;
  44.         }
  45. ul
  46.         {
  47.         font-size: 25px;
  48.         }

复制代码

最后是几张照片
截图_1.png
截图_2.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 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>

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-13 20:13:12 | 显示全部楼层
likesunshine 发表于 2018-3-9 16:33
有个问题,怎样添加上背景图片
  1. <body background="xxx.jpg">
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-6 16:03:18 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="zh-en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Body的四大区块</title>
  6. <style type="text/css">
  7. body{
  8.         background-image: url("img/bc.png");
  9.         color:white;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14.         <header>
  15.                 <h1>鱼C</h1>
  16.                 <nav>  <!--导航-->
  17.                         <ul>
  18.                                 <li>门户</li>
  19.                                 <li>论坛</li>
  20.                                 <li>空间</li>
  21.                                 <li>VIP通道</li>
  22.                         </ul>
  23.                 </nav>
  24.                 <section> <!--一个板块-->
  25.                         <h2>小天才养殖场</h2>
  26.                         <article> <!--一篇文章-->
  27.                                 <header>
  28.                                 <h3>0109 - 第一季收官 - 【完结撒花】</h3>
  29.                                 </header>
  30.                                 <p>XXX文章内容</p>
  31.                         </article>
  32.                 </section>
  33.                 <section>
  34.                         <h2>吹水阁</h2>
  35.                         <article>
  36.                                 <h3>#吹水阁 - 16 - 扯淡汇报 - 文末彩蛋 | 【欢迎群P(喷)】</h3>
  37.                                 <p>XXX文章内容</p>
  38.                         </article>
  39.                         <article>
  40.                                 <h3>VIP至尊会员~请进,有个‘福利’偷偷给你哈~</h3>
  41.                                 <p>XXX文章内容</p>
  42.                         </article>
  43.                 </section>
  44.                 <section>
  45.                         <h2>QT交流</h2>
  46.                         <article>
  47.                                 <h3>FFFF - Qt大全 - 官网、论坛、GitHub - 【深度扫盲】</h3>
  48.                                 <P>经典毋庸置疑</P>                               
  49.                         </article>
  50.                 </section>
  51.                 <aside>
  52.                 <h2>小天才养殖场热帖</h2>
  53.                 <p>热帖名字</p>
  54.                 </aside>
  55.        
  56.                 <aside>
  57.                 <h2>吹水阁热帖</h2>
  58.                 <p>热帖名字</p>
  59.                 </aside>
  60.                
  61.                 <aside>
  62.                 <h2>QT热帖</h2>
  63.                 <p>热帖</p>
  64.                 </aside>
  65.         </header>
  66. </body >
  67. </html>








复制代码

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-26 14:23:44 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>有序排列</title>
  6. </head>
  7. <body>
  8.         <h1>魚C工作室</h1>
  9.         <nav>
  10.                 <ul>
  11.                         <li>門戶</li>
  12.                         <li>論壇</li>
  13.                         <li>空間</li>
  14.                         <li>VIP通道</li>
  15.                 </ul>
  16.         </nav>
  17.         <section>
  18.                 <h2>小天才養殖場</h2>
  19.                 <articale>
  20.                         <h3> 0 1 0 9 - 第一季收官 - 【完结撒花】</h3>
  21.                         <p>XXXXX文章内容XXX</p>
  22.                 </articale>
  23.                 <articale>
  24.                         <h3>閱讀,反魚幣</h3>
  25.                         <p>XXXXXXxxxxxx</p>
  26.                 </articale>
  27.         </section>
  28.         <section>
  29.                 <h2>吹水閣</h2>
  30.                 <articale>
  31.                         <h3>2017 #吹水阁 - 16 - 扯淡汇报 - 文末彩蛋 | 【欢迎群P(喷)】</h3>
  32.                         <p>XXXxxxxxx</p>
  33.                 </articale>
  34.                 <article>
  35.                         <h3>VIP至尊会员~请进,有个‘福利’偷偷给你哈~</h3>
  36.                         <p>XXXX谁办谁知道</p>
  37.         </article>
  38.         </section>
  39.         <section>
  40.                 <h2>Qt交流</h2>
  41.                 <article>
  42.                         <h3> FFFF - Qt大全 - 官网、论坛、GitHub - 【深度扫盲】</h3>
  43.                         <p>经典毋庸置疑</p>
  44.                         <h3>156-三位一体进进出出-【147-155】</h3>
  45.                         <p>建议18岁以上再看</p>
  46.         </article>
  47.         </section>
  48.         <aside>
  49.                 <h2>吹水閣經典熱貼</h2>
  50.                 <p>热贴名字</p>
  51.         </aside>
  52.         <aside>
  53.                 <h2>Qt交流热贴</h2>
  54.         <p>热贴名字</p>
  55.         </aside>
  56.         <footer>
  57.                 <p>鱼C版权所有 2017</p>
  58.         <a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a>
  59.         </footer>
  60. </body>
  61. </html>
复制代码


015.jpg

交作业了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-29 17:20:47 | 显示全部楼层
为什么侧边栏展示在脚下,这个没看懂
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-9-23 01:57

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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