我可以帮助您翻译这段内容,该段落描述了制作一个HTML/CSS的轮播图的过程。
HTML:
<body>
<div id="container">
<div id="wrapper">
<div id="d1" class="box"><p>DIV#1</p></div>
<div id="d2" class="box"><p>DIV#2</p></div>
<div id="d3" class="box"><p>DIV#3</p></div>
<div id="d4" class="box"><p>DIV#4</p></div>
</div>
</div>
</body>
CSS:
.box {
height: 100px;
width: 100px;
margin: 15px;
border: 2px solid black;
color: black;
float: left;
}
#container {
width: 150px;
height: 144px;
overflow: hidden;
border: 2px solid black;
}
#wrapper {
height: 140px;
width: 555px;
border: 2px solid green;
position: relative;
left: 0px;
}
#d1 {
background-color: blue;
}
#d2 {
background-color: red;
}
#d3 {
background-color: green;
}
#d4 {
background-color: yellow;
}
这是 jsfiddle 的链接:http://jsfiddle.net/97jhB/。
我打算稍后添加 JavaScript 控件和左/右按钮。
首先,我只想概念性地了解它是如何工作的。
我试图通过调整包裹层的
left
来实现图片轮播效果。如果我不断减少包裹层的
left
,我将能够逐步看到盒子。我有几个问题:
- 如果我不将包裹层的
position
设置为relative
,对它的left
进行更改将不会生效。为什么?难道包裹层默认不是相对定位吗? - 如果我玩弄包裹层的
margin-left
而不是left
,它似乎也能按照预期运行。
在这两种方法之间哪个更好?使用left
还是margin-left
?
relative
使用这些属性根据其位置来移动元素。 - Hashem Qolami