console
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<div class="container-fluid">
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">小樱魔法咒语</a></li>
<li><a href="#section2">小樱魔法歌曲中人物关系</a></li>
<li><a href="#section3">小樱魔法库洛牌</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">小樱魔法歌曲<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">
TV版OP</a></li>
<li><a href="#section42">TV版插曲</a></li>
<li><a href="#section43">剧场版歌曲</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>小樱魔法（中日英语）</h1>
<p class="lo">暗の力を秘めし键よ。真の姿を我の前に示せ。契约のもとさくらが命じる。レリーズ!
Yami no Chikara o Himeshi Kagi yo.Shin no Sugata o Ware no Mae Shimese.Keiyaku no Moto Sakura ga Mejiru.Release!
隐藏着黑暗力量的钥匙啊。在我面前显示你真正的姿态。按照契约，小樱的命令。解除！
呵呵
汝のあるべき姿に戻れ。 クロウカード!
Nanji no Aru Beki Sugata ni Modore. kulow card!
退回到你原来的样子。库洛牌！
クロウの创りしカ－ドよ、古き姿を舍て生まれかわれ。
新たな主さくらの名のもとに!
kulou no tsukuda no card yo. sugata wo umare kaware.arata no arujin sakura no na no moto ni
库洛里多创造的库洛牌呀，舍弃你的就样子吧。听从你的新主人小樱的命令！
星の力を秘めし键よ。真の姿を我の前に示せ。契约のもとさくらが命じる。レリーズ!
Hoshi no Chikara o Himeshi Kagi yo.Shin no Sugata o Ware no Mae Shimese.Keiyaku no Moto Sakura ga Mejiru.Release!
隐藏着星星力量的钥匙啊。在我面前显示你真正的姿态。按照契约，小樱的命令。解除！</p>
</div>
<div id="section2">
<h1>魔法少女樱中人物关系</h1>
<p class="lo">木之本樱：女主，库洛牌的收集者。先喜欢上雪兔，后喜欢上小狼。<br/>李小狼：男主，库洛牌的收集者，开始是小樱的对手，后被小樱打败。最后喜欢上小樱，并帮助小樱收集库洛牌。<br/>大道寺知世：小樱的闺蜜，两人母亲也是闺中好友，给小樱做各种类型的衣服。后鼓励小狼告白小樱。<br/>木之本陶桃失：小樱的哥哥，经常暗中帮助小樱，也拥有强大的力量。<br/>月城雪兔：既是桃矢的好朋友，也是小樱的初恋对象。是审判者・月的伪装姿态，起初不承认小樱为其主人，后与小樱相处，从心里认可小樱。<br/>小可：原型为克鲁贝鲁洛斯，小樱收集库洛牌的得力助手。喜爱吃，经常与小狼争风头。</p>
</div>
<div id="section3">
<h1>库洛牌</h1>
<p class="lo">光牌:具有强烈光的魔法。 飞牌:具有飞行的魔法。 风牌:具有操控风的魔法。 影牌:具有操控自己以及别人的影子的魔法。 水牌:具有操控水的魔法。 树牌:具有操控树的魔法。 雨牌:具有降雨的魔法。 跳牌:具有高度跳跃的魔法。 幻牌:产生幻觉的魔法。 静牌:消去四周声音的魔法。 盾牌:具有防御攻击的魔法。 雷牌:具有操控雷电的魔法。 花牌:制造出各种花卉的魔法。 剑牌：可变成剑。 时牌:操控时间的魔法。 力牌:具有强大力量的魔法。 雾牌:具有雾并有腐蚀性的魔法。 浮牌:将人或物浮起的魔法。 岚牌:操控暴风雨的魔法。 消牌:将人或物消失的魔法。 灯牌:放出微弱光芒的魔法。 移牌:瞬间移动的魔法。 斗牌:格斗技巧的魔法。 轮牌:将空间分割结合的魔法。 眠牌:具有将对手睡眠的魔法。 歌牌:模仿他人歌声的魔法。 小牌:具有将人或物缩小的魔法。 镜牌:具有复制人或物的魔法。 迷牌:具有将空间变成巨大迷宫的魔法。 ；戾牌:具有返转时间的魔法。 击牌:具有射击力的魔法。 甘牌:将食物变甜，并将物体变成甜食的魔法。 驱牌:快速移动的魔法。 创牌:具有将书中写的事物实体化的魔法。 大牌:具有将人或物放大的魔法。 替牌:具有同时将两人的心，身体交换的魔法。等等一系列小樱牌。</p>
</div>
<div id="section41">
<h1>TV版OP</h1>
<p class="lo">OP1 Catch You Catch Me 这首歌有两个版本一个是グミ演唱的另一个是小樱声优丹下樱演唱的，在TV版播出的是グミ演唱的。<br/>
OP2 扉をあけて 这首歌是ANZA演唱的。<br/>
OP3 プラチナ 这首歌是坂本真绫演唱的。<br/>
ED1 Groovy! 这首歌是広瀬香美演唱的。<br/>
ED2 Honey 这首歌有两个版本一个是Chihiro演唱的另一个是小樱声优丹下樱演唱的，在TV版播出的是Chihiro演唱的。<br/>
ED3 FRUITS CANDY 这首歌有两个版本一个是こじまめぐみ演唱的另一个是小樱、知世、小可声优合唱的，在TV版播出的是こじまめぐみ演唱的。</p>
</div>
<div id="section42">
<h1>TV版插曲</h1>
<p class="lr">第5集知世唱的歌是夜の歌<br/>
第21集跑马拉松时的插曲是Catch You Catch Me（歌：グミ）<br/>
第23集知世唱的歌是夜の歌<br/>
第33集大家溜冰时的插曲是Catch You Catch Me（歌：グミ）<br/>
第34集小樱和雪兔回答问题时的插曲是ヒトリジメ（歌：グミ）<br/>
第35集小樱和雪兔在摩天轮中的插曲是Catch You Catch Me（歌：グミ）<br/>
第37集赏花时小樱唱的歌是しあわせの魔法，赏花时知世唱的歌是やさしさの种子，知世在合唱比赛时唱的歌是友へ<br/>
第38集小樱在做草莓料理时的插曲是プリズム（歌：丹下桜）<br/>
第40集小樱、知世、小狼、莓铃在逛街时的插曲是ヒトリジメ（歌：グミ）<br/>
第46集最后的审判结束后播放的歌曲是扉をあけて（歌：ANZA）<br/>
第49集艾力欧开始弹的是夜の歌，知世演唱艾力欧伴奏的歌曲是やさしさの种子<br/>
第57集小樱、知世、小狼、艾力欧在看小熊展览时的插曲是気になるアイツ（歌：くまいもとこ）<br/>
第59集知世唱的歌是夜の歌<br/>
第68集中的插曲是见えない地図（歌：ANZA）<br/>
第70集小樱到机场送小狼时的歌曲是プラチナ（歌：坂本真绫）</p>
</div>
<div id="section43">
<h1>剧场版歌曲</h1>
<p class="lo">剧场版《香港之旅》ED是皆谷尚美演唱的远いこの街で<br/>
剧场版《封印的卡片》小樱第一次试穿戏服播放的歌曲是小樱声优丹下樱唱的ありがとう，知世在舞台上独唱的歌曲是ここに来て<br/>
剧场版《封印的卡片》ED是CHAKA唱的明日へのメロディー<br/>
剧场版《包在小可身上》ED是小可声优久川绫和斯比声优冬马由美合唱的おかしのうた</p>
</div>
</div>
</div>
</div>
body {
position: relative;
background-image:url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1493815297&di=14f48fa95b1478e762bc00c22beb03d0&src=http://pic101.nipic.com/file/20160620/23241023_143236513000_2.jpg);
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
.lo{
font-size:15px;
}
.lr{
font-size:10px;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: pink;}
#section3 {color: #fff; background-color: yellow;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: greenyellow;}
#section43{color:#fff;background-color:pink;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42,#section43 {
margin-left: 150px;
}
}