SOURCE

<h1>魔法少女小樱</h1>
<P>&nbsp;&nbsp;&nbsp;&nbsp;漫画《魔卡少女樱》是CLAMP在杂志《Nakayoshi》（好朋友）上连载的魔法少女漫画作品。[1]  单行本由讲谈社出版。[2]  作品亦改编为同名电视动画、动画电影。</P>
<p>&nbsp;&nbsp;&nbsp;&nbsp;作品曾获第32届星云赏（漫画部门）。 
漫画续作为《魔卡少女樱：CLEAR CARD篇》。</p>
<div>
<span class="left">
  <dl>
    <dt>中文名称:</dt>
    <dd>魔卡少女樱</dd>
    <dt>原版名称:</dt>
    <dd>カードキャプターさくら </dd>
    <dt>别类名称:</dt>
    <dd>
    百变小樱魔法卡；Card Captor 樱；库洛魔法使</dd>
     <dt>漫画作者:</dt>
    <dd>CLAMP</dd>
     <dt>漫画类型:</dt>
    <dd>魔法少女，恋爱</dd>
     <dt>写作地区:</dt>
    <dd>日本</dd>
     <dt>连载杂志:</dt>
    <dd>《Nakayoshi》</dd>
     <dt>连载时间:</dt>
    <dd>1996年6月号—2000年8月号 </dd>
     
     <dt></dt>
    <dd></dd>
  </dl>
</span>
 
  <div id="mo">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493825096526&di=bcb1f79465eca4b672d166ac34d469f1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D2d7745bcf3deb48ffb69a1d6c01e3aef%2F304e251f95cad1c8770b23fa7f3e6709c83d51bf.jpg">
  </div>  </div>
<div class="ew">
  <div class="ghost">
  <div class="eye"></div>
  <div class="eye two"></div>
  
  <div class="mouth">
    <div class="tonge"></div>
  </div>
  
  <div class="corner"></div>
  <div class="corner two"></div>
  <div class="corner three"></div>
  <div class="corner four"></div>
  
  <div class="over"></div>
  <div class="over two"></div>
  <div class="over three"></div>
  <div class="over four"></div>
  
  <div class="shadow"></div>
</div>
<div class="right">
  <dl>
    <dt>单行本册数:</dt>
    <dd>12（初版、新装版）；9（《好朋友》60周年纪念版）</dd>
       <dt>出版时间:</dt>
    <dd>1996年11月—2000年7月（初版）
2004年3月—2005年2月（新装版）
2015年3月—2015年8月（《好朋友》60周年纪念版） </dd>
        
    <dt>开    本:</dt>
    <dd>新书判（初版）
    A5（新装版）
    B6（《好朋友》60周年纪念版） </dd>
         <dt>其他出版社</dt>
    <dd>长鸿出版社（中国台湾）
天下出版有限公司（中国香港）
接力出版社（中国内地</dd>
         <dt>在线阅读平台</dt>
    <dd>腾讯动漫（中国内地)</dd>
  </dl>
</div></div>
<a href="http://jsrun.net/GDkKp/show">返回首页</a>

body{
  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);
background-size: cover ;
background-repeat:no-repeat;    
}
h1{
  text-align:center;
  color:pink;
}
p{
  color:grey;
}
.left{
float:left;
}
#mo{
  float:right;
}

.right{
  float:right;
}
.ew{
  float:right;
}
.ghost {
  width: 125px;
  height: 200px;
  background-color: #f8f8f8;
  border: 3px solid #979797;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 150px 150px 7px 7px;
  animation: ghost 1.5s ease-in-out alternate infinite;
  z-index: 1; 
}

.corner {
  width: 21px; height: 21px;
  border-radius: 5px; 
  background-color: #f8f8f8;
  border: 3px solid #979797;
  position: absolute;
  margin-top: 188px; 
  transform: rotate(45deg); 
  z-index: -1; 
}
.corner.two {
  margin-left: 33px; 
}
.corner.three {
  margin-left: 66px; 
}
.corner.four {
  margin-left: 98px; 
}

.over {
  width: 27px; height: 27px;
  border-radius: 3px; 
  background-color: #f8f8f8;
  position: absolute;
  margin-top: 188px; 
  transform: rotate(45deg) translateX(3px) translateY(3px); 
}
.over.two {
  margin-left: 33px; 
}
.over.three {
  margin-left: 66px; 
}
.over.four {
  margin-left: 98px; 
}

.eye {
  width: 10px; height: 10px;
  border-radius: 10px; 
  background-color: #979797; 
  position: absolute; margin: 50px auto; 
  left: 0;right: 0;
  transform: translateX(-25px); 
}
.eye.two {
  transform: translateX(25px); 
}

.mouth {
  width: 40px; height: 4px;
  border-radius: 10px; 
  background-color: #979797; 
  position: absolute; margin: 75px auto; 
  left: 0;right: 0;
}
.tonge {
  width: 4px; height: 10px;
  border-radius: 0px 0px 50px 50px; 
  background-color: #c39797; 
  position: absolute; margin: 2px auto; 
  left: 0;right: 0;
  transform: translateX(-6px); 
  border-left: 5px solid #dfb1b1; 
  border-right: 5px solid #dfb1b1; 
  border-bottom: 5px solid #dfb1b1; 
}

.shadow {
  width: 120px;
  height: 30px;
  border-radius: 100%;
  background-color: #d8d8d8;
  position: absolute;
  margin: 230px auto;
  left: 0;
  right: 0;
  animation: shadow 1.5s ease-in-out alternate infinite;
}

@keyframes shadow {
  0% {
    transform: scale(1) translateY(0px);
  }
  100% {
    transform: scale(0.8) translateY(75px);
  }
}
@keyframes ghost {
  0% {
    transform: scale(1) translateY(0px)
  }
  100% {
    transform: scale(1) translateY(-40px)
  }
}