Question

免责声明：我是一名拥有4天jQuery和CSS经验的VB人。我只想弄清楚网页设计世界！

我想学习如何处理这样的设计：

！（http://i.imgur.com/tDlRxnh.jpg）

从图像中找出它，我相信有一个外部div，图像中心对齐，图像周围有白色边框

图像两侧各有一个左右按钮，与图像重叠（天知道怎么可能！）

在外部区域下面是四个单独对齐的单选按钮

如何进行此设计？（只对设计感兴趣，而不是编码部分）

评论/解释会有所帮助！感谢。

编辑：凭借我16小时的经验，这是我迄今为止所拥有的http://jsfiddle.net/29mH2/2/。很抱歉是这样的n00b！

<div id="somediv">
    <img src=""/>
    <img src=""/>
    <img src=""/>
</div>
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">

div {
    background-color:blue;
    border: 2px white;
    position: absolute;
}

img {
    display: none;
    position: absolute;
}

Answer 1

由于您已经提到过您正在使用jQuery，请查看this tutorial和a working example of the result。

基本上，你想要制作两个列表元素。一个将包含幻灯片，另一个将包含导航按钮。

编辑：

由于您只是在寻找一个设计示例，Here's a basic example展示了如何在没有任何实际功能的情况下制作布局。

HTML：

<div class="slider">
    <img class="image" src="http://i.imgur.com/dL3io.jpg" />

    <div class="navigation-arrows">
      <div class="arrow left"><</div>
      <div class="arrow right">></div>
    </div>
</div>

<div class="navigation">
  <input type="radio" name="op">
  <input type="radio" name="op">
  <input type="radio" name="op">
  <input type="radio" name="op">
</div>

CSS：

body {
    text-align: center;
}

.slider,
.slider .image {
    width: 400px;
}

.slider .image,
.navigation-arrows,
.navigation-arrows .arrow {
    position: absolute;
}

.navigation-arrows,
.navigation-arrows .arrow {
    height: 25px;
}

.slider {
    height: 250px;
    position: relative;
    margin: 20px auto;
}

.slider .image {
    height: 250px;
    left: 0;
    top: 0;
}

.navigation-arrows {
    width: 100%;
    margin: 0 auto;
    top: 125px;
}

.navigation-arrows .arrow {
    border-radius: 12.5px;
    background: #000000;
    color: #ffffff;
    width: 25px;
    line-height: 25px;
    cursor: pointer;
}

.navigation-arrows .left {
    left: 5px;
}

.navigation-arrows .right {
    right: 5px;
}

在DIV下方对齐单选按钮

1 个答案: