点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>JAY Zhou 部分专辑表</header>
<ul>
<li><a class="nav-link" href="#JAY">JAY</a></li>
<li><a class="nav-link" href="#fantexi">fantexi</a></li>
<li><a class="nav-link" href="#fanplus">fanplus</a></li>
<li><a class="nav-link" href="#badu">badu</a></li>
<li><a class="nav-link" href="#yehui">yehui</a></li>
<li><a class="nav-link" href="#xunzhao">xunzhao</a></li>
<li><a class="nav-link" href="#qili">qili</a></li>
<li><a class="nav-link" href="#shiyi">shiyi</a></li>
<li><a class="nav-link" href="#qita">qita</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="JAY">
<header>JAY</header>
<article>
<p>《JAY》是中国台湾歌手周杰伦首张录音室专辑,由台湾博德曼音乐于2000年11月7日发行。该专辑获
得第12届台湾金曲奖最佳流行音乐演唱专辑奖与2001年IFPI香港唱片销量大奖十大销量国语唱片奖。歌曲《可爱女人》于Hit FM联播网2000年度百首单曲位列74名。</p>
<p>歌曲包括：可爱女人、完美主义、星晴、娘子、斗牛、黑色幽默、伊斯坦堡、印第安老斑鸠、龙卷风、反方向的钟</p>
</article>
</section>
<section class="main-section" id="fantexi">
<header>fantexi</header>
<article>
<p>《范特西》是中国台湾歌手周杰伦第二张录音室专辑,由台湾博德曼音乐于2001年9月14日发行。专辑名《范特西》来自英文“Fantasy”音译。
歌曲包含：爱在西元前、爸我回来了、简单爱、忍者、开不了口、上海一九四三、对不起、威廉古堡、双截棍、安静
</p>
</article>
</section>
<section class="main-section" id="fanplus">
<header>fanplus</header>
<article>
<p>《范特西Plus》即范特西EP是中国台湾男歌手周杰伦的第1张迷你专辑,由博德曼音乐于2001年12月24日发行,收录周杰伦在桃园巨蛋演唱会上，重新演唱吴宗宪的《你比从前快乐》、咻比嘟哗的
《世界末日》及许茹芸为世界展望会献唱的《蜗牛》三首歌曲与MV,以及范特西专辑10首歌曲的MV。歌曲包含:蜗牛、你比从前快乐、世界末日
</p>
</article>
</section>
<section class="main-section" id="badu">
<header>badu</header>
<article>
<p>《八度空间》(名称大意为“音乐空间”)是中国台湾歌手周杰伦发行的第三张国语专辑。“八度空间”意味着1979年1月18日出生的杰伦可在西方八度音阶的空间内,挥洒自如、游刃有余、创造
惊奇、不按排理出牌的个性，让人在既定的“八度框框”内，突破享受到无远弗届的异想世界；当大家在聆听旋律之余
，阅读“创作名笔”方文山瑰丽缜密的词藻，更使听众像是观赏第八艺术的“电影”般，就像是音乐领域中的第八艺术！</p>
<p>歌曲包含：半兽人、半岛铁盒、暗号、龙拳、火车叨位去、分裂、爷爷泡的茶、回到过去、米兰的小铁匠、最后的战役</p>
</article>
</section>
<section class="main-section" id="yehui">
<header>yehui</header>
<article>
<p>《叶惠美》是中国台湾歌手周杰伦的第四张录音室专辑,由台湾新力音乐于2003年7月31日发行。歌曲有:以父之名、懦夫、晴天、三年二班、东风破、你听得到、同一种调调、她的睫毛、
爱情悬崖、梯田、双刀
</p>
</article>
</section>
<section class="main-section" id="xunzhao">
<header>xunzhao</header>
<article>
<p>《寻找周杰伦》是与周杰伦同名电影《寻找周杰伦》作为结合的专辑,由周杰伦作曲并制作。本EP收录了歌曲《轨迹》、
和主题曲《断了的弦》及其伴奏。同时为了感谢周杰伦歌迷朋友一直的支持,随EP特别加送他上一张专辑《叶惠美》11首歌曲的MV,让歌迷可以完整收藏杰伦的每一首歌曲。
歌曲包含：轨迹、断了的弦</p>
</article>
</section>
<section class="main-section" id="qili">
<header>qili</header>
<article>
<p>《七里香》是中国台湾歌手周杰伦发行第五张国语专辑。由台湾新力音乐于2004年8月3日发行。歌曲包含:我的地盘、七里香、借口、外婆、将军、搁浅、乱舞春秋、困兽之斗、
园游会、止战之殇</p>
</article>
</section>
<section class="main-section" id="shiyi">
<header>shiyi</header>
<article>
<p>《11月的肖邦》是中国台湾歌手周杰伦发行第六张国语专辑,并于2005年10月19日至10月31日在多个地区预售。大碟中除收录10
首新曲外,还特别格外加收周杰伦为电影《头文字D》创作及演唱的主题曲《飘移》及插曲《一路向北》一共12首。专辑取名自周杰伦最欣赏的音乐家肖邦。</p>
<p>歌曲有：夜曲、蓝色风暴、发如雪、黑色毛衣、四面楚歌、枫、浪漫手机、逆鳞、麦芽糖、珊瑚海、飘移、一路向北</p>
</article>
</section>
<section class="main-section" id="qita">
<header>qita</header>
<article>
<ul>
<li>乔克叔叔</li>
<li>困兽之斗</li>
<li>四面楚歌</li>
<li>米兰的小铁匠</li>
<li>以父之名</li>
<li>爸，我回来了</li>
<li>开不了口</li>
<li>你听得到</li>
<li>半岛铁盒</li>
<li>雨下一整晚</li>
<li>龙拳</li>
</ul>
<p>网页代码任务</p>
<p><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");
</code>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");
</code>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");
</code>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");
</code>
<code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");
</code>
</p>
</article>
</section>
</main>
</body>
</html>
CSS样式如下：
点击查看代码
html, body {
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
}
body{
display: bolck;
margin:8px;
}
#navbar {
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
header {
color: black;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
header{
display: block;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
#navbar li {
color: #4d4e53;
list-style: none;
position: relative;
width: 100%;
margin-top:20px;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
#main-doc header {
text-align: left;
margin: 0px;
}
section article {
color: #4d4e53;
margin: 15px;
font-size: 0.96em;
}
@media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
border: 1px solid;
height: 207px;
}
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 270px;
}
}
原文地址：http://www.cnblogs.com/zizz/p/16920211.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
