MyException - 我的异常网
当前位置:我的异常网» Web前端 » 架构中的无缝连接(边框线的衔接)

架构中的无缝连接(边框线的衔接)

www.MyException.Cn  网友分享于:2013-08-22  浏览:9次
架构中的无缝连接(边框线的对接)
架构中的无缝连接(边框线的对接)

今天 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

文章评论

程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员都该阅读的书
程序员都该阅读的书
每天工作4小时的程序员
每天工作4小时的程序员
我的丈夫是个程序员
我的丈夫是个程序员
10个调试和排错的小建议
10个调试和排错的小建议
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
我是如何打败拖延症的
我是如何打败拖延症的
编程语言是女人
编程语言是女人
Java程序员必看电影
Java程序员必看电影
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员的鄙视链
程序员的鄙视链
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员必看的十大电影
程序员必看的十大电影
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
一个程序员的时间管理
一个程序员的时间管理
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
 程序员的样子
程序员的样子
总结2014中国互联网十大段子
总结2014中国互联网十大段子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
代码女神横空出世
代码女神横空出世
鲜为人知的编程真相
鲜为人知的编程真相
程序员和编码员之间的区别
程序员和编码员之间的区别
老程序员的下场
老程序员的下场
如何成为一名黑客
如何成为一名黑客
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
中美印日四国程序员比较
中美印日四国程序员比较
程序员应该关注的一些事儿
程序员应该关注的一些事儿
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有