0
* {
margin:0;
padding: 0;
border:0;
}
html,
body{
background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#ffffff;
;
padding-bottom:25px;
}
.wrapper{
max-height: 100%}
header{
max-width:100%;
background-color: #107CBD;
/* padding-top: 5%;*/
padding-bottom: 0.5%;
}
.left-col{
max-width:35%;
float:left;
margin-left: 5%;
margin-top: 2%;}
.right-col{
width:70%;
float:right;
}
.right-col ul{
width: 100%;
}
.right-col ul li{
list-style:none;
float: right;
display:block;
padding-top:.4%;
margin-left:1%;
padding-right: 1.8%;
}
.right-col li a{
text-decoration:none;
color:white;
}
h1{
clear: both;
width: 50%;
font-family:'Noto sans', 'sans serif';
font-weight: 100;
color: white;
font-size: 2em;
margin:0 auto;
text-align: center;
padding-bottom: 1%;
}
h2{
clear: both;
width: 20%;
font-family:'Courgette', 'cursive';
font-weight: 200;
color: white;
font-size: 2em;
margin:0 auto;
text-align: center;
padding-bottom: 1%;
}
h4{
clear: both;
width: 10%;
font-family:'Noto sans', 'sans serif';
font-weight: 100;
color: white;
font-size: 2em;
margin:0 auto;}
sup{ line-height:0;
font-size:65%;
}
@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;
left:0%;
}
#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: 38%
}
#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;
}
h5{
font-family:'Noto-Sans', sans-serif;
float: right;
margin-top:10px;
}
#footer{
margin: 1px;
height:100px;
width: 100%;
border-top:3px solid #107CBD;
clear: both;
color: #fff;
line-height:23px;
background-color:#505050;
text-align:center;
position:fixed;
font-size:12px;
bottom:0px;
vertical-align:baseline:
}
footer {
width: 100%;
padding-top: 3.5%;
padding-bottom: 9.5%;
background-color: #505050;
border-top:8px solid #107CBD;
position:fixed;
text-align:center;
}
}
#footer ul li a: hover{
color: #000;
background-color:#777777;
}
#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;
}
footer ul {
width: 100%;
/* margin-right: 25%;*/
}
footer ul li {
float:0px;
padding-right:2%;
margin-right:3%;
display:inline;
font-family:Noto sans,sans serif;
font-size:12px;
}
#footer ul li a{
text-decoration: none;
font-family:'Noto-sans',sans serif;
padding:2em 1em;
color: #fff;
}
div.footer-social{
float:right;
padding-right:10%;
margin-right:5%;
display:inline;
margin-top:-2.8%;<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>
<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>
<link rel="stylesheet" type='text/css' href="index.css"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="left-col">
<img src="images/onebuglogoforwebdt.jpg" height="64" width="60" alt="One Bug logo" id="logo" >
</div>
<div class="right-col">
<ul class="social-icons">
<li><a href="mailto:[email protected]">
<img class="Email"<img src="images/email-icon32.png" style="margin:0px -9px"></a></li>
<li><a href="https://pinterest.com/rasberry14/target=_blank"><img src="images/Pinterest-icon.png"style="margin:0px -9px"></a></li>
<li><a href="https://twitter.com/fraggleart/target=_blank"><img src="images/Twitter-2-icon.png" style="margin:0px -9px"></a></li>
</ul>
</div>
<div class="header-slogan">
<h1>One Bug Design</h1>
<div class="tag-line">
<h2>Designed to create<sup><small>™</small></sup></h2>
</div>
</header>
<aside>
<nav id='cssmenu'>
<ul>
<li class='active'>
<a href='index.html'>Home</a></li>
<li>
<a href="../portfolio/portfolio.html">Portfolio</a></li>
<li><a href="../finds/finds.html">Finds</a></li>
<li><a href="../contact/contact.html">Contact</a></li>
</ul>
</nav>
</aside>
<main>
<section class="section-1">
<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>
<section>
<h3>Software skills</h3>
<div class="wrapper">
<div class="icon"><br>
<img src="images/Adobe-Ai-icon.png" style="margin:14px" width="40px"/>
<img src="images/Adobe-Id-icon.png" style="margin:14px" width="40px"/>
<img src="images/Adobe-PS-icon.png" style="margin:14px"width="40px"/>
<img src="images/bridge-icon.png"style="margin:14px" width="40px"/>
<img src="images/Camera-icon.png"style="margin:14px" width="40px"/>
<img src="images/HTML-5-icon.png"style="margin:14px " width="40px"/>
<img src="images/css-icon.png"style="margin:14px -3px" width="40px"/>
<img src="images/Office-icon.png"style="margin:13px" width="40px"/></div>
</section>
<section>
<div class="text">
Illustrator |
Indesign |
Photoshop |
Bridge |
DSLR |
HTML5 |
CSS |
Microsoft Office |
</div>
</section>
<aside></aside>
<br>
</main>
<footer>
<ul stlyle="list-style-type:none">
<li class="changeBackground">
<a href="index.html">Home</a></li>
<li class="changeBackground">
<a href="../portfolio/portfolio.html">Portfolio</a></li>
<li class="changeBackground"><a href="../finds/finds.html">Finds</a></li>
<li class="changeBackground">
<a href="../contact/contact.html">Contact</a></li>
<li>©2015 One Bug Design All Rights Reserved</li>
</ul>
</br>
<div class="footer-social">
<a class="social Twitter"
<ahref="https://twitter.com/fraggleart" class="twitter-follow-button" data-show-count="false">Follow @fraggleart</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a class="social Pinterest"
<a href="https://pinterest.com/rasberry14"><img class="Pinterest"img src="images/Pinterest-icon.png"/></a>
<a class="social Email"
<a href="mailto:[email protected]">
<img class="Email"<img src="images/email-icon32.png"/></a>
</ul>
</div>
</footer>
</div>
</body>
</html>我的CSS似乎并没有被出现在我的直播现场。我已经尝试了以下方法： - 确保CSS和HTML文件使用小写字母
- 检查拼写 - 确保CSS和HTML位于一个子文件夹中。 -Linking我的样式表
我的文件夹的设置如下： - HTML -CSS -images 的图像似乎出现在CSS台，并在括号罚款。我错过了什么？ http://www.cssdesk.com/Mb6Z2
css或images？你的CSS似乎很好。这是您发布的链接中未显示的一些图片。 – DigitalDouble
css在你发布的链接中工作正常。 – ketan
它的问题与你的链接，你的图片将在你的本地，但当它在服务器上，它指向你在哪个网站，这就是为什么它没有显示，检查你的图像网址 – Mindless