锐客网

  1. 首页 > it技术 > >

闲来无事用html做了个win8.1的界面，看起来就跟真的一模一样！

html

暑假在家真是闲的蛋疼，正巧又在学web，看着自己的电脑我就想着能不能做个metro界面出来呢，然后自己在家里捣鼓，终于成功了！！！我准备回学校用这个来逗室友上效果图

最后网页全屏出来的效果呢就和我电脑的一样，哈哈闲来无事用html做了个win8.1的界面，看起来就跟真的一模一样！
文章图片

闲来无事用html做了个win8.1的界面，看起来就跟真的一模一样！
文章图片

下面是代码：
html部分：



win8 - 锐客网









Start

Tfei







邮件
日历
照片




Skype
用户
财经
suifengpiaoyang.cn
帮助
阅读列表
OneDrive
天气
体育
桌面
新闻


应用商店
美食
地图
健康




css部分：
body{
float:left;
margin:0px;
padding:0px;
width:1340px;
height:750px;
color:white;
font-size:12px;
font-family:"微软雅黑","arial";
background-image:url(images/banner.jpg);
background-position:center;
background-repeat: no-repeat;
background-attachment:fixed;
}
#calender:hover,#photo:hover,#video:hover,#music:hover,#game:hover,#camera:hover,#friend:hover,#finance:hover,#ie:hover,#help:hover,#OneDrive:hover,#weather:hover,#sport:hover,#news:hover{
border:3px solid rgb(43,6,128);
margin-top:-3px;
margin-right:-3px;
margin-left:5px;
margin-bottom:5px;
}
#mail:hover,#skype:hover,#read:hover,#map:hover,#desk:hover,#appstore:hover,#food:hover{
border:3px solid rgb(43,6,128);
margin-top:-3px;
margin-right:-3px;
margin-left:-3px;
margin-bottom:5px;
}
a{
display:block;
width:100%;
height:100%;
}
.text{
width:100px;
height:20px;
float:left;
margin-left:16px;
margin-top:99px;
}
.text250{
width:100px;
height:20px;
float:left;
margin-left:16px;
margin-top:227px;
}
#win8{
float:left;
margin:0px;
padding:0px;
width:1340px;
height:750px;
}
#head{
float:left;
width:1340px;
height:172px;
}
#start{
float:left;
width:120px;
height:60px;
margin-top:45px;
margin-left:110px;
font-size:60px;
color:white;
font-family:arial;
}
#username{
float:left;
width:130px;
height:60px;
margin-top:50px;
margin-left:850px;
font-size:30px;
}
#user{
float:left;
width:65px;
height:45px;
color:white;
margin-top:15px;
margin-left:10px;
font-family:arial;
}
#avatar{
float:left;
width:40px;
height:40px;
margin-top:10px;
margin-left:5px;
background-image:url(images/avatar.png);
background-position:center;
background-repeat: no-repeat;
}
#powerOff{
float:left;
width:60px;
height:60px;
margin-top:50px;
}
#powerOff a,#search a{
display:block;
width:100%;
height:100%;
background-position:center;
background-repeat: no-repeat;
}
#powerOff a{
background-image:url(images/off.png);
}
#powerOff a:hover,#search a:hover,#username:hover{
background-color:rgb(43,6,128);
}
#search{
float:left;
width:60px;
height:60px;
margin-top:50px;
}
#search a{
background-image:url(images/search.png);
}
#left{
float:left;
width:764px;
height:504px;
margin-left:120px;
}
#mail,#calender,#finance,#desk,#sport,#news,#food{
float:left;
width:250px;
height:120px;
margin-bottom:8px;
background-position:center;
background-repeat: no-repeat;
}
#mail{
background-color:rgb(0,133,207);
background-image:url(images/mail.png);
}
#calender{
margin-left:8px;
background-color:rgb(88,55,179);
background-image:url(images/calender.png);
}
#photo,#skype,#friend,#ie,#help,#read,#OneDrive,#health,#map{
float:left;
width:120px;
height:120px;
margin-bottom:8px;
background-position:center;
background-repeat: no-repeat;
}
#photo{
margin-left:8px;
background-color:rgb(0,154,172);
background-image:url(images/photo.png);
}
#video,#music,#game,#camera{
float:left;
width:56px;
height:56px;
margin-left:8px;
margin-bottom:8px;
background-position:center;
background-repeat: no-repeat;
}
#video{
background-color:rgb(184,28,70);
background-image:url(images/video.png);
}
#music{
background-color:rgb(212,74,40);
background-image:url(images/music.png);
}
#game{
background-color:rgb(0,158,0);
background-image:url(images/game.png);
}
#camera{
background-color:rgb(161,0,153);
background-image:url(images/camera.png);
}
#skype{
background-color:rgb(0,184,237);
background-image:url(images/skype.png);
background-position:center;
background-repeat: no-repeat;
}
#friend{
margin-left:10px;
background-color:rgb(217,82,44);
background-image:url(images/friend.png);
}
#friend:hover{
margin-left:7px;
background-color:rgb(217,82,44);
}
#finance{
margin-left:8px;
background-color:rgb(0,161,0);
background-image:url(images/finance.png);
}
#ie{
margin-left:8px;
background-image:url(images/ie.png);
background-color:rgb(45,136,239);
background-image:url(images/ie.png);
}
#help{
margin-left:8px;
background-color:rgb(218,83,44);
background-image:url(images/help.png);
}
#read{
float:left;
width:121px;
height:120px;
margin-bottom:8px;
background-color:rgb(186,29,71);
background-image:url(images/read.png);
}
#OneDrive{
width:121px;
height:120px;
margin-left:8px;
background-color:rgb(10,89,194);
background-image:url(images/onedrive.png);
}
#weather{
float:right;
width:248px;
height:248px;
margin-left:8px;
margin-bottom:8px;
background-color:rgb(42,127,237);
background-image:url(images/weather.png);
background-position:center;
background-repeat: no-repeat;
}
#sport{
float:right;
margin-left:8px;
background-image:url(images/sport.png);
background-color:rgb(99,62,190);
}
#desk{
background-image:url(images/desktop.jpg);
background-position:center;
background-repeat: no-repeat;
}
#news{
float:right;
margin-left:8px;
background-color:rgb(180,27,67);
background-image:url(images/news.png);
}
#right{
float:left;
width:250px;
height:504px;
margin-left:56px;
}
#appstore{
float:left;
width:250px;
height:248px;
margin-bottom:8px;
background-color:rgb(0,159,0);
background-position:center;
background-repeat: no-repeat;
background-image:url(images/app.png);
}
#food{
margin-bottom:8px;
background-color:rgb(0,152,171);
background-image:url(images/food.png);
}
#map{
background-color:rgb(163,0,170);
background-image:url(images/map.png);
}
#health{
margin-left:10px;
background-color:rgb(218,83,44);
background-image:url(images/health.png);
}
#health:hover{
border:3px solid rgb(43,6,128);
margin-top:-3px;
margin-right:-3px;
margin-left:7px;
margin-bottom:5px;
}


【闲来无事用html做了个win8.1的界面，看起来就跟真的一模一样！】代码和资源放在更多文章那里，有兴趣可以看看~

    推荐阅读


    上一篇：关闭Eclipse的控制台console自动跳出

    下一篇：关于Nginx不能正常启动的问题