<div class="wrap-header">    
<div class="top">    
<div class="container">    
<p >Welcome to My Template Network Co., Ltd!</p>    
<div class="share">    
<ul>    
<li class="site"> <a href="/?p=/Do/area&lg=de"><img src="/skin/images/de.jpg" />Deutsch</a> </li>    
<li class="site"> <a href="/?p=/Do/area&lg=en"><img src="/skin/images/en.jpg" />English</a> </li>    
</ul>    
</div>    
</div>    
</div> 
</div>

.wrap-header {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .175);
}
.wrap-header .top
{
    height: 44px;

    border-bottom: 1px solid #e8e8e8;
}
.wrap-header .top p
{
    line-height: 44px;

    display: inline-block;

    margin: 0;

    color: #999;
}
@media (max-width: 1199px)
{
    .wrap-header .top p
    {
        display: none;
    }
}
.wrap-header .top p:before
{
    font-family: 'iconfont' !important;
    font-size: 18px;

    margin-right: 10px;



    color: #c3211e;
}
.wrap-header .top p.email
{
    margin-left: 30px;
}
.wrap-header .top p.email:before
{
    content: '\e72e';
}
.wrap-header .top .share
{
    float: right;
}
@media (max-width: 1199px)
{
    .wrap-header .top .share
    {
        float: none;

        text-align: right;
    }
}
.wrap-header .top .share ul li
{
    display: inline-block;
}
.wrap-header .top .share ul li a
{
    display: block;

    margin-left: 10px;

    -webkit-transition: all .5s;
    transition: all .5s;

    color: #999;
text-align: center;
    line-height: 45px;
}
.wrap-header .top .share ul li a img {
	margin-right: 3px;
	vertical-align: middle;
}
.wrap-header .top .share ul li a:before
{
    font-family: 'iconfont';
    font-size: 20px;
    font-weight: normal;
    line-height: 44px;

    display: inline-block;

    width: 30px;
    height: 44px;

    text-align: center;
    vertical-align: top;
}
@media (max-width: 1199px)
{
    .wrap-header .top .share ul li a:before
    {
        font-size: 16px;
        line-height: 30px;

        height: 30px;
    }
}
.wrap-header .top .share ul li.twitter a:before
{
    content: '\e60b';
}
.wrap-header .top .share ul li.linkedin a:before
{
    content: '\e6f0';
}
.wrap-header .top .share ul li.instagram a:before
{
    font-size: 14px;

    content: '\e612';

    background-color: #96ceb4;
}
.wrap-header .top .share ul li.youtube a:before
{
    content: '\e6d7';

    background-color: #fae8a3;
}
.wrap-header .top .share ul li.google a:before
{
    content: '\e645';
}
.wrap-header .top .share ul li.amazon a:before
{
    content: '\e6c1';
}
.wrap-header .top .share ul li:hover a
{


    color: #c3211e;
}

下载

转载请注明：css样式» 头部中英 按钮自适应