架构中的无缝连接（边框线的对接）
From Evernote: |
架构中的无缝连接（边框线的对接）Clipped from: http://ideafuture.iteye.com/blog/1262851 |
架构中的无缝连接（边框线的对接）
今天 2011年11月16日，晴……每天还是哪么忙，忙得不可开交，自己一投入工作，就好想忘记一切。
总之就不想想起别的来。今天没什么发生，写了一个又一个页面。虽然大事没有，总算有一点让自己欣慰的事。在架构页面的时候，碰到了一个一下子头大的东东，不过后来还是缓过来了。我想了一个招搞定了，还很完美！没事，晚上回来和大家分享一下。效果是这样的了，有一个选项卡，选项卡的标题叫做查看详情，意味着这个标签可以点击，点击它不是进入另一页面，而是弹出一个DIV层来，显示出里面全部内来。这里肯定要用到JS，幸好，我自己写JS，否则要到网上到处搜JS了，哪将是痛苦的事。这种JS效果我写得太多了。点到这里，显示相应的DIV层，这种简单的控制Display样式，大家都能想得到，不过，我在没有进入这个门之前，却被它挡住了很长一段时间，知道的人说它简单，不知情况的人还是什么和尚摸不着头脑。可能我说得这么多，大家看不到效果，好像等于白说，但是又不能发图片，很让人无奈，其实用图说话，可以让我省打N多文字。算了吧，我还是描述一下，不然，下面的你会觉得不过如些，不值一提。这里的关键问题不是JS实现的问题，难点在于如何让选项卡也即查看详情的边框与DIV层的边框融合在一起，而看不出破绽来，是这样的，查看详情在左边，div层在右边，Div层是一个大的矩形框，选项卡查看详情是一个小的矩形框，而且只有当点击之后才会有边框，并且点击后的右边框线无，而且还要凑巧Div在靠着选项卡的区域，边框线也无，我的意思应该能看懂哦，就是div的左边线只有一个部分是无的，不是全无呢，我也想全无。呵呵……不过没哪么简单。问题描述清楚了，下面就要看实现思路了。
我的实现思路是这样的，选项卡这边我用一个<span>套一个<b>标签，也许大家会问，这里为什么不放a标签，是因为点击它之后不需要跳转页面，用了反而增加了不少麻烦，我考虑之后放的。完整就是<span><b>查看详情</b></span>当然了，它们都飘左才行，这样我才能控制不是？然后就是为它加样式了。<span class="pos_a"><b class="pos_b">查看详情</b></span>算了这样说太慢了，我还是一次写完，大家去研究吧。
css.css;
/*css实现*/
.pos_a{
position:relative;
float:left;
}
.pos_b{
position:absolute;
float:left;
width:70px;
top:0px;
left:0px;/*这里是用控制与dis靠近用的，自己调吧。
border:1px #ccc solid;
border-right:none;/*这里是关键，
}
.dis{
width:350px;
height:250px;
border:1px #ccc solid;
}
html.html;
/*html实现*/
/*开头我就省略了*/
<div class="wrapper">
<span class="pos_a"><b class="pos_b">查看详情</b></span>
<div class="dis">这里是待显示的内容</div>
</div>
代码就这么多了，主要思想就是利浮动层在上面，会挡住下面层的内容，就是靠哪一像素的庶挡，制造效果，当然也可多于两像素，这两像素怎么来，就是控制.pos_b的width就是了，自己慢慢调着试试就行了。
选项卡的JS代码也很简单，我比别人实现起来更省代码。今天不晚了，12点了，我该睡了，有想知道的朋友，请关注我，QQ：550703900
今天 2011年11月16日，晴……每天还是哪么忙，忙得不可开交，自己一投入工作，就好想忘记一切。
总之就不想想起别的来。今天没什么发生，写了一个又一个页面。虽然大事没有，总算有一点让自己欣慰的事。在架构页面的时候，碰到了一个一下子头大的东东，不过后来还是缓过来了。我想了一个招搞定了，还很完美！没事，晚上回来和大家分享一下。效果是这样的了，有一个选项卡，选项卡的标题叫做查看详情，意味着这个标签可以点击，点击它不是进入另一页面，而是弹出一个DIV层来，显示出里面全部内来。这里肯定要用到JS，幸好，我自己写JS，否则要到网上到处搜JS了，哪将是痛苦的事。这种JS效果我写得太多了。点到这里，显示相应的DIV层，这种简单的控制Display样式，大家都能想得到，不过，我在没有进入这个门之前，却被它挡住了很长一段时间，知道的人说它简单，不知情况的人还是什么和尚摸不着头脑。可能我说得这么多，大家看不到效果，好像等于白说，但是又不能发图片，很让人无奈，其实用图说话，可以让我省打N多文字。算了吧，我还是描述一下，不然，下面的你会觉得不过如些，不值一提。这里的关键问题不是JS实现的问题，难点在于如何让选项卡也即查看详情的边框与DIV层的边框融合在一起，而看不出破绽来，是这样的，查看详情在左边，div层在右边，Div层是一个大的矩形框，选项卡查看详情是一个小的矩形框，而且只有当点击之后才会有边框，并且点击后的右边框线无，而且还要凑巧Div在靠着选项卡的区域，边框线也无，我的意思应该能看懂哦，就是div的左边线只有一个部分是无的，不是全无呢，我也想全无。呵呵……不过没哪么简单。问题描述清楚了，下面就要看实现思路了。
我的实现思路是这样的，选项卡这边我用一个<span>套一个<b>标签，也许大家会问，这里为什么不放a标签，是因为点击它之后不需要跳转页面，用了反而增加了不少麻烦，我考虑之后放的。完整就是<span><b>查看详情</b></span>当然了，它们都飘左才行，这样我才能控制不是？然后就是为它加样式了。<span class="pos_a"><b class="pos_b">查看详情</b></span>算了这样说太慢了，我还是一次写完，大家去研究吧。
css.css;
/*css实现*/
.pos_a{
position:relative;
float:left;
}
.pos_b{
position:absolute;
float:left;
width:70px;
top:0px;
left:0px;/*这里是用控制与dis靠近用的，自己调吧。
border:1px #ccc solid;
border-right:none;/*这里是关键，
}
.dis{
width:350px;
height:250px;
border:1px #ccc solid;
}
html.html;
/*html实现*/
/*开头我就省略了*/
<div class="wrapper">
<span class="pos_a"><b class="pos_b">查看详情</b></span>
<div class="dis">这里是待显示的内容</div>
</div>
代码就这么多了，主要思想就是利浮动层在上面，会挡住下面层的内容，就是靠哪一像素的庶挡，制造效果，当然也可多于两像素，这两像素怎么来，就是控制.pos_b的width就是了，自己慢慢调着试试就行了。
选项卡的JS代码也很简单，我比别人实现起来更省代码。今天不晚了，12点了，我该睡了，有想知道的朋友，请关注我，QQ：550703900
0 评论 :
发表评论