html设计滚动条

<!DOCTYPE html>
<html>
<head>
	<title>suspension</title>
</head>

<body>
      <div id="othersty">

           <a href=""><img src="img/kaya1.png" alt="" title="kaynoya"></a>
           <a href=""><img id="yaod" src="img/ghost.png" alt="" title="ghost"></a>


      </div>
		 <div id="mainBox">
		    <div id="scrollbar-holder"></div>
                <div id="suspened">         
                <h2>Howl's Castle</h2>
                <hr/>
			       	<p id="start-castle">"Howl's moving castle" is the work of hayao miyazaki in the winter of 2004 after the animated film "spirited away".
              The film was released in Japan on November 20, 2004.
              The film is based on British children's novelist Diana w. Jones's "the sorcerer havell and the demon of fire."
              The film is set in the eve of the war, describe the three sisters live in small town, one of the big sister Sophie is an expert in making hats, but she was so offended witch, from 18 beautiful girl turned into a 90 - year - old woman.
              She was horrified to escape from home, but in a moving castle again, but she can't fall in love with people and magic of Hal, spectrum out a war by and with the rest of the castle to find a way to unlock the curse.</p>
              <h3 id="meetline">Meet with Hal</h3>
              <p id="meetwith">
              Once Sophie was stopped by two soldiers on her way to visit her sister.This time a mysterious man - Hal appears,he USES magic to help Sophie solve the problem and send her to her sister.On the way,Hal and Sophie are hunted by the wild witch.In the evening,the witch in the wilderness Sophie business operating in the hat shop, and a curse on the sufi, put her into a 90 - year - old woman,and Sophie hasn't anyone about the spell.Sophie had to run away from home.On the way,she meets a mysterious scarecrow and is introduced to the mysterious castle of Hal to avoid the wind.There,Sophie knows the source of the magic that drives the castle -- the flame demon cassia,the little boy maruk,the scarecrow, and the hero, Hal.Sophie lived in the name of a clean woman and had a quiet and wonderful time.Sophie gradually lived out herself,and was unconsciously attracted to Hal.</p>
              <h3 id="chatelain">Castlelans</h3>
              <p id="Howl-flat">The owner of the castle wizard Hal has magical powers, but he did not like the country all the mage accept the king's order to participate in the war, but with its own strength to defend the peace.
              Hal often comes back to his castle after dusk, and is getting deeper and deeper into a demon state.
              Until one day Hal told Sophie about his hate war, and Sophie decided to help Hal.
              On the way to the palace, Sophie meets the wild witch.
              So this is a trap, court though the witch Sally mann is Hal with wild witch teacher, but in order to prevent their mind controlled by devil, take back the wilderness witch magic, let her become a ordinary old woman, and also because of Hal can Sophie came to the palace, when Sally mann use magic to kill lucifer repossessed the Hal's magic, Sophie rushed up to save the Hal.</p>
              <h3 id="warline">Break out</h3>
              <p id="the-war">The war finally broke out, and Hal faced the enemy alone in order to protect Sophie and everyone.
              The heart loves Hal's Sophie not to let Hal one person suffer, the determination to face with Hal.
              So she drove the mobile castle to pursue Hal's footsteps.
              And Hal, at this moment, has lost consciousness and become a strange bird that will fight to protect Sophie.
              After the series of accidents, accidentally Sophie found randomly through the guidance of ring door and went back to the past, Hal understands and Hal in childhood life place met meteor card at the end of the meteor lucifer, while the latter is reluctant to die like this signed contract with Hal, let the devil card lucifer's magic for his use of fire, but your heart will also be Hal JiaoHuanPin in this contract, the card lucifer and Hal life together.</p>
              <h3 id="endline">Relieve</h3>
              <p id="story-end">The end of the story, Sophie hall, rescue the dying, to break the convention and help with card lucifer Hal Hal back to the heart, was released from the curse of the yourself at the same time, the scarecrow karp under Sophie's kiss also get rid of the curse of complex - he is the prince in neighbouring countries, and promised to return to stop the war.
              Get rid of the bondage of the contract, card lucifer still want to stay with their lives, and driven by, in its flying moving castle with Sophie and Hal line, lived a peaceful and happy life</p>
              <div id="memory">
                <span>晶莹的泪光中 微微摇曳的笑容</span><br/>
                     <span> 万物初始之际 与世界许下约定</span><br/>
                     <span> 即使此刻孤单 那曾经相伴的往日</span><br/>
                     <span> 孕育出今天闪耀的光彩</span><br/>
                     <span>  仿佛初次相逢那样美好</span><br/>
                     <span> 尽管记忆之中已经寻觅不到你的身影</span><br/>

              </div>
		        </div>


 		</div>

