Template:Tempalte:HIT-Harbin

From 2012.igem.org

(Difference between revisions)
 
(36 intermediate revisions not shown)
Line 43: Line 43:
* {padding:0; margin:0;}
* {padding:0; margin:0;}
-
body {background:url(https://static.igem.org/mediawiki/2012/a/af/Body-bg.gif) repeat-x #575757;  font-size:9px; color:#4e4e4e;}
+
body {background:url(https://static.igem.org/mediawiki/2012/a/af/Body-bg.gif) repeat-x #575757;  font-size:11px; color:#4e4e4e;}
a {outline:none; color:#5f5f5f; font-weight:bold; text-decoration:none;}
a {outline:none; color:#5f5f5f; font-weight:bold; text-decoration:none;}
a:hover {color:#ea0101; }
a:hover {color:#ea0101; }
Line 60: Line 60:
#header {height:125px; width:940px; border-top:15px solid #fff; text-align:left; margin:0 auto; }
#header {height:125px; width:940px; border-top:15px solid #fff; text-align:left; margin:0 auto; }
-
#nav {float:right;}
+
#nav {float:left;width:940px;}
-
#nav ul li.page_item {float:left; list-style:none; padding:3px 8px 6px 8px; line-height:18px; height:18px;background: url(https://static.igem.org/mediawiki/2012/8/8d/Ul-bg.png
+
#nav ul li.page_item {float:left; list-style:none; padding:3px 8px 6px 8px; line-height:18px; height:18px;background: url(https://static.igem.org/mediawiki/2012/8/8d/Ul-bg.png
) repeat-x bottom left; margin-right:2px;}
) repeat-x bottom left; margin-right:2px;}
#nav ul li.current_page_item {background:#000000; }
#nav ul li.current_page_item {background:#000000; }
#nav ul li.current_page_item a {color:#fff;}
#nav ul li.current_page_item a {color:#fff;}
-
#nav ul li.page_last{float:left; list-style:none; padding-right:0; padding:3px 8px 6px 8px; line-height:18px; height:18px; background: url(https://static.igem.org/mediawiki/2012/8/8d/Ul-bg.png
+
#nav ul li.page_last{float:left; list-style:none; padding-right:0; padding:3px 8px 6px 8px; line-height:18px; height:18px; background: url(https://static.igem.org/mediawiki/2012/8/8d/Ul-bg.png) repeat-x bottom left;}
-
) repeat-x bottom left;}
+
#nav ul li a {font-weight:bold; text-decoration:none; color:#fff; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-shadow:0 1px 0 #000;}
#nav ul li a {font-weight:bold; text-decoration:none; color:#fff; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-shadow:0 1px 0 #000;}
#nav ul li a:hover {color:#999999;}
#nav ul li a:hover {color:#999999;}
.logo-area {padding-top:5px; clear:both; overflow:visible; height:220px;}
.logo-area {padding-top:5px; clear:both; overflow:visible; height:220px;}
a.logo {padding:5px 0 0 0; display:block; width:940px; height:220px; overflow:visible; float:left;}
a.logo {padding:5px 0 0 0; display:block; width:940px; height:220px; overflow:visible; float:left;}
-
a#HIT-logo {text-indent:0px; background:url(https://static.igem.org/mediawiki/2012/0/04/HBackground.png) no-repeat;}\
+
a#HIT-logo {text-indent:0px; background:url(https://static.igem.org/mediawiki/2012/0/04/HBackground.png) no-repeat;}
a.portfolio-image {display:block; width:400px; height:26px; position:relative; top:16px; left:-8px; z-index:2;}
a.portfolio-image {display:block; width:400px; height:26px; position:relative; top:16px; left:-8px; z-index:2;}
Line 81: Line 80:
.large-image .post-title-small a:hover {color:#5f5f5f; }
.large-image .post-title-small a:hover {color:#5f5f5f; }
-
#nav2 li ul {position: absolute; width: 15em; left: -999em; padding-top:1px;}
+
#nav2 li ul {position: absolute; width: 20em; left: -999em; padding-top:-1px;}
#nav2 li:hover ul, #nav2 li.sfhover ul {left: auto; z-index:1000;}
#nav2 li:hover ul, #nav2 li.sfhover ul {left: auto; z-index:1000;}
-
#nav2 li ul li {border-bottom:1px solid #dedbd1; border-left:1px solid #dedbd1; border-right:1px solid #dedbd1; line-height:30px; width:15em;}
+
#nav2 li ul li {border-bottom:0px solid #dedbd1; border-left:1px solid #dedbd1; border-right:1px solid #dedbd1; line-height:0px; width:15em;}
#nav2 li:hover, #nav2 li.hover {position: static;}
#nav2 li:hover, #nav2 li.hover {position: static;}
#nav2 li ul ul {margin: -22px 0 0 15em;}
#nav2 li ul ul {margin: -22px 0 0 15em;}
Line 108: Line 107:
span.the-comments {background:url(https://static.igem.org/mediawiki/2012/4/48/Balloon.png) no-repeat top left; padding-left:19px; margin-left:8px; color:#891111; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; font-size:11.5px; }
span.the-comments {background:url(https://static.igem.org/mediawiki/2012/4/48/Balloon.png) no-repeat top left; padding-left:19px; margin-left:8px; color:#891111; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; font-size:11.5px; }
.post-excerpt {padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;}
.post-excerpt {padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;}
-
.post-excerpte {font-size:18px; padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;line-height:29px;}
+
.post-excerpte {font-size:14px; font-family:Arial;padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;line-height:29px;}
.post-excerpt a {color:#4E4E4E; background:#FFF5C0; text-shadow:0 1px 0 #fff;}
.post-excerpt a {color:#4E4E4E; background:#FFF5C0; text-shadow:0 1px 0 #fff;}
.post-excerpt a:hover {color:#828282;}
.post-excerpt a:hover {color:#828282;}
Line 138: Line 137:
#slider .left-container {float:left; width:380px; height:210px; overflow:hidden; line-height:36px; margin-top:53px;}
#slider .left-container {float:left; width:380px; height:210px; overflow:hidden; line-height:36px; margin-top:53px;}
#slider .post-title-large {margin-bottom:22px;}
#slider .post-title-large {margin-bottom:22px;}
-
#slider .post-title-large a {display:inline; font-size:40px; font-weight:bold; text-transform:capitalize; line-height:40px;text-shadow:0 2px 0 #000; color:#e1e1e1;}
+
#slider .post-title-large a { font-size:40px; font-weight:bold; text-transform:capitalize; line-height:40px;text-shadow:0 2px 0 #000; color:#e1e1e1;}
-
#slider .post-title a:hover {color:#ffffff; text-shadow:none;}
+
#slider .post-excerpt {font-size:20px; font-weight:bold; color:#FFFFFF;}
#slider .post-excerpt {font-size:20px; font-weight:bold; color:#FFFFFF;}
ol#controls{margin:1em 0; padding:0; height:28px; position:relative; top:-90px;}
ol#controls{margin:1em 0; padding:0; height:28px; position:relative; top:-90px;}
Line 148: Line 146:
-
.slider-image-container{position:relative; width:400px; height:300px; float:right; margin-top:28px; }
+
.slider-image-container{position:relative; width:400px; height:300px; float:right; margin-top:54px; }
.post-390 {width:390px; float:left; margin-bottom:20px; text-align:left;}
.post-390 {width:390px; float:left; margin-bottom:20px; text-align:left;}
.post-390.odd {margin-right:40px;}
.post-390.odd {margin-right:40px;}
Line 156: Line 154:
.post-391.odd {margin-right:40px;}
.post-391.odd {margin-right:40px;}
.post-391 .post-excerpt {line-height:24px;}
.post-391 .post-excerpt {line-height:24px;}
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
-
<script type="text/javascript">
 
-
(function($) {
 
-
    $.fn.easySlider = function(options) {
 
-
        var defaults = {
 
-
            prevId: 'prevBtn',
 
-
            prevText: 'Previous',
 
-
            nextId: 'nextBtn',
 
-
            nextText: 'Next',
 
-
            controlsShow: true,
 
-
            controlsBefore: '',
 
-
            controlsAfter: '',
 
-
            controlsFade: true,
 
-
            firstId: 'firstBtn',
 
-
            firstText: 'First',
 
-
            firstShow: false,
 
-
            lastId: 'lastBtn',
 
-
            lastText: 'Last',
 
-
            lastShow: false,
 
-
            vertical: false,
 
-
            speed: 400,
 
-
            auto: false,
 
-
            pause: 2000,
 
-
            continuous: false,
 
-
            numeric: false,
 
-
            numericId: 'controls'
 
-
        };
 
-
        var options = $.extend(defaults, options);
 
-
        this.each(function() {
 
-
            var obj = $(this);
 
-
            var s = $("li", obj).length;
 
-
            var w = $("li", obj).width();
 
-
            var h = $("li", obj).height();
 
-
            var clickable = true;
 
-
            obj.width(w);
 
-
            obj.height(h);
 
-
            obj.css("overflow", "hidden");
 
-
            var ts = s - 1;
 
-
            var t = 0;
 
-
            $("ul", obj).css('width', s * w);
 
-
            if (options.continuous) {
 
-
                $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left", "-" + w + "px"));
 
-
                $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
 
-
                $("ul", obj).css('width', (s + 1) * w);
 
-
            };
 
-
            if (!options.vertical) $("li", obj).css('float', 'left');
 
-
            if (options.controlsShow) {
 
-
                var html = options.controlsBefore;
 
-
                if (options.numeric) {
 
-
                    html += '<ol id="' + options.numericId + '"></ol>';
 
-
                } else {
 
-
                    if (options.firstShow) html += '<span id="' + options.firstId + '"><a href=\"javascript:void(0);\">' + options.firstText + '</a></span>';
 
-
                    html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>';
 
-
                    html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>';
 
-
                    if (options.lastShow) html += ' <span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>';
 
-
                };
 
-
                html += options.controlsAfter;
 
-
                $(obj).after(html);
 
-
            };
 
-
            if (options.numeric) {
 
-
                for (var i = 0; i < s; i++) {
 
-
                    $(document.createElement("li")).attr('id', options.numericId + (i + 1)).html('<a rel=' + i + ' href=\"javascript:void(0);\">' + (i + 1) + '</a>').appendTo($("#" + options.numericId)).click(function() {
 
-
                        animate($("a", $(this)).attr('rel'), true);
 
-
                    });
 
-
                };
 
-
            } else {
 
-
                $("a", "#" + options.nextId).click(function() {
 
-
                    animate("next", true);
 
-
                });
 
-
                $("a", "#" + options.prevId).click(function() {
 
-
                    animate("prev", true);
 
-
                });
 
-
                $("a", "#" + options.firstId).click(function() {
 
-
                    animate("first", true);
 
-
                });
 
-
                $("a", "#" + options.lastId).click(function() {
 
-
                    animate("last", true);
 
-
                });
 
-
            };
 
-
            function setCurrent(i) {
 
-
                i = parseInt(i) + 1;
 
-
                $("li", "#" + options.numericId).removeClass("current");
 
-
                $("li#" + options.numericId + i).addClass("current");
 
-
            };
 
-
            function adjust() {
 
-
                if (t > ts) t = 0;
 
-
                if (t < 0) t = ts;
 
-
                if (!options.vertical) {
 
-
                    $("ul", obj).css("margin-left", (t * w * -1));
 
-
                } else {
 
-
                    $("ul", obj).css("margin-left", (t * h * -1));
 
-
                }
 
-
                clickable = true;
 
-
                if (options.numeric) setCurrent(t);
 
-
            };
 
-
            function animate(dir, clicked) {
 
-
                if (clickable) {
 
-
                    clickable = false;
 
-
                    var ot = t;
 
-
                    switch (dir) {
 
-
                    case "next":
 
-
                        t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1;
 
-
                        break;
 
-
                    case "prev":
 
-
                        t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1;
 
-
                        break;
 
-
                    case "first":
 
-
                        t = 0;
 
-
                        break;
 
-
                    case "last":
 
-
                        t = ts;
 
-
                        break;
 
-
                    default:
 
-
                        t = dir;
 
-
                        break;
 
-
                    };
 
-
                    var diff = Math.abs(ot - t);
 
-
                    var speed = diff * options.speed;
 
-
                    if (!options.vertical) {
 
-
                        p = (t * w * -1);
 
-
                        $("ul", obj).animate({
 
-
                            marginLeft: p
 
-
                        },
 
-
                        {
 
-
                            queue: false,
 
-
                            duration: speed,
 
-
                            complete: adjust
 
-
                        });
 
-
                    } else {
 
-
                        p = (t * h * -1);
 
-
                        $("ul", obj).animate({
 
-
                            marginTop: p
 
-
                        },
 
-
                        {
 
-
                            queue: false,
 
-
                            duration: speed,
 
-
                            complete: adjust
 
-
                        });
 
-
                    };
 
-
                    if (!options.continuous && options.controlsFade) {
 
-
                        if (t == ts) {
 
-
                            $("a", "#" + options.nextId).hide();
 
-
                            $("a", "#" + options.lastId).hide();
 
-
                        } else {
 
-
                            $("a", "#" + options.nextId).show();
 
-
                            $("a", "#" + options.lastId).show();
 
-
                        };
 
-
                        if (t == 0) {
 
-
                            $("a", "#" + options.prevId).hide();
 
-
                            $("a", "#" + options.firstId).hide();
 
-
                        } else {
 
-
                            $("a", "#" + options.prevId).show();
 
-
                            $("a", "#" + options.firstId).show();
 
-
                        };
 
-
                    };
 
-
                    if (clicked) clearTimeout(timeout);
 
-
                    if (options.auto && dir == "next" && !clicked) {;
 
-
                        timeout = setTimeout(function() {
 
-
                            animate("next", false);
 
-
                        },
 
-
                        diff * options.speed + options.pause);
 
-
                    };
 
-
                };
 
-
            };
 
-
            var timeout;
 
-
            if (options.auto) {;
 
-
                timeout = setTimeout(function() {
 
-
                    animate("next", false);
 
-
                },
 
-
                options.pause);
 
-
            };
 
-
            if (options.numeric) setCurrent(0);
 
-
            if (!options.continuous && options.controlsFade) {
 
-
                $("a", "#" + options.prevId).hide();
 
-
                $("a", "#" + options.firstId).hide();
 
-
            };
 
-
        });
 
-
    };
 
-
})(jQuery);
 
-
 
-
 
-
$(document).ready(function(){
 
-
$("#slider").easySlider({
 
-
auto: false, continuous: true,
 
-
numeric: true
 
-
});
 
-
});
 
-
</script>
 
-
<script type="text/javascript">
 
-
sfHover = function() {
 
-
var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
 
-
for (var i=0; i<sfEls.length; i++) {
 
-
sfEls[i].onmouseover=function() {
 
-
this.className+=" sfhover";
 
-
}
 
-
sfEls[i].onmouseout=function() {
 
-
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
 
-
}
 
-
}
 
-
}
 
-
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
-
</script>
 
-
 
-
 
-
 
-
 
</style>
</style>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HIT-Harbin</title>
<title>HIT-Harbin</title>
</head>
</head>
-
<body>
 
-
</div>
 
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
-
 
-
<script type="text/javascript">
 
-
$(document).ready(function(){
 
-
$("#slider").easySlider({
 
-
auto: false, continuous: true,
 
-
numeric: true
 
-
});
 
-
});
 
-
</script>
 
-
<script type="text/javascript">
 
-
sfHover = function() {
 
-
var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
 
-
for (var i=0; i<sfEls.length; i++) {
 
-
sfEls[i].onmouseover=function() {
 
-
this.className+=" sfhover";
 
-
}
 
-
sfEls[i].onmouseout=function() {
 
-
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
 
-
}
 
-
}
 
-
}
 
-
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
-
</script>
 
-
 
<body>
<body>
<div id="header">
<div id="header">
<div class="logo-area">
<div class="logo-area">
-
<a class="logo" id="HIT-logo" href="HOME.html" title="HIT"></a>
+
<a class="logo" id="HIT-logo" href="https://2012.igem.org/Team:HIT-Harbin" title="HIT"></a>
</div>  
</div>  
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 18:20, 26 September 2012

HIT-Harbin