css网页制作（Hbuilder）

Aurene~ 2017-09-24 03:29:52

刚入门，老师布置的作业。做如图的样子。这是我的代码..哪儿错了？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>biaoge</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
.box{
background: gray;
width: 800px;
margin: 0 auto;
}
.box.header{
background: greenyellow;
height: 80px;
}
.box.nav{
background: orange;
width: 50px;
}
.box.center{

}
.box.center.left{
width: 220px;
height: 590px;
background: blueviolet;
}
.box.center.right{
width: 580px;
height: 590px;
background: burlywood;
}
.box.footer{
height: 80px;
background: red;
}
</style>

<div class="box">
<div class="header">头部-header</div>
<div class="nav">导航-nav</div>
<div class="center">
<div class="left" style="float: left;"></div>
<div class="right" style="float: right;"></div>
<div style="color: red;">中间-center</div>
</div>

<div class="clear" class="box">
<div class="footer">底部-foot</div>
</div>
</div>

</body>
</html>

...全文

1648 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

StarXDer!!! 2018-11-16

打赏
举报

最关键的一点是你代码里面.box.center.right应该之间有空格写成.box .center .right 其他的你慢慢调吧，自己的作业还是自己完成比较好

三打不溜 2018-11-10

打赏
举报

style标签放错位置了，要放在head标签里面

热心市民郭先生 2017-09-25

打赏
举报

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>biaoge</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
background: gray;
width: 800px;
margin: 0 auto;
}
.header{
background: greenyellow;
height: 80px;
}
.nav{
background: orange;
height: 50px;
}
.left{
width: 220px;
height: 590px;
background: blueviolet;
float: left;
}
.right{
width: 580px;
height: 590px;
background: burlywood;
float: right;
}
.footer{
background: red;
height: 80px;
margin-top: 590px;
}
</style>
</head>
<body>
<div class="box">
    <div class="header">头部-header</div>
    <div class="nav">导航-nav</div>
    <div class="left"></div>
    <div class="right">中间-center</div>
    <div class="footer">底部-foot</div>           
</div>
</body>
</html>

不需要加太多选择器

Aurene~ 2017-09-24

打赏
举报

引用 1 楼 qq_29594393 的回复:

中间并列的话,需要display:inline-block;

我先弄起来是这样...

在<div class="center" 后加了style="display:inline-block;width:800px;height:590px" 就成这样了..

请问具体怎么用？还是哪儿打的不对。大佬帮帮忙~

当作看不见 2017-09-24

打赏
举报

中间并列的话,需要display:inline-block;

hongmei85 2017-09-24

打赏
举报


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>biaoge</title>
<style>
*{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
.box{
background: gray;
width: 800px;
margin: 0 auto;
}
.box .header{
background: greenyellow;
height: 80px;
}
.box .nav{
background: orange;
height: 50px;
}
.box .center{

}
.box .center .left{
width: 220px;
height: 590px;
background: blueviolet;
}
.box .center .right{
width: 580px;
height: 590px;
background: burlywood;
}
.box .footer{
height: 80px;
background: red;
}
</style>
</head>
<body>

<div class="box">
<div class="header">头部-header</div>
<div class="nav">导航-nav</div>
<div class="center">
<div class="left" style="float: left;"></div>
<div class="right" style="float: right;">中间-center</div>
</div>

<div class="clear" class="box">
<div class="footer">底部-foot</div>
</div>
</div>

</body>
</html>

原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...