Xiaopei's DokuWiki

These are the good times in your life,
so put on a smile and it'll be alright

User Tools

Site Tools

Trace: • position_absolute

Sidebar

友链

导航

it:web_design:position_absolute

Table of Contents

使用绝对定位做单页网站

10,000 Year Clock

http://www.10000yearclock.net/

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
 
    <!-- SEO -->
    <meta content="shannon hickman for DEI Creative, Seattle" name="author"/>
    <meta content="ten thousand year clock, 10000 year clock, clock, Long Now, Stuart Brand, Danny Hillis, Jeff Bezos, West Texas, Applied Minds, longnow, Penguin Automated Systems, Swaggart Brothers, Machinists Inc, long term thinking" name="keywords"/>
    <meta content="We are building a 10,000 Year Clock. It's a special Clock, designed to be a symbol, an icon for long term thinking." name="description"/>
    <meta content="all" name="robots"/>
 
    <link media="screen" type="text/css" href="css/styles.css" rel="stylesheet"/>
    <link href="favicon.ico" rel="Shortcut Icon"/>
    <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="scripts/supersized.3.1.3.min.js" type="text/javascript"></script>
 
    <title>10,000 Year Clock</title>
  </head>
 
  <body>
    <!-- 背景图, 由 AJAX 异步加载 -->
    <div id="supersized" class="quality" style="display: block;">
      <a target="_blank" class="activeslide">
	<img src="img/bg.jpg" style="width: 1280px; height: 1024px;"/>
      </a>
    </div>
    <div id="supersized-loader" style="display: none;"></div>
 
    <!-- 首页 logo -->
    <a href="index.html">
      <img width="867" height="269" id="logo" alt="10,000 Year Clock | Sierra Diablo Mountain Range" src="img/10000YearClock.png"/>
    </a>
 
    <!-- 页边的按钮, 两按钮各用了一张 sprite 显示 hover 的效果 -->
    <a alt="Learn More" id="learn-more" href="learnmore.html"></a>
    <a alt="Updates" id="updates" href="updates.html"></a>
 
    <!-- 页中的文字 -->
    <div id="quotes">
      <img width="619" height="190" alt="“We are as gods and we might as well get good at it.” - Stewart Brand, 1968, from the Whole Earth Catalog  “We are as gods and HAVE to get good at it.” - Stewart Brand, 2009, from his book Whole Earth Discipline" src="img/quotes.png"/>
    </div>
  </body>
</html>

CSS

h1 {
    color: #AD5218;
    font: bold 1.4em "Trebuchet MS",Arial,Helvetica,sans-serif;
    letter-spacing: 0.07em;
    margin: 0;
    padding: 0 0 25px;
}
h2 {
    color: #636466;
    font: 0.75em/112% "Trebuchet MS",Arial,Helvetica,sans-serif;
    letter-spacing: 0.02em;
    margin: 0;
    position: relative;
}
h3 {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.07em;
    margin: 0 0 3px;
}
h4 {
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 0.07em;
}
#supersized-loader {
    background: url("../img/progress.gif") no-repeat scroll center center #E6E6E6;
    border: 1px solid #DDDDDD;
    border-radius: 5px 5px 5px 5px;
    height: 60px;
    left: 50%;
    margin: -30px 0 0 -30px;
    position: absolute;
    text-indent: -999em;
    top: 50%;
    width: 60px;
    z-index: 10;
}
#supersized {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -999;
}
#supersized img {
    border: medium none;
    display: none;
    height: auto;
    outline: medium none;
    position: relative;
    width: auto;
}
#supersized.speed img {
    image-rendering: -moz-crisp-edges;
}
#supersized.quality img {
    image-rendering: optimizequality;
}
#supersized a {
    background: none repeat scroll 0 0 #111111;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -30;
}
#supersized a.prevslide {
    z-index: -20;
}
#supersized a.activeslide {
    z-index: -10;
}
#supersized a.prevslide img, #supersized a.activeslide img {
    display: inline;
}
#logo {
    font-family: inherit;
    left: 0;
    position: absolute;
    top: 20px;
}
a#learn-more, a#learn-more:visited {
    background: url("../img/more.png") no-repeat scroll 0 0 transparent;
    height: 133px;
    left: 0;
    position: absolute;
    top: 354px;
    width: 94px;
}
a#learn-more:hover, a#learn-more.active {
    background-position: 0 -135px;
}
a#updates, a#updates:visited {
    background: url("../img/updates.png") no-repeat scroll 0 0 transparent;
    height: 133px;
    left: 0;
    position: absolute;
    top: 500px;
    width: 111px;
}
a#updates:hover, a#updates.active {
    background-position: 0 -135px;
}
#quotes {
    height: 190px;
    left: 300px;
    position: absolute;
    text-align: left;
    top: 400px;
    width: 1000px;
}
#learnmore {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.94);
    border: 1px solid #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    display: block;
    height: auto;
    left: 246px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 40px;
    position: absolute;
    text-align: left;
    top: 356px;
    width: 680px;
}
ul {
    margin: 0 0 0 50px;
}
p, li {
    color: #636466;
    font: 0.83em/1.75em "Trebuchet MS",Arial,Helvetica,sans-serif;
    padding: 0 0 30px;
}
li {
    padding: 0 0 12px;
}
p.beforeUL {
    padding: 0 0 12px;
}
p a {
    background: none repeat scroll 0 0 transparent;
    color: #444444;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    outline: medium none;
    text-decoration: underline;
}
p a:hover, p a:visited {
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    text-decoration: none;
}
#learnmore img {
    border: 2px solid #999966;
    display: inline;
    margin-bottom: 25px;
}
#learnmore img.noborder {
    border: medium none;
    margin-bottom: 0;
}
img.rtspace {
    margin-right: 10px;
}
.clear {
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
}

加载大图的 JS

jQuery(function($){
    $.supersized({
 
    //Functionality
    slideshow               :   0,        //Slideshow on/off
    keyboard_nav            :   0,        //Keyboard navigation on/off
    performance             :   2,        //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
    image_protect           :   1,        //Disables image dragging and right click with Javascript
    image_path              :   'img/', //Default image path
 
    //Size & Position
    min_width               :   1080,        //Min width allowed (in pixels)
    min_height              :   1024,        //Min height allowed (in pixels)
    vertical_center         :   0,        //Vertically center background
    horizontal_center       :   0,        //Horizontally center background
    fit_portrait            :   1,        //Portrait images will not exceed browser height
    fit_landscape           :   0,        //Landscape images will not exceed browser width
 
    //Components
    navigation              :   0,        //Slideshow controls on/off
    thumbnail_navigation    :   0,        //Thumbnail navigation
    slide_counter           :   0,        //Display slide numbers
    slide_captions          :   0,        //Slide caption (Pull from "title" in slides array)
    slides                  :   [        //Slideshow Images
        {image : 'img/bg.jpg', title : 'An arial photo of the site for the 10,000 Year Clock', url : ''}
    ]
 
    }); 
});

参考 10,000 Year Clock 做的暴风雪航天飞机的网站

buran

it/web_design/position_absolute.txt · Last modified: 2013/08/19 07:22 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki