Talk:Team:LZU-China/tempfortest
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <!DOCTYPE | + | <!DOCTYPE HTML> |
- | <html | + | <html lang=zh-cn> |
<head> | <head> | ||
- | + | <title>带TAB切换的css3幻灯片</title> | |
- | <title> | + | |
<style> | <style> | ||
- | *{ margin: | + | *{margin:0px;padding:0px;} |
- | + | body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;} | |
- | . | + | .tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;} |
- | . | + | .bredcolor{color:#fff;} |
- | + | .radiogallery {position:relative; padding:0; margin:50px auto; width:599px; height:492px; border:5px solid #000; border-top-width:1px; overflow:hidden; background:#000; border-radius:5px;} | |
- | . | + | .radiogallery input {display:none;} |
- | . | + | .radiogallery label {display:block; width:99px; height:66px; border-right:1px solid #fff; border-top:1px solid #fff; float:left; cursor:pointer;} |
- | . | + | .radiogallery label img{width:99px;height:66px;} |
- | + | .radiogallery label.set {width:149px; height:25px; position:absolute; top:0; border-top:0; background:#000; border-right:1px solid #fff; border-bottom:1px solid #fff; font:bold 14px/24px arial, sans-serif; color:#fff; text-align:center;} | |
- | + | .radiogallery label.pos4 {left:0;} | |
- | + | .radiogallery label.pos3 {left:150px;} | |
- | + | .radiogallery label.pos2 {left:300px;} | |
- | + | .radiogallery label.pos1 {left:450px; border-right:0;} | |
- | + | .radiogallery label.set img {width:150px; height:25px; display:block; position:absolute; left:0; top:0;} | |
- | + | .radiogallery input#push1, | |
- | + | .radiogallery input#push2, | |
- | + | .radiogallery input#push3, | |
- | + | .radiogallery input#push4 {display:block; margin:0; padding:0; border:0; width:599px; height:56px; opacity:0; filter: alpha(opacity=0); | |
+ | -webkit-transition:1s; | ||
+ | -moz-transition:1s; | ||
+ | -ms-transition:1s; | ||
+ | -o-transition:1s; | ||
+ | transition:1s; | ||
} | } | ||
- | + | ||
- | + | .radiogallery label.p6 {border-right:0;} | |
- | + | .radiogallery section.large {position:absolute; left:0; top:26px; width:599px; height:399px; text-align:center; opacity:0; filter: alpha(opacity=0); z-index:100; overflow:hidden; | |
- | + | -webkit-transition:1s; | |
- | + | -moz-transition:1s; | |
- | + | -ms-transition:1s; | |
- | + | -o-transition:1s; | |
- | + | transition:1s; | |
- | + | } | |
- | + | .radiogallery section.large section {position:absolute; left:0; top:-399px; width:499px; height:299px; background:url(); z-index:300; padding:50px; | |
- | + | -webkit-transition:1s 1s; | |
- | + | -moz-transition:1s 1s; | |
- | + | -ms-transition:1s 1s; | |
- | + | -o-transition:1s1s; | |
- | + | transition:1s 1s; | |
- | + | } | |
- | + | .radiogallery section.large section h1 {padding:0; margin:0; font:normal 20px/40px arial,sans-serif; color:#fff;} | |
- | + | .radiogallery section.large section p {padding:0; margin:0; font:normal 14px/25px arial,sans-serif; color:#ddd; text-align:left;} | |
- | + | .radiogallery section.large section ol li {padding:0; margin:0; font:normal 14px/25px arial,sans-serif; color:#ddd; text-align:left;} | |
- | + | .radiogallery section.large section a {padding:0; margin:0; font:normal 14px/25px arial,sans-serif; color:#0cf;} | |
- | + | .radiogallery section.large section a:hover {text-decoration:none;} | |
- | + | .radiogallery section.large:hover section {top:0;} | |
- | + | .radiogallery #cover {display:block; background:#fff; width:599px; height:399px; position:absolute; left:0; top:26px; z-index:90;} | |
- | + | .radiogallery input#pic1:checked ~ section.pic1, | |
- | + | .radiogallery input#pic2:checked ~ section.pic2, | |
- | + | .radiogallery input#pic3:checked ~ section.pic3, | |
- | + | .radiogallery input#pic4:checked ~ section.pic4, | |
- | + | .radiogallery input#pic5:checked ~ section.pic5, | |
- | + | .radiogallery input#pic6:checked ~ section.pic6, | |
- | + | .radiogallery input#pic1a:checked ~ section.pic1a, | |
- | + | .radiogallery input#pic2a:checked ~ section.pic2a, | |
- | + | .radiogallery input#pic3a:checked ~ section.pic3a, | |
- | + | .radiogallery input#pic4a:checked ~ section.pic4a, | |
- | + | .radiogallery input#pic5a:checked ~ section.pic5a, | |
- | + | .radiogallery input#pic6a:checked ~ section.pic6a, | |
- | + | .radiogallery input#pic1b:checked ~ section.pic1b, | |
- | + | .radiogallery input#pic2b:checked ~ section.pic2b, | |
- | + | .radiogallery input#pic3b:checked ~ section.pic3b, | |
- | + | .radiogallery input#pic4b:checked ~ section.pic4b, | |
- | + | .radiogallery input#pic5b:checked ~ section.pic5b, | |
- | + | .radiogallery input#pic6b:checked ~ section.pic6b, | |
- | </ | + | .radiogallery input#pic1c:checked ~ section.pic1c, |
+ | .radiogallery input#pic2c:checked ~ section.pic2c, | ||
+ | .radiogallery input#pic3c:checked ~ section.pic3c, | ||
+ | .radiogallery input#pic4c:checked ~ section.pic4c, | ||
+ | .radiogallery input#pic5c:checked ~ section.pic5c, | ||
+ | .radiogallery input#pic6c:checked ~ section.pic6c {opacity:1; filter: alpha(opacity=100); z-index:200;} | ||
+ | .radiogallery input#push4:checked {height:56px;} | ||
+ | .radiogallery input#push3:checked {height:123px;} | ||
+ | .radiogallery input#push2:checked {height:190px;} | ||
+ | .radiogallery input#push1:checked {height:257px;} | ||
+ | .radiogallery input#push1:checked + label, | ||
+ | .radiogallery input#push2:checked + label, | ||
+ | .radiogallery input#push3:checked + label, | ||
+ | .radiogallery input#push4:checked + label {color:#6cf;} | ||
+ | .radiogallery input:checked + label img {opacity:0.3; filter: alpha(opacity=30);} | ||
+ | .radiogallery input.pics + label:hover img {opacity:0.7; filter: alpha(opacity=70);} | ||
+ | .radiogallery input:checked + label:hover img {opacity:0.3; filter: alpha(opacity=30);} | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
- | < | + | <section class="radiogallery"> |
- | < | + | <input type="radio" name="push" id="push1" class="pusher"><label for="push1" class="set pos1"><span>Set 4</span></label> |
- | + | <input type="radio" name="push" id="push2" class="pusher"><label for="push2" class="set pos2"><span>Set 3</span></label> | |
- | <span class=" | + | <input type="radio" name="push" id="push3" class="pusher"><label for="push3" class="set pos3"><span>Set 2</span></label> |
- | <img src=" | + | <input type="radio" name="push" id="push4" class="pusher" checked="checked"><label for="push4" class="set pos4"><span>Set 1</span></label> |
- | < | + | |
- | </ | + | <input type="radio" name="pic" id="pic1" class="pics"><label for="pic1"><img src="/jscss/demoimg/wall_s1.jpg" alt=""></label> |
+ | <input type="radio" name="pic" id="pic2" class="pics"><label for="pic2"><img src="/jscss/demoimg/wall_s2.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic3" class="pics"><label for="pic3"><img src="/jscss/demoimg/wall_s3.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic4" class="pics"><label for="pic4"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic5" class="pics"><label for="pic5"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic6" class="pics"><label for="pic6" class="p6"><img src="/jscss/demoimg/wall_s6.jpg" alt=""></label> | ||
+ | |||
+ | <input type="radio" name="pic" id="pic1a" class="pics"><label for="pic1a"><img src="/jscss/demoimg/wall_s7.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic2a" class="pics"><label for="pic2a"><img src="/jscss/demoimg/wall_s8.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic3a" class="pics"><label for="pic3a"><img src="/jscss/demoimg/wall_s9.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic4a" class="pics"><label for="pic4a"><img src="/jscss/demoimg/wall_s10.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic5a" class="pics"><label for="pic5a"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic6a" class="pics"><label for="pic6a" class="p6"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label> | ||
+ | |||
+ | <input type="radio" name="pic" id="pic1b" class="pics"><label for="pic1b"><img src="/jscss/demoimg/wall_s1.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic2b" class="pics"><label for="pic2b"><img src="/jscss/demoimg/wall_s2.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic3b" class="pics"><label for="pic3b"><img src="/jscss/demoimg/wall_s3.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic4b" class="pics"><label for="pic4b"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic5b" class="pics"><label for="pic5b"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic6b" class="pics"><label for="pic6b" class="p6"><img src="/jscss/demoimg/wall_s6.jpg" alt=""></label> | ||
+ | |||
+ | <input type="radio" name="pic" id="pic1c" class="pics" checked="checked"><label for="pic1c"><img src="/jscss/demoimg/wall_s7.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic2c" class="pics"><label for="pic2c"><img src="/jscss/demoimg/wall_s8.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic3c" class="pics"><label for="pic3c"><img src="/jscss/demoimg/wall_s9.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic4c" class="pics"><label for="pic4c"><img src="/jscss/demoimg/wall_s10.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic5c" class="pics"><label for="pic5c"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label> | ||
+ | <input type="radio" name="pic" id="pic6c" class="pics"><label for="pic6c" class="p6"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label> | ||
+ | |||
+ | |||
+ | |||
+ | <section class="pic1 large"><img src="/jscss/demoimg/wall1.jpg" alt=""><section> | ||
+ | <h1>Photograph #1 - set #4</h1> | ||
+ | </section></section> | ||
+ | <section class="pic2 large"><img src="/jscss/demoimg/wall2.jpg" alt=""><section> | ||
+ | <h1>Photograph #2 - set #4</h1> | ||
+ | </section></section> | ||
+ | <section class="pic3 large"><img src="/jscss/demoimg/wall3.jpg" alt=""><section> | ||
+ | <h1>Photograph #3 - set #4</h1> | ||
+ | </section></section> | ||
+ | <section class="pic4 large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section> | ||
+ | <h1>Photograph #4 - set #4</h1> | ||
+ | </section></section> | ||
+ | <section class="pic5 large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section> | ||
+ | <h1>Photograph #5 - set #4</h1> | ||
+ | </section></section> | ||
+ | <section class="pic6 large"><img src="/jscss/demoimg/wall6.jpg" alt=""><section> | ||
+ | <h1>Photograph #6 - set #4</h1> | ||
+ | </section></section> | ||
+ | <section class="pic1a large"><img src="/jscss/demoimg/wall7.jpg" alt=""><section> | ||
+ | <h1>Photograph #1 - set #3</h1> | ||
+ | </section></section> | ||
+ | <section class="pic2a large"><img src="/jscss/demoimg/wall8.jpg" alt=""><section> | ||
+ | <h1>Photograph #2 - set #3</h1> | ||
+ | </section></section> | ||
+ | <section class="pic3a large"><img src="/jscss/demoimg/wall9.jpg" alt=""><section> | ||
+ | <h1>Photograph #3 - set #3</h1> | ||
+ | </section></section> | ||
+ | <section class="pic4a large"><img src="/jscss/demoimg/wall10.jpg" alt=""><section> | ||
+ | <h1>Photograph #4 - set #3</h1> | ||
+ | </section></section> | ||
+ | <section class="pic5a large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section> | ||
+ | <h1>Photograph #5 - set #3</h1> | ||
+ | </section></section> | ||
+ | <section class="pic6a large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section> | ||
+ | <h1>Photograph #6 - set #3</h1> | ||
+ | </section></section> | ||
+ | <section class="pic1b large"><img src="/jscss/demoimg/wall7.jpg" alt=""><section> | ||
+ | <h1>Photograph #1 - set #2</h1> | ||
+ | </section></section> | ||
+ | <section class="pic2b large"><img src="/jscss/demoimg/wall8.jpg" alt=""><section> | ||
+ | <h1>Photograph #2 - set #2</h1> | ||
+ | </section></section> | ||
+ | <section class="pic3b large"><img src="/jscss/demoimg/wall9.jpg" alt=""><section> | ||
+ | <h1>Photograph #3 - set #2</h1> | ||
+ | </section></section> | ||
+ | <section class="pic4b large"><img src="/jscss/demoimg/wall10.jpg" alt=""><section> | ||
+ | <h1>Photograph #4 - set #2</h1> | ||
+ | </section></section> | ||
+ | <section class="pic5b large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section> | ||
+ | <h1>Photograph #5 - set #2</h1> | ||
+ | </section></section> | ||
+ | <section class="pic6b large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section> | ||
+ | <h1>Photograph #6 - set #2</h1> | ||
+ | </section></section> | ||
+ | <section class="pic1c large"><img src="/jscss/demoimg/wall7.jpg" alt=""><section> | ||
+ | <h1>Photograph #1 - set #1</h1> | ||
+ | </section></section> | ||
+ | <section class="pic2c large"><img src="/jscss/demoimg/wall8.jpg" alt=""><section> | ||
+ | <h1>Photograph #2 - set #1</h1> | ||
+ | </section></section> | ||
+ | <section class="pic3c large"><img src="/jscss/demoimg/wall9.jpg" alt=""><section> | ||
+ | <h1>Photograph #3 - set #1</h1> | ||
+ | </section></section> | ||
+ | <section class="pic4c large"><img src="/jscss/demoimg/wall10.jpg" alt=""><section> | ||
+ | <h1>Photograph #4 - set #1</h1> | ||
+ | </section></section> | ||
+ | <section class="pic5c large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section> | ||
+ | <h1>Photograph #5 - set #1</h1> | ||
+ | </section></section> | ||
+ | <section class="pic6c large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section> | ||
+ | <h1>Photograph #6 - set #1</h1> | ||
+ | </section></section> | ||
+ | <span id="cover"></span> | ||
+ | </section> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 09:41, 6 September 2014
<!DOCTYPE HTML>