Question

请检查此图片链接： http://postimg.org/image/4iooctxxt/

如您所见，我指出了3导航痕迹。

我如何使用CSS / CSS3和HTML获得此功能。如何才能做到这一点？如果可能的话，如何用背景图像完成。

Answer 1

试试这个HTML和CSS：

<html>
<head>
    <style>
        body
        {
            margin: auto;
        }

        #one, #two, #three
        {
            position: relative;
            width: 200px;
            height: 40px;
            float: left;
            background-color: #E6E6E6;
            cursor: pointer;
            border-top: 1px solid gray;
            border-bottom: 1px solid gray;
        }

        #one
        {
            border-left: 1px solid gray;
        }

        #one:after, #two:after, #three:after
        {
            position: absolute;
            width: 0; 
            height: 0; 
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 10px solid #E6E6E6;
            left: 100%;
            top: 0px;
            content: "";
            z-index: 1;
        }

        #one:hover, #two:hover, #three:hover
        {
            background-color: #4DB84D;
        }

        #one:hover:after, #two:hover:after, #three:hover:after
        {
            border-left: 10px solid #4DB84D;
        }

        #circle, #text
        {
            float: left;
        }

        #circle
        {
            position: relative;
            background-color: white;
            color: black;
            border-radius: 50%;
            width: 21px;
            height: 21px;
            left: 15px;
            top: 50%;
            margin-top: -12px;
            text-align: center;
            border: 1px solid gray;
        }

        #text
        {
            position: relative;
            left: 20px;
            top: 50%;
            color: black;
            margin-top: -11px;
        }

        #one:hover #circle, #two:hover #circle, #three:hover #circle
        {
            background-color: #009900;
            color: white;
        }

        #one:hover #text, #two:hover #text, #three:hover #text
        {
            color: black;
        }

        #navigation
        {
            padding: 40px;
            position: absolute;
            text-align: center;
            background-color: black;
            border-radius: 10px;
            box-shadow: 0px 0px 10px black;
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="navigation">
        <div id="one">
            <div id="circle">
                <b>1</b>
            </div>
            <div id="text">
                Connect with Facebook
            </div>
        </div>
        <div id="two">
            <div id="circle">
                <b>2</b>
            </div>
            <div id="text">
                Invite friends
            </div>
        </div>
        <div id="three">
            <div id="circle">
                <b>3</b>
            </div>
            <div id="text">
                Complete Profile
            </div>
        </div>
    </div>
</body> 
</html>

您可以复制并粘贴此内容，以查看新html文档中发生的情况。当然，您可以根据需要对其进行修改。

编辑：这是一个完整的模板。要查看，请创建一个新的html文档，复制并粘贴代码，然后将其打开。

Answer 2

将bootstrap文件包含在您的代码中。例如：

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

它会创建面包屑

导航面包屑：使用css和html

2 个答案: