我刚刚完成了我的网站。至少是至少,因为有一块白色空间让我感到困惑。它每次出现,但当我选择它时,它就会消失。这是它的样子。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.Jack Murdock,</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="portfolio.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body bgcolor="#3b3a3b">
<div id="HeaderContainer">
</div>
<h1>.01 Photography</h1>
<ul class="flatflipbuttons">
<li><a href="photography.html"><span><img src="images/photography.png" /></span></a><b>photography</b></li>
<li><a href="2d design.html"><span><img src="images/graphicdesign.png" /></span></a><b>2D Design</b></li>
<li><a href="3d work.html"><span><img src="images/3dwork.png" /></span></a><b>3D Work</b></li>
<li><a href="contact.html"><span><img src="images/contact.png" /></span></a><b>Contact</b></li>
</ul>
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o" title="1277971_10202333285879975_353051239_o" id="wows1_0"/></li>
<li><img src="data1/images/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o" title="14262710457_9135dff762_o" id="wows1_1"/></li>
<li><img src="data1/images/dsc_1180.jpg" alt="DSC_1180" title="DSC_1180" id="wows1_2"/></li>
<li><img src="data1/images/dsc_2612.jpg" alt="DSC_2612" title="DSC_2612" id="wows1_3"/></li>
<li><img src="data1/images/dsc_8128.jpg" alt="DSC_8128" title="DSC_8128" id="wows1_4"/></li>
<li><img src="data1/images/image_2.jpg" alt="image_2" title="image_2" id="wows1_5"/></li>
<li><img src="data1/images/image_10.jpg" alt="image_10" title="image_10" id="wows1_6"/></li>
<li><img src="data1/images/image_12.jpg" alt="image_12" title="image_12" id="wows1_7"/></li>
<li><img src="data1/images/image_15.jpg" alt="image_15" title="image_15" id="wows1_8"/></li>
<li><img src="data1/images/image_17.jpg" alt="image_17" title="image_17" id="wows1_9"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="1277971_10202333285879975_353051239_o"><img src="data1/tooltips/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o"/>1</a>
<a href="#" title="14262710457_9135dff762_o"><img src="data1/tooltips/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o"/>2</a>
<a href="#" title="DSC_1180"><img src="data1/tooltips/dsc_1180.jpg" alt="DSC_1180"/>3</a>
<a href="#" title="DSC_2612"><img src="data1/tooltips/dsc_2612.jpg" alt="DSC_2612"/>4</a>
<a href="#" title="DSC_8128"><img src="data1/tooltips/dsc_8128.jpg" alt="DSC_8128"/>5</a>
<a href="#" title="image_2"><img src="data1/tooltips/image_2.jpg" alt="image_2"/>6</a>
<a href="#" title="image_10"><img src="data1/tooltips/image_10.jpg" alt="image_10"/>7</a>
<a href="#" title="image_12"><img src="data1/tooltips/image_12.jpg" alt="image_12"/>8</a>
<a href="#" title="image_15"><img src="data1/tooltips/image_15.jpg" alt="image_15"/>9</a>
<a href="#" title="image_17"><img src="data1/tooltips/image_17.jpg" alt="image_17"/>10</a>
</div></div><span class="wsl"><a href="http://wowslider.com/vw">slider plugin wordpress</a> by WOWSlider.com v5.6</span>
<a href="#" class="ws_frame"></a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1//wowslider.js"></script>
<script type="text/javascript" src="engine1//script.js"></script>
<!-- End WOWSlider.com BODY section -->
<ul id= "nav2">
<li><a href="#">Photography</a></li>
<li><a href="Photo retouching.html">Photo retouching</a></li>
<li><a href="StudioWork.html">Studio Work</a></li>
</ul>
<p> </p>
<p> </p>
</body>
</html>
CSS
@charset "utf-8";
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
}
#HeaderContainer {
width: 102%;
height: 320px;
background-color: #FFFFFF;
background-image: url("title2.png");
background-repeat: no-repeat;
margin-left: 0 auto;
margin-right: 0 auto;
float: center;
position: relative;
top: -50px;
}
.title {
position: relative;
text-align:center;
color: #5f5f5f;
}
#nav {
display: inline;
}
ul {
list-style: none;
display: block;
}
.CenterContainer {
width: 102%;
overflow: visible;
display: block;
height: 210px;
padding-top: 10px;
}
div.img{
height: 133px;
width: 200px;
float: left;
text-align: center;
margin: 20px 30px 20px;
display: block;
line-height:0;
}
#nav li a:hover {
color: #9BACC4;}
/* CSS Document */
a.current:link, a.current:visited {
border-bottom:thick dotted #FFFFFF;
}
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.TitleImg {
position: relative;
top: 100px;
}
#nav2 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: relative;
top: -500px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
font-family: 'Hammersmith One', sans-serif;
}
#nav2 li:hover{
transform: scale(0.862, 1.134);
-webkit-transform: scale(0.862, 1.134);
-moz-transform: scale(0.862, 1.134);
-o-transform: scale(0.862, 1.134);
-ms-transform: scale(0.862, 1.134);
}
#nav2 li {
float: left;
padding-left: 10px;
}
#nav2 li a {
display: inline;
color: #66a9df;
}
.frontimage {
position: absolute;
left: 500px;
display: inline;
}
#nav {
width: 25px;
height: 600px;
}
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.flatflipbuttons li{
margin:0;
display: block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-bottom: 0; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.flatflipbuttons li:nth-of-type(1) a{
color: green;
background: #3B9DD5;
}
ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}
ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}
ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}
ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.flatflipbuttons li b{ /* CSS for text alongside button */
display: block;
position: relative;
top: -100%; /* starting vertical position of text */
left: 100%; /* horizontal position of text */
text-align: left;
text-indent: 10px;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.5s;
}
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.flatflipbuttons li:hover b{
opacity: 1;
top: -65%; /* vertical position of text onmouseover */
}
/* CSS for 2nd menu below specifically */
ul.second li a{
background: #eee !important;
}
ul.second li a:hover{
background: #ddd !important;
}
h1 {
position: relative;
top: -100px;
font-family: 'Special Elite', cursive;
display: inline;
}
#nav3 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
margin: 0 0 10px 0;
font-weight: bold;
color: #5674DC;
}
#nav3 li {
float: left;
margin: 2px;
}
#nav3 li a {
display: inline;
}
#nav4 {
max-width: 30%;
height: 50px;
float: left;
padding: 0;
list-style: none;
list-style: none;
background-color: #FFFFFF;
z-index: 90;
position: absolute;
top: 200px;
left: 800px;
word-spacing:30px;
margin: 0 0 10px 0;
}
#nav2 li {
float: left;
margin: 2px;
}
#nav2 li a {
display: inline;
}
a:link {
text-decoration: none;
color: #0e5b9a;
}
.contact {
margin: 0 auto;
position: relative;
top: -400px;
display: block;
width: 40%;
font-family: 'PT Sans Narrow', sans-serif;
}
任何有关解决这个问题的建议都将非常感谢!
答案 0 :(得分:0)
更改
font-family: 'Special Elite', cursive;
要:
font-family: 'Special Elite', sans-serif;
草书似乎有很多问题。