61,112
社区成员
发帖
与我相关
我的任务
分享请教一下各位,这样的样式怎么做的
我能想到两个方法布局,一个是两个float:left的DIV,还有是利用表格.
可关键就在于我实在不知道,那个边框效果怎么用CSS实现,被选中的菜单右边框被右边那个层的左边框对应位置给覆盖了?还是什么?
我前台不专业,望各位指点,谢谢
...全文
请发表友善的回复…
发表回复
oxfed 2013-03-15
- 打赏
- 举报
“被选中的菜单右边框被右边那个层的左边框对应位置给覆盖了?”
你打破这个思维定势（后者覆盖前者（从左到右的阅读习惯导致你自然的把右边的看成后来者）），就很好理解了。在你看来，右边边框的左侧部分的边线只变化了一部分，这效果很难（因为你不能设置框的某边框的一部分），然而从左边的列表项中看，它确实只是改变了一个边框的颜色而已。
你应该以目的为出发点，利用所有能用的规则实现目的（无所谓上下左右多少层还是通过背景图片抑或文本）
oxfed 2013-03-15
- 打赏
- 举报
没那么复杂吧。
如果你要实现 “被选中的菜单右边框被右边那个层的左边框对应位置给覆盖了?”，这个效果，大哥你在鼠标放上去前，左侧列表的边框border:1px solid #fff;放上去后，对应的右侧内容显示，无左侧边框，其他边框也实线，但对应列表项的右边框用白色实线。
.left-div li{border:1px solid #000;}
.left-div li.selected{border-right:1px solid #fff;}
.right-div .selected{display:block;border:1px solid #000; }
就这么个意思。上面考虑兼容以前的浏览器没有用:hover,而是通过js根据事件动态设置元素当前菜单项的class="selected"
SOTRUST 2013-03-14
- 打赏
- 举报
position:absolute;z-index:xx;不是绝对定位，是相对定位。
相对于你的父标签而定的。
z-index设置，可以是右边层比左边高，相反也一样，但肯定是比基础页面层要高。否则就看不到了。呵呵
SOTRUST 2013-03-14
- 打赏
- 举报
你看这个图的字体，就知道肯定是画上去的，网页做这样的字体不容易
左边的导航，我有80%把握是用图片切的。
右边的浮动，默认是隐藏的，当鼠标移到左边某一选项时才显示出来，包括其中的内容。
内容也是按照左边的项目提前分配好的，属性是:none；就是隐藏。
边框的线条，这个很好做，可以左边项目缺右边。内容模块框缺左边。
也可以，左边不管，一切效果由内容框来做。
这个就得看你CSS水平了。
我自是年少-韶华倾负 2013-03-13
- 打赏
- 举报
左右 位置 一个像素的重叠左边在上面 右边在下面右边是 整个 都有边框。左边 只有右边框线没有。
hsldymq 2013-03-13
- 打赏
- 举报
有没有不用绝对定位的方法?
SOTRUST 2013-03-12
- 打赏
- 举报
左边的是用鼠标移入，来变换样式，再显示邻近的内容标签。内容标签要是浮动的。position:absolute;z-index:xx;
每个栏位指定背景，鼠标移入切换成另一指定背景和内容。
同时使用循环，把其它系列的标签处于默认样式。
001007009 2013-03-11
- 打赏
- 举报
障眼法,
栏目条的右边框为0,z-index高于 右边内容部分 即可
