HTML5的代码有没有大神帮我做一下 5
请用语义化标签构建一个网页结构，具体如下：（1）页面包含一个头区域、中间区域、尾区域。（2）中间区域为并列的两部分，侧边栏和一个专题性内容区。（3）背景边框颜色不限。...
请用语义化标签构建一个网页结构，具体如下：
（1） 页面包含一个头区域、中间区域、尾区域。
（2） 中间区域为并列的两部分，侧边栏和一个专题性内容区。
（3） 背景边框颜色不限。 展开
（1） 页面包含一个头区域、中间区域、尾区域。
（2） 中间区域为并列的两部分，侧边栏和一个专题性内容区。
（3） 背景边框颜色不限。 展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,text
area,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:none; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
.publish{
margin: 0 auto;
width: 1000px;
overflow: hidden;
}
header{
height: 60px;
background: #ccc;
border-radius: 5px;
text-align: center;
}
.content{
margin-top: 20px;
margin-bottom: 20px;
height: 300px;
border-radius: 5px;
}
article{
width: 700px;
height: 300px;
float: left;
background: #123bad33;
}
article h3{
line-height: 40px;
width: 95%;
height: 40px;
border-radius: 3px;
margin: 0 auto;
font-weight: bolder;
background: #dbf;
}
article section{
width: 95%;
margin: 10px auto;
height: 240px;
background: #00ff004f;
}
aside{
height: 298px;
width: 248px;
float: right;
border: 1px solid #000;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
footer{
height: 40px;
text-align: center;
line-height: 40px;
font-size: 12px;
background: #fda;
}
</style>
</head>
<body>
<header class="publish">页头</header>
<div class="publish content clearfix">
<article>
<h3>专题标题</h3>
<section>专题内容</section>
</article>
<aside>
侧边栏
</aside>
</div>
<footer class="publish">页尾 版权所有©Xu Tel:xxxxxxxxx</footer>
</body>
</html>
Html5语义化标签：
头部<header>
专题文章<article>
侧边栏<aside>
尾部<footer>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
body {
text-align: center;
}
div {
display:inline-block;
min-height:200px;
padding:5px;
margin:0;
}
header, footer {
background-color: aquamarine;
padding:5px;
margin:5px;
}
main {
width:100%;
margin:0;
}
#main-l {
background-color: chartreuse;
width:20%;
}
#main-m {
background-color: bisque;
width:80%;
/*此处的宽度占比不取60%是因为，还得留些空间给内边距（Padding）和外边距（Margin）*/
}
</style>
<h2>inline block布局</h2>
<header>
header
</header>
<main>
<divid="main-l">左侧栏宽 20%</div>
<divid="main-m">中部栏宽 80%</div>
</main>
<footer>底部<spanid="DateSpan"></span></footer>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
