制作具有不同开始、结束和中断的css菜单_Css_Menu_Css Shapes

制作具有不同开始、结束和中断的css菜单

css menu

制作具有不同开始、结束和中断的css菜单,css,menu,css-shapes,Css,Menu,Css Shapes,嘿，伙计们，希望你们能帮我我已经干了一个多小时了，快把我逼疯了基本上，我是CSS的新手，但我正在学习。目前，我正在尝试复制一个如下所示的菜单：到目前为止，我所拥有的看起来像这样（我知道字体不同，但没有问题）：正如你所看到的，我得到了背景，但我只是不知道如何在每个标签之间创建开始、结束和中断（黑线部分）另外，基本上，我有as.jpg图像的开始、中断和结束。不寻找html5或css3曲线等来实现这一点。只想保持简单：）这就是我目前得到的。如果你能给我一些建议，告诉我如何做剩下的，那就

嘿，伙计们，希望你们能帮我

我已经干了一个多小时了，快把我逼疯了

基本上，我是CSS的新手，但我正在学习。目前，我正在尝试复制一个如下所示的菜单：

到目前为止，我所拥有的看起来像这样（我知道字体不同，但没有问题）：

正如你所看到的，我得到了背景，但我只是不知道如何在每个标签之间创建开始、结束和中断（黑线部分）

另外，基本上，我有as.jpg图像的开始、中断和结束。不寻找html5或css3曲线等来实现这一点。只想保持简单：）

这就是我目前得到的。如果你能给我一些建议，告诉我如何做剩下的，那就太好了。如果我用了一个不太好的方法，建议一个更好的方法

html：

    <div id="header">

            <ul id="header-list">
                <li class="header-list-item">
                    <span class= "header-list-item-span" >Home</span>

                </li>

                <li class="header-list-item">
                  <span class= "header-list-item-span" >About Us</span>

                </li>
                <li class="header-list-item">
                   <span class= "header-list-item-span" >Services</span>

                </li>
            </ul>

    </div><!--END OF HEADER -->

将ul包装在另一个div中，并在左侧内侧添加填充，您可以将起始图像作为背景。然后将右侧图像作为ul的背景，并在右侧添加填充

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <style>
        div,li,ul,span { margin: 0;padding: 0;}

        body  { width: 700px; margin: 0 auto; }

        #header 
        {
            background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
            padding-top: 50px;
            position: relative;
        }

        #header .nav 
        {
            background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
            float: right;
            width: 413px;
            padding-left: 26px;
            margin-right: 20px;
        }

        #header .nav .nav-wrapper 
        {
            background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
            padding-right: 26px;
        }

        #header ul 
        {
            position: relative;
            list-style: none;
        }
        #header ul li   
        {
            background: red;
            width: 120px;
            float: left;
            text-align: center; 
        }
        #header ul li span 
        {
             color: white; 
             padding: 8px 0px;
        }
        .clear { clear: both;}
    </style>
</head>
<body>


    <div id="header">
        <div class="nav">
            <div class="nav-wrapper">
                <ul>
                    <li><span>Home</span></li>
                    <li><span>About Us</span></li>
                    <li><span>Services</span></li>
                </ul>   
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>


</body>


div，li，ul，span{margin:0；padding:0；}
正文{宽度：700px；边距：0自动；}
#标题
{
背景：url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg)上中重复；
填充顶部：50px；
位置：相对位置；
}
#头部导航
{
背景：url(http://www.ultracomwireless.com/images/button_left.png)左上角不重复；
浮动：对；
宽度：413px；
左侧填充：26px；
右边距：20px；
}
#标题.导航.导航包装器
{
背景：url(http://www.ultracomwireless.com/images/button_right.png)右上角无重复红色；
右边填充：26px；
}
#标题ul
{
位置：相对位置；
列表样式：无；
}
#标题ulli
{
背景：红色；
宽度：120px；
浮动：左；
文本对齐：居中；
}
#标题ulli span
{
颜色：白色；
填充：8px 0px；
}
.clear{clear:两者；}

家
关于我们
服务

这里有一个想法：

将

ul

包装在

div

中。将第一个jpg设置为该div的背景图像，并添加一些

左填充

，以便图像可见。将最后一个jpg设置为ul的背景图像，并添加一些

右侧填充

，以便图像也可见

此外，在我看来，您应该通过更多地利用CSS选择器来简化HTML

标题列表可以选择为

div#header>ul

。可以使用

div#header>ul>li

选择您正在使用class

标题列表项目选择的项目。
我认为实际上没有必要使用span，您可以将样式直接应用于li
元素。
那个黑色的东西看起来像一个边框。去玩边框左
和/或边框右
和边距来推开顶部和底部。所以你需要它作为HTML5或HTML4吗？我试过了，但问题是边框一路向下，一路向上，但是顶部和底部之间有一些间隙。我试过了，但开始图像会出现在左上角。我能够垂直对齐底部的菜单，因为ul是display:table，li是display:table-cell给我几分钟时间，我将尝试制作一个示例。：）实际上我用另一种方式解决了它：）。。在“开始”和“结束”处添加了一个具有不同类别的新li，以便“开始”和“结束”的类别具有不同的背景（即背景是“开始”和“结束”的图像），并且由于无法指定宽度，因此我在标记中添加了 基本上添加了一个浏览器显示并忽略的空间。如果你还有一个问题，我很想听听，因为我正在学习：）好吧。。。你可以这么做。哈哈；我不喜欢这种包装，但同时它更适合html，因为当你删除所有css时，你会得到一个干净的即将成为链接的列表，而没有其他内容。我会远离它，因为它通常被认为是html混乱。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <style>
        div,li,ul,span { margin: 0;padding: 0;}

        body  { width: 700px; margin: 0 auto; }

        #header 
        {
            background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
            padding-top: 50px;
            position: relative;
        }

        #header .nav 
        {
            background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
            float: right;
            width: 413px;
            padding-left: 26px;
            margin-right: 20px;
        }

        #header .nav .nav-wrapper 
        {
            background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
            padding-right: 26px;
        }

        #header ul 
        {
            position: relative;
            list-style: none;
        }
        #header ul li   
        {
            background: red;
            width: 120px;
            float: left;
            text-align: center; 
        }
        #header ul li span 
        {
             color: white; 
             padding: 8px 0px;
        }
        .clear { clear: both;}
    </style>
</head>
<body>


    <div id="header">
        <div class="nav">
            <div class="nav-wrapper">
                <ul>
                    <li><span>Home</span></li>
                    <li><span>About Us</span></li>
                    <li><span>Services</span></li>
                </ul>   
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>


</body>