html5手机版网站页面制作实例

 今天参考m.taobao.com淘宝的手机版网站页面自己动手作了一个html5手机版网站页面,主要应用了html5标签与css3样式加上些特效,所以跟大家分享一下。

在谷歌浏览器下的效果显示如下:

手机网站展示效果

 网址:http://www.kaiwo123.com/down/js_394/

主要CSS3说明:

 背景渐变:-moz-linear-gradient(top, #EF3C0F, #F84B20);与background:-webkit-gradient(linear,0 0,0 100%,from(#EF3C0F),to(#F84B20))

分别是二个不同内核浏览器的CSS样式,可以查看css3背景渐变教程,这里就不多说。

图片变形:-webkit-transform:rotate(180deg);对图片进行了180度的水平旋转,此效果在箭头图片使用时很好用。

投影:-webkit-box-shadow:0px 1px 6px #000;-moz-box-shadow:5px 2px 6px #000;

四个参数分别代表了:水平位移,垂直剩下移,糊糊大小,颜色

圆角效果:-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px

各个角的圆角半径,顺序跟margin,padding一样。