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

最新推荐文章于 2021-06-19 07:09:07 发布

呵呵我是菜鸟

最新推荐文章于 2021-06-19 07:09:07 发布

阅读量3.4k

点赞数 2

分类专栏： html 文章标签： win8.1 html css win8 界面

本文链接：https://blog.csdn.net/u012790987/article/details/47683625

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

最后网页全屏出来的效果呢就和我电脑的一样，哈哈

下面是代码：

html部分：

<!DOCTYPE html>
<html>
<head>
<title>win8</title>
<meta http-equiv="Content-type" content="text/html; charset=utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="win8|win8|win8"/>
<meta name="description" content="win8" />
<link rel="StyleSheet" href="./css/style.css" type="text/css">
</head>
<body>
<div id="win8">
<div id="head">
<div id="start">Start</div>
<div id="username">
<div id="user">Tfei</div>
<div id="avatar"></div>
<a href="user.php"></a>
</div>
<div id="powerOff"><a href="login.php?action=logout" title="注销"></a></div>
<div id="search"><a href="search.php" title="搜索"></a></div>
</div>
<div id="left">
<div id="mail"><div class="text">邮件</div><a href="" title="邮件" target="_blank"></a></div>
<div id="calender"><div class="text">日历</div></div>
<div id="photo"><div class="text">照片</div></div>
<div id="video"></div>
<div id="music"></div>
<div id="game"></div>
<div id="camera"></div>
<div id="skype"><div class="text">Skype</div></div>
<div id="friend"><div class="text">用户</div><a href="" title="用户"></a></div>
<div id="finance"><div class="text">财经</div></div>
<div id="ie"><div class="text">suifengpiaoyang.cn</div></div>
<div id="help"><div class="text">帮助</div></div>
<div id="read"><div class="text">阅读列表</div></div>
<div id="OneDrive"><div class="text">OneDrive</div></div>
<div id="weather"><div class="text250">天气</div></div>
<div id="sport"><div class="text">体育</div></div>
<div id="desk"><div class="text">桌面</div></div>
<div id="news"><div class="text">新闻</div></div>
</div>
<div id="right">
<div id="appstore"><div class="text250">应用商店</div></div>
<div id="food"><div class="text">美食</div></div>
<div id="map"><div class="text">地图</div></div>
<div id="health"><div class="text">健康</div><a href="#head"></a></div>
</div>
</div>
</body>

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;
}

代码和资源放在更多文章那里，有兴趣可以看看~

呵呵我是菜鸟

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
闲来无事用html做了个win8.1的界面，看起来就跟真的一模一样！

暑假在家真是闲的蛋疼，正巧又在学web，看着自己的电脑我就想着能不能做个metro界面出来呢，然后自己在家里捣鼓，终于成功了！！！我准备回学校用这个来逗室友上效果图最后网页全屏出来的效果呢就和我电脑的一样，哈哈下面是代码：html部分：win8StartTfei邮件日历照片Skype用户财经suifengpi
复制链接

扫一扫