css 中的文本在文本之上?
Text on top of text in css?
我在页脚中放置了看起来像图像但实际上是文本的 Font Awesome 图标(FB、Twitter、Steam),并且添加了一些其他链接文本。现在我的页脚显示了文本旁边的图标,但我希望我的图标位于文本之上并居中,就像这个站点一样:see footer here。这个网站也有悬停功能,我知道它的命令,但我不知道把它放在哪里。
我的代码:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
position: fixed;
z-index: 10;
width: 100%;
height: 87px;
background-color: #212022;
border-bottom:2px groove #cc9900;
}
main {
background-color: #181719;
}
.centered {
margin: 160px auto;
padding:30px 50px;
width: 800px;
color: #efefef;
background: #1c1b1d;
border: 1px groove #cc9900;
}
.centered h2 {
text-align:center;
}
footer {
width: 100%;
height: 164px;
background-color : #212022;
border-top: 1px groove #cc9900;
}
p{
color: white
}
@font-face {
font-family: "csgofontlight"
src: url('../fonts/csgofontlight.tff') format('truetype');
}
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
left: 108px;
float: left;
position: absolute;
text-indent:-9999px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
right: 108px;
float: right;
position: absolute;
text-indent:-9999px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
header ul {
list-style:none;
margin:33px auto;
width:600px;
text-align:center;
}
header ul li{
display:inline-block;
margin:10px;
}
header ul li a {
color: #949494;
text-decoration : none;
font-size : 100%;
position: absolute; top: 34px; right: 300px;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
position: absolute; top: 34px; right: 400px;
}
footer ul {
list-style:none;
margin:50px auto;
width:1000px;
position: absolute; top: 620px; right: 310px;
}
footer ul li {
display:inline-block;
margin:10px;
}
footer ul li a {
color: #717171;
text-decoration : none;
font-size : 100%;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a:hover {
color: #DADADB;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #DDDDDD;
}
main ul li {
font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #949494;
margin: 0 0 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<a href="//csgoshuffle.com" id="logo">Range Web Development</a>
<div id="steamlogin"></div>
<a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
</div>
<ul>
<li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
<li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
</ul>
</header>
<main class="Site-content">
<div class="centered">
<h2>STAFF TEAM</h2>
<ul>
<li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
<h2>Missing Value , here is fix</h2>
<ul>
<li>Our Mod Chimbobway will add you </li>
<li>You will recive a case ID from the mod</li>
<li>You Have to provide the mod with screen shots of all the info that he needs</li>
<li>All Trades must has Code that the mod gonna give it to you</li>
</ul>
</div>
</main>
<footer>
<ul>
<div class="navbar-text pull-right">
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></i></li>
<li><a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href ="//csgoshuffle.com/status">Status</a></li>
<li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href ="//csgoshuffle.com/contact">Contact</a></li>
<li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
</body>
希望对您有所帮助..
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<a href="//csgoshuffle.com" id="logo">Range Web Development</a>
<div id="steamlogin"></div>
<a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
</div>
<ul>
<li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
<li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
</ul>
</header>
<main class="Site-content">
<div class="centered">
<h2>STAFF TEAM</h2>
<ul>
<li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
<h2>Missing Value , here is fix</h2>
<ul>
<li>Our Mod Chimbobway will add you </li>
<li>You will recive a case ID from the mod</li>
<li>You Have to provide the mod with screen shots of all the info that he needs</li>
<li>All Trades must has Code that the mod gonna give it to you</li>
</ul>
</div>
</main>
<footer>
<ul>
<div class="navbar-icon">
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></i></li>
<li><a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></i></li>
</div>
<div class="navbar-text">
<li><a href ="//csgoshuffle.com/status">Status</a></li>
<li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href ="//csgoshuffle.com/contact">Contact</a></li>
<li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
</div>
</ul>
</footer>
</body>
</html>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
position: fixed;
z-index: 10;
width: 100%;
height: 87px;
background-color: #212022;
border-bottom:2px groove #cc9900;
}
main {
background-color: #181719;
}
.centered {
margin: 160px auto;
padding:30px 50px;
width: 800px;
color: #efefef;
background: #1c1b1d;
border: 1px groove #cc9900;
}
.centered h2 {
text-align:center;
}
footer {
width: 100%;
height: 164px;
background-color : #212022;
border-top: 1px groove #cc9900;
}
p{
color: white
}
@font-face {
font-family: "csgofontlight"
src: url('../fonts/csgofontlight.tff') format('truetype');
}
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
left: 108px;
float: left;
position: absolute;
text-indent:-9999px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
right: 108px;
float: right;
position: absolute;
text-indent:-9999px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
header ul {
list-style:none;
margin:33px auto;
width:600px;
text-align:center;
}
header ul li{
display:inline-block;
margin:10px;
}
header ul li a {
color: #949494;
text-decoration : none;
font-size : 100%;
position: absolute; top: 34px; right: 300px;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
position: absolute; top: 34px; right: 400px;
}
footer ul {
list-style:none;
margin:50px auto;
width:1000px;
position: absolute; top: 620px; right: 310px;
text-align:center;
}
footer ul li {
display:inline-block;
margin:10px;
}
footer ul li a {
color: #717171;
text-decoration : none;
font-size : 100%;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a:hover {
color: #DADADB;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #DDDDDD;
}
main ul li {
font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #949494;
margin: 0 0 10px 0;
}
好吧,它有点反应迟钝,但我们只会解决您遇到的问题。让我们看看。
对于初学者来说,你必须关闭你的元素,只是为了良好的练习。你的<footer>
可能是这样的。
<footer>
<ul>
<li>
<a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style='color: #CCCCCC'></i></a></li>
<li>
<a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style='color: #CCCCCC;'></i></a></li>
<li>
<a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style='color: #CCCCCC;'></i></a></li>
</ul>
<ul>
<li><a href="//csgoshuffle.com/status">Status</a></li>
<li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href="//csgoshuffle.com/contact">Contact</a></li>
<li><a href="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
我删除了不必要的 div 并将 <ul>
拆分为 2 <ul>
秒,图标和文本。
现在 css
移除 <footer>
的固定高度
footer {
width: 100%;
background-color : #212022;
border-top: 1px groove #cc9900;
}
此外,从您的图标中删除 floats 和 absolute positioning
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
}
最后,我让你的 <ul>
显示为 block
并删除了固定的 width
footer ul {
display: block;
list-style:none;
margin:50px auto;
text-align:center;
}
这应该会根据您的需要自动对齐所有内容,而无需为每个不同的显示宽度明确定位所有内容。
更新 您可以将 margin:50px auto;
更改为 margin:0px auto;
以仔细查看您想要的内容
更新2悬停效果
您应该从 <li>
<a>
中删除样式,例如
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li>
并像这样将其添加到您的 css
footer ul li a i{
color: #CCCCCC
}
那么你只需要改变这个规则
header ul li a:hover
至此
footer ul li a:hover i
例如
header ul li a:hover i{
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
这是工作片段
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
position: fixed;
z-index: 10;
width: 100%;
height: 87px;
background-color: #212022;
border-bottom:2px groove #cc9900;
}
main {
background-color: #181719;
}
.centered {
margin: 160px auto;
padding:30px 50px;
width: 800px;
color: #efefef;
background: #1c1b1d;
border: 1px groove #cc9900;
}
.centered h2 {
text-align:center;
}
footer {
width: 100%;
background-color : #212022;
border-top: 1px groove #cc9900;
}
p{
color: white
}
@font-face {
font-family: "csgofontlight"
src: url('../fonts/csgofontlight.tff') format('truetype');
}
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
header ul {
list-style:none;
margin:33px auto;
width:600px;
text-align:center;
}
header ul li{
display:inline-block;
margin:10px;
}
header ul li a {
color: #949494;
text-decoration : none;
font-size : 100%;
position: absolute; top: 34px; right: 300px;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
position: absolute; top: 34px; right: 400px;
}
footer ul {
display: block;
list-style:none;
margin:0px auto;
text-align: center;
}
footer ul li {
display:inline-block;
margin:10px;
}
footer ul li a {
color: #717171;
text-decoration : none;
font-size : 100%;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a i{
color: #CCCCCC;
}
footer ul li a:hover i{
color: yellow;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #DDDDDD;
}
main ul li {
font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #949494;
margin: 0 0 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<a href="//csgoshuffle.com" id="logo">Range Web Development</a>
<div id="steamlogin"></div>
<a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
</div>
<ul>
<li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
<li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
</ul>
</header>
<main class="Site-content">
<div class="centered">
<h2>STAFF TEAM</h2>
<ul>
<li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
<h2>Missing Value , here is fix</h2>
<ul>
<li>Our Mod Chimbobway will add you </li>
<li>You will recive a case ID from the mod</li>
<li>You Have to provide the mod with screen shots of all the info that he needs</li>
<li>All Trades must has Code that the mod gonna give it to you</li>
</ul>
</div>
</main>
<footer>
<ul>
<li>
<a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li>
<li>
<a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x"></i></a></li>
<li>
<a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x"></i></a></li>
</ul>
<ul>
<li><a href="//csgoshuffle.com/status">Status</a></li>
<li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href="//csgoshuffle.com/contact">Contact</a></li>
<li><a href="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
</body>
- 将图标包装在一个单独的 div
中
- 将链接包装在单独的 div
中
- 页脚未居中。删除
position: absolute
和顶部和左侧。那应该使您的页脚居中
- 从
.navbar-text
中删除 .pull-right
class 并添加 text-align: center
。对包含链接 的 div 执行相同操作
关于悬停效果。
- 删除 HTML 文件中图标的内联样式
- 为图标添加选择器
footer, .navbar-text, .fa:hover
,然后在悬停时应用您希望它们更改的颜色
您可以在页脚中进行以下更改:
HTML
<footer>
<ul>
<li><a href="//facebook.com/csgoshuffle" class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></a></li>
<li><a href="//twitter.com/csgoshuffle" class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></a></li>
<li><a href="//steamcommunity.com/groups/" class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></a></li>
</ul>
<ul>
<li><a href ="//csgoshuffle.com/status">Status</a></li>
<li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href ="//csgoshuffle.com/contact">Contact</a></li>
<li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
我刚刚将列表分为两个列表,一个包含图标,另一个包含其余选项。还在锚点 <a>
标签本身中包含 class 和样式相关信息。
还有样式表中的以下更改。
CSS
footer ul
{
margin:auto;
width:1000px;
top: 620px; right: 310px;
text-align: center;
}
在这里,我删除了绝对位置的约束,并将边距设置为自动以显示正确的缩进。
我在页脚中放置了看起来像图像但实际上是文本的 Font Awesome 图标(FB、Twitter、Steam),并且添加了一些其他链接文本。现在我的页脚显示了文本旁边的图标,但我希望我的图标位于文本之上并居中,就像这个站点一样:see footer here。这个网站也有悬停功能,我知道它的命令,但我不知道把它放在哪里。
我的代码:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
position: fixed;
z-index: 10;
width: 100%;
height: 87px;
background-color: #212022;
border-bottom:2px groove #cc9900;
}
main {
background-color: #181719;
}
.centered {
margin: 160px auto;
padding:30px 50px;
width: 800px;
color: #efefef;
background: #1c1b1d;
border: 1px groove #cc9900;
}
.centered h2 {
text-align:center;
}
footer {
width: 100%;
height: 164px;
background-color : #212022;
border-top: 1px groove #cc9900;
}
p{
color: white
}
@font-face {
font-family: "csgofontlight"
src: url('../fonts/csgofontlight.tff') format('truetype');
}
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
left: 108px;
float: left;
position: absolute;
text-indent:-9999px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
right: 108px;
float: right;
position: absolute;
text-indent:-9999px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
header ul {
list-style:none;
margin:33px auto;
width:600px;
text-align:center;
}
header ul li{
display:inline-block;
margin:10px;
}
header ul li a {
color: #949494;
text-decoration : none;
font-size : 100%;
position: absolute; top: 34px; right: 300px;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
position: absolute; top: 34px; right: 400px;
}
footer ul {
list-style:none;
margin:50px auto;
width:1000px;
position: absolute; top: 620px; right: 310px;
}
footer ul li {
display:inline-block;
margin:10px;
}
footer ul li a {
color: #717171;
text-decoration : none;
font-size : 100%;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a:hover {
color: #DADADB;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #DDDDDD;
}
main ul li {
font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #949494;
margin: 0 0 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<a href="//csgoshuffle.com" id="logo">Range Web Development</a>
<div id="steamlogin"></div>
<a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
</div>
<ul>
<li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
<li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
</ul>
</header>
<main class="Site-content">
<div class="centered">
<h2>STAFF TEAM</h2>
<ul>
<li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
<h2>Missing Value , here is fix</h2>
<ul>
<li>Our Mod Chimbobway will add you </li>
<li>You will recive a case ID from the mod</li>
<li>You Have to provide the mod with screen shots of all the info that he needs</li>
<li>All Trades must has Code that the mod gonna give it to you</li>
</ul>
</div>
</main>
<footer>
<ul>
<div class="navbar-text pull-right">
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></i></li>
<li><a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href ="//csgoshuffle.com/status">Status</a></li>
<li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href ="//csgoshuffle.com/contact">Contact</a></li>
<li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
</body>
希望对您有所帮助..
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<a href="//csgoshuffle.com" id="logo">Range Web Development</a>
<div id="steamlogin"></div>
<a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
</div>
<ul>
<li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
<li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
</ul>
</header>
<main class="Site-content">
<div class="centered">
<h2>STAFF TEAM</h2>
<ul>
<li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
<h2>Missing Value , here is fix</h2>
<ul>
<li>Our Mod Chimbobway will add you </li>
<li>You will recive a case ID from the mod</li>
<li>You Have to provide the mod with screen shots of all the info that he needs</li>
<li>All Trades must has Code that the mod gonna give it to you</li>
</ul>
</div>
</main>
<footer>
<ul>
<div class="navbar-icon">
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></i></li>
<li><a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></i></li>
<li><a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></i></li>
</div>
<div class="navbar-text">
<li><a href ="//csgoshuffle.com/status">Status</a></li>
<li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href ="//csgoshuffle.com/contact">Contact</a></li>
<li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
</div>
</ul>
</footer>
</body>
</html>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
position: fixed;
z-index: 10;
width: 100%;
height: 87px;
background-color: #212022;
border-bottom:2px groove #cc9900;
}
main {
background-color: #181719;
}
.centered {
margin: 160px auto;
padding:30px 50px;
width: 800px;
color: #efefef;
background: #1c1b1d;
border: 1px groove #cc9900;
}
.centered h2 {
text-align:center;
}
footer {
width: 100%;
height: 164px;
background-color : #212022;
border-top: 1px groove #cc9900;
}
p{
color: white
}
@font-face {
font-family: "csgofontlight"
src: url('../fonts/csgofontlight.tff') format('truetype');
}
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
left: 108px;
float: left;
position: absolute;
text-indent:-9999px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
right: 108px;
float: right;
position: absolute;
text-indent:-9999px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
header ul {
list-style:none;
margin:33px auto;
width:600px;
text-align:center;
}
header ul li{
display:inline-block;
margin:10px;
}
header ul li a {
color: #949494;
text-decoration : none;
font-size : 100%;
position: absolute; top: 34px; right: 300px;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
position: absolute; top: 34px; right: 400px;
}
footer ul {
list-style:none;
margin:50px auto;
width:1000px;
position: absolute; top: 620px; right: 310px;
text-align:center;
}
footer ul li {
display:inline-block;
margin:10px;
}
footer ul li a {
color: #717171;
text-decoration : none;
font-size : 100%;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a:hover {
color: #DADADB;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #DDDDDD;
}
main ul li {
font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #949494;
margin: 0 0 10px 0;
}
好吧,它有点反应迟钝,但我们只会解决您遇到的问题。让我们看看。
对于初学者来说,你必须关闭你的元素,只是为了良好的练习。你的<footer>
可能是这样的。
<footer>
<ul>
<li>
<a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style='color: #CCCCCC'></i></a></li>
<li>
<a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style='color: #CCCCCC;'></i></a></li>
<li>
<a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style='color: #CCCCCC;'></i></a></li>
</ul>
<ul>
<li><a href="//csgoshuffle.com/status">Status</a></li>
<li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href="//csgoshuffle.com/contact">Contact</a></li>
<li><a href="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
我删除了不必要的 div 并将 <ul>
拆分为 2 <ul>
秒,图标和文本。
现在 css
移除 <footer>
footer {
width: 100%;
background-color : #212022;
border-top: 1px groove #cc9900;
}
此外,从您的图标中删除 floats 和 absolute positioning
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
}
最后,我让你的 <ul>
显示为 block
并删除了固定的 width
footer ul {
display: block;
list-style:none;
margin:50px auto;
text-align:center;
}
这应该会根据您的需要自动对齐所有内容,而无需为每个不同的显示宽度明确定位所有内容。
更新 您可以将 margin:50px auto;
更改为 margin:0px auto;
以仔细查看您想要的内容
更新2悬停效果
您应该从 <li>
<a>
中删除样式,例如
<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li>
并像这样将其添加到您的 css
footer ul li a i{
color: #CCCCCC
}
那么你只需要改变这个规则
header ul li a:hover
至此
footer ul li a:hover i
例如
header ul li a:hover i{
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
这是工作片段
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
position: fixed;
z-index: 10;
width: 100%;
height: 87px;
background-color: #212022;
border-bottom:2px groove #cc9900;
}
main {
background-color: #181719;
}
.centered {
margin: 160px auto;
padding:30px 50px;
width: 800px;
color: #efefef;
background: #1c1b1d;
border: 1px groove #cc9900;
}
.centered h2 {
text-align:center;
}
footer {
width: 100%;
background-color : #212022;
border-top: 1px groove #cc9900;
}
p{
color: white
}
@font-face {
font-family: "csgofontlight"
src: url('../fonts/csgofontlight.tff') format('truetype');
}
#logo{
width: 520px;
height: 80px;
background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
margin-top:3px;
}
#steamlogin{
width: 154px;
height: 23px;
background: url('/StaffPage/img/steamlogin.png');
margin-top: 34px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
header ul {
list-style:none;
margin:33px auto;
width:600px;
text-align:center;
}
header ul li{
display:inline-block;
margin:10px;
}
header ul li a {
color: #949494;
text-decoration : none;
font-size : 100%;
position: absolute; top: 34px; right: 300px;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
position: absolute; top: 34px; right: 400px;
}
footer ul {
display: block;
list-style:none;
margin:0px auto;
text-align: center;
}
footer ul li {
display:inline-block;
margin:10px;
}
footer ul li a {
color: #717171;
text-decoration : none;
font-size : 100%;
font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a i{
color: #CCCCCC;
}
footer ul li a:hover i{
color: yellow;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #DDDDDD;
}
main ul li {
font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
color: #949494;
margin: 0 0 10px 0;
}
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<a href="//csgoshuffle.com" id="logo">Range Web Development</a>
<div id="steamlogin"></div>
<a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
</div>
<ul>
<li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
<li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
</ul>
</header>
<main class="Site-content">
<div class="centered">
<h2>STAFF TEAM</h2>
<ul>
<li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
<h2>Missing Value , here is fix</h2>
<ul>
<li>Our Mod Chimbobway will add you </li>
<li>You will recive a case ID from the mod</li>
<li>You Have to provide the mod with screen shots of all the info that he needs</li>
<li>All Trades must has Code that the mod gonna give it to you</li>
</ul>
</div>
</main>
<footer>
<ul>
<li>
<a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li>
<li>
<a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x"></i></a></li>
<li>
<a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x"></i></a></li>
</ul>
<ul>
<li><a href="//csgoshuffle.com/status">Status</a></li>
<li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href="//csgoshuffle.com/contact">Contact</a></li>
<li><a href="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
</body>
- 将图标包装在一个单独的 div 中
- 将链接包装在单独的 div 中
- 页脚未居中。删除
position: absolute
和顶部和左侧。那应该使您的页脚居中 - 从
.navbar-text
中删除.pull-right
class 并添加text-align: center
。对包含链接 的 div 执行相同操作
关于悬停效果。
- 删除 HTML 文件中图标的内联样式
- 为图标添加选择器
footer, .navbar-text, .fa:hover
,然后在悬停时应用您希望它们更改的颜色
您可以在页脚中进行以下更改:
HTML
<footer>
<ul>
<li><a href="//facebook.com/csgoshuffle" class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></a></li>
<li><a href="//twitter.com/csgoshuffle" class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></a></li>
<li><a href="//steamcommunity.com/groups/" class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></a></li>
</ul>
<ul>
<li><a href ="//csgoshuffle.com/status">Status</a></li>
<li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
<li><a href ="//csgoshuffle.com/contact">Contact</a></li>
<li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
<li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
<li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
</ul>
</footer>
我刚刚将列表分为两个列表,一个包含图标,另一个包含其余选项。还在锚点 <a>
标签本身中包含 class 和样式相关信息。
还有样式表中的以下更改。
CSS
footer ul
{
margin:auto;
width:1000px;
top: 620px; right: 310px;
text-align: center;
}
在这里,我删除了绝对位置的约束,并将边距设置为自动以显示正确的缩进。