我之前创建了一个运作良好的网站。
现在我在style.css中添加了一些代码。
这是我原来的style.css：
@charset 'UTF-8';
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic');
@import url('font-awesome.min.css');
/*
Astral by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body
{
background-image: url('images/overlay.png'), url('images/bg.jpg');
background-repeat: repeat, no-repeat;
background-size: auto, 100% 100%;
}
body.is-loading *
{
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
body,input,textarea,select
{
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
color: SVG; /*#777777;*/
}
strong, b
{
font-weight: 400;
color: #363636;
}
h1, h2, h3, h4,h5, h6
{
font-weight: 400;
color: #363636;
}
blockquote
{
border-left: solid 0.5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
em, i
{
font-style: italic;
}
hr
{
border: 0;
border-top: solid 1px #ddd;
padding: 1.5em 0 0 0;
margin: 1.75em 0 0 0;
}
sub
{
position: relative;
top: 0.5em;
font-size: 0.8em;
}
sup
{
position: relative;
top: -0.5em;
font-size: 0.8em;
}
br.clear
{
clear: both;
}
p, ul, ol, dl, table, blockquote, form
{
margin-bottom: 2em;
}
/* Table */
table
{
width: 100%;
}
table.default
{
}
table.default tbody tr
{
border-bottom: solid 1px #f4f4f4;
}
table.default td
{
padding: 0.5em 1em 0.5em 1em;
}
table.default th
{
text-align: left;
font-weight: 400;
padding: 0.5em 1em 0.5em 1em;
}
table.default thead
{
border-bottom: solid 2px #f4f4f4;
}
/* Form */
form
{
}
form label
{
display: block;
font-weight: 400;
color: #363636;
margin: 0 0 1em 0;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea
{
-webkit-appearance: none;
border: 0;
background: #FFFFFF;
padding: 0.75em;
width: 100%;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select
{
line-height: 1.35em;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus
{
background: #f8f8f8;
}
form ::-webkit-input-placeholder
{
color: #999;
}
form :-moz-placeholder
{
color: #999;
}
form ::-moz-placeholder
{
color: #999;
}
form :-ms-input-placeholder
{
color: #999;
}
/* Section/Article */
section,
article
{
margin-bottom: 3em;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
header
{
}
header > p
{
color: #aaa;
}
/* Image */
.codeboxspace
{
min-width:1000px;
max-width:1400px;
width:95%;
display:none;
}
#codebox
{
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 90%;
line-height: 140%;
white-space: pre;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
background: #E0E0E0;
display: block;
padding: 0.5em 1em;
border: 1px solid #bebab0;
text-align:left;
color:black;
height : 100%;
width:920px;
}
.image
{
display: inline-block;
}
.image img
{
display: block;
width: 100%;
}
.image.fit
{
display: block;
width: 100%;
}
.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.left
{
float: left;
margin: 0 2em 2em 0;
}
.image.centered
{
display: block;
margin: 0 0 2em 0;
}
.image.centered img
{
margin: 0 auto;
width: auto;
}
/* Button */
input[type="button"],
input[type="submit"],
input[type="reset"],
.button
{
-webkit-appearance: none;
display: inline-block;
background-color: #222222;
color: #FFFFFF;
border: 0;
cursor: pointer;
outline: 0;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover
{
background-color: #333333;
}
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.button:active
{
background-color: #444444;
}
input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
.button.alt
{
background-color: #777777;
}
input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
.button.alt:hover
{
background-color: #888888;
}
input[type="button"].alt:active,
input[type="submit"].alt:active,
input[type="reset"].alt:active,
.button.alt:active
{
background-color: #999999;
}
/* List */
ul.default
{
list-style: disc;
padding-left: 1em;
}
ul.default li
{
padding-left: 0.5em;
}
ul.actions
{
}
ul.actions li
{
display: inline-block;
margin-left: 0.5em;
}
ul.actions li:first-child
{
margin-left: 0;
}
ol.default
{
list-style: decimal;
padding-left: 1.25em;
}
ol.default li
{
padding-left: 0.25em;
}
/*********************************************************************************/
/* Icons */
/*********************************************************************************/
.icon {
position: relative;
text-decoration: none;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon > .label {
display: none;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#nav
{
}
#nav a
{
position: relative;
display: inline-block;
color: #FFFFFF;
width: 1em;
height: 1em;
line-height: 0.9em;
}
#nav a.icon:before
{
padding-right: 0;
}
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
color: #ccc;
color: rgba(255,255,255,0.45);
}
#footer a
{
color: #ddd;
color: rgba(255,255,255,0.65);
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
-o-transition: color .25s ease-in-out;
-ms-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
}
#footer a:hover
{
color: rgba(255,255,255,1.0);
}
#footer .copyright
{
}
#footer .copyright li
{
display: inline-block;
}
#footer .copyright li:before
{
display: inline;
content: '\2022';
opacity: 0.5;
padding: 0 0.75em 0 0.75em;
}
#footer .copyright li:first-child:before
{
display: none;
}
#skill {
list-style: none;
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
width: 296px;
margin: 50px auto 0;
position: relative;
line-height: 2em;
padding: 30px 0;
}
#skill li {
margin-bottom:50px;
background:#e9e5e2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: linear-gradient(top, #e1ddd9, #e9e5e2);
height:20px;
border-radius:10px;
-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
}
#skill li h3 {
position:relative;
top:-25px;
}
.bar {
height:18px;
margin:1px 2px;
position:absolute;
border-radius:10px;
-moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
-webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
}
.unity {
width:80%;
-moz-animation:unity 2s ease-out;
-webkit-animation:unity 2s ease-out;
background-color: #FF0000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));
background-image: -webkit-linear-gradient(top, #FF0000, #FF0000);
background-image: -moz-linear-gradient(top, #FF0000, #FF0000);
background-image: -ms-linear-gradient(top, #FF0000, #FF0000);
background-image: -o-linear-gradient(top, #FF0000, #FF0000);
background-image: linear-gradient(top, #FF0000, #FF0000);
}
.html-css {
width:50%;
-moz-animation:html-css 2s ease-out;
-webkit-animation:html-css 2s ease-out;
background-color: #FF8000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FF8000), to(#FF8000));
background-image: -webkit-linear-gradient(top, #FF8000, #FF8000);
background-image: -moz-linear-gradient(top, #FF8000, #FF8000);
background-image: -ms-linear-gradient(top, #FF8000, #FF8000);
background-image: -o-linear-gradient(top, #FF8000, #FF8000);
background-image: linear-gradient(top, #FF8000, #FF8000);
}
.testing {
width:20%;
-moz-animation:testing 2s ease-out;
-webkit-animation:testing 2s ease-out;
background-color: #192AFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#192AFF), to(#192AFF));
background-image: -webkit-linear-gradient(top, #192AFF, #192AFF);
background-image: -moz-linear-gradient(top, #192AFF, #192AFF);
background-image: -ms-linear-gradient(top, #192AFF, #192AFF);
background-image: -o-linear-gradient(top, #192AFF, #192AFF);
background-image: linear-gradient(top, #192AFF, #192AFF);
}
@-moz-keyframes unity {0% { width:0px;} 100%{ width:100%;} }
@-moz-keyframes html-css { 0% { width:0px;} 100%{ width:100%;} }
@-moz-keyframes testing { 0% { width:0px;} 100%{ width:100%;} }
@-webkit-keyframes unity { 0% { width:0px;} 100%{ width:80%;} }
@-webkit-keyframes html-css { 0% { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes testing { 0% { width:0px;} 100%{ width:20%;} }
当我使用上面的代码时，我的网页看起来像这样，它也需要看起来像这样：
http://i61.tinypic.com/2gxl76f.png
但后来我将此代码添加到style.css文件的底部：
div.container {
margin: 50px auto;
width: 675px;
}
div.image {
position: relative;
overflow: hidden;
width: 150px;
height: 150px;
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.3);
}
img {
position: absolute;
left: 0;
top: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
span.title {
width: 150px;
height: 20px;
position: absolute;
background: rgba(30, 30, 30, 0.9);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
font-family:"Lucida Sans", "Trebuchet MS", Arial, sans-serif;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
div.image.revealUpFull span {
height: 141px;
width: 150px;
bottom: -120px;
display: block;
}
div.image.revealUpFull span a {
display: block;
height: 100%;
width: 100%;
color: white;
}
div.image.revealUpFull:hover img {
top: -150px;
}
div.image.revealUpFull:hover span {
bottom: 0px;
}
但是这一切看起来都是这样，而不是它应该如何：
http://i61.tinypic.com/2drwbht.png
请帮我弄清楚如何让页面正常显示。
