我是HTML / CSS的新手,并且一直在尝试了解CSS的相对/抽象概念。我想做的是将一个图像堆叠在另一个图像的顶部。提供的图像显示了我当前的布局与意图:
(直接链接到图像,需要10rep才能发布<img></img>
)
目前:
http://s4.postimg.org/vlf4czqul/example.png
期望:
http://s28.postimg.org/k3cdvarp9/intentions.png
我当前的代码如下,
HTML:
<body style=background:grey">
<div class="main_container">
<img id="rounded_shell" src="shell.png" alt="">
<img id="inner_tab" src="tab_one.png" alt="">
</div>
</body>
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main_container{
position: relative;
border: 1px solid red;
width: 100%;
}
img#rounded_shell{
position: relative;
border: 1px solid blue;
max-width: 40%;
max-height: 40%;
z-index: 0;
}
img#inner_tab{
position: absolute;
right: 5em;
max-height: 40%;
max-width: 40%;
z-index: 1;
}
我有一个可以容纳所有东西的主容器(但是我确实认为可以将其删除,因为
<body>
在理论上会代替它)并且在我有两个图像的情况下,我以为我可以设置img#rounded_shell
和position: relative
,因此当我在标签页中添加图片时,可以将其设置为position: absolute
并将其放置在其父级的左上角(即img#rounded_shell
正确吗?),但它的位置如上所述。我也想让它们按比例成组地进行移动浏览,但是我想这本身就是一个不同的问题。 最佳答案
在评论中进行交流,我将提供一个示例。此示例是所有HTML / CSS。在我看来,您正在做的许多事情不一定都是通过<img>
标记生成的图像。不能更好地使用各种CSS属性,例如border-radius
,background-color
,background-image
等。
您说过您是HTML / CSS的新手,所以我假设这就是为什么要使用图像路线与CSS路线。
这就是到目前为止我将要提供的信息:
的HTML
<div class="shell">
<div class="row top-row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row bottom-row">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS类为
.row
的DIV并非完全必要。它们大多在这里充当CSS样式的“挂钩”,并帮助您可视化事物。 .shell
的宽度可防止连续出现四个以上的DIV,因此,如果我们使用.row
CSS类删除DIV,则后四个将出现在前四个以下。的CSS
.shell {
background-color: #eee;
border: 1px solid black;
border-radius: 18px;
width: 200px;
height: 200px;
padding: 10px;
}
.shel > .row {
overflow: auto; /* clearfix */
}
.shell > .row > div {
background-color: #ccc;
box-sizing: border-box; /* so width/height include border, padding, margin */
width: 50px;
height: 100px;
float: left;
}
.top-row > div,
.bottom-row > div {
border: 1px solid black;
border-right: 0;
}
.top-row > div:nth-child(1) {
border-top-left-radius: 15px;
}
.top-row > div:nth-child(4) {
border-top-right-radius: 15px;
border-right: 1px solid black;
}
.bottom-row > div {
border-top: 0;
}
.bottom-row > div:nth-child(1) {
border-bottom-left-radius: 15px;
}
.bottom-row > div:nth-child(4) {
border-bottom-right-radius: 15px;
border-right: 1px solid black;
}
在上面的CSS中,我使用
border-radius
创建弯角,并使用background-color
为DIV提供填充颜色。然后,我通过nth-child()伪选择器为各个DIV及其边框设置应用了选择规则。 IE9 +支持nth-child()
,不确定是否重要。您提到了外壳程序的内容将像按钮一样。我不知道单击某个按钮后会发生什么情况,因此最终可能需要更改某些元素,即
<div>
到<a>
,或者需要合并一些JavaScript。在这一点上,我的回答是一个基本示例,很可能需要您采取其他步骤才能使其正常工作。这是我的jsFiddle的链接:http://jsfiddle.net/664rLdwd/1/。