如何在我的topbar中实现CSS样式标记?

时间:2016-08-31 20:53:18

标签: html css css3

所以我的网站应该是多语言的。要让用户在语言之间进行更改,下拉列表中会有标记。

为了更好地调整我的图像(标志),我想通过CSS创建它们。但是我没有这样做,所以我创建了一些1x3和3x1 .jpgs文件,我希望通过CSS调整大小。

以下是我创建的两个示例: German Flag French Flag

(最有可能的是你应该只下载图片并将它们高度缩放以了解我的所作所为。)

我的计划是使用像素化的图像渲染属性来获得没有任何平滑或颜色渐变的调整大小的图像,并且它工作正常,直到我使用IE。

我创建了一个小代码片段来重新创建基本想法:



	.ger {
		image-rendering: pixelated;
		background-image: url(http://i.stack.imgur.com/tNV8n.jpg);
		background-size: 1px 45px;
		background-repeat: repeat;
	}
	
	.fr {
		image-rendering: pixelated;
		background-image: url(http://i.stack.imgur.com/ErVbV.jpg);
		background-size: 120px 1px;
		background-repeat: repeat;
	}
	
	#flag1, #flag2{
		width: 120px;
		height: 45px;
	}
	
	

<body>
	<div id="flag1" class="ger"></div>
    <br/> 
	<div id="flag2" class="fr"></div>

</body>
&#13;
&#13;
&#13;

但我想我对这个话题太新了,无法正确行事。因为不知怎的,它不会向你展示德国国旗。

无论如何......我不能要求你让IE开始支持这个功能。但我可以问的是,如果你知道某种方式可以解决这个问题。

如果没有,您是否知道使用CSS创建这些简单标志的方法?

我在考虑三种不同颜色的div相互吻合。 例如:

&#13;
&#13;
.black, .red, .yellow{
    width:800px;
    height:100px;
 }

.black{
    background-color:black;
  }

.red{
    background-color:red;
  }

.yellow{
    background-color:yellow;
  }
&#13;
<div class="black"></div>
<div class="red"></div>
<div class="yellow"></div>
&#13;
&#13;
&#13;

......为德国国旗。

但如果我尝试在我的dropwdown中实现类似的东西...... 我失败了......

&#13;
&#13;
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, #dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


li.dropdown {
    display: inline-block;
	float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


.dropdown:hover .dropdown-content {
    display: block;
}

.black, .red, .yellow{
  width:60px;
  height:10px;
}

.black{
  background-color:black;
}

.red{
  background-color:red;
}

.yellow{
  background-color:yellow;
}
&#13;
<ul>
          <li><a class="logo">Logo</a></li>
          <li class="dropdown">
            <a href="#" id="dropbtn" class="fr"><div class="black"></div><div class="red"></div><div class="yellow"></div></a>
            <div class="dropdown-content">
              <a href="#">Flag 1</a>
              <a href="#">Flag 2</a>
              <a href="#">Flag 3</a>
            </div>
          </li>
        </ul>
&#13;
&#13;
&#13;

因为如果我这样做,它将永远不会有条的全部大小,是吗?

我很抱歉提供了这么多信息,因为它可能太过分了。然而,这些是我的尝试,我真的不知道我错过了什么。

在标准栏中(显示在最后一个片段中)应该包含一个标志。标志应触摸窗口的右上边界和条形的底部边框。如果将鼠标悬停在其上,则下拉列表中应显示类似的标记。

如果我在某些时候不清楚,请问我会尽量让它更清楚。

1 个答案:

答案 0 :(得分:2)

第一个代码段的问题是代码段的CSS部分中有<style>个标记,这就搞砸了。

.ger {
  image-rendering: pixelated;
  background-image: url(http://i.stack.imgur.com/tNV8n.jpg);
  background-size: 1px 45px;
  background-repeat: repeat;
}
.fr {
  image-rendering: pixelated;
  background-image: url(http://i.stack.imgur.com/ErVbV.jpg);
  background-size: 120px 1px;
  background-repeat: repeat;
}
#flag1,
#flag2 {
  width: 120px;
  height: 45px;
}
<body>
  <div id="flag1" class="ger"></div>
  <br/>
  <div id="flag2" class="fr"></div>

</body>