0

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

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

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

从图像中弄清楚，我相信有一个外部 div，图像中心对齐，图像周围有白色边框

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

Outer 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;
}
4

1 回答 1

0

既然您提到您已经在使用 jQuery，请查看本教程和结果的工作示例。

基本上，您将要创建两个列表元素。一个将包含幻灯片，另一个将包含导航按钮。

编辑：

由于您只是在寻找设计示例，因此这里有一个基本示例，展示了如何在没有任何实际功能的情况下制作您所说的布局。

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;
}
于 2013-11-13T01:24:56.790 回答