老师为什么我的dialog只显示这些?

老师为什么我的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>&copy2017</footer>

</div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5d12e1400001e92007400505.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

你好,dialog标签默认是有定位样式的,如下:

http://img1.sycdn.imooc.com//climg/5d131a3e0001d97403410360.jpg

两个dialog标签定位在同一个地方,内容还一致,所以是叠加在一起了,可以将定位去掉看看:

http://img1.sycdn.imooc.com//climg/5d131a8500017da002740084.jpg

自己测试下,祝学习愉快!

  • 慕大斯 提问者 #1
    谢谢,请问dailog标签自带绝对定位样式是么?
    2019-06-26 15:25:40
  • 好帮手慕星星 回复 提问者 慕大斯 #2
    是的哦,自己可以在控制台中查看。
    2019-06-26 15:47:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师