Question

我正在尝试创建一个图像横幅旋转，它将具有＆＃34;箭头＆＃34;选择5个横幅中的任何一个时叠加。我嘲笑了我的div并且不确定如何继续。我应该将Banner1-Banner5描述作为UNORDERED LIST和LIST ITEMS并更改样式吗？或者像我在下面所做的那样将它们作为单独的div？我也不清楚如何制作＆＃34;箭头＆＃34;选择某个横幅说明时叠加。图片如下所示最终横幅应如何显示。我的框架代码也在下面。

    <!-- hp banner start -->
    <div id="hp-banner">

    <div id="hp-banner-left">
    BANNER IMAGE
    </div>

    <div id="banner-right">
    <div id="banner-right-1">
    BANNER 1 DESCRIPTION
    </div>

    <div id="banner-right-2">
    BANNER 2 DESCRIPTION
    </div>

    <div id="banner-right-3">
    BANNER 3 DESCRIPTION
    </div>

    <div id="banner-right-4">
    BANNER 4 DESCRIPTION
    </div>

    <div id="banner-right-5">
    BANNER 5 DESCRIPTION
    </div>


    </div>


    <!-- hp banner end -->
    </div>

banner image

Answer 1

虽然我同意Billy Moat的观点，但我认为通过一些额外的知识来学习css可以做些什么。

右手菜单肯定应该是一个列表，因为它正是它的样子。

我想这最难的部分就是箭头。使用css实际上非常简单。

http://jsfiddle.net/Lddxooum/

HTML

<ul>
    <li>banner 1</li>
    <li>banner 2</li>
    <li>banner 3</li>
    <li>banner 4</li>
    <li>banner 5</li>
</ul>

CSS

div {
    float:left;
    width:200px;
    height:100px;
    background:orange;
}

ul {
    float:left;
    margin:0;
    padding:0;
}

li {
    list-style:none;
    line-height:20px;
    background:gray;
    position:relative;
}

li:hover {
    color:white;
    background:blue;
}

li:hover:before {
    content:'';
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:20px solid blue;
    position:absolute;
    right:100%;
    top:0;
}

最后一个css块是负责创建箭头的块。你可以用html和css制作很多有趣的形状。

https://css-tricks.com/examples/ShapesOfCSS/#triangle-up

图像横幅旋转箭头

1 个答案: