Question

我想在CSS中用香脂风格创建一个菜单（参见：http://img.skitch.com/20100130-pr6qp63amd1nkwy4xar2ds3xex.png）它的样子。我刚刚开始研究它，但已经锁定了......不知道如何在CSS中做到这一点。

所以主要有以下差距：

如何制作略微粗糙的边框？我想使用背景图像，但后来意识到，在这种情况下，要以类似的方式使其看起来很难。更长一点的菜单文字
如何将菜单与容器对齐？我的意思是菜单的选定项目，右边没有边框（内容也没有边框）。有一分钟我认为我可以定义右边没有边框的菜单...然后将其移近边界内容（因此它会隐藏项目附近的边框）......但我认为这是一条通往无处的路径

提前致谢！

Answer 1

您的边框几乎必须使用背景图片。您需要的图像长度超过最长的项目。
选定的标签类应该有一个白色的边框右边，取消选中的标签应该是一个黑色边框右边。

代码：

<style type="text/css">
.menu {
    margin: 0;
    padding: 0;
    float: left;
    width: 10%;
    position: relative;
    left: 2px;
}

.menu li {
    /* Use a background image with your lines on all four sides */
    border: 2px solid black;
    background-color: green;

    list-style: none;
    margin: 0;
    padding: 0;
}

.menu .selected {
    /* Use a background image with your lines and a white background inside the tab */
    border-right: none;
    background-color: white;
}

.body {
    border: 2px solid black;
    margin-left: 10%;
}
</style>

<div>
    <ul class="menu">
        <li class="selected">Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
    <div class="body">
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
    </div>
</div>

CSS：制作标签式菜单。需要的想法

1 个答案: