我在调整浏览器大小时遇到格式问题。我有两个图像切换位置，似乎是因为它们漂浮。是否有一种简单的方法可以防止这两个图像被切换？
这是我的html文件。调整浏览器大小时，图像“left.png”和“all.png”将切换位置。我需要他们留在原地。我怎么能做到这一点？ 访问http://web-dev.aws.sesameonline.net/ebook/pc/ebook.php?bid=1，了解我希望图片如何操作。请注意链接文件中如何切换位置。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="HandheldFriendly" content="True">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="no-cache" http-equiv"pragma"="">
<meta content="on" http-equiv="cleartype">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="yes" name="apple-mobile-web-app-capable">
<title>Navigation Template</title>
<link type="text/css" rel="stylesheet" href="ebook_wrapper.css"></link>
<script src="jquery-1.8.3.js"></script>
<script src="jquery.touchwipe.min.js" type="text/javascript"></script>
<script src="ebook.js" type="text/javascript"></script>
</head>
<body>
<!-- BOOK SLIDER GOES HERE
-->
<!-- THIS IS THE CENTER CONTENT -->
<!-- INTERACTIVE CONTENT GOES INTO THE IFRAME CONTAINER -->
<div id="elmo_ebook_container" class="clearfix">
<ul class="nav clearfix">
<li class="fline">
<a id="home" class="button" href="../index.php">
<img alt="home" src="home.png">
</a>
</li>
<li id="bottom_left" class="line">
<a id="left" class="button" href="#">
<img alt="left" src="left.png">
</a>
</li>
</ul>
<div id="ebook_iframe_container">
<div id="ifcontainer" style="height:100%;width:100%;overflow:hidden;position:relative">
<div>
</div>
</div>
</div>
<ul class="nav clearfix">
<li id="top_right" class="fline">
<a id="all" class="button" href="#">
<img alt="all" src="all.png">
</a>
</li>
<li id="bottom_right" class="line">
<a id="right" class="button" href="#">
<img alt="right" src="right.png">
</a>
</li>
</ul>
</div>
<!-- THIS IS THE END OF THE CENTER CONTENT -->
</body>
</html>
body{
font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
.os_mac {
font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Hiragino Sans GB","Hiragino Sans GB W3";
}
ul#book_list{
width: 100%;
margin:0 auto;
}
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 500;
width: 100%;
height: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)";
background: #000;
}
#error-box{
padding: 0 10px 0 10px;
position:absolute;
z-index: 900;
background:#ffffff;
color: #000000;
height: 30px;
line-height: 30px;
font-size: 14px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
top: 0;
left: 50%;
box-shadow: 0 0px 20px rgba(0,0,0,.2);
display: none;
}
#elmo_ebook_container{
background:#f8f8f8;
max-width: 1010px;
max-height: none;
height: 100%;/*container 100% height*/
margin: 0 auto;
box-shadow: 0 0px 20px rgba(0,0,0,.2);
*zoom: 1;/*ie6 quirksmode*/
position: relative;
}
.nav,#ebook_iframe_container{
float:left;
}
#ebook_iframe{
max-width: 576px;/*max width of iframe same as canvas*/
max-height: 576px;
}
#ebook_iframe_dummy{
left:576px;
}
.nav{
height: 100%;
width:19.80198%;/*200/1010*/
margin: 0;
padding: 0;
}
.nav li{
height:50%;
width: 100%;
padding: 0;
margin: 0;
position: relative;
}
li.line{
border-top: 1px solid #ccc;
}
#ebook_iframe_container{
padding: 20px;
width: 60.39604%;
height: 100%;
min-height:100px;
position: relative;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}
#ebook_iframe{
background: #ffffff;
}
.nav a {
position: absolute;
display: block;
margin: 0;
padding: 0;
width: 100%;
height:100%;
}
.nav a img{
width: 80%;
height: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.nav a:hover{
text-decoration: none;
color: #555;
background: #f5f5f5;
}
/*thumbnails carousel*/
#thumb{
max-width: 1010px;
position: absolute;
width: 100%;
z-index: 999;
background: #fff;
left:50%;
top:50%;
box-shadow: 0 0px 20px rgba(0,0,0,.2);
visibility: hidden;
border-style: solid;
border-color: #cccccc;
border-width: 2px 0px;
}
#viewall{
max-width: 1010px;
position: absolute;
width: 100%;
z-index: 999;
background: #fff;
left:50%;
top:50%;
box-shadow: 0 0px 20px rgba(0,0,0,.2);
visibility: hidden;
border-style: solid;
border-color: #cccccc;
border-width: 2px 0px;
}
.jcarousel-wrapper {
margin: 10px auto;
position: relative;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 100%;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
width: 300px;
float: left;
padding:0 5px 0 5px;
border-left:1px solid #ccc;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.jcarousel img {
display: block;
max-width: 100%;
margin: 0 auto;
height: auto !important;
cursor: pointer;
}
.jcarousel li a{
display: block;
width:100%;
height:100%;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
top: 50%;
margin-top: -60px;
width: 120px;
height: 120px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
opacity: 0.7;
font: 60px Arial, sans-serif;
line-height: 120px;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 4px #F0EFE7;
-moz-box-shadow: 0 0 4px #F0EFE7;
box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev:hover,
.jcarousel-control-next:hover,.jcarousel-control-close:hover {
background: #d7352c;
}
.jcarousel-control-close{
position: absolute;
top: 5%;
right:1%;
opacity: 0.7;
margin-top: -15px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 4px #F0EFE7;
-moz-box-shadow: 0 0 4px #F0EFE7;
box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev {
left: 15px;
}
.jcarousel-control-next {
right: 15px;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: -20px;
left: 50%;
display: none;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
margin: 0;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
height: 10px;
width: 10px;
line-height: 10px;
background: #fff;
color: #4E443C;
border-radius: 10px;
text-indent: -9999px;
margin-right: 7px;
-webkit-box-shadow: 0 0 2px #4E443C;
-moz-box-shadow: 0 0 2px #4E443C;
box-shadow: 0 0 2px #4E443C;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
-webkit-box-shadow: 0 0 2px #F0EFE7;
-moz-box-shadow: 0 0 2px #F0EFE7;
box-shadow: 0 0 2px #F0EFE7;
}
/*media query*/
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
top: 50%;
margin-top: -40px;
width: 80px;
height: 80px;
text-align: center;
: #4E443C;
color: #fff;
text-decoration: none;
opacity: 0.7;
font: 40px Arial, sans-serif;
line-height: 80px;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 4px #F0EFE7;
-moz-box-shadow: 0 0 4px #F0EFE7;
box-shadow: 0 0 4px #F0EFE7;
}
.nav,#ebook_iframe_container{
float:none;
}
.nav{
width: 100%;
height:15%;
margin: 0;
padding: 0;
}
.nav li{
height:100%;
width: 50%;
float: left;
padding: 0;
margin: 0;
}
li.line{
border-left: 1px solid #ccc;
border-top: none;
}
.nav a {
position: absolute;
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.nav a img{
max-width: none;
width: auto;
height: 70% ;
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#ebook_iframe_container{
padding: 10px 10px 10px 10px;
height: 70%;
width: 100%;
position: relative;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}
#elmo_ebook_container{
background:#f8f8f8;
max-width: 1010px;
max-height: none;
min-height: 100px;
height: 100%;/*container 100% height*/
margin: 0 auto;
box-shadow: 0 0px 20px rgba(0,0,0,.2);
*zoom: 1;/*ie6 quirksmode*/
}
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
#elmo_ebook_container{
background:#f8f8f8;
min-height: 100px;
height: 100%;/*container 100% height*/
margin: 0 auto;
box-shadow: 0 0px 20px rgba(0,0,0,.2);
*zoom: 1;/*ie6 quirksmode*/
}
.nav,#ebook_iframe_container{
float:left;
}
#ebook_iframe{
max-width: 576px;/*max width of iframe same as canvas*/
max-height: 576px;
}
.nav{
height: 100%;
width:19.80198%;/*200/1010*/
margin: 0;
padding: 0;
}
.nav li{
height:50%;
width: 100%;
padding: 0;
margin: 0;
position: relative;
padding:0;
}
li.line{
border-top: 1px solid #ccc;
}
#ebook_iframe_container{
padding: 10px 10px 10px 10px;
width: 60.39604%;
height: 100%;
min-height:100px;
position: relative;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}
#ebook_iframe{
background: #ffffff;
}
.nav a {
position: absolute;
display: block;
margin: 0;
padding: 0;
width: 100%;
height:100%;
}
.nav a img{
width: 80%;
height: auto;
max-width: 160px;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
@media screen and (min-aspect-ratio: 1/1) { /* landscape styles here */}
/*for brwoser not support orientation*/
@media screen and (max-aspect-ratio: 1/1) { /* portrait styles here */}
@media (max-width: 470px){
.nav,#ebook_iframe_container{
float:none;
}
.nav{
width: 100%;
height:15%;
margin: 0;
padding: 0;
min-height: 50px;
}
.nav li{
height:100%;
width: 50%;
float: left;
padding: 0;
margin: 0;
min-height: 50px;
}
li.line{
border-left: 1px solid #ccc;
border-top: none;
}
.nav a {
position: absolute;
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.nav a img{
max-width: none;
min-height: 20px;
width: auto;
height: 70% ;
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#ebook_iframe_container{
padding: 10px 10px 10px 10px;
height: 70%;
width: 100%;
position: relative;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}
#elmo_ebook_container{
background:#f8f8f8;
max-width: 1010px;
max-height: none;
min-height: 100px;
height: 100%;/*container 100% height*/
margin: 0 auto;
box-shadow: 0 0px 20px rgba(0,0,0,.2);
*zoom: 1;/*ie6 quirksmode*/
}
}
#loader{
width:100%;
height: 100%;
position: absolute;
left:0;
top:0;
}
/*fix ios canvas blink when tap*/
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }
.bokeh {
margin:-25px 0 0 -25px;
padding:0;
width: 50px;
height: 50px;
position: absolute;
list-style: none;
border-radius:50%;
left:50%;
top:50%;
z-index:9;
}
.bokeh li {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
}
.bokeh li:nth-child(1) {
left: 50%;
top: 0;
margin: 0 0 0 -10px;
background: #00C176;
-webkit-transform-origin: 50% 250%;
-moz-transform-origin: 50% 250%;
-ms-transform-origin: 50% 250%;
-o-transform-origin: 50% 250%;
transform-origin: 50% 250%;
-webkit-animation:
rota 1.13s linear infinite,
opa 3.67s ease-in-out infinite alternate;
-moz-animation:
rota 1.13s linear infinite,
opa 3.67s ease-in-out infinite alternate;
-ms-animation:
rota 1.13s linear infinite,
opa 3.67s ease-in-out infinite alternate;
-o-animation:
rota 1.13s linear infinite,
opa 3.67s ease-in-out infinite alternate;
animation:
rota 1.13s linear infinite,
opa 3.67s ease-in-out infinite alternate;
}
.bokeh li:nth-child(2) {
top: 50%;
right: 0;
margin: -10px 0 0 0;
background: #FF003C;
-webkit-transform-origin: -150% 50%;
-moz-transform-origin: -150% 50%;
-ms-transform-origin: -150% 50%;
-o-transform-origin: -150% 50%;
transform-origin: -150% 50%;
-webkit-animation:
rota 1.86s linear infinite,
opa 4.29s ease-in-out infinite alternate;
-moz-animation:
rota 1.86s linear infinite,
opa 4.29s ease-in-out infinite alternate;
-ms-animation:
rota 1.86s linear infinite,
opa 4.29s ease-in-out infinite alternate;
-o-animation:
rota 1.86s linear infinite,
opa 4.29s ease-in-out infinite alternate;
animation:
rota 1.86s linear infinite,
opa 4.29s ease-in-out infinite alternate;
}
.bokeh li:nth-child(3) {
left: 50%;
bottom: 0;
margin: 0 0 0 -10px;
background: #FABE28;
-webkit-transform-origin: 50% -150%;
-moz-transform-origin: 50% -150%;
-ms-transform-origin: 50% -150%;
-o-transform-origin: 50% -150%;
transform-origin: 50% -150%;
-webkit-animation:
rota 1.45s linear infinite,
opa 5.12s ease-in-out infinite alternate;
-moz-animation:
rota 1.45s linear infinite,
opa 5.12s ease-in-out infinite alternate;
-ms-animation:
rota 1.45s linear infinite,
opa 5.12s ease-in-out infinite alternate;
-o-animation:
rota 1.45s linear infinite,
opa 5.12s ease-in-out infinite alternate;
animation:
rota 1.45s linear infinite,
opa 5.12s ease-in-out infinite alternate;
}
.bokeh li:nth-child(4) {
top: 50%;
left 0;
margin: -10px 0 0 0;
background: #88C100;
-webkit-transform-origin: 250% 50%;
-moz-transform-origin: 250% 50%;
-ms-transform-origin: 250% 50%;
-o-transform-origin: 250% 50%;
transform-origin: 250% 50%;
-webkit-animation:
rota 1.72s linear infinite,
opa 5.25s ease-in-out infinite alternate;
-moz-animation:
rota 1.72s linear infinite,
opa 5.25s ease-in-out infinite alternate;
-ms-animation:
rota 1.72s linear infinite,
opa 5.25s ease-in-out infinite alternate;
-o-animation:
rota 1.72s linear infinite,
opa 5.25s ease-in-out infinite alternate;
animation:
rota 1.72s linear infinite,
opa 5.25s ease-in-out infinite alternate;
}
@-webkit-keyframes rota {
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rota {
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rota {
to { -ms-transform: rotate(360deg); }
}
@-o-keyframes rota {
to { -o-transform: rotate(360deg); }
}
@keyframes rota {
to { transform: rotate(360deg); }
}
.if{
position: absolute;
left:0;
right:0;
background: #ffffff;
box-shadow: 0 0px 10px rgba(0,0,0,.5);
}
/*------*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
text-decoration: none;
}
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
color: #666666;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
padding:0;
margin:0;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix{*zoom:1;}
ul{
list-style:none;
}
html, body{
height:100%;
}