0 0 1 5 - body元素 - 区块五座大山,Web密训营,Web开发,鱼C论坛

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

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

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

交！作！业！

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

{:9_218:}

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

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

{:10_256:}

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

这内容偏少{:10_249:}

不二如是 发表于 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>来做”

实在没看明白。。。{:10_266:}

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

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

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

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

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

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

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

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

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

只要把header、footer、section都放进article就可以了{:10_297:}

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>
            <h1>鱼C工作室</h1>
            <nav>
                     <ul>
                           <li>门户</li>
                           <li>论坛</li>
                           <li>空间</li>
                           <li>VIP通道</li>
                     </ul>
            </nav>
   </header>

   <section>    
                     <h2>HTML5-庖丁解牛</h2>
            <article>
                     <h3>XXXX.body元素</h3>
            </article>
   </section>

   <section>
            <h2>JavaScript-庖丁解牛</h2>
            <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>    
            <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?mod=viewthread&tid=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>
<linkhref="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

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

页: [1] 2

鱼C论坛's Archiver