2013年10月28日 星期一

模擬小米盒子的畫面練習




應可能要求, 我嘗試將小米盒子的畫面做成網頁版

看來我需要先解決背景問題

所以我先用css gradient 寫下

在css 部分

.gradient{

background:-webkit-linear-gradient(-110deg,#000000 25% ,rgb(25,95,87),#0099FF);
position: absolute;
top:0px;
left:0px;
z-index: 0;
width:2000px;
height:900px;


}


在html 部分

<div class="gradient"></div>

得到如下圖



阿...中間還是有點綠色的樣子, 而且是斜過去的綠, 但是這個綠實在不知道編碼...

只好用Apple的Digital color來抓抓看

抓出的是RGB(25, 95,87)

Css 改成

background:-webkit-linear-gradient(-135deg,#000000,rgb(25,95,87),#0099FF);




好像有點像...但是角度怪怪的, 改成-90度


右邊應該沒有綠色, 所以我們需要做一塊遮蔽

在建立一個div 

然後css設定如下

.gradient2{

background:-webkit-linear-gradient(-110deg,rgba(0,0,0,1) 50%,rgba(11,125,175,0.8));
position:absolute;
top:0px;
left:500px;
z-index: 1;
width:1500px;
height:900px;
}


rgba(紅色, 綠色, 黑色, 透明)

rgba(0,0,0,1) 就是不透明的黑色

然後rgba(0,0,0,1) 50% 的50%是佔畫面的比例, 代表黑色會佔畫面50%


湊出如下圖


好像有點接近(自己騙自己


不管了, 先將上層方塊建立起來吧!

在html 中用div 包 圖案

<div id="block" ><img src="image/a.png" width="300" height="400"></div>
<div id="block1" ><img src="image/c.png" width="800" height="400"></div>

因為是做模擬, 所以就先包兩塊圖案


有點像了, 底下背景好明顯啊!...之後再來改

先將圖片鏡射效果做出來

在css部分貼上


img {
    -webkit-box-reflect: below;
}

得到如下圖


某個連身怪物嗎?

再加上這一段

img {
    -webkit-box-reflect:below 0px
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5,    
      transparent), to(white));
}


好像有點樣子

加上上排的字

在html貼上如下

<header>熱門推薦</header>

在從css定顏色大小

header{
position: absolute;
top:150px;
left:250px;
width: 800px;
height: 400px;
z-index: 2;
font-size: 50px;
color:white;
}

得到如下....亂碼



忘了加上UTF8

在<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>test</title>
</head>

得到如下


中文可正常顯示了

需要空白字元語法

就加上&nbsp;

如下


<header>熱門推薦&nbsp;&nbsp;&nbsp;熱門推薦</header>


這樣子就結束了, 接下來工作只是細微調整

總共花我3.5hr, 包含寫網誌, 下班去!