61,126
社区成员
发帖
与我相关
我的任务
分享拜托大家帮我看看 到底是哪里出错了？
拜托大家了！！!
副内容区这一块 要怎么写才能和下面的这张图里面的副内容区的位置一样？
<style>
.head {width:1020px;
height:100px;
background-color:#999999;}
.page {overflow:hidden;}
.left { width:30%;
height:400px;
float:left;}
.center { width:40%;
height:400px;
margin:0 auto;}
.right { width:30%;
height:400px;
float:right;}
.foot {width:1020px;
height:50px;
background-color:#999999;}
</style>
</head>
<body>
<div class="container">
<div class="head">这里是头部</div>
<div class="page">
<div class="left">这里是侧栏新闻列表</div>
<div class="center">这里是产品列表</div>
<div class="right">这里是副内容区</div>
</div>
<div class="foot">这里是底部</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
葉幺 2020-12-14
- 打赏
- 举报
修改center 样式
.center { width:40%;
height:400px;
float: left;}
weixin_50944805 2020-12-12
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
html,body{
margin: 0;
padding: 0;
}
.container{
width: 1020px; /*调整页面大小 满屏可以用 100%*/
margin: 0 auto;
}
.head {
width: 100%;
height: 100px;
background-color: #999999;
}
.page {
overflow: hidden;
}
.left {
width: 30%;
height: 400px;
float: left;
}
.center {
width: 40%;
height: 400px;
/* margin: 0 auto; */
float: left;
}
.right {
width: 30%;
height: 400px;
float: right;
}
.foot {
width: 100%;
height: 50px;
background-color: #999999;
}
</style>
<body>
<div class="container">
<div class="head">这里是头部</div>
<div class="page">
<div class="left">这里是侧栏新闻列表</div>
<div class="center">这里是产品列表</div>
<div class="right">这里是副内容区</div>
</div>
<div class="foot">这里是底部</div>
</div>
</body>
</html>
shuxhan 2020-12-11
- 打赏
- 举报
参考一下，现在圣杯布局很少见了，至少我不怎么写
https://blog.csdn.net/qq_38128179/article/details/86533976
