老师为什么我的dialog只显示这些?
<!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;}
section{height:800px;}
</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>
<!--多媒体内容-->
</section>
<section>
<figure>
<!--多媒体内容题目-->
<figcaption>送别歌曲</figcaption>
<div class="vedio">....</div>
</figure>
</section>
<!--对话框-->
<section>
<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>
正在回答
你好,dialog标签默认是有定位样式的,如下:
两个dialog标签定位在同一个地方,内容还一致,所以是叠加在一起了,可以将定位去掉看看:
自己测试下,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星