显然我有点出于实践（自从我使用html和css几个月后）因为我从网站上删除了一些代码，当我预览我的网站时，它看起来与网站上的内容完全不同。事实上，甚至没有出现过。
Annyway，所以我想要的是什么 http://www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons_vertical/
这是代码。首先是我的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=Lato:700' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body bgcolor="#FFFFFF">
<div id="HeaderContainer"></div>
<br /><br />
<ul class="flatflipbuttons second">
<li><a href="photography.html"><span><img src="images/photography.png" /></span></a></li>
<li><a href="2d design.html"><span><img src="images/graphicdesign.png" /></span></a></li>
<li><a href="3d work.html"><span><img src="images/3dwork.png" /></span></a></li>
<li><a href="contact.html"><span><img src="images/contact.png" /></span></a></li>
</ul>
</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-top: 50px;
margin-left: auto;
margin-right: auto;
float: center;
}
.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;
}
#nav2 li {
float: left;
margin: 2px;
}
#nav2 li a {
display: inline;
}
.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;
}
我在那里有html要求的图像，但由于某种原因，按钮本身不会出现
答案 0 :(得分：1)
我发现你错过了关闭＆＃34;}＆＃34;在＆＃34; #nav li a：hover＆＃34;在您的css代码中，这是您犯的错误
答案 1 :(得分：1)
答案 2 :(得分：0)
我刚刚将所有代码复制到Notepad ++中，将HTML和CSS分别保存到我的桌面上，并创建了一个包含图像的图像文件夹，我没有任何问题。代码应该适合你。只要将代码复制到以下各自的目录中，就可以了：
除此之外，我无法看到代码如何让你失望。