老师请问为什么我的这样显示？
来源：3-2 结构标签简单使用
慕大斯
2019-06-25 17:48:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
nav,footer{width: 100%;
height:80px;
background: #696969;
line-height: 80px;
text-align: center;}
hgroup,aside, article,figure{text-align: center;}
</style>
</head>
<body>
<div class="container">
<!--定义头部-->
<header>
<!--导航-->
<nav>
<a href="#">简介</a>
<a href="#">案例</a>
<a href="#">链接</a>
<a href="#">联系我们</a>
</nav>
<!--标题组-->
<hgroup>
<h1>《送别》</h1>
<h3>作者/李叔同</h3>
</hgroup>
</header>
<!--主题内容-->
<saction>
<!--内容部分的侧边栏-->
<aside>
<a href="#">作者简介</a>
<a href="#">背景</a>
<a href="#">社会事件</a>
<a href="#">评论</a>
</aside>
<!--文章内容-->
<article>
<p>长亭外,古道边,芳草碧连天</p>
<p>晚风拂柳笛声残,夕阳山外山</p>
<p>天之涯,地之角,知交半零落</p>
<p>人生难得是欢聚,唯有别离多</p>
<p>长亭外,古道边,芳草碧连天</p>
<p>问君此去几时还,来时莫徘徊</p>
<p>天之涯,地之角,知交半零落</p>
<p>一壶浊洒尽余欢,今宵别梦寒</p>
</article>
<!--多媒体内容-->
</saction>
<saction>
<figure>
<!--多媒体内容题目-->
<figcaption>送别歌曲</figcaption>
<div class="vedio">....</div>
</figure>
</saction>
<!--对话框-->
<saction>
<dialog open>
<dt>中文:长亭外</dt>
<dd>英文：Beyond the distant pavilion </dd>
<dt>中文:古道边</dt>
<dd>英文：Beside the ancient road</dd>
<dt>中文：芳草碧连天</dt>
<dd>英文：Jade green and fragrant, high grass joins the sky</dd>
<dt>中文：晚风拂柳笛声残</dt>
<dd>英文：Evening breeze sways dripping willows </dd>
</dialog>
<dialog open>
<dt>中文:长亭外</dt>
<dd>英文：Beyond the distant pavilion </dd>
<dt>中文:古道边</dt>
<dd>英文：Beside the ancient road</dd>
<dt>中文：芳草碧连天</dt>
<dd>英文：Jade green and fragrant, high grass joins the sky</dd>
<dt>中文：晚风拂柳笛声残</dt>
<dd>英文：Evening breeze sways dripping willows </dd>
</dialog>
</saction>
<!--尾部-->
<footer>©2017</footer>
</div>
</body>
</html>
1回答
-
同学的代码是可以的，显示成这样的效果是因为中间的部分高度不够导致的，可以设置如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> nav,footer { width: 100%; height: 80px; background: #696969; line-height: 80px; text-align: center; } section{ height:800px; } aside, hgroup, article, figure { text-align: center; } </style> </head> <body> <div class="container"> <!--定义头部--> <header> <!--导航--> <nav> <a href="#">简介</a> <a href="#">案例</a> <a href="#">链接</a> <a href="#">联系我们</a> </nav> <!--标题组--> <hgroup> <h1>《送别》</h1> <h3>作者/李叔同</h3> </hgroup> </header> <!--主题内容--> <section> <!--内容部分的侧边栏--> <aside> <a href="#">作者简介</a> <a href="#">背景</a> <a href="#">社会事件</a> <a href="#">评论</a> </aside> <!--文章内容--> <article> <p>长亭外,古道边,芳草碧连天</p> <p>晚风拂柳笛声残,夕阳山外山</p> <p>天之涯,地之角,知交半零落</p> <p>人生难得是欢聚,唯有别离多</p> <p>长亭外,古道边,芳草碧连天</p> <p>问君此去几时还,来时莫徘徊</p> <p>天之涯,地之角,知交半零落</p> <p>一壶浊洒尽余欢,今宵别梦寒</p> </article> <!--多媒体内容--> <!-- <saction> </saction> --> <figure> <!--多媒体内容题目--> <figcaption>送别歌曲</figcaption> <div class="vedio">....</div> </figure> <!--对话框--> <!-- <saction> </saction> --> <dialog open> <dt>中文:长亭外</dt> <dd>英文：Beyond the distant pavilion </dd> <dt>中文:古道边</dt> <dd>英文：Beside the ancient road</dd> <dt>中文：芳草碧连天</dt> <dd>英文：Jade green and fragrant, high grass joins the sky</dd> <dt>中文：晚风拂柳笛声残</dt> <dd>英文：Evening breeze sways dripping willows </dd> </dialog> <!-- <dialog open> <dt>中文:长亭外</dt> <dd>英文：Beyond the distant pavilion </dd> <dt>中文:古道边</dt> <dd>英文：Beside the ancient road</dd> <dt>中文：芳草碧连天</dt> <dd>英文：Jade green and fragrant, high grass joins the sky</dd> <dt>中文：晚风拂柳笛声残</dt> <dd>英文：Evening breeze sways dripping willows </dd> </dialog> --> <!--尾部--> </section> <footer>©2017</footer> </div> </body> </html>另外，同学的section标签写错了哦，要修改一下
祝学习愉快！
0
相似问题