用css+div在浏览器中实现以下布局，求高手写一下，小弟新手，多谢啦，显示这个布局是Layout.jsp页面
3个回答
展开全部
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>layout</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
.fl{float:left; }
.fr{float:right; }
.layout{width:980px; margin:0 auto;}
.header{width:980px; height:40px; line-height:40px;background:#ccc;}
.sidebar{width:200px; height:700px; background:yellow; }
.g-con{width:780px; }
.content{height:500px; background:red; }
.footer{ height:200px; background:blue; }
</style>
</head>
<body>
<div class="layout">
<div class="header">header</div>
<div class="clearfix">
<div class="sidebar fl">sidebar</div>
<div class="g-con fr">
<div class="content ">content</div>
<div class="footer">footer</div>
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;
border:0;
margin:0;
}
.all{
width:1000px;
margin:0 auto;
}
.top{
height:100px;
background:#06F;
}
.left{
width:200px;
float:left;
background:#F00;
height:400px;
}
.center{
float:left;
width:800px;
}
.center_top{
background:#0F0;
height:200px;
}
.center_bottom{
background:#FF0;
height:200px;
}
</style>
</head>
<body>
<div class="all">
<div class="top">这个是上部分</div>
<div class="left">这个是左边</div>
<div class="center">
<div class="center_top">这个是中上</div>
<div class="center_bottom">这个是中上</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
padding:0;
border:0;
margin:0;
}
.all{
width:1000px;
margin:0 auto;
}
.top{
height:100px;
background:#06F;
}
.left{
width:200px;
float:left;
background:#F00;
height:400px;
}
.center{
float:left;
width:800px;
}
.center_top{
background:#0F0;
height:200px;
}
.center_bottom{
background:#FF0;
height:200px;
}
</style>
</head>
<body>
<div class="all">
<div class="top">这个是上部分</div>
<div class="left">这个是左边</div>
<div class="center">
<div class="center_top">这个是中上</div>
<div class="center_bottom">这个是中上</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
再给点分吧我给你写个。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
