徽标和社交媒体图标滞后 header
Logo and social media icons stuck behind header
我已经用干净的代码完成了我网站的三个页面（选中）但是，最重要的页面，第一页正在通过铃声，因为我似乎无法让我的徽标留在 left-hand 角落（固定）并出现在我的 header 前面，我的社交媒体图标出现在我的 header 前面并出现在 right-hand 角落。我的第一个页面是唯一一个代码有点古怪的页面。这是我的第一个网站。我试过使用 z-index 以及 float 和 display: hidden。现在我才stuck.HELP！请！我正在研究这个。 z-index 将我的 header 发送到后面的标志到前面。我快完成了。我已经坚持了 4 个星期。
html,
body{
margin:0px;
padding: 0px;
padding-bottom:25px;
background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#ffffff;
}
#wrapper {
background: #107CBD;
min-height:%;
position:relative;
width:960px;
margin:0 auto;
margin-bottom:-60px; /* Negitive Height of Footer */
}
#header {
width: 100%;
background:#107CBD;
padding:19px;
position:absolute;
left:0;
top:0;
background-color: #107CBD;
}
#header h1{
font-family:Noto sans, sans serif;
font-weight: 200;
color: white;
font-size: 2em;
margin-right: %;
}
#header h2{
font-family:Courgette,cursive;
font-weight: 100;
color: white;
font-size: 2em;
margin-right:%;
}
h1+h2{margin-top:-20px;
}
#body {
padding: 10px;
padding-bottom:60px; /* Height of Footer and some change */
background:#FFF; /* Wrapper BG COLOR */
}
#logo{
text-indent: -999999{
z-index:1;
}
#social-media-icons{float:right;}
#social-media-icons ul li{display:inline;}
#social-media-icon ul li{padding-top: 10px;}
}
#social{
float: right;
}
#socail ul{
margin-top-right: 10px;
#socail li{
dispaly.inline;
}
.social-sidebar-buttons{
width: 15px;
margin-left: 15px;
}
.wrapper{
width:960px;
}
.icon{
float:left;
}
.text{
float:left;
padding-left:25px;
padding-top:40px;
font-family: Noto sans,sans serif;
}
.software ul {
position: relative;
width:80%;
padding:1em 1.5em;
margin: 2em auto;
color:#fff;
background:#107CBD;
overflow: hidden;
font-family:'Noto Sans', sans-serif;
}
.software ul:before{
content: "";
position: absolute;
top:0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #107CBD #107CBD;
background: #107CBD;
-web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.0.2);
/* Firefox 3.0 damage limitation*/
display: block; width: 0;
box-shadow: 0 1px 1px rgba(0,0,0,0.3),1px 1px 1px rgba(0,0,0,0.2);
display: block width 0px;
}
.software ul.rounded{
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.software ul.rounded:before{
border-width:8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
.social{
float:right;
margin-right:200px;
margin-top:20px;
}
font-family:'Noto Sans';
}
.content{
width: 1000%;
margin: 0 auto;
}
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu > ul {
background: #505050;
}
#cssmenu > ul > li {
float:left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
left: 36%
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 20px;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #505050;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
color: #107CBD;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #107cbd;
-webkit-transform: rotateX(90deg) translateY(-23px);
-moz-transform: rotateX(90deg) translateY(-23px);
transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #107cbd;
background: #1d1d1d;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #505050;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #107cbd;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #505050;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 20px;
top: 17px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #107cbd;
border-bottom: 2px solid #107cbd;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 20px;
top: 27px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #107cbd;
}
div nav ul li{
text-align: left;
display: inline;
width: %;
float:left;
margin-right: .8em;
font-family: 'Noto Sans';
}
li.changeBackground {
background-color: #505050;
}
li.changeBackground:hover {
background-color: #777777;
}
li.changeBackground:active {
background-color: #107CBD;
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
p{
position:relative;
width: 30%;
padding:1em 1.5em;
margin:2em auto;
color: #fff;
background:#107CBD;
overflow: hidden;
font-family:'Noto Sans';
}
p:before{
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #505050 #505050;
background: #505050;
-web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px rgba(0,0,0 0.2);
/* Firefox 3.0 damage limitation*/
display: block; width: 0;
}
p.rounded{
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.p.rounded:before{
border-width: 9px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
h3{
font-family:'Noto-Sans', sans-serif;
}
#footer{
position: fixed;
bottom:0px;
}
#footer{
margin: 1px;
height:100px;
width: 100%;
border-top: 3px solid #107CBD;
clear: both;
color: #fff;
line-height:20px;
background-color: #505050;
text-align:center;
position:fixed;
font-size:12px;
bottom:0px;
}
#footer ul li a{
text-decoration: none;
font-family: Noto-sans,sans serif;
padding:2em 1em;
color: #fff;
}
#footer ul li a: hover{
color: #000;
background-color:#777777;
}
!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="path to icon/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<title>Dawn's website</title>
</head><
<div id="wrapper">
<header id="logo">
<ahref="index.html"<img src="images/onebugforwebdt.jpg"
alt= "One Bug Design" width="60" height="64">
</header>
</div>
<div class="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<body id="home"
<div id="wrapper">
<header id="logo">
<h1 class="logo">one bug logo</h1>
<div id="header">
<h1 align="center">One Bug Design</h1><h2 align="center">Designed To Create</h2>
<h1 class="closer"></h1>
<h2 class="closer"></h2>
</div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Finds</a></li>
<li><a href='Contact.html'>Contact</a></li>
</ul>
</div>
<div id="content"
</div>
</nav>
<main class="content">
<div class="wrap">
</div>
</div>
<p>
Dawn here, your friendly graphic designer. Do you need someone to make your brand sparkle with desire? Someone to show your logo some love. Do you need someone who truly enjoys the overall creative process and has an eye for great design? Someone who is fluent in the ways of the Adobe CC Master. Someone who will listen and fulfill your visual communication needs. Someone who is determined and who has Ideation? Well click no further! You have arrived at your destination. ........<strong>Welcome!</strong></p>
<section>
<h3>Software skills</h3>
<div class="wrapper">
<div class="icon"><img alt="Illustrator icon" src=
"images/Adobe-Ai-icon.png" width="50px">
<img alt="Indesign icon" src="images/Adobe-Id-icon.png" width="50px">
<img alt="Photoshop icon" src="images/Adobe-PS-icon.png" width="50px">
<img alt="Bridge icon" src="images/bridge-icon.png" width="50px">
<img alt="Camera icon" src="images/Camera-Nikon-Coolpix-L820-02-icon.png" width="50px">
<img alt="HTML icon" src="images/HTML-5-icon.png" width="50px">
<img alt="CSS icon" src="images/css-icon.png" width="50px">
<img alt="Microsoft Office" src="images/Office-icon.png" width="50px"></div>
<div class="text">
Illustrator |
Indesign |
Photoshop |
Bridge |
DSLR|
HTML5 |
CSS |
Microsoft Office |
</div>
</div>
</section>
<div id="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<div id="footer">
<div id="nav">
<nav class="sitemenu">
<div class="navwrapper">
<ul>
<li class="changeBackground"><ahref="index.html">Home</a></li>
<li class="changeBackground"><ahref="Portfolio.html">Portfolio</a></li>
<li class="changeBackground"><ahref="Finds.html">Finds</a></li>
<li class="changeBackground"><ahref="Contact.html">Contact</a></li>
<li>©2015-2016 One Bug Design All Rights Reserved</li>
</ul>
</div>
</nav>
</ul>
<br>
<p class="footer-text">
<div class="social">
<h3 align="right">Stay connected</h3>
<a class= "social twitter" ahref="https://twitter.com/fraggleart">img src="images/Twitter-2-icon.png"</a>
<a class="social pinterest" ahref="https://pinterest.com/rasberry14">img src="images/Pinterest-icon.png"</a>
<a class="social linkedin"ahref="https://linkedin.com/in/dawncthomas">img src="images/Linkedin-icon.png"</a>
</div> </div>
</footer>
</body>
</html>
像这样将这些属性添加到 social class。
.social {
float: right;
position: relative;
z-index: 9999;
}
您犯的一个非常可怕的错误 是在声明 .wrapper div
</head><
<div id="wrapper">
在 body 标签之外，紧跟在 <head> 标签结束的位置之后。它显示格式非常糟糕的 HTML5 标记。我已经为您编写了一个语义正确的 html5 标记作为指南以及一些 css 样式，该样式在左侧显示徽标和社交 links（在我的例子中它只是列表项，你应该用图像 links 正确地改变它们）到右边，也在 header 前面（你面临的问题）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="stackof.css">-->
</head>
<body>
<style>
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
center center fixed;
}
.wrapper {
max-height: 100%;
}
header {
max-width: 100%;
}
header .left-col {
max-width: 35%;
float: left;
margin-left: 5%;
margin-top: 5%;
}
.right-col {
width: 70%;
float: right;
}
.right-col ul {
width: 100%;
}
.right-col ul li {
list-style: none;
float: left;
display: block;
padding-top: 5%;
margin-left: 5%;
}
.right-col li a {
text-decoration: none;
color: aliceblue;
}
</style>
<div id="wrapper">
<header id="logo">
<div class="left-col">
<a href="#">
<img src="pro/images/logo.png" alt="">
</a>
</div>
<div class="right-col social-links">
<ul>
<li><a href="#">Lorem.</a></li>
<li><a href="#">Minus.</a></li>
<li><a href="#">Nulla.</a></li>
<li><a href="#">Cum.</a></li>
<li><a href="#">Ratione!</a></li>
</ul>
</div>
</header>
<main>
<!--write your sections here-->
<section class="setion-1"></section>
<section class="section-2"></section>
<aside></aside>
</main>
<footer>
<!--your footer goes here-->
</footer>
</div>
</body>
</html>
您应该 cut/paste 将样式数据放入您使用 .css 格式命名的任何文件中，即 stackof.css 在我的例子中，使它看起来更漂亮 un-comment link 标签。
我已经用干净的代码完成了我网站的三个页面（选中）但是，最重要的页面，第一页正在通过铃声，因为我似乎无法让我的徽标留在 left-hand 角落（固定）并出现在我的 header 前面，我的社交媒体图标出现在我的 header 前面并出现在 right-hand 角落。我的第一个页面是唯一一个代码有点古怪的页面。这是我的第一个网站。我试过使用 z-index 以及 float 和 display: hidden。现在我才stuck.HELP！请！我正在研究这个。 z-index 将我的 header 发送到后面的标志到前面。我快完成了。我已经坚持了 4 个星期。
html,
body{
margin:0px;
padding: 0px;
padding-bottom:25px;
background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#ffffff;
}
#wrapper {
background: #107CBD;
min-height:%;
position:relative;
width:960px;
margin:0 auto;
margin-bottom:-60px; /* Negitive Height of Footer */
}
#header {
width: 100%;
background:#107CBD;
padding:19px;
position:absolute;
left:0;
top:0;
background-color: #107CBD;
}
#header h1{
font-family:Noto sans, sans serif;
font-weight: 200;
color: white;
font-size: 2em;
margin-right: %;
}
#header h2{
font-family:Courgette,cursive;
font-weight: 100;
color: white;
font-size: 2em;
margin-right:%;
}
h1+h2{margin-top:-20px;
}
#body {
padding: 10px;
padding-bottom:60px; /* Height of Footer and some change */
background:#FFF; /* Wrapper BG COLOR */
}
#logo{
text-indent: -999999{
z-index:1;
}
#social-media-icons{float:right;}
#social-media-icons ul li{display:inline;}
#social-media-icon ul li{padding-top: 10px;}
}
#social{
float: right;
}
#socail ul{
margin-top-right: 10px;
#socail li{
dispaly.inline;
}
.social-sidebar-buttons{
width: 15px;
margin-left: 15px;
}
.wrapper{
width:960px;
}
.icon{
float:left;
}
.text{
float:left;
padding-left:25px;
padding-top:40px;
font-family: Noto sans,sans serif;
}
.software ul {
position: relative;
width:80%;
padding:1em 1.5em;
margin: 2em auto;
color:#fff;
background:#107CBD;
overflow: hidden;
font-family:'Noto Sans', sans-serif;
}
.software ul:before{
content: "";
position: absolute;
top:0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #107CBD #107CBD;
background: #107CBD;
-web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.0.2);
/* Firefox 3.0 damage limitation*/
display: block; width: 0;
box-shadow: 0 1px 1px rgba(0,0,0,0.3),1px 1px 1px rgba(0,0,0,0.2);
display: block width 0px;
}
.software ul.rounded{
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.software ul.rounded:before{
border-width:8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
.social{
float:right;
margin-right:200px;
margin-top:20px;
}
font-family:'Noto Sans';
}
.content{
width: 1000%;
margin: 0 auto;
}
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu > ul {
background: #505050;
}
#cssmenu > ul > li {
float:left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
left: 36%
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 20px;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #505050;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
color: #107CBD;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #107cbd;
-webkit-transform: rotateX(90deg) translateY(-23px);
-moz-transform: rotateX(90deg) translateY(-23px);
transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #107cbd;
background: #1d1d1d;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #505050;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #107cbd;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #505050;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 20px;
top: 17px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #107cbd;
border-bottom: 2px solid #107cbd;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 20px;
top: 27px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #107cbd;
}
div nav ul li{
text-align: left;
display: inline;
width: %;
float:left;
margin-right: .8em;
font-family: 'Noto Sans';
}
li.changeBackground {
background-color: #505050;
}
li.changeBackground:hover {
background-color: #777777;
}
li.changeBackground:active {
background-color: #107CBD;
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
p{
position:relative;
width: 30%;
padding:1em 1.5em;
margin:2em auto;
color: #fff;
background:#107CBD;
overflow: hidden;
font-family:'Noto Sans';
}
p:before{
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #505050 #505050;
background: #505050;
-web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px rgba(0,0,0 0.2);
/* Firefox 3.0 damage limitation*/
display: block; width: 0;
}
p.rounded{
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.p.rounded:before{
border-width: 9px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
h3{
font-family:'Noto-Sans', sans-serif;
}
#footer{
position: fixed;
bottom:0px;
}
#footer{
margin: 1px;
height:100px;
width: 100%;
border-top: 3px solid #107CBD;
clear: both;
color: #fff;
line-height:20px;
background-color: #505050;
text-align:center;
position:fixed;
font-size:12px;
bottom:0px;
}
#footer ul li a{
text-decoration: none;
font-family: Noto-sans,sans serif;
padding:2em 1em;
color: #fff;
}
#footer ul li a: hover{
color: #000;
background-color:#777777;
}
!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="path to icon/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<title>Dawn's website</title>
</head><
<div id="wrapper">
<header id="logo">
<ahref="index.html"<img src="images/onebugforwebdt.jpg"
alt= "One Bug Design" width="60" height="64">
</header>
</div>
<div class="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<body id="home"
<div id="wrapper">
<header id="logo">
<h1 class="logo">one bug logo</h1>
<div id="header">
<h1 align="center">One Bug Design</h1><h2 align="center">Designed To Create</h2>
<h1 class="closer"></h1>
<h2 class="closer"></h2>
</div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Finds</a></li>
<li><a href='Contact.html'>Contact</a></li>
</ul>
</div>
<div id="content"
</div>
</nav>
<main class="content">
<div class="wrap">
</div>
</div>
<p>
Dawn here, your friendly graphic designer. Do you need someone to make your brand sparkle with desire? Someone to show your logo some love. Do you need someone who truly enjoys the overall creative process and has an eye for great design? Someone who is fluent in the ways of the Adobe CC Master. Someone who will listen and fulfill your visual communication needs. Someone who is determined and who has Ideation? Well click no further! You have arrived at your destination. ........<strong>Welcome!</strong></p>
<section>
<h3>Software skills</h3>
<div class="wrapper">
<div class="icon"><img alt="Illustrator icon" src=
"images/Adobe-Ai-icon.png" width="50px">
<img alt="Indesign icon" src="images/Adobe-Id-icon.png" width="50px">
<img alt="Photoshop icon" src="images/Adobe-PS-icon.png" width="50px">
<img alt="Bridge icon" src="images/bridge-icon.png" width="50px">
<img alt="Camera icon" src="images/Camera-Nikon-Coolpix-L820-02-icon.png" width="50px">
<img alt="HTML icon" src="images/HTML-5-icon.png" width="50px">
<img alt="CSS icon" src="images/css-icon.png" width="50px">
<img alt="Microsoft Office" src="images/Office-icon.png" width="50px"></div>
<div class="text">
Illustrator |
Indesign |
Photoshop |
Bridge |
DSLR|
HTML5 |
CSS |
Microsoft Office |
</div>
</div>
</section>
<div id="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<div id="footer">
<div id="nav">
<nav class="sitemenu">
<div class="navwrapper">
<ul>
<li class="changeBackground"><ahref="index.html">Home</a></li>
<li class="changeBackground"><ahref="Portfolio.html">Portfolio</a></li>
<li class="changeBackground"><ahref="Finds.html">Finds</a></li>
<li class="changeBackground"><ahref="Contact.html">Contact</a></li>
<li>©2015-2016 One Bug Design All Rights Reserved</li>
</ul>
</div>
</nav>
</ul>
<br>
<p class="footer-text">
<div class="social">
<h3 align="right">Stay connected</h3>
<a class= "social twitter" ahref="https://twitter.com/fraggleart">img src="images/Twitter-2-icon.png"</a>
<a class="social pinterest" ahref="https://pinterest.com/rasberry14">img src="images/Pinterest-icon.png"</a>
<a class="social linkedin"ahref="https://linkedin.com/in/dawncthomas">img src="images/Linkedin-icon.png"</a>
</div> </div>
</footer>
</body>
</html>
像这样将这些属性添加到 social class。
.social {
float: right;
position: relative;
z-index: 9999;
}
您犯的一个非常可怕的错误 是在声明 .wrapper div
</head><
<div id="wrapper">
在 body 标签之外，紧跟在 <head> 标签结束的位置之后。它显示格式非常糟糕的 HTML5 标记。我已经为您编写了一个语义正确的 html5 标记作为指南以及一些 css 样式，该样式在左侧显示徽标和社交 links（在我的例子中它只是列表项，你应该用图像 links 正确地改变它们）到右边，也在 header 前面（你面临的问题）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="stackof.css">-->
</head>
<body>
<style>
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
center center fixed;
}
.wrapper {
max-height: 100%;
}
header {
max-width: 100%;
}
header .left-col {
max-width: 35%;
float: left;
margin-left: 5%;
margin-top: 5%;
}
.right-col {
width: 70%;
float: right;
}
.right-col ul {
width: 100%;
}
.right-col ul li {
list-style: none;
float: left;
display: block;
padding-top: 5%;
margin-left: 5%;
}
.right-col li a {
text-decoration: none;
color: aliceblue;
}
</style>
<div id="wrapper">
<header id="logo">
<div class="left-col">
<a href="#">
<img src="pro/images/logo.png" alt="">
</a>
</div>
<div class="right-col social-links">
<ul>
<li><a href="#">Lorem.</a></li>
<li><a href="#">Minus.</a></li>
<li><a href="#">Nulla.</a></li>
<li><a href="#">Cum.</a></li>
<li><a href="#">Ratione!</a></li>
</ul>
</div>
</header>
<main>
<!--write your sections here-->
<section class="setion-1"></section>
<section class="section-2"></section>
<aside></aside>
</main>
<footer>
<!--your footer goes here-->
</footer>
</div>
</body>
</html>
您应该 cut/paste 将样式数据放入您使用 .css 格式命名的任何文件中，即 stackof.css 在我的例子中，使它看起来更漂亮 un-comment link 标签。