Neauliuyanxu (Talk | contribs) |
Neauliuyanxu (Talk | contribs) |
||
| Line 1: | Line 1: | ||
{{CSS/Main}} | {{CSS/Main}} | ||
| - | <! | + | |
| + | <!DOCTYPE html> | ||
<!-- Thanks to http://90du.es/demo/ --> | <!-- Thanks to http://90du.es/demo/ --> | ||
| + | |||
<html> | <html> | ||
<head> | <head> | ||
| Line 310: | Line 312: | ||
/* background color */ | /* background color */ | ||
*{margin:0;padding:0} | *{margin:0;padding:0} | ||
| - | html,body{background:# | + | html,body{background:#713889} |
.clear{clear:both} | .clear{clear:both} | ||
| + | </style> | ||
| + | |||
| + | <style>/*Target*/ | ||
| + | .tgt{ | ||
| + | height:120px; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | #example1, | ||
| + | #example2{ | ||
| + | height: 125px; | ||
| + | overflow: hidden; | ||
| + | background: #fff; | ||
| + | } | ||
| + | |||
| + | #example1:target, | ||
| + | #example2:target{ | ||
| + | animation: bgcolor 2s ease-out; | ||
| + | padding-top: 1em; | ||
| + | } | ||
| + | #example2:target{ | ||
| + | padding-top: 2em; | ||
| + | } | ||
| + | |||
| + | @keyframes bgcolor{ | ||
| + | 0%{ background: rgba(241,218,54,.6);} | ||
| + | } | ||
</style> | </style> | ||
<style> | <style> | ||
/* navbar */ | /* navbar */ | ||
| - | #navbar{position:fixed;top: | + | ul.none {list-style-type: none} |
| - | #navbar #nav{position:relative;width:960px;margin:0 auto; | + | #navbar {position:fixed;top:15px;left:0px;height:30px;width:100%;color:white;background:rgba(0,0,0,.4);} |
| - | #navbar #nav ul{list-style-type:none;padding:0px;margin:0px; | + | #navbar #nav {position:relative;width:960px;margin:0 auto;} |
| - | #navbar #nav ul li {display:inline-block;width:120px;text-align:center;padding:5px 5px; | + | #navbar #nav ul ul {display: none;} |
| - | #navbar #nav ul li:hover{background:rgba(255,255,255,.5);color:black;} | + | #navbar #nav ul li:hover > ul {display: block;} |
| - | </style> | + | #navbar #nav ul {list-style-type:none;padding:0px;margin:0px;} |
| + | #navbar #nav ul:after {content: ""; clear: both; display: block;} | ||
| + | #navbar #nav ul li {display:inline-block;width:120px;text-align:center;padding:5px 5px;} | ||
| + | #navbar #nav ul li:hover {background:rgba(255,255,255,.5);color:black;} | ||
| + | #navbar #nav ul li:hover a {color: #fff;} | ||
| + | #navbar #nav ul li a {display: block; padding: 25px 20px;color: #ffffff;text-decoration: none!important;} | ||
| + | #navbar #nav ul li a:visited {display: block; padding: 25px 20px;color: #ffffff;text-decoration: none!important;} | ||
| + | #navbar #nav ul ul {background: #ffeeff; border-radius: 0px; padding: 0;position: absolute; top: 100%;} | ||
| + | #navbar #nav ul ul li {float: none;position: relative;width:120px;text-align:center;padding:5px 5px;} | ||
| + | #navbar #nav ul ul li a {padding: 15px 20px;color: #fff;} | ||
| + | #navbar #nav ul ul li a:hover {background: #8ebae5;} | ||
| + | #navbar #nav ul ul ul {position: absolute; left: 100%; top:0;}</style> | ||
<!-- content list --> | <!-- content list --> | ||
| Line 400: | Line 439: | ||
<li>Home</li> | <li>Home</li> | ||
<li>Team | <li>Team | ||
| - | <ul> | + | <ul class="none"> |
<li>Members</li> | <li>Members</li> | ||
<li>Advisors</li> | <li>Advisors</li> | ||
| Line 448: | Line 487: | ||
<!-- main content --> | <!-- main content --> | ||
| - | <article id="body"> | + | <article id="body"> |
| + | <!-- ↓↓↓↓↓正文↓↓↓↓↓ --> | ||
<div class="demo3"> | <div class="demo3"> | ||
| Line 463: | Line 503: | ||
</div> | </div> | ||
<h1>Members</h1> | <h1>Members</h1> | ||
| - | <div id="square"></div><p></p> | + | <div id="square"></div><p><a href="#example1">123</a></p> |
| - | <div id="square"></div><p></p> | + | <br /><!-- 空行 --> |
| + | <div id="square"></div><p><a href="#example2">abc</a></p> | ||
| + | <hr /> | ||
<div id="square"></div><p></p> | <div id="square"></div><p></p> | ||
<div id="square"></div> | <div id="square"></div> | ||
| + | <div class="tgt"><div id="example1"><h1>biaoti</h1><p>123456789123456789123456789234567823456789234567892345678934567893456789415431543453254354324325432543245325432</p></div> | ||
| + | <div id="example2"><h1>title</h1><p>dfgsghfdgdsgfdsgfdsgfdjhgjnbvcxzcvbxgdfzxvcvhcgxfdzghcjvgfhjvgcfxhcjvgfchjgfchjfgcjgchvjgdghfxvvbxbxbvbbvxvbxvb</p></div></div> | ||
| + | <!-- ↑↑↑↑↑正文↑↑↑↑↑ --> | ||
</article> | </article> | ||
<!DOCTYPE html>
-
-
-
-
-
-
-
-
123456789123456789123456789234567823456789234567892345678934567893456789415431543453254354324325432543245325432
dfgsghfdgdsgfdsgfdsgfdjhgjnbvcxzcvbxgdfzxvcvhcgxfdzghcjvgfhjvgcfxhcjvgfchjgfchjfgcjgchvjgdghfxvvbxbxbvbbvxvbxvb
"
