错误的标签

错误的标签

这个网页，这样布局可以吗？到红色标记的地方为什么标签不能用？

http://img1.sycdn.imooc.com/climg//594de5130001bffc23211340.jpghttp://img1.sycdn.imooc.com/climg//594e0ac8000115bd11851303.jpg
ATLAS3 2017-06-24
源自：HTML5网页布局   1-1 html5页面布局概述
25
收起

正在回答 回答被采纳积分+1

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

4回答
Miss路 2017-06-26 12:09:33

需要在dialog中添加属性：open="open"，，即：<dialog open="open">才能显示，但是目前这个标签对浏览器的兼容性不太好，而且有默认的属性，不太好用，不建议使用，如果定义一个块的话建议使用div，这是最常用的方法。祝学习愉快！

0
收起回答
提问者 ATLAS3 2017-06-25 19:49:15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="zuoye.css" rel="stylesheet" type="text/css">
</head>
<body>
 
<header>
<div>
<a name="logo" href="zuoye.html"><img src="../img/logo.jpg"></a>
<ul>
    <a href="#">HOME</a>
    <a href="#">PORTFOLIO</a>
    <a href="#">TEAM</a>
    <a href="#">CONTACT US</a>
</ul>
</div>
<nav>
<div>
<h1>welcome to website</h1>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<img src="../img/banner.jpg">
</nav>
</header>
 
 
 
 
<section>
<h2>portfolio</h2>
<p>lorem ipsum dolor sit consectetur adipisicing elit.sed do eiusmodtempor incididunt ut labore et<br>
<p>dolore magna aliqua. ut enim ad minim veniam</p>
<ul>
<a href="#">ALL</a>
<a href="#">WEB</a>
<a href="#">SOFTWARE</a>
<a href="#">WORKS</a>
<a href="#">BRANDS</a>
</ul>
<img src="../img/portfolio-nav-img.jpg">
</section>
 
<aside>
<h2>stats</h2>
<p>lorem ipsum dolor sit, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut ladore et<br>
dolore magna aliqua. ut ad minim veniam</p>
<ul>
<dd><img src="../img/stats1.jpg"></dd>
<dd>Margins</dd>
<dt>12,000</dt>
</ul>
<ul>
<dd><img src="../img/stats2.jpg"></dd>
<dd>Completed</dd>
<dt>5,681</dt>
</ul>
<ul>
<dd><img src="../img/stats3.jpg"></dd>
<dd>Projects</dd>
<dt>432</dt>
</ul>
<ul>
<dd><img src="../img/stats4.jpg"></dd>
<dd>Customers</dd>
<dt>86</dt>
</ul>
</aside>
<article>
<div>
<h3>team</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor in cididunt ut labore et<br>
dolore magna aliqua. ut enim ad minim veniam</p></div>
<div>
<ul>
<dd><img src="../img/team1.jpg"></dd>
<dt>Abigail</dt>
<dd>lorem ipsum dolor sit amet, consectetur<br>
adipisic</dd>
</ul>
<ul>
<dd><img src="../img/team2.jpg"></dd>
<dt>Andy</dt>
<dd>5lorem ipsum dolor sit amet,<br>
consectetur adipisic</dd>
</ul>
<ul>
<dd><img src="../img/team3.jpg"></dd>
<dt>jacquelie</dt>
<dd>lorem ipsum dolor sit amet, consectetur<br>
adipisic</dd>
</ul>
</div>
</article>
<dialog>
<h3>Contact Us<h3>
<p>lorem ipsum sit consectetur adipisicing elit, sed do eiusmod tempor tempor incididunt ut labore et<br>
dolore magna aliqua. ut enim ad minim venam</p>
</dialog>
 
 
<footer>
<div><p>copright © 2017.lifangji.cn ALL Rights Reserved</p></div>
</footer>
</body>
</html>

你看看吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
@charset "utf-8";
/* CSS Document */
*{
    font-family:"Microsoft YaHei UI";
    font-size:14px;
    margin:0;
    padding:0;
    border:none;}
a{
    text-decoration:none;}
ul{
    list-style:none;}
bady{
    width:1490px;
    height:1490px;
    margin:0 auto;}
 
header{
     
    background:#2e2e2e;
    height:50px;}
