html和css案例：MIUI蜜柚界面制作和得到素材方法，電腦卡或網(wǎng)絡(luò)崩潰，黑屏等可能原因
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>是導(dǎo)航-->
<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="#">產(chǎn)品</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">
進(jìn)入論壇</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 />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-2.jpg" alt=""><br /><font size="5"><b>
電話短信</b></font><br />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-3.jpg" alt=""><br /><font size="5"><b>
電話短信</b></font><br />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-4.jpg" alt=""><br /><font size="5"><b>
電話短信</b></font><br />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</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 />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-6.jpg" alt=""><br /><font size="5"><b>
電話短信</b></font><br />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-7.jpg" alt=""><br><font size="5"><b>
電話短信</b></font><br />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</a></td>
<td><br /><a href="#"><img src="img/ico-8.jpg" alt=""><br /><font size="5"><b>
電話短信</b></font><br />根據(jù)中國人民的使用方式<br>設(shè)定的特定方式</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為發(fā)燒而生</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;
}
構(gòu)成：
圖片素材（可b站專欄中下載或截圖，PS軟件處理成png格式或改變大?。?/strong>
電腦卡或網(wǎng)絡(luò)崩潰，黑屏等可能原因：內(nèi)存太滿了，或者是桌面上的文件太多了，要在電腦管家等處升級QQ，QQ瀏覽器，卸載原來的， 重裝新版，點刷新網(wǎng)頁的圖標(biāo)等。自己多記錄一些解決方法等。
