html和css案例：MIUI蜜柚界面制作和得到素材方法，电脑卡或网络崩溃，黑屏等可能原因
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MIUI</title>
<link rel="stylesheet" href="css/MIUI.css">
</head>
<body>
<div id="all">
<div class="one">
<nav>
<!--<nav>是导航-->
<ul class="ul">
<li class="logo">
<font color="white" size="6"><b>MIUI米柚</b></font>
</li>
<div class="head" >
<li >
<a href="#"> 首页</a>
</li>
<li>
<a href="#">主体</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">下载</a>
</li>
<li >
<a href="#">论坛</a>
</li>
</div>
<div class="a">
<li ><font size="2">
<a href="#">简体</a> | <a href="#">繁体</a>
| <a href="#">English</a></font>
</div>
</li>
</ul>
</nav>
</div>
<div class="two">
<!--<img src="img/icon-bg.png">-->
<div class="img">
<ul>
<li >
<div class="x">
<a href="#"><font size="5" >下载MIUI</font></a> </div></li>
<li ><div class="j"><a href="#" ><font size="5">
进入论坛</font></a></div></li></ul></div>
</div>
<!--<div class="three">
<ul>
<li><br><img src="img/video1.png" alt="">
<br> <a href="#">视频介绍</a></li>
<li><br> <img src="img/video2.png" alt=""><br>
<a href="#">视频介绍</a>
</li>
<li><br><img src="img/video3.png" alt=""><br>
<a href="#">视频介绍</a></li>
<li><br><img src="img/video4.png" alt=""><br>
<a href="#">视频介绍</a></li>
</ul>
</div>-->
<div class="four">
<table width="1200px" height="605px" cellspacing="0px"><!--border="1px"-->
<!--<div class="three">-->
<tr bgcolor="lightgray" class="tr"><td><br /><a href="#" ><img src="img/video1.png" alt=""><br /><font size="4">
视频介绍</font></a><br /><br /></td>
<td><br /><a href="#" ><img src="img/video2.png" alt=""><br /><font size="4">
视频介绍</font></a><br /><br /></td>
<td><br /><a href="#" ><img src="img/video3.png" alt=""><br /><font size="4">
视频介绍</font></a><br /><br /></td>
<td><br /><a href="#" ><img src="img/video4.png" alt=""><br /><font size="4">
视频介绍</b></font></a><br /><br /></td></tr>
<!--</div>-->
<tr class="tr2"><td><br /><a href="#" ><img src="img/ico-1.jpg" alt=""><br /><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-2.jpg" alt=""><br /><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-3.jpg" alt=""><br /><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-4.jpg" alt=""><br /><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td></tr>
<tr class="tr2"><td><br /><a href="#"><img src="img/ico-5.jpg" alt=""><br /><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-6.jpg" alt=""><br /><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-7.jpg" alt=""><br><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-8.jpg" alt=""><br /><font size="5"><b>
电话短信</b></font><br />根据中国人民的使用方式<br>设定的特定方式</a></td></tr>
</table>
</div>
<div class="five">
<a href="#"><img src="img/more.jpg" alt=""></a>
</div>
<div class="six">
<ul>
<li>
<font size="5" ><b>活动公告</b></font>
<br><br>
<a href="#">活动公告1</a>
<br><br>
<a href="#">活动公告2 </a>
</li>
<li><font size="5" ><br><b>活动公告</b></font>
<br><br>
<a href="#">活动公告1</a>
<br><br>
<a href="#">活动公告2 </a></li>
<li><font size="5" ><b>活动公告</b></font>
<br><br>
<a href="#">活动公告1</a>
<br><br>
<a href="#">活动公告2 </a></li>
</ul>
</div>
<div class="bottom"> <font size="6" >MIIU为发烧而生</font></div>
</div>
<div class="top">
<a href="#"><img src="img/top.png" alt=""> 回到顶部
</a>
</div>
</body>
</html>
css部分：
#all{
width: 1200px;
height: 1785px;
/*border:2px solid red;*/
position: absolute;
right: 200px;
top:0px;
/* background-position: 50%;*/
}
.one{
width: 1200px;
height:105px;
/*border:2px solid green;*/
background: url("../img/head-bg.jpg");
/*background-repeat: no-repeat;*/
/*background-size:1200px 105px;*/
}
a {
text-decoration: none;
}
.one a:hover {
color: blue;
/*//红色*/
cursor: pointer;
}
/*.four a:hover {
color: blue;
cursor: pointer;
}*/
.logo{
float: left;
margin-left: 60px;
height: 50px;
margin-top: 30px;
float:left;
}
li{
list-style: none;
}
nav ul li{
color:white;
float:left;
}
.head li{
color:white;
margin-left:80px;
padding: 2px;
margin-top:60px;
}
.a a{
color: white;
}
.a li{
color:white;
margin-top:60px;
margin-left:150px;
}
/*.a{margin-right: 10px;}*/
.head a{
color:white;
text-decoration: none;
}
.x a{color: orangered;}
.x a:hover{color: blue;cursor: pointer;}
.j a{color: grey;}
.j a:hover{color: blue;cursor: pointer;}
.six a{color: grey;}
.six a:hover{color: blue;cursor: pointer;}
.three a{color: black;}
.three a:hover{color: blue;cursor: pointer;}
.five a:hover{cursor: pointer;}
.two{
width: 1200px;
height: 555px;
/*border:2px solid green;*/
background: url("../img/banner.jpg") ;
background-repeat: no-repeat;
position: relative;
background-size:1200px 575px;
}
.img{
width: 400px;
height: 100px;
background: url("../img/icon-bg.png") ;
background-repeat: no-repeat;
position: absolute;
left: 100px;
top: 400px;
/* border:2px solid red;
*/
}
.img li{float:left;line-height: 50px;}
/*.b{
color: orange;
margin-top: 30px;
}
.c{color: grey;border:2px solid red;}*/
/*.three{
width:1200px;
height: 205px;
/*border:2px solid green;
background: url("../img/banner-bg.jpg") ;
background-repeat:no-repeat ;
background-size:1200px 210px;
float: left;
padding: 20px;*/
/*}*/
/*.three li{float: left;padding-left:140px;}*/
.four .tr2 a{color: gray;}
.four .tr2 a:hover{
color: blue;
}
.four{
width:1200px;
height: 605px;
border:1px solid lightgray;
/* color:gray;*/
text-align: center;
}
.four .tr a{color: gray;}
.four .tr a:hover{
color: blue;
}
.four .tr2 img{width:75px ;height: 75px;}
.five{
width:1200px;
height: 150px;
/* border:2px solid green;*/
}
.five img{
position: absolute;
left: 500px;
top: 1350px;
}
.six{
width:1200px;
height:280px;
/*border:2px solid green;*/
background: black;
color:grey;
}
.six li{
float: left;
padding-left:200px;
padding-top:100px;}
.bottom{
width:1200px;
height:62px;
/*border:2px solid blue;*/
text-align: center;
color: white;
background: black;
line-height: 62px;
}
.top img{
width: 80px;
height: 80px;
}
.top p{
width: 80px;
/*text-align: center;*/
}
.top a{
color: blue;
text-decoration: none;
}
.top {
width: 80px;
height: 100px;
position: fixed;
right: 30px;
bottom: 100px;
}
构成：
图片素材（可b站专栏中下载或截图，PS软件处理成png格式或改变大小）
电脑卡或网络崩溃，黑屏等可能原因：内存太满了，或者是桌面上的文件太多了，要在电脑管家等处升级QQ，QQ浏览器，卸载原来的， 重装新版，点刷新网页的图标等。自己多记录一些解决方法等。