header > div{
    width:1200px;
    margin:0 auto;}
header > div > a{
    display:block;
    float:left;
    margin:10px;}
header > div > ul{
    float:right;
    display:block;
    margin:15px;
    }
header > div > ul > a{
    color:#ffffff;
    padding:15px;}
 
header > nav {
    width:1490px;
    margin:0 auto;}
header > nav > img{
    width:1490px;}
header > nav > div{
    width:1490px;
    position:absolute;
    text-align:center;
    color:#ffffff;
    top:350px;
    }
header > nav > div > h1{
    font-size:48px;}
     
 
 
section{
    position:relative;
    width:1490px;
    margin:0 auto;
    text-align:center;
    line-height:100px;
    top:800px;}
section > h2{
    font-size:48px;
    font-weight:lighter;
    color:#f26208;
    margin:80px auto;
    }
section> p{
    margin:-60px auto;}
section > ul{
    width:1490px;
    margin:60px 550px;
     
    }
section > ul >a{
    display:block;
    border: 1px solid #f26208;
    float:left;
    line-height:20px;
    margin:50px 10px;
    color:#f26208;
    padding:5px;
    }
section > img {
    width:1490px;
    }
     
aside{
    position:relative;
    top:900px;
    width:1490px;
    margin:0 auto;
    text-align:center;
    line-height:80px}
aside > h2{
    font-size:48px;
    font-weight:lighter;
    color:#f26208;}
aside > p{
    line-height:30px;
    margin:50px;
    }
aside > div{
    }
aside > ul {
    position:relative;
    display:blaock;
    float:left;
    padding:50px;
    line-height:60px;
    left:350px;}
aside > ul > dt{
    font-size:48px;
    color:#f26208;
    font-weight:lighter;
    line-height:50px;}
aside > ul > dd{
    font-weight:bold;}
 
article{
    height:700px;
    background:#2e2e2e;
    position: relative;
    top:1200px;
    width:1490px;
    margin:0 auto;
    }
article > div:first-of-type{
    position: absolute;
     
    width:1490px;
    text-align:center;
     
    }
article > div:first-of-type > h3{
    width:1490px;
    font-size:48px;
    color:#f26208;
    line-height:220px;
    font-weight:lighter;}
article > div:first-of-type > p{
    width:1490px;
    margin:0 auto;
    color:#ffffff;
    line-height:30px;
    }
article > div:last-of-type{
    width:1490px;
    margin:0 auto;
    padding:350px;
    }
article > div:last-of-type > ul{
    position:relative;
    display:block;
    float:left;
    text-align:center;
    color:#ffffff;
    margin:0 20px;}
footer{
    top:300px;
    background:#000;}
footer > div {
    width:1200px;
    height:50px;
    margin:0 auto;
    }
footer > div > p{
    color:#ffffff;
    text-align:center;
    }


0
收起回答
  • Miss路 #1
    只有html代码，没有css代码我也无法帮你看，把完整的代码粘上来，包括html和css，如果有js的也要粘上来。这样才能帮你准确找到问题所在。
    2017-06-26 09:59:38
Miss路 2017-06-24 22:07:03

<dialog> 标签是 HTML 5 的新标签。你声明的是html5还是html4呢？必须要声明是html5才行哦。如果还不行的话把你的代码粘贴上来，不完整的代码没有办法为你找问题，粘贴代码。祝学习愉快！

0
收起回答
Miss路 2017-06-24 12:58:59

左侧的画图布局是可以的，但是关于dialog标签，由于你的截图不完整，所以我在你的截图上只看到了结束标签</dialog>,没有看到开始标签<dialog>，是你遗漏了，还是没有截全呢，建议排查一下这个问题。

祝学习愉快！

0
收起回答
  • 提问者 ATLAS3 #1
    有开始标签<dialog>也是一样啊
    2017-06-24 14:47:19
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

做搜索功能的时候出现错误
13 0 3
p标签里可以包含其他标签么？？？
20 0 3
老师，这里a标签包裹img标签怎么操作的？用的快捷键吗？
18 0 3
select标签为什么不放在form标签内？
0 0 3
为什么头和尾都有的编码，上传作业总提示我错误？
19 1 4

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码