html写选项卡

来源：互联网发布：淘宝联盟结算第三方编辑：程序博客网时间：2024/06/06 04:25
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>style样式</title></head><style>@font-face { font-family: 'AlexBrush-Regular-webfont'; src: url('fontName.eot'); src: local('fontName Regular'),              local('fontName'),              url('fontName.woff') format('woff'),              url('AlexBrush-Regular-webfont.ttf') format('truetype'),              url('fontName.svg#fontName') format('svg');} *{margin:0; ;padding: 0;list-style-type: none;}#maincon{width: 504px;height: 300px;border-radius: 10px;background-color: #272822;border:1px solid black;position: relative;left: 30%;top:160px;box-shadow: 10px 13px 12px #332a26;}#headline{width: 504px;height: 52px;border-radius: 10px;border:-1px solid #454a54;}#headline ul{width: 504px;height: 50px;position: absolute;left: 0px;top:0px;}#headline ul li{width: 124px;height: 40px;border:1px solid #444648;;cursor: pointer;float: left;border-radius: 10px;text-align: center;color: #FFFFFF;padding-top:12px;}#content{width: 504;height: 248px;border: -1px solid #ffffff;border-radius: 9px;color: #D4DBEE;font-family:"AlexBrush-Regular-webfont"; font-size: 1.3em; padding-top: 3px;}.div2{display: none;}</style><script>  window.onload=function(){   var odiv=document.getElementById('headline');   var cli=odiv.getElementsByTagName('li');  var newdiv=document.getElementById('content');   var div2=newdiv.getElementsByTagName('div') ;  for(i=0;i<cli.length;i++)   {      cli[i].index=i      cli[i].onclick=function()    {    for(i=0;i<cli.length;i++)     {        cli[i].className='' ;       div2[i].style.display='none';      }        this.className='list1';        div2[this.index].style.display='block';    }   }}</script><body><div id="maincon">  <div id="headline">   <ul>        <li class="list1">空之境界</li>        <li class="list2">纳米核心</li>        <li class="list3">天行九歌</li>        <li class="list4">仙剑奇侠</li>   </ul>  </div>              <div id="content">            <div class="div2" style="display: block;"><img src="Lys.png" style="width: 100px;height: 70px; border-radius: 12px;">Hair is cut with a dagger at the gamma hole, and the length is just a little bit of a cover.And the hair is very good for her.Many students would be mistaken about her gender.It's a man who thinks she's a woman, and women see her as the beauty of a man's delicate face.</div>            <div class="div2"><img src="Bad.png" style="width: 100px;height: 70px; border-radius: 12px;">People fighting for their ideal, replacing the pen and ink with their faith, and the peaceful era of the period, also ignited the planet's anger, leading to the outbreak of the purple fog crisis.At a time of existential crisis, the N.S.P. program, developed by the elite, was thwarted until the "nanocore" intervened to usher in the birth of "him".</div>            <div class="div2"><img src="mei.png" style="width: 100px;height: 70px; border-radius: 12px;">Line "nine songs" is a companion, "warlords moon" has its own system, not only combines suspense reasoning, GongDou conspiracy, spy solution, and so on intelligent plot, and explore new areas and bold attempt to tall on the academic ideas in the form of modern entertainment to the audience, including financial war, game theory and so on, it would definitely be completely different to the audience a new experience.</div>            <div class="div2"><img src="lod.png" style="width: 100px;height: 70px; border-radius: 12px;">Xianjian story to fairy lich ghosts-gods legend in ancient China as the background, the martial arts and XianXia as subjects, has so far issued eight single-player role-playing game, a derivative business simulation game, two network game, a social network game, and a mobile phone games</div>  </div></div></body></html>
阅读全文
0 0