Question

我想在页面顶部创建一个按钮栏，其中div容器包含图像以将它们用作平面按钮。我的问题是我无法正确对齐。

是否有其他方法可以突出显示上次点击的按钮，这样您就可以在不使用javascript的情况下查看按钮栏上的哪个按钮处于活动状态？

这是我的第一个方法：

<html>
    <head>
        <title>
        </title>
        <style>
            #top {
                position: fixed;
                background-color: #AAA;
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
                background-image: -webkit-linear-gradient(top, #fff, transparent);
                background-image: -moz-linear-gradient(top, #fff, transparent);
                background-image: -o-linear-gradient(top, #fff, transparent);
                background-image: linear-gradient(to bottom, #fff, transparent);            
                left: 0px;
                top: 0px;
                width: 100%;
                height: 60px;
                padding: 0px; 
                border: thin solid rgba(0,0,0,0.6);
                color: #444444;
                font-family: Droid sans, Arial, Helvetica, sans-serif;
                font-size: 12px;
                cursor: pointer;
                -webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
                -moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
                box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
            }

            .flatBtn2 {
                height: 50px;
                width: 50px;
                margin-left: 5px;
                margin-top: 5px;
                float: left;
                display: inline;
            }          

            .flatBtn2:hover {
                background-color: #eee;
                height: 50px;
                width: 50px;
                margin-left: 5px;
                margin-top: 5px;            
                float: left;
                display: inline;
            }       

            .buttonBar {
                float:left;
            }           

        </style>
    </head>
    <body>
        <div id="top">
            <div id="selectReiter" style="display:inline" class="buttonBar">
                <div id="firstButton" class="flatBtn2" />
                <div id="secondButton" class="flatBtn2" />
                <div id="thirdButton" class="flatBtn2" />
            </div>
        </div>
    </body>
</html>

Answer 1

#top {
          position: fixed;
          background-color: #AAA;
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
          background-image: -webkit-linear-gradient(top, #fff, transparent);
          background-image: -moz-linear-gradient(top, #fff, transparent);
          background-image: -o-linear-gradient(top, #fff, transparent);
          background-image: linear-gradient(to bottom, #fff, transparent);
          left: 0px;
          top: 0px;
          width: 100%;
          height: 60px;
          padding: 0px;
          border: thin solid rgba(0, 0, 0, 0.6);
          color: #444444;
          font-family: Droid sans, Arial, Helvetica, sans-serif;
          font-size: 12px;
          cursor: pointer;
          -webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
          -moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
          box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
        }
        
        .flatBtn2 {
          height: 50px;
          width: 50px;
          margin-left: 5px;
          margin-top: 5px;
          float: left;
          display: inline;
          background-color: transparent;
          border: none;
        }
        
        .flatBtn2:hover {
          background-color: #eee;
          height: 50px;
          width: 50px;
          margin-left: 5px;
          margin-top: 5px;
          float: left;
          display: inline;
        }
        
        .flatBtn2:focus   {
          background-color: #eee;
        }
        
        .buttonBar {
          float: left;
        }

<div id="top">
  <div id="selectReiter" style="display:inline" class="buttonBar">
    <button id="firstButton" class="flatBtn2" >Button 1</button>
    <button id="secondButton" class="flatBtn2" >Button 2</button>
    <a id="thirdButton" href="#" class="flatBtn2">A 3</a>
  </div>
</div>

Answer 2

首先，如果你想使用按钮，那么你应该使用:focus标签并通过css添加背景图像。您还可以在css中操纵状态，您正在查询的内容为:active和button:focus, button:active，因此您的按钮有两个规则。具有主背景图像和其他规则{% load staticfiles %} <img src="{% static "my_app/myexample.jpg" %}" alt="My image"/>的常规按钮规则，您可以在其中加载其他图像或执行其他操作。

有关工作示例，请参阅fiddle。我在你的CSS末尾添加了所需的样式。

希望这有帮助！

使用DIV容器作为平面按钮，里面有图像

2 个答案: