如何使用CSS编码自定义DIV元素

Question

我想帮助处理我的博客标题中的两个问题。第一个问题是我希望社交媒体图标/链接与单词＆＃34; BLANKESQUE＆＃34;有一点距离 - 大约60px。理想情况下，我希望社交媒体图标显示在屏幕的右侧，而不是与“＃34; BLANKESQUE＆＃34;”一词一起出现。

第二个问题是社交媒体图标。我希望在同一媒体平台上有两个不同颜色的图标。例如，＃headersocial将显示灰色媒体图标，但#headersocial a：hover将显示相同的图标，但为黑色。我知道我需要两套媒体图标，一套是灰色的，另一套是黑色的，但我不明白我如何编码html来实现我想要的外观。我博客的网址如下：http://www.blankesque.com

我在下面列出了完整的标题编码：

＆＃13;

＆＃13;

#customheader a {
    font-size: 55px;
    font-family: calibri;
    color: #777777;
    text-transform: uppercase;
    font-weight: normal!important;
    letter-spacing: 0.25em;
    text-decoration: none;
}
#customheader {
    margin: 12% 0 2.5% -8%;
    float: left;
}
#customheader a:hover {
    color: #000000!important;
}
#headersocial {
    display: block;
    float: right;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
#headersocial a {
    padding: 0px 25px;
}
#headersocial a:hover {
    text-decoration: none!important;
}

＆＃13;

<div id='customheader'>
    <a href='http://www.blankesque.com'>Blankesque</a>
    <div id='headersocial'> 
        <a href='https://www.pinterest.com/blankesque' target='_blank'><img height='35px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/91F98FB1-242C-428E-A472-50F7D511C38E_zpsaiuhz6yb.gif' width='35px'/>
</a>
        <a href='https://www.twitter.com/itsblankesque' target='_blank'><img height='35px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/923FF7F8-5AA7-4676-935F-2CB5FF465122_zpsmctqg100.gif' width='35px'/></a>
        <a href='http://www.bloglovin.com/people/aladyinwhite-8315551' target='_blank'><img height='35px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/7CC1080E-1911-4D0B-B99F-55109C044D54_zps2ky5dfgt.gif' width='35px'/></a>
        <a href='https://instagram.com/itsblankesque' target='_blank'><img height='35px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C6567CDB-FB01-4F2D-A2FD-D0D875A30B80_zps5mgdqong.gif' width='35px'/></a>
        <a href='mailto: blankesque@hotmail.com' target='_blank'><img height='35px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/55416E3D-525A-499B-8E7F-BEA34ED80146_zpss1svraqx.gif' width='35px'/></a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

见下面的截图

要使您的网页看起来像这样，首先您必须更改#customheader的CSS，如下所示

#customheader {
    margin: 12% 0 2.5% 0%;
    float: left;
    width: 100%;
} 

接下来，要将文本BLANKESQUE与左侧对齐，请添加float:left #customheader a。所以#customheader a的新CSS将如下

#customheader a {
    font-size: 55px;
    font-family: calibri;
    color: #777777;
    text-transform: uppercase;
    font-weight: normal!important;
    letter-spacing: 0.25em;
    text-decoration: none;
    float: left;
}

并且，为了您在悬停时需要的效果，我建议您保持透明图像，然后通过CSS设置背景颜色。同样，您也可以在悬停时更改背景颜色。这将是最简单的方式..