1

早上好，

我正在尝试设计一个网页，我认为这是一个简单的 CSS 布局，但我想确保以最有效的方式处理它。由于我的声誉，我无法附上我的模型图像，但希望下面的 JSfiddle 能够清楚地说明我的最终目标是什么。

我还用我已经完成的东西模拟了一个 jsFiddle。但是有些项目我不确定如何完成。IE，'option 1'的宽度我想稍微重叠'option3和4'。以及一些覆盖 3 和 4 的 dropdshadow，为选项 1 提供一些深度和焦点。

http://jsfiddle.net/rXq7F/3/

我不确定这种设计是否有名称，但任何以正确方式完成此类事情的帮助都将不胜感激！

谢谢！

     <div class="row">
    <div class="span4">
      <h2>2</h2>
      <p> </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span4">
      <h2>3</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   </div>
    <div class="span4 middle" style="">
      <h2>1</h2>
      <p></p>
      <p></p>
    </div>

    <div class="span4">
      <h2>4</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>


    <div class="span4">
      <h2>5</h2>
      <p></p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>        

  </div>
4

2 回答 2

1

比你必须玩的z-index。

我给了中间一个z-index: 2，也给了其他人z-index: 1。

小提琴

于 2013-08-02T12:32:56.217 回答
0

试着让它响应。

<div class="row">
<ul class="span4">
<li>2</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>3</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row middle">
<ul class="span4">
<li>1</li>
<li></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>4</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

<div class="row">
<ul class="span4">
<li>5</li>
<li><a class="btn" href="#">View details »</a></li>
<li></li>
</ul>
</div>

body {
    clear: both;
    width: 70%;
    margin: 0 auto;
    padding-top: 10%;
}
.span4 {
    list-style: none;
    z-index: 1;
}
.row {
    float: left;
    margin: 0;  
    width: 18.6%;
    border: 1px solid #EEE;
    height: 150px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    z-index: 1;
}
.row:first-child {
    margin-left: 3%;
}
.row:last-child {
    margin-right: 3%;
}
.middle {
    height: 200px;
    margin-top: -25px;
    box-shadow: 0 10px 5px #EC6262, 0 -10px 5px #EC6262;
    -webkit-box-shadow: 0 10px 5px #EC6262, 0 -10px 5px #EC6262;
    z-index: 2;
}
.row li {
    padding: 8% 0;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    text-decoration: none;
}
于 2013-08-02T13:05:55.093 回答