console
var n=0;
function showDiv()
{
n++;
if (n<=100)
{
document.all("dv"+n).style.visibility="visible";
setTimeout("showDiv()",800);
}
}
window.onload = showDiv;
<div id="main">欢迎进入我的网站</div>
<div>
<nav>
<ul class="ul1">
<li><a href="">首页</a>
<li><a href="">关于我</a>
<ul class="ul2">
<li><a href="">爱好</a></li>
<li><a href="">歌</a></li>
<li><a href="">电影</a></li>
<li><a href="">娱乐</a></li>
</ul>
</li>
<li><a href="">课程</a>
<ul class="ul2">
<li><a href="">移动网站建设</a></li>
<li><a href="">photoshop</a></li>
<li><a href="">JSP</a></li>
<li><a href="">jQuery</a></li>
</ul>
</li>
<li><a href="我的作品">我的作品</a>
<ul class="ul2">
<li><a href="">简单的QQ农场</a></li>
<li><a href="">设计的作品</a></li>
</ul>
</li>
</nav>
</div>
<div class="note">
<h1>我的爱好</h1>
<div id="dv1" style="visibility:hidden">
<span>打羽毛球</span>
<span>去旅游</span>
</div>
<h1>喜欢的歌</h1>
<div id="dv2" style="visibility:hidden">
<span>泡沫</span>
<span>你还让我怎样</span>
</div>
<h1>喜欢的电影</h1>
<div id="dv3" style="visibility:hidden">
<span>唐人街</span>
<span>银河补习班</span>
</div>
<h1>娱乐</h1>
<div id="dv4" style="visibility:hidden">
<span>和朋友一起去逛街</span>
<span>偶尔会打游戏</span>
</div>
</div>
<div class="course">
<h1>所学的课程</h1>
<div id="dv5" style="visibility:hidden">jsp</div>
<div id="dv6" style="visibility:hidden">jQuery</div>
<div id="dv7" style="visibility:hidden">人工智能</div>
<div id="dv8" style="visibility:hidden">python</div>
<div id="dv9" style="visibility:hidden">机器人入门</div>
<div id="dv10" style="visibility:hidden">移动前端开发</div>
<div id="dv11" style="visibility:hidden">photoshop</div>
<div id="dv12" style="visibility:hidden">java</div>
</div>
<h2>我的作品</h2>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="box">
<div class="text">
<h1>有需要的可联系我</h1>
<p>动动手指，让键盘飞起来</p>
</div>
<span >
<input type="text" placeholder="请输入姓名" /><br />
<input type="password" placeholder="请输入手机号码" /> <br />
<input type="text" placeholder="具体合作内容" style="height: 70px;"> <br />
<span style="width: 10px; height: 10px; text-align: center;">
<input type="submit" style="width: 20%; height: 25px; ">
<input type="reset" style="width: 20%; height: 25px;">
</span>
</span>
</div>
<div class="keybord">
<div class="key">~</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">0</div>
<div class="key">=</div>
<div class="key">+</div>
<div class="key delete">Delete</div>
<div class="key tab">Tab</div>
<div class="key">q</div>
<div class="key">w</div>
<div class="key">e</div>
<div class="key">r</div>
<div class="key">t</div>
<div class="key">y</div>
<div class="key">y</div>
<div class="key">u</div>
<div class="key">i</div>
<div class="key">o</div>
<div class="key">p</div>
<div class="key">[</div>
<div class="key">]</div>
<div class="key backslash">\</div>
<div class="key capslk">CapsLK</div>
<div class="key">a</div>
<div class="key">s</div>
<div class="key">d</div>
<div class="key">f</div>
<div class="key">g</div>
<div class="key">h</div>
<div class="key">j</div>
<div class="key">k</div>
<div class="key">l</div>
<div class="key">:</div>
<div class="key">'</div>
<div class="key enter">Enter</div>
<div class="key shift">Shift</div>
<div class="key">z</div>
<div class="key">x</div>
<div class="key">c</div>
<div class="key">v</div>
<div class="key">b</div>
<div class="key">n</div>
<div class="key">m</div>
<div class="key">,</div>
<div class="key">.</div>
<div class="key">/</div>
<div class="key shift">Shift</div>
<div class="key ctrl">Ctrl</div>
<div class="key win">Win</div>
<div class="key">Alt</div>
<div class="key space">Space</div>
<div class="key">Alt</div>
<div class="key">Fn</div>
<div class="key command">Command</div>
<div class="key ctrl">Ctrl</div>
</div>
#main {
background-image: url("https://i.loli.net/2020/06/18/Nq5VnLtcmiWM4rJ.jpg" );
height: 300px;
text-align: center;
font-size: 40px;
font-weight: bolder;
text-shadow: 15px 5px 15px;
animation: change 3s linear 0s infinite;
}
@keyframes change {
0% {color: rgb(248, 59, 68);}
50% {color: rgb(90, 154, 226);}
100% {color: rgb(76, 19, 233);}
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.ul1{
margin: -50px 0px 10px 200px;
}
.ul1>li{
width: 150px;
height: 2em;
border-radius: 0.5em 0.5em 0 0;
background: rgba(30,80,200,0.8);
font-size: 20px;
line-height: 2em;
text-align: center;
float: left;
margin-left: 50px;
}
.ul2{
background: rgba(80,80,160,0.6);
border-radius: 0 0 0.5em 0.5em;
display: none;
}
.ul2>li>a:hover{
background: rgba(37, 41, 36, 0.8);
width: 85%;
height: 1.5em;
line-height: 1.5em;
display:inline-block;
border-radius: 0.5em;
font-weight: bold;
padding: 3px 3px;
}
.ul1>li:hover>ul{
display: block;
}
.ul1>li:hover{
background: rgba(30,80,250,0.8);
}
.note{
text-align: center;
color: darkorange;
font-size: 20px;
font-weight: bold;
display:block;
margin-top: 100px;
width:400px;
height:400px;
background:#ff0;
border-width:30px 30px 30px 30px;
border-color:rgb(98, 189, 121) #f0f #512 #a21;
border-style:solid;
}
h1{
color: black;
text-align: center;
font-size: 30px;
}
h2{
color: rgb(188, 235, 79);
text-align: center;
font-size:50px;
text-shadow: 15px 5px 15px;
}
.wrap{
width: 1013px;
height: 305px;
background: rgb(223, 138, 208);
margin: 0 auto;
}
.item{
float: left;
width: 168.8px;
height: 305px;
background: green;
transition: 0.5s;
}
.item:nth-child(1){
background-image: url("https://i.loli.net/2020/06/20/wbRYcHrGvKi94kf.jpg");
}
.item:nth-child(2){
background-image: url("https://i.loli.net/2020/06/20/8gt6zpoTUrAqOnH.jpg");
}
.item:nth-child(3){
background-image: url("https://i.loli.net/2020/06/20/ZQdBclL6IvDW9Vm.jpg");
}
.item:nth-child(4){
background-image: url("https://i.loli.net/2020/06/20/AtGFwomY4JjWhNd.png" );
}
.item:nth-child(5){
background-image: url("https://i.loli.net/2020/06/20/K92qmdDVbZQBphg.png" );
}
.item:nth-child(6){
background-image: url("https://i.loli.net/2020/06/20/w4hymILfuqJNO9B.png");
}
.item:hover{
width: 507px !important;
}
.wrap:hover .item{
width: 101.2px;
}
.box{
background-color: rgb(157, 158, 161);
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 50px;
}
.keybord{
position: absolute;
left: 50%;
display: grid;
grid-template-columns: repeat(30,30px);
grid-template-rows: repeat(5,60px);
gap: 5px;
margin-top: 10px;
margin: 50 auto;
padding: 20px;
background-image: url("https://i.loli.net/2020/06/23/Eaq3xiTOwNARJXM.jpg");
border-radius: 20px;
transform: translateX(-50%);
}
.key{
grid-column: span 2;
background-color: #F3F3F3;
border: 2px solid rgb(26, 25, 25);
text-align: center;
line-height: 60px;
border-radius: 5px;
cursor: pointer;
}
.key:hover{
border-color: #fff;
}
.delete.capslk,.enter,.ctrl,
.backslash,.tab,.command{
grid-column: span 3;
}
.shift{
grid-column: span 5;
}
.space{
grid-column: span 13;
}
input{
font-size: 15px;
width: 60%;
height: 25px;
}
.text{
margin-right: 50px;
}
.course{
color: rgb(224, 151, 151);
background-color: chartreuse;
width: 450px;
height: 450px;
float: right;
margin-top: -450px;
font-size: 30px;
text-align: center;
}