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
![](img/1_mercury.jpg)
金星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
4.13
0.2
20
![](img/2_venus.jpg)
地球
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
5.13
7.3
30
![](img/3_earth.jpg)
火星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
6.13
1.1
40
![](img/4_mars.jpg)
木星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
11.13
1.8
50
![](img/5_jupiter.jpg)
土星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
9.13
7.3
60
![](img/6_saturn.jpg)
天王星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
11.13
1.8
50
![](img/7_uranus.jpg)
海王星
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
31.03
8.9
10
![](img/8_neptune.jpg)