国漫FM主题V1.8是以Ajax加以CSS动画的方式，很好的将优雅的设计感和极度精简的代码同时表现了出来，进而缔造出这样一款十分经典的名为Always for you的WordPress博客主题。正如作者自己所言：如果你想让你的WordPress博客看起来个性十足。FM主题为响应式格子布局(瀑布流)，是一款集音乐、杂志、图片、个人博客等内容的wordpress动漫主题，显示地址http://m.bokequ.com/guoman/music
1、主页html代码
代码语言：html复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>国漫音乐 – 国漫FM</title>
<meta charset="UTF-8" />
<meta name="description" content="国漫主题曲,动漫音乐在线试听,国漫音乐在下载,动漫音乐MP3" />
<meta name="keywords" content="国漫音乐" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<link rel="shortcut icon" type="images/x-icon" href="http://m.bokequ.com/guoman/wp-content/uploads/2023/3kj306o06oabu.jpg" />
<link rel="alternate" type="application/rss xml" title="国漫FM" href="http://m.bokequ.com/guoman/feed" />
<link rel="alternate" type="application/atom xml" title="国漫FM" href="http://m.bokequ.com/guoman/feed/atom" />
<link rel='stylesheet' id='Always-style-css' href='http://m.bokequ.com/guoman/wp-content/themes/always/style.css?ver=1.7' type='text/css' media='screen' />
</head>
<body>
<div id="wrapper">
<header id="main-header" style="background-image:url(http://m.bokequ.com/guoman/wp-content/uploads/2023/218g0jgwfz.png);background-position:center center;background-size:cover;" >
<div id="header-wrap">
<div id="logo">
<h1><a href="http://m.bokequ.com/guoman" title="国漫FM">国漫FM</a></h1>
<h2>国漫主题曲,动漫音乐在线试听</h2>
<div class="logo-img" >
<img class="avatar" src="http://m.bokequ.com/guoman/wp-content/uploads/2023/30m80m80vo.jpg" title="国漫FM"/>
</div>
<div id="logo-music">
<div id="logo-music-name"></div>
<div id="logo-music-prev"></div>
<div id="logo-music-play"></div>
<div id="logo-music-pause"></div>
<div id="logo-music-next"></div>
<div class="loading">
<div class="loading-bar">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
</div>
</div>
</div>
<div id="logo_jplayer" class="jp-jplayer"></div>
</div>
<button id="openlist" class="open"><span></span><span></span><span></span>playlist</button>
<button id="openmenu" class="open"><span></span><span></span><span></span>menu</button>
<nav id="main-nav">
<div class="menu-menu-1-container"><ul id="menu-menu-1" class="nav-menu"><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-9"><a href="http://m.bokequ.com/guoman/">首页</a></li>
<li id="menu-item-11" class="current-menu-item menu-item-11"><a href="http://m.bokequ.com/guoman/music">国漫音乐</a></li>
<li id="menu-item-23" class="menu-item-23"><a href="http://m.bokequ.com/guoman/new">国漫剧情</a></li>
<li id="menu-item-37" class="menu-item-has-children menu-item-37"><a href="#">动漫壁纸</a>
<ul class="sub-menu">
<li id="menu-item-40" class="menu-item-40"><a href="http://m.bokequ.com/guoman/douluo">斗罗大陆动漫</a></li>
<li id="menu-item-38" class="menu-item-38"><a href="http://m.bokequ.com/guoman/blr">画江湖之不良人</a></li>
<li id="menu-item-43" class="menu-item-43"><a href="http://m.bokequ.com/guoman/mengta">梦塔雪谜城同人秀图片</a></li>
<li id="menu-item-62" class="menu-item-62"><a href="http://m.bokequ.com/guoman/chaoshenxueyuan">超神学院雄兵连电脑4k 手机壁纸</a></li>
</ul>
</li>
<li id="menu-item-10" class="menu-item-10"><a href="http://m.bokequ.com/guoman/liuyan">留言</a></li>
<li id="menu-item-24" class="menu-item-24"><a href="http://m.bokequ.com/guoman/liuyan">主题下载</a></li>
</ul></div> </nav>
<form role="search" method="get" id="search-form" action="http://m.bokequ.com/guoman/">
<div>
<input type="text" value="Search" name="s" id="s" onblur="if ( this.value == '' ){this.value='Search';}" onfocus = "if ( this.value == 'Search' ){this.value = '';}" />
</div>
</form>
<div class="clear"></div>
</div>
</header><!--header-->
<div id="main" class="main-narrow"> <div id="content" class="post-index">
<article id="post-67" class="post-67 post type-post status-publish format-standard hentry category-music" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/67.html" rel="bookmark" class="post-title" title = "动画斗破苍穹第三季主题曲(直破苍穹)">动画斗破苍穹第三季主题曲(直破苍穹)</a>
<span class="meta-time">08月20日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/67.html" class="post-feature" title="动画斗破苍穹第三季主题曲(直破苍穹)" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/30e70kxjwt.jpg" alt="动画斗破苍穹第三季主题曲(直破苍穹)"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/zhipocangqiong.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-66" class="post-66 post type-post status-publish format-standard hentry category-music" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/66.html" rel="bookmark" class="post-title" title = "趁年少_卡修rui在线试听(国漫音乐)">趁年少_卡修rui在线试听(国漫音乐)</a>
<span class="meta-time">08月20日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/66.html" class="post-feature" title="趁年少_卡修rui在线试听(国漫音乐)" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/31hc0mnnpd.png" alt="趁年少_卡修rui在线试听(国漫音乐)"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_73062284&response=res&type=convert_url&" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-56" class="post-56 post type-post status-publish format-standard hentry category-music tag-14" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/56.html" rel="bookmark" class="post-title" title = "星辰变动画第一季主题曲-星辰觉醒">星辰变动画第一季主题曲-星辰觉醒</a>
<span class="meta-time">11月18日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/56.html" class="post-feature" title="星辰变动画第一季主题曲-星辰觉醒" rel="bookmark" ><img src="http://m.bokequ.com/dongman/wp-content/uploads/img/21kw0m64qp.jpg" alt="星辰变动画第一季主题曲-星辰觉醒"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/xingcheng.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-55" class="post-55 post type-post status-publish format-standard hentry category-music tag-20" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/55.html" rel="bookmark" class="post-title" title = "生死回放动漫片尾曲-With Me">生死回放动漫片尾曲-With Me</a>
<span class="meta-time">11月17日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/55.html" class="post-feature" title="生死回放动漫片尾曲-With Me" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20fk08r3yz.jpg" alt="生死回放动漫片尾曲-With Me"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_20876286&response=res&type=convert_url&" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-54" class="post-54 post type-post status-publish format-standard hentry category-music tag-20" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/54.html" rel="bookmark" class="post-title" title = "生死回放动漫片头曲-去死吧">生死回放动漫片头曲-去死吧</a>
<span class="meta-time">11月17日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/54.html" class="post-feature" title="生死回放动漫片头曲-去死吧" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20n60ba7a9.jpg" alt="生死回放动漫片头曲-去死吧"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/qusiba.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-53" class="post-53 post type-post status-publish format-standard hentry category-music tag-15" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/53.html" rel="bookmark" class="post-title" title = "梦塔·雪谜城动画片尾曲-雪谜城">梦塔·雪谜城动画片尾曲-雪谜城</a>
<span class="meta-time">11月16日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/53.html" class="post-feature" title="梦塔·雪谜城动画片尾曲-雪谜城" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20kj0u0go6.jpg" alt="梦塔·雪谜城动画片尾曲-雪谜城"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_43245422&response=res&type=convert_url&" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-52" class="post-52 post type-post status-publish format-standard hentry category-music tag-15" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/52.html" rel="bookmark" class="post-title" title = "幻世之梦-《梦塔·雪谜城》动画插曲">幻世之梦-《梦塔·雪谜城》动画插曲</a>
<span class="meta-time">11月16日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/52.html" class="post-feature" title="幻世之梦-《梦塔·雪谜城》动画插曲" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/30fk0780y8.jpg" alt="幻世之梦-《梦塔·雪谜城》动画插曲"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://fs.open.kugou.com/d658b68339805c5b9cab326e7ada3c44/5d11febb/G130/M02/09/05/IocBAFsjOoGASHkhAEC9O5R5siY810.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-51" class="post-51 post type-post status-publish format-standard hentry category-music tag-19" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/51.html" rel="bookmark" class="post-title" title = "莽荒纪动漫片头曲痴莽荒在线试听">莽荒纪动漫片头曲痴莽荒在线试听</a>
<span class="meta-time">11月16日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/51.html" class="post-feature" title="莽荒纪动漫片头曲痴莽荒在线试听" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/j20u014nkab.jpg" alt="莽荒纪动漫片头曲痴莽荒在线试听"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/huangmang.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-49" class="post-49 post type-post status-publish format-standard hentry category-music tag-18" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/49.html" rel="bookmark" class="post-title" title = "醉沙场-(漫画叶修《全职高手》角色曲)">醉沙场-(漫画叶修《全职高手》角色曲)</a>
<span class="meta-time">11月15日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/49.html" class="post-feature" title="醉沙场-(漫画叶修《全职高手》角色曲)" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/30fk0787b1.jpg" alt="醉沙场-(漫画叶修《全职高手》角色曲)"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/zuiwo.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-48" class="post-48 post type-post status-publish format-standard hentry category-music tag-17" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/48.html" rel="bookmark" class="post-title" title = "动画《四海鲸骑》同名主题曲">动画《四海鲸骑》同名主题曲</a>
<span class="meta-time">11月15日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/48.html" class="post-feature" title="动画《四海鲸骑》同名主题曲" rel="bookmark" ><img src="http://img.bokequ.com/dongman/006UafFgly1fucix5cdejj30fk078agz.jpg" alt="动画《四海鲸骑》同名主题曲"/></a></p><p>动画《四海鲸骑》同名主题曲
作曲 : 洪川
作词 : 崔恕/九时用茶
编曲：洪川
鲸波卷起 的浪
忽远忽近 的港
梦该奔向 何方
看不清的 庙堂
熄不灭的 火光
唤谁远航
我...</p> </div>
</div>
</article><!--post-index-->
<article id="post-47" class="post-47 post type-post status-publish format-standard hentry category-music tag-16" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/47.html" rel="bookmark" class="post-title" title = "一人之下 动画原声带 异人 在线试听">一人之下 动画原声带 异人 在线试听</a>
<span class="meta-time">11月15日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/47.html" class="post-feature" title="一人之下 动画原声带 异人 在线试听" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/30pk08c4cm.jpg" alt="一人之下 动画原声带 异人 在线试听"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://other.web.np01.sycdn.kuwo.cn/resource/n2/63/37/3700497959.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-15" class="post-15 post type-post status-publish format-standard hentry category-music tag-5" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/15.html" rel="bookmark" class="post-title" title = "《侠岚》动漫片头曲在线试听">《侠岚》动漫片头曲在线试听</a>
<span class="meta-time">11月01日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/15.html" class="post-feature" title="《侠岚》动漫片头曲在线试听" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20rs0ijwpa.jpg" alt="《侠岚》动漫片头曲在线试听"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://win.web.rg01.sycdn.kuwo.cn/resource/n1/95/56/1785708332.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-41" class="post-41 post type-post status-publish format-standard hentry category-music tag-13" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/41.html" rel="bookmark" class="post-title" title = "焚情君临天下主题曲试听">焚情君临天下主题曲试听</a>
<span class="meta-time">11月01日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/41.html" class="post-feature" title="焚情君临天下主题曲试听" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20jk0qoqkg.jpg" alt="焚情君临天下主题曲试听"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/fenqing.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-32" class="post-32 post type-post status-publish format-standard hentry category-music tag-11" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/32.html" rel="bookmark" class="post-title" title = "霍尊 – 天行九歌在线试听">霍尊 – 天行九歌在线试听</a>
<span class="meta-time">10月31日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/32.html" class="post-feature" title="霍尊 – 天行九歌在线试听" rel="bookmark" ><img src="http://img.bokequ.com/dongman/9c774d91gy1g78b59y91jj20rs15owsl.jpg" alt="霍尊 – 天行九歌在线试听"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/jiuge.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-31" class="post-31 post type-post status-publish format-standard hentry category-music tag-11" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/31.html" rel="bookmark" class="post-title" title = "画风-《天行九歌》动画片尾曲">画风-《天行九歌》动画片尾曲</a>
<span class="meta-time">10月31日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/31.html" class="post-feature" title="画风-《天行九歌》动画片尾曲" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/31hc0u0e81.jpg" alt="画风-《天行九歌》动画片尾曲"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/huafeng.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-30" class="post-30 post type-post status-publish format-standard hentry category-music tag-13" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/30.html" rel="bookmark" class="post-title" title = "月光-《秦时明月》动漫主题曲">月光-《秦时明月》动漫主题曲</a>
<span class="meta-time">10月31日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/30.html" class="post-feature" title="月光-《秦时明月》动漫主题曲" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20qo0f0169.jpg" alt="月光-《秦时明月》动漫主题曲"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/yueguang.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-14" class="post-14 post type-post status-publish format-standard hentry category-music tag-5" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/14.html" rel="bookmark" class="post-title" title = "述岚记在线试听">述岚记在线试听</a>
<span class="meta-time">10月31日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/14.html" class="post-feature" title="述岚记在线试听" rel="bookmark" ><img src="http://img.bokequ.com/dongman/9afb97dagy1fwri1co4qtj20m80ci76j.jpg" alt="述岚记在线试听"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/sulanji.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-18" class="post-18 category-music tag-6" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/18.html" rel="bookmark" class="post-title" title = "灵主凌姣同人曲《灵·姣》">灵主凌姣同人曲《灵·姣》</a>
<span class="meta-time">10月31日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/18.html" class="post-feature" title="灵主凌姣同人曲《灵·姣》" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/jiao9.jpg" alt="灵主凌姣同人曲《灵·姣》"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://www.bokequ.com/blog/yanlingjiao/images/lingjiao.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-19" class="post-19 post type-post status-publish format-standard hentry category-music tag-6" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/19.html" rel="bookmark" class="post-title" title = "画江湖之灵主片头曲">画江湖之灵主片头曲</a>
<span class="meta-time">10月31日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/19.html" class="post-feature" title="画江湖之灵主片头曲" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20p00e240i.jpg" alt="画江湖之灵主片头曲"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://img.kanmanman.com/yinyue/lingzhu.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
<article id="post-17" class="post-17 post type-post status-publish format-standard hentry category-music tag-blr" >
<div class="article-wrap">
<header class="entry-header">
<h1>
<a href="http://m.bokequ.com/guoman/17.html" rel="bookmark" class="post-title" title = "《画江湖之不良人》原声—片头曲">《画江湖之不良人》原声—片头曲</a>
<span class="meta-time">10月31日</span>
</h1>
</header>
<div class="entry-content">
<p><a href="http://m.bokequ.com/guoman/17.html" class="post-feature" title="《画江湖之不良人》原声—片头曲" rel="bookmark" ><img src="http://m.bokequ.com/guoman/wp-content/uploads/2023/20r708b40k.jpg" alt="《画江湖之不良人》原声—片头曲"/></a></p><div id="jp_container" class="jp-audio">
<span rel="http://other.web.rm01.sycdn.kuwo.cn/resource/n2/71/67/3725245078.mp3" class="play-switch play" title="play"></span>
<span class="play-switch stop" title="stop"></span>
<span rel="0"class="auto" ></span>
<div class="length-bar">
<div class="seek-bar">
<div class="play-bar"></div>
</div>
</div>
<span class="current-time">00:00</span>
</div> </div>
</div>
</article><!--post-index-->
</div><!--content-->
<nav id="wide-page-navi" class="page-navi"><span aria-current='page' class='page-numbers current'>1</span>
<a class='page-numbers' href='http://m.bokequ.com/guoman/music/page/2'>2</a>
<a class="next page-numbers" href="http://m.bokequ.com/guoman/music/page/2"></a></nav> <nav id="narrow-page-navi" class="page-navi">
<div class="nav-next"><a href="http://m.bokequ.com/guoman/music/page/2" >下一页</a></div>
</nav>
</div><!--main-->
<footer id="main-footer">
<div id="footer-copy">
©2018-2024 国漫FM | 粤ICP备15025043号 | theme by <a href="http://www.bokequ.com/" target="_blank">WordPress主题</a> </div>
<div class="clear"></div>
</footer><!--footer-->
</div>
<nav id="narrow-menu">
<div class="menu-menu-1-container"><ul id="menu-menu-2" class="nav-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-9"><a href="http://m.bokequ.com/guoman/">首页</a></li>
<li class="current-menu-item menu-item-11"><a href="http://m.bokequ.com/guoman/music">国漫音乐</a></li>
<li class="menu-item-23"><a href="http://m.bokequ.com/guoman/new">国漫剧情</a></li>
<li class="menu-item-37"><a href="#">动漫壁纸</a>
<ul class="sub-menu">
<li class="menu-item menu-item-40"><a href="http://m.bokequ.com/guoman/douluo">斗罗大陆动漫</a></li>
<li class="menu-item menu-item-38"><a href="http://m.bokequ.com/guoman/blr">画江湖之不良人</a></li>
<li class="menu-item menu-item-43"><a href="http://m.bokequ.com/guoman/mengta">梦塔雪谜城同人秀图片</a></li>
<li class="menu-item menu-item-62"><a href="http://m.bokequ.com/guoman/chaoshenxueyuan">超神学院雄兵连电脑4k 手机壁纸</a></li>
</ul>
</li>
<li class="menu-item menu-item-10"><a href="http://m.bokequ.com/guoman/liuyan">留言</a></li>
<li class="menu-item menu-item-24"><a href="http://m.bokequ.com/guoman/liuyan">主题下载</a></li>
</ul></div> </nav>
<div id="loading-wrap">
<div class="loading">
<div class="loading-bar">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
</div>
<div class="loading-text">loading</div>
</div>
</div><!--loading-->
</body>
</html>2、css样式
代码语言：css复制/*
Theme Name: Always
Theme URL:http://m.bokequ.com/guoman/
Author: bokequ
Author Url: http://www.bokequ.com
Version: 1.8
*/
@import url("css/reset.css");
body{background:#fff;font-family:calibri,'瀹嬩綋',Arial,sans-serif;font-size:12px;line-height:2em;color:#000;background:rgba(0,0,0,0.1);}
a{color:#999;text-decoration:none;}
a:hover{color:#df846c;}
img{max-width:100%;vertical-align:bottom;}
p{margin-bottom:20px;}
hr{width:80%;height:1px;margin:20px auto;border:none;border-bottom:1px solid #eee;}
h1,h2,h3,h4,h5,h6{clear:both;font-weight:700;margin:24px 0 20px;}
h1{font-size:24px;}
h2{font-size:20px;}
h3{font-size:16px;font-weight:normal;padding:4px 0;overflow:hidden;}
h4{fong-size:12px;}
h5{font-size:12px;}
h6{font-size:12px;}
embed,iframe,object,video{max-width:100%;}
blockquote{margin:0 20px;padding-left:20px;border-left:1px solid #eee;}
pre{color:#666;line-height: 1.6;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box;max-width:100%;max-height:500px;overflow:auto;padding:12px;white-space:pre;}
label,button,input,select,textarea{font-family:'寰蒋闆呴粦',Arial,sans-serif;font-size:100%;}
::selection{background:#df846c;color:#fff;}
::-moz-selection{background:#df846c;color:#fff;}
.h3-text{}
.h3-line{height:1px;border-bottom:1px solid #ededed;display:block;float:right;margin-top:10px;}
.clear{clear:both;}
.show{opacity:1 !important;}
.hide{display:none !important;}
.alignnone{max-width:100%;height:auto;}
.alignleft{max-width:100%;height:auto;float:left;}
.alignright{max-width:100%;height:auto;float:right;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.imgborder{padding:8px;border:1px solid #ededed;}
/*@header
***********************************/
#wrapper{}
#main-header{width:100%;min-height:60px;display:block;padding:12px 0;text-align:center;background:#333 url(images/header-bg.png) left top repeat;box-shadow:2px 2px 8px rgba(0,0,0,0.2);z-index:999;}
#header-wrap{width:780px;max-width:95%;min-height:60px;margin:auto;position:relative;}
#logo{width:120px;margin:auto;margin-top:12px;color:#fff;position:relative;}
#logo h1{font-weight:normal;font-size:44px;line-height:2em;display:none;}
#logo h2{font-weight:normal;color:rgba(255,255,255,0.6);display:none;}
.logo-img{width:120px;height:120px;display:block;z-index:2;}
.logo-img .avatar{width:120px;height:120px;border-radius:60px;box-shadow:0px 0px 8px rgba(0,0,0,0.4);}
/*@logo-music
****************************/
#logo-music-name{width:120px;height:120px;position:absolute;left:0;top:0px;color:#fff;display:none;opacity:0;}
#logo-music-play{width:120px;height:120px;border-radius:60px;background:transparent url(images/logo-music-play.png) right top;position:absolute;left:0;top:0;display:none;opacity:0.5;}
#logo-music-play:hover{opacity:0.8;}
#logo-music-pause{width:120px;height:120px;border-radius:60px;background:transparent url(images/logo-music-play.png) left top;position:absolute;left:0;top:0;display:none;opacity:0.5;}
#logo-music-pause:hover{opacity:0.8;}
#logo-music-prev{width:120px;height:120px;background:transparent url(images/logo-music-nav.png) left top;position:absolute;left:-80px;top:0;display:none;opacity:0;}
#logo-music-prev:hover{background-position:left bottom;}
#logo-music-next{width:120px;height:120px;background:transparent url(images/logo-music-nav.png) right top;position:absolute;right:-80px;top:0;display:none;opacity:0;}
#logo-music-next:hover{background-position:right bottom;}
#play-list{width:100%;display:none;margin:auto;position:fixed;bottom:0;left:0;text-align:center;background:rgba(26,26,26,0.81) url(images/header-bg.png) left top repeat;color:#999;}
.list-title{width:100%;height:48px;color:#fff;font-size:16px;line-height:48px;background:rgba(0,0,0,0.4);cursor:pointer;}
.list-control{width:60px;height:48px;display:inline-block;transition:background ease .4s;-webkit-transition:background ease .4s;-moz-transition:background ease .4s;-o-transition:background ease .4s;-ms-transition:background ease .4s;}
.list-control:hover{background-color:rgba(238,119,107, 0.6)}
.list-pause{background:rgba(238,119,107, 0.8) url(images/list-music-play.png) -6px top;}
.list-play{background:rgba(238,119,107, 0.8) url(images/list-music-play.png) -78px top;}
#play-list{max-height:240px;overflow:auto;display:block;}
.list-wrap span{display:block;line-height:24px;padding:6px 24px;}
.list-wrap span:hover{background:rgba(0,0,0,0.7);color:#df846c;}
.list-current{color:#df846c;}
.open{width:52px;margin:0;padding:0px;padding-top:15px;/*display:none;*/position:absolute;background:transparent;outline:none;border:none;font-family:calibri,'瀹嬩綋',Arial,sans-serif;line-height:24px;color:#777;text-align:center;cursor:pointer;}
/*.open:after{width:52%;height:3px;background:#777;position:absolute;left:24%;top:18px;content:'';box-shadow:0 7px 0 0 #777,0 14px 0 0 #777;}*/
.open span{width:52%;height:3px;background:#777;display:block;margin:4px auto 0;}
#openlist{left:0;top:0;display:none;}
#openmenu{right:0;top:0;display:none;}
/*@nav
***********************************/
#main-nav{margin:6px auto;display:inline-block;}
#main-nav ul{z-index:999;}
#main-nav ul li{display:inline-block;margin:0 2px;color:#999;position:relative;}
#main-nav ul li a{line-height:48px;}
#main-nav ul li:hover>a{color:#df846c;}
#main-nav li.menu-item-has-children{background:url(images/menu-dot.png) right 27px no-repeat;}
#main-nav li.menu-item-has-children:hover{background-position:right -17px;}
#main-nav ul li a{padding:0 8px;display:block;}
#main-nav .current-menu-item >a,li.current-menu-parent>a,li.current-menu-ancestor>a{color:#df846c !important;}
/*浜岀骇
*******/
#main-nav .sub-menu{position:absolute;left:0;top:12px;background:rgba(0,0,0,0.7) url(images/header-bg.png) left top repeat;white-space:nowrap;display:none;opacity:0;}
#main-nav .sub-menu li{margin:0;display:block;}
#main-nav .sub-menu li.menu-item-has-children{background:url(images/menu-sub-dot.png) right center no-repeat;}
#main-nav .sub-menu li a{margin:0;padding:6px 24px;line-height:24px;}
#main-nav .sub-menu li a:hover{background:rgba(0,0,0,0.6);}
/*涓夌骇
*******/
#main-nav .sub-menu .sub-menu{position:absolute;left:80%;top:0;}
/*@narrow menu
***********************************/
#narrow-menu{max-height:100%;display:none;position:fixed;left:0;top:0;background:rgba(0,0,0,0.8) url(images/header-bg.png) left top repeat;overflow:auto;}
#narrow-menu ul{z-index:999;}
#narrow-menu li{display:block;margin:0;line-height:24px;color:#999;}
#narrow-menu a{display:block;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,0.06);}
#narrow-menu a:hover{background:rgba(0,0,0,0.6);}
#narrow-menu ul li:hover>a{color:#df846c;}
#narrow-menu li.menu-item-has-children{}
#narrow-menu li.menu-item-has-children:hover{background-position:right -11px;}
#narrow-menu .current-menu-item a,li.current-menu-parent>a,li.current-menu-ancestor>a{color:#df846c !important;}
#narrow-menu .sub-menu li a{padding-left:48px;}
#narrow-menu .sub-menu li ul li a{padding-left:72px;}
/*@search
***********************************/
#search-form{margin:0 auto 12px 0;}
#search-form input{width:40px;height:20px;margin:auto;padding-left:4px;background:transparent;border:0;border-left:2px solid #df846c;font-family:calibri,'瀹嬩綋',Arial,sans-serif;font-size:12px;line-height:20px;color:#999;vertical-align: middle;transition:width ease .4s;-webkit-transition:width ease .4s;-moz-transition:width ease .4s;-o-transition:width ease .4s;-ms-transition:width ease .4s;}
#search-form input:focus{width:120px;}
/*@main
***********************************/
#main{max-width:100%;margin:auto;overflow:hidden;color:#999;}
.main-full{width:100%;}
.main-narrow{width:960px;}
#content{position:relative;margin:auto;min-height:380px;}
/*@article
***********************************/
article{margin:6px;padding:0;transition:transform ease .8s;-webkit-transition:-webkit-transform ease .8s;-moz-transition:-moz-transform ease .8s;-o-transition:-o-transform ease .8s;-ms-transition:-ms-transform ease .8s;}
article img{max-width:100%;height:auto !important;}
.post-index{overflow:hidden;}
.post-index article,.album2 article{width:249px;float:left;background:#fff;/*background:#fff;border-radius:12px;box-shadow:0px 0px 8px rgba(0,0,0,0.2);*/opacity:0;box-shadow:1px 1px 4px rgba(0,0,0,0.1);}
.post-index .article-wrap{margin:24px;}
.post-index .has-img-a{display:block;margin:auto;text-align:center;}
.post-index embed,.post-index iframe,.post-index object,.post-index video{max-height:300px;vertical-align:bottom;}
.entry-header{margin-bottom:12px; position:relative}
.entry-header h1{font-weight:normal;font-size:16px;margin:0;line-height:2em;min-height:32px;color:#6d6d6d;display:block;}
.entry-header h1 a{color:#777;height:2em;display:block;padding-right:68px;overflow:hidden;}
.entry-header h1 a:hover{color:#df846c;}
.entry-content ul{margin:20px;padding-left:20px;list-style:square;}
.entry-content ul li{margin:10px 0;}
.entry-content ol{margin:20px;padding-left:20px;list-style:decimal;}
.entry-content a{color:#df846c;padding:4px;border-radius:4px;transition:background ease .4s;-webkit-transition:background ease .4s;-moz-transition:background ease .4s;-o-transition:background ease .4s;-ms-transition:background ease .4s;}
.entry-content a:hover{color:#fff;background-color:#df846c;}
.entry-content a.has-img-a{padding:0;border-radius:0;background:0;}
.entry-content a.post-feature img{display:block;width:100%;height:192px;max-width:100%;background-position:center center;background-size:cover;padding:0;border-radius:0;transition:none;-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;}
.post-single{width:780px;max-width:95%;margin:auto;}
.post-single article{margin:0;padding:0;display:block;}
.post-single .entry-header h1{font-size:24px;margin-bottom:24px;}
#singular-content{color:#333;margin:12px 0;padding:40px;background:#fff;box-shadow:0px 1px 4px rgba(0,0,0,0.1);}
.singular-narrow-content{padding-left:20px !important;padding-right:20px !important;}
.entry-footer{margin:40px 0;color:#bbb;}
.meta-time{position:absolute;right:0;top:0;color:rgba(0,0,0,0.5);}
.meta-tag{float:left;margin-right:12px;}
.meta-tag a{color:#bbb;margin:0 4px;}
.meta-tag a:hover{color:#999;}
.meta-author{float:left;margin-right:12px;}
.share{float:right;position:relative;}
.share-ul{width:130px;position:absolute;right:30px;top:20px;padding-top:20px;box-shadow:0px 0px 3px rgba(0,0,0,0.2);background:#fff;z-index:3;display:none;}
.twitter-share,.facebook-share,.sina-share,.tencent-share,.douban-share,.fanfou-share,.renren-share,.qzone-share{background-image:url(images/share.png);background-repeat:no-repeat;}
.share-c{display:inline-block;cursor:pointer;}
.share li{float:left;margin:0 0 20px 20px;}
.share li a{width:16px;height:16px;display:block;}
.twitter-share{background-position:-30px -10px;}
.facebook-share{background-position:-60px -10px;}
.sina-share{background-position:-90px -10px;}
.tencent-share{background-position:-120px -10px;}
.douban-share{background-position:-150px -10px;}
.fanfou-share{background-position:-180px -10px;}
.renren-share{background-position:-210px -10px;}
.qzone-share{background-position:-240px -10px;}
/*@gallery
************************/
.album{max-height:606px;text-align:center;}
.album .thumb-wrap{width:700px;max-width:100%;height:68px;padding:4px 0;position:relative;overflow:hidden;}
.album .thumb{white-space:nowrap;position:relative;left:25px;z-index:2;margin:0;padding:0;text-align:left;height:68px;overflow:hidden;}
.album .thumb p{display:inline;margin:0;padding:0;}
.album .thumb a{display:inline-block;margin:4px;padding:0;background:#000;}
.album .thumb a img{width:102px;height:60px;margin:0;padding:0;border:0;}
.album .thumb-left,.thumb-right{index:2px;width:23px;height:74px;cursor:pointer;border-color:rgba(0,0,0,0.1);border-width:1px;background:#fff;z-index:3;transition:background linear .3s;-webkit-transition:background linear .3s;-moz-transition:background linear .3s;-o-transition:background linear .3s;-ms-transition:background linear .3s;}
.album .thumb-left{position:absolute;left:0;top:0;border-style:solid none solid solid;background:#fff url(images/thumb-nav-l.png) left center no-repeat;}
.album .thumb-right{position:absolute;right:0;top:0;border-style:solid solid solid none;background:#fff url(images/thumb-nav-r.png) right center no-repeat;}
.album .thumb-current{opacity:0.6;}
.photo-wrap{margin:12px auto;min-height:120px;min-width:120px;padding:8px;text-align:center;position:relative;display:inline-block;}
.the-photo{display:inline-block;margin-left:auto;margin-right:auto;max-width:100%;position:relative;}
.the-photo img{display:none;max-height:500px;display:block;margin:auto;padding:0;max-width:100%;}
.phwrap-corner{width:23px;height:23px;border-color:rgba(0,0,0,0.1);border-width:1px;background:transparent;z-index:3;position:absolute;transition:background linear .3s;-webkit-transition:background linear .3s;-moz-transition:background linear .3s;-o-transition:background linear .3s;-ms-transition:background linear .3s;}
.phwrap-lt{position:absolute;left:0;top:0;border-style:solid none none solid;}
.phwrap-rt{position:absolute;right:0;top:0;border-style:solid solid none none;}
.phwrap-lb{position:absolute;left:0;bottom:0;border-style:none none solid solid;}
.phwrap-rb{position:absolute;right:0;bottom:0;border-style:none solid solid none;}
#gallery-wrap{width:100%;height:100%;position:fixed;top:0;left:0;z-index:4;background-color:rgba(0,0,0,0.7);display:none;z-index:9999;text-align:center;}
#gallery-the-img{position:relative;display:inline-block;opacity:0;}
#gallery-img{margin:auto;box-shadow:2px 2px 8px rgba(0,0,0,0.4);}
p.gallery-des{text-align:right;margin-top:12px;}
p.gallery-des a{color:#6d6d6d;}
.gallery-nav-l{position:absolute;left:0;top:45%;width:70px;height:60px;background:#000 url(images/gallery.png) center -58px no-repeat;opacity:0.8;cursor:pointer;}
.gallery-nav-l:hover{opacity:1;}
.gallery-nav-r{position:absolute;right:0;top:45%;width:70px;height:60px;background:#000 url(images/gallery.png) center -2px no-repeat;opacity:0.8;cursor:pointer;}
.gallery-nav-r:hover{opacity:1;}
.gallery-nav-quit{position:absolute;right:0;top:0;width:70px;height:70px;background:url(images/gallery.png) center -120px no-repeat;cursor:pointer;}
/*@loading
******************************/
#loading-wrap{width:100%;height:0;position:fixed;left:0;top:0;z-index:4;background:rgba(0,0,0,0.6);text-align:center;opacity:0;transition:opacity ease .8s;-webkit-transition:opacity ease .8s;-moz-transition:opacity ease .8s;-o-transition:opacity ease .8s;-ms-transition:opacity ease .8s;}
.loading{width:120px;height:120px;color:#eee;margin:auto;display:none;}
.loading-bar{width:60px;height:30px;padding-top:45px;margin:auto;overflow:hidden;}
.loading-bar div{width:5px;height:30px;margin:5px;margin-top:25px;background:#eee;float:left;}
.loading-text{text-align:center;margin-top:8px;}
@keyframes bar{ 0%{margin-top:25px;} 50%{margin-top:0px;} 100%{margin-top:25px;} }
@-webkit-keyframes bar{ 0%{margin-top:25px;} 50%{margin-top:0px;} 100%{margin-top:25px;} }
.bar1,.bar2,.bar3,.bar4{animation:bar 1.5s infinite;-webkit-animation:bar 1.5s infinite;-moz-animation:bar 1.5s infinite;-o-animation:bar 1.5s infinite;}
.bar1{}
.bar2{animation-delay:0.3s;-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;-o-animation-delay:0.3s;}
.bar3{animation-delay:0.6s;-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;-o-animation-delay:0.6s;}
.bar4{animation-delay:0.9s;-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;-o-animation-delay:0.9s;}
#logo-music .loading{position:absolute;left:0;top:0;}
.photo-wrap .loading{color:#999;display:inline-block;margin:0 !important;margin-top:0 !important;}/*ajax鍔犺浇 gallery杩囧悗淇*/
.photo-wrap .loading .bar{background:#999;}
.photo-wrap .loading{}
#gallery-wrap .loading{}
#list-detail .loading{margin-top:0 !important;}
#bg img{transition:opacity ease 1.2s;-webkit-transition:opacity ease 1.2s;-moz-transition:opacity ease 1.2s;-o-transition:opacity ease 1.2s;-ms-transition:opacity ease 1.2s;}
