Line 4: | Line 4: | ||
<link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_main&action=raw&ctype=text/css" /> | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_main&action=raw&ctype=text/css" /> | ||
<!--<link rel="stylesheet" href="main.css" />--> | <!--<link rel="stylesheet" href="main.css" />--> | ||
+ | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_planet_splitting&action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:SMMU-China/CSS_planet_style&action=raw&ctype=text/css" /> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 124: | Line 126: | ||
<div class="blank_framework"></div> | <div class="blank_framework"></div> | ||
− | <div class=" | + | <div class="medium_framework"> |
− | < | + | <div id="app" data-current-planet="mercury"> |
− | + | ||
− | + | <nav class="planet-nav"> | |
− | + | <svg viewBox="0 20 400 400" xmlns="http://www.w3.org/2000/svg"> | |
− | + | <path | |
− | + | id="navPath" | |
+ | d="M10,200 C30,-28 370,-28 390,200" | ||
+ | fill="none" /> | ||
+ | <text> | ||
+ | <textPath href="#navPath" startOffset="0" font-size="8"> | ||
+ | <tspan>水星</tspan> | ||
+ | <tspan>金星</tspan> | ||
+ | <tspan>地球</tspan> | ||
+ | <tspan>火星</tspan> | ||
+ | <tspan>木星</tspan> | ||
+ | <tspan>土星</tspan> | ||
+ | <tspan>天王星</tspan> | ||
+ | <tspan>海王星</tspan> | ||
+ | </textPath> | ||
+ | </text> | ||
− | + | </svg> | |
− | + | </nav> | |
− | + | ||
− | + | ||
− | + | <div class="planet" data-planet="mercury" data-active> | |
− | + | <div class="planet-title"> | |
− | + | <h1>水星</h1> | |
− | + | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | |
+ | </div> | ||
− | + | <div class="planet-details"> | |
− | + | <div class="detail" data-detail="tilt" data-postfix="°"> | |
− | + | 3.13 | |
+ | </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 0.9 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 10 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/1_mercury.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet" data-planet="venus"> | ||
+ | <div class="planet-title"> | ||
+ | <h1>金星</h1> | ||
+ | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet-details"> | ||
+ | <div class="detail" data-detail="tilt" data-postfix="°"> | ||
+ | 4.13 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 0.2 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 20 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/2_venus.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet" data-planet="earth"> | ||
+ | <div class="planet-title"> | ||
+ | <h1>地球</h1> | ||
+ | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet-details"> | ||
+ | <div class="detail" data-detail="tilt" data-postfix="°"> | ||
+ | 5.13 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 7.3 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 30 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/3_earth.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet" data-planet="mars"> | ||
+ | <div class="planet-title"> | ||
+ | <h1>火星</h1> | ||
+ | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet-details"> | ||
+ | <div class="detail" data-detail="tilt" data-postfix="°"> | ||
+ | 6.13 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 1.1 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 40 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/4_mars.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet" data-planet="jupiter"> | ||
+ | <div class="planet-title"> | ||
+ | <h1>木星</h1> | ||
+ | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet-details"> | ||
+ | <div class="detail" data-detail="tilt" data-postfix="°"> | ||
+ | 11.13 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 1.8 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 50 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/5_jupiter.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet" data-planet="saturn"> | ||
+ | <div class="planet-title"> | ||
+ | <h1>土星</h1> | ||
+ | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet-details"> | ||
+ | <div class="detail" data-detail="tilt" data-postfix="°"> | ||
+ | 9.13 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 7.3 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 60 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/6_saturn.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet" data-planet="uranus"> | ||
+ | <div class="planet-title"> | ||
+ | <h1>天王星</h1> | ||
+ | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet-details"> | ||
+ | <div class="detail" data-detail="tilt" data-postfix="°"> | ||
+ | 11.13 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 1.8 | ||
+ | </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 50 | ||
+ | </div> </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/7_uranus.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="planet" data-planet="neptune"> | ||
+ | <div class="planet-title"> | ||
+ | <h1>海王星</h1> | ||
+ | <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="planet-details"> | ||
+ | <div class="detail" data-detail="tilt" data-postfix="°"> | ||
+ | 31.03 </div> | ||
+ | <div class="detail" data-detail="gravity" data-postfix="𝗑"> | ||
+ | 8.9 </div> | ||
+ | <div class="detail" data-detail="hours"> | ||
+ | 10 | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <figure class="planet-figure"> | ||
+ | <img src="img/8_neptune.jpg" /> | ||
+ | </figure> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
Line 165: | Line 352: | ||
</div> | </div> | ||
+ | |||
+ | <script src="https://2019.igem.org/Template:SMMU-China/JS_planet_script?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2019.igem.org/Template:SMMU-China/JS_planet_script_min?action=raw&ctype=text/javascript"></script> | ||
+ | |||
</html> | </html> |
Revision as of 15:42, 7 September 2019
水星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
3.13
0.9
10
金星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
4.13
0.2
20
地球
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
5.13
7.3
30
火星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
6.13
1.1
40
木星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
11.13
1.8
50
土星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
9.13
7.3
60
天王星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
11.13
1.8
50
海王星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
31.03
8.9
10