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>
<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?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>
<a href="http://bbs.fishc.com/forum-171-1.html">投诉区</a>
</footer>
</body>
</html>

复制代码

交作业了

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

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

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

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

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

本帖被以下淘专辑推荐:

点评

评分

浏览过的版块