html css mondrian定位
html css mondrian定位
提问于 2016-01-28 19:13:47
奎尔泰。嘿，伙计们，学习HTML，尝试创建蒙德里安风格的形象，我只得到六个框，其余的没有出现(框7，8和9)。这是密码。我做错了什么？我是个初学者。页面上的像素用完了吗？这是一个带有2560x1600虹膜显示器的mac电脑。编辑:我尝试将最后三个框的定位属性更改为绝对的、静态的、固定的和其余的，但是这些框没有出现。尝试了各种方式的调试，但没有发现正在犯的错误。
<!DOCTYPE html>
<html>
<head>
<style>
div.box1 {
float: left;
background-color: white;
width: 150px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
/* Border widths: Top.px Right.px Bottom.px Left.px */
}
div.box2 {
float: left;
background-color: white;
width: 300px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
}
div.box3 {
float: left;
background-color: yellow;
width: 200px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
}
div.box4 {
position: relative;
left: 0px;
top: 80px;
background-color: white;
width: 30px;
height: 100px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;}
div.box5 {
position: relative;
left: 80px;
bottom: 95px;
background-color: red;
width: 270px;
height: 150px;
padding: 110px;
border-style: solid;
border-width: 0px 15px 15px 15px;}
div.box6 {
position: relative;
left: 585px;
bottom: 494px;
background-color: yellow;
width: 160px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
div.box7 {
position: relative;
right: 50;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
div.box8 {
position: relative;
right: 50;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
div.box9 {
position: relative;
right: 50;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;}
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</body>
</html>谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-28 19:19:22
您在divs 6、7、8和9上有额外的尾括号。在7、8和9的一些位置样式之后，您也缺少了px。这应该会显示这些部分：
<!DOCTYPE html>
<html>
<head>
<style>
div.box1 {
float: left;
background-color: white;
width: 150px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
/* Border widths: Top.px Right.px Bottom.px Left.px */
}
div.box2 {
float: left;
background-color: white;
width: 300px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
}
div.box3 {
float: left;
background-color: yellow;
width: 200px;
height: 5px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;
}
div.box4 {
position: relative;
left: 0px;
top: 80px;
background-color: white;
width: 30px;
height: 100px;
padding: 30px;
border-style: solid;
border-width: 0px 15px 15px 0px;}
div.box5 {
position: relative;
left: 80px;
bottom: 95px;
background-color: red;
width: 270px;
height: 150px;
padding: 110px;
border-style: solid;
border-width: 0px 15px 15px 15px;}
div.box6 {
position: relative;
left: 585px;
bottom: 494px;
background-color: yellow;
width: 160px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
div.box7 {
position: absolute;
right: 50px;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
div.box8 {
position: absolute;
right: 50px;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
div.box9 {
position: absolute;
right: 50px;
bottom: 50px;
background-color: yellow;
width: 50px;
height: 60px;
padding: 50px;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35070014
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号