</body>
</html>
<style>
/* Fonts */
@import "https://fonts.googleapis.com/css?family=Pacifico";
/* Variables for box and CSS triangles */
/* End Variables */
@font-face{font-family:Cookie;src:url(font/aplayer-fontello.eot);
  src:url(font/aplayer-fontello.eot) 
  format("embedded-opentype"),
  url(font/aplayer-fontello.woff) 
  format("woff"),url(Cookie.ttf) 
  format("truetype"),url(font/aplayer-fontello.svg) 
  format("svg");
  font-weight:400;font-style:normal}
		body{
			background-color:rgba(28, 26, 31, 0.75);
			text-align: center;			
		}
		#mainBox{
			width: 1200px;
			height: 700px;
            background: url(img/bg8.jpg);
            position: relative;
            left:200px;
            background-repeat: no-repeat;
		}
	    #suspened{
	    	position: absolute;
	    	left: 22%;
	    	width: 550px;
        height: 687px;
	    	overflow-y:auto;overflow-x: hidden;
	    	color: #F2F2F2;
	    	font-family: "Cookie",cursive;
	    }
	    #suspened h2{ font-family: 'Pacifico', cursive, Sans-Serif;}
	    #suspened::-webkit-scrollbar{
            width: 9px;
	    }
        #suspened::-webkit-scrollbar-corner{
        	display: none;
        }
   		#suspened::-webkit-scrollbar-thumb{
          background:#28a0b5;
      	  border-radius:4px;
        	width: 20px;
    }
       #scrollbar-holder{
       		background-color: #8f809e;
       		height: 600px;
       		width: 4px;
       	  position: absolute;
       	  right: 388px;
       	  border-radius: 10px;
       }
       hr{
       		width: 400px;
       		height: 2px;
       		background-color: #B9B7B2;
       		border-radius: 5px;
       }

       #start-castle{
          position: absolute;
          left:21px;
          background: url(img/movecastle.png);
          width:500px;
          height:379px;
          border-radius: 10px;
          font-size: 1.2em;
          color: #b8d2bc;
       }
       #meetwith{
        left:21px;
        top:533px;
        position: absolute;
        width: 500px;
        height: 359px;
        border-radius: 10px;
        color: #b8d2bc;
        font-size: 1.1em;
        background-image: url(img/meet2.jpg);
        word-spacing: 1px;
       }
       #meetline{
       position: absolute;
       top:504px;
       left:21px;
       }
       #chatelain{
        position: absolute;
        top:923px;
        left: 21px;
       }
       #Howl-flat{
        left:21px;
        top:954px;
        position: absolute;
        width: 500px;
        height: 320px;
        border-radius: 10px;
        color: #b8d2bc;
        font-size: 1.1em;
        background-image: url(img/main.jpg);
       }
       #warline{
        position: absolute;
        top:1351px;
        left: 21px;
       }
       #the-war{
        left:21px;
        top:1380px;
        position: absolute;
        width: 500px;
        height: 320px;
        border-radius: 10px;
        color: #b8d2bc;
        font-size: 1.1em;
        background-image: url(img/war.jpg);
       }
       #endline{
        position: absolute;
        top:1750px;
        left: 21px;
       }
       #story-end{
        left:21px;
        top:1780px;
        position: absolute;
        width: 500px;
        height: 320px;
        border-radius: 10px;
        color: #b8d2bc;
        font-size: 1.1em;
        background-image: url(img/end1.jpg);
       }
       #memory{
        width:320px;
        height:300px;
        position: absolute;
        top:2170px;
        left:100px;
       }
       #othersty{
          position: absolute;
          left:1px;
          top:23px;
          width: 196px;
          height: 683px;
          border-right: 1px solid #88ad97;
       }

       #othersty a img{
        width: 163px;
        height: 173px;
        border-radius: 12px;
        padding: 6px;
       }
       #yaod{ 
        width: 163px;
        height: 173px;
        border-radius: 12px;
        padding: 1px;
      }
</style>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值