Template:Team:Tsinghua/CSS/slider

From 2014.igem.org

(Difference between revisions)
 
Line 1: Line 1:
<html><style type="text/css">
<html><style type="text/css">
-
body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }
+
#gallery 
-
#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}
+
        {
-
h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}
+
            width: 700px;
-
span{visibility:hidden; position:absolute; overflow:hidden;}
+
            position: relative;
-
ul,li{ list-style:none; margin:0; padding:0;}
+
            margin: 20px auto 0;
-
a:active,a:hover{ cursor:pointer}
+
            background-color: #000;
-
a:hover span,a:active span{position:absolute; top:90px;  z-index:20px; visibility: visible; margin-left:-500px;}
+
            min-height: 400px;
-
#info img{ width:400px; height:280px; border:7px solid #FFFFFF}
+
            padding: 20px;
-
#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
+
        }
-
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}
+
 
-
.b1{ background:url(/articleimg/2006/07/3784/b1.jpg)}
+
            /*标题*/ 
-
.b2{ background:url(/articleimg/2006/07/3784/b2.jpg)}
+
        #gallery h1 
-
.b3{ background:url(/articleimg/2006/07/3784/b3.jpg)}
+
        {
-
.b4{ background:url(/articleimg/2006/07/3784/b4.jpg)}
+
            color: #fff;
-
.b5{ background:url(/articleimg/2006/07/3784/b5.jpg)}
+
            font-size: 2em;
-
.b6{ background:url(/articleimg/2006/07/3784/b6.jpg)}
+
            font-weight: bold; 
 +
        }
 +
 
 +
        #gallery ul 
 +
        {
 +
            width: 140px;
 +
            float: right;
 +
            margin: 10px 0 20px;
 +
        }
 +
 
 +
        #gallery ul li
 +
        {
 +
            float: left;
 +
            margin: 20px 8px 0 0;
 +
        }
 +
 
 +
        #gallery ul li span
 +
        {
 +
            display: block;   
 +
            position: relative;
 +
            width: 60px;
 +
            height: 80px;
 +
            border: 1px solid #fff; 
 +
            -moz-border-radius: 4px;
 +
            -webkit-border-radius: 4px;
 +
            -ms-border-radius: 4px;
 +
            -o-border-radius: 4px;
 +
            border-radius: 4px;
 +
            overflow: hidden;
 +
        }
 +
 
 +
        #gallery  ul li span img 
 +
        {
 +
            position: relative;
 +
            top: -200px;
 +
            left: -100px;
 +
            filter: alpha(opacity=30);
 +
            opacity: 0.3;
 +
        }
 +
 
 +
        #gallery ul li span.touch img, #gallery ul li:hover span img 
 +
        {
 +
            opacity: 1; 
 +
            filter: alpha(opacity=100); 
 +
        }
 +
 
 +
        #gallery ul li:hover div 
 +
        {
 +
            display: block; 
 +
        }
 +
 
 +
        #gallery ul li div  img 
 +
        {
 +
            width: 460px; 
 +
            height: 288px; 
 +
        }
 +
 
 +
        #gallery ul li div 
 +
        {
 +
            display: none; 
 +
            position: absolute; 
 +
            top: 100px; 
 +
            left: 30px; 
 +
            border: 5px solid #fff; 
 +
        }
 +
 
 +
        .clearfix 
 +
        {
 +
            clear: both; 
 +
        }
</style>
</style>
<html>
<html>

Latest revision as of 17:25, 16 October 2014

Retrieved from "http://2014.igem.org/Template:Team:Tsinghua/CSS/slider"