freeCodeCamp_技术文档页

点击查看代码 
<!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;
    }
  }
posted @   原来是只呆燕  阅读(96)  评论(0)  编辑  收藏  举报
相关博文：
·  freeCodecamp_认证项目_调查表单
·  freecodecamp_无障碍测试
·  网安-HTML
·  周杰伦第一张专辑《JAY》十首歌附吉他谱分享
·  小记：音频格式转化ByPython（下）
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示
AI IDE Trae