<!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.οnlοad=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].οnclick=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>
3375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
