
求下列图片使用div+css完成布局模式的制作代码!急!!
DIV结构如下:│body{}/*这是一个HTML元素,*/└#Container{}/*页面层容器*/├#Header{}/*页面头部*/├#PageBody{}/*页...
DIV结构如下:
│body {}/*这是一个HTML元素, */
└#Container{}/*页面层容器*/
├#Header {}/*页面头部*/
├#PageBody {}/*页面主体*/
│├#Sidebar {}/*侧边栏*/
│└#MainBody{}/*主体内容*/
└#Footer {}/*页面底部*/
1) 使用DIV+CSS技术实现如图所示导航的制作
2) 页面宽度设置为960px;高度自己设置。
3) #header部分:宽960px高100px,下边界10px.
4) #sidebar部分:宽260px高自定义,右边界10px.
5) #footer部分:宽960px高80px,上边界10px.
6) 将完成作品以“姓名”为文件名保存,并上传到考试指定位置,否则记为零分。
只要回答,秒采纳!!!!!急求!! 展开
│body {}/*这是一个HTML元素, */
└#Container{}/*页面层容器*/
├#Header {}/*页面头部*/
├#PageBody {}/*页面主体*/
│├#Sidebar {}/*侧边栏*/
│└#MainBody{}/*主体内容*/
└#Footer {}/*页面底部*/
1) 使用DIV+CSS技术实现如图所示导航的制作
2) 页面宽度设置为960px;高度自己设置。
3) #header部分:宽960px高100px,下边界10px.
4) #sidebar部分:宽260px高自定义,右边界10px.
5) #footer部分:宽960px高80px,上边界10px.
6) 将完成作品以“姓名”为文件名保存,并上传到考试指定位置,否则记为零分。
只要回答,秒采纳!!!!!急求!! 展开
1个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color:gray;
margin:0;
}
#Container{
width:960px;
margin:auto;
background-color:orange;
}
#Header{
height:100px;
margin-bottom:10px;
background-color:green;;
}
#PageBody{
font-size:0;
background-color:blue;
}
#Footer{
height:80px;
margin-top:10px;
background-color:pink;
}
#SideBar{
font-size:12px;
display:inline-block;
vertical-align:top;
height:300px;
width:260px;
margin-right:10px;
background-color:yellow;
}
#MainBody{
font-size:12px;
display:inline-block;
vertical-align:top;
height:300px;
width:690px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header"></div>
<div id="PageBody">
<div id="SideBar"></div>
<div id="MainBody"></div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color:gray;
margin:0;
}
#Container{
width:960px;
margin:auto;
background-color:orange;
}
#Header{
height:100px;
margin-bottom:10px;
background-color:green;;
}
#PageBody{
font-size:0;
background-color:blue;
}
#Footer{
height:80px;
margin-top:10px;
background-color:pink;
}
#SideBar{
font-size:12px;
display:inline-block;
vertical-align:top;
height:300px;
width:260px;
margin-right:10px;
background-color:yellow;
}
#MainBody{
font-size:12px;
display:inline-block;
vertical-align:top;
height:300px;
width:690px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header"></div>
<div id="PageBody">
<div id="SideBar"></div>
<div id="MainBody"></div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
追问
好人!!谢
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询