移动设备上的“hello word”

最新推荐文章于 2023-01-02 21:04:36 发布

diebi9395

最新推荐文章于 2023-01-02 21:04:36 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/css3China/p/3691820.html

版权

时常有人在网上或者在技术群里问：移动端网页怎么做啊！？
且不说移动端网页怎么做，html、css你会么？PC端的网页你做过么？
如果回答是：会，做过。
那么，移动端网页就没你想象的那么难了!

记得当初我做第一个移动端网页的时候，还是把淘宝的移动端h5页面扒了下来，看了看他的html5的代码和css3代码！
看了之后，觉得新鲜但是又不那么陌生！
新鲜是因为我看到了一些以前没有看到过的代码，不陌生是因为除了部分代码，其他代码和PC段代码并无两样。
记得当初看到的那段新鲜代码：

html5:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta content="yes" name="apple-mobile-web-app-capable">
 6 <meta content="yes" name="apple-touch-fullscreen">
 7 <meta content="telephone=no" name="format-detection">
 8 <meta content="black" name="apple-mobile-web-app-status-bar-style">
 9 <meta property="wb:webmaster" content="c51923015ca19eb1">
10 <title>淘宝网触屏版</title>
11 <meta name="author" content="m.taobao.com">
12 <meta name="copyright" content="Copyright ©m.taobao.com 版权所有">
13 <meta name="revisit-after" content="1 days">
14 <meta name="keywords" content="">
15 <meta name="description" content="">
16 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
17 </head>

css3:

 1 /* 浏览器重置样式 [[*/
 2 body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,menu{margin:0;padding:0;}
 3 article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}
 4 h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;font-weight:100;}
 5 input,textarea,select,button,label{vertical-align:middle;}
 6 img,fieldset,input[type="submit"]{border:none;}
 7 input{outline:none;background:transparent;vertical-align:top;}
 8 input::-ms-clear{display:none;}
 9 table{border-collapse:collapse;border-spacing:0;}       
10 button{cursor:pointer;border:none;}
11 textarea{word-wrap:break-word;resize:none;-webkit-box-shadow:none;}
12 input,textarea,select{-webkit-appearance:none;outline:none;}
13 input:-moz-placeholder{color:#C4C4C4;}
14 ::-webkit-input-placeholder{color:#C4C4C4;}
15 select::-ms-expand{display:none;}
16 ::-ms-check{display:none;}
17 body{font-family:"微软雅黑";-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0.4);overflow:hidden;font-size:1em;line-height:1em;background:#1C1F26;}
18 body,html{height:100%;}
19 a{text-decoration:none;color:#333333;-webkit-touch-callout:none;}
20 a:hover{background-color:;}
21 a,button,input{-webkit-touch-callout:none;}
22 /* 浏览器重置样式 ]]*/

戳我，你戳我啊！淘宝触屏版

如果还觉着不过瘾，再戳戳以下网站，偷窥偷窥她们吧！
美团
 安居客
 大众点评网
 赶集网
 天猫

打开调试器，慢慢偷窥她们吧！

如果觉着还是看着不过瘾，搜索m.XXXX.com或者3g.XXXX.com（XXX为某著名网站域名），自己试探吧！

哪个神不是说过么：站在巨人的肩上！（Standing on Shoulders of Giants！）
站在巨人的肩上干嘛？不是撒尿，而是借助已有的，用来强大自己。

回过头来，淘宝触屏版的代码值得我们学习的还是head标签里边的那一大堆meta和浏览器重置的基本样式。
有空我们再聊聊他们吧！

先给大家做个简单的移动端“hello word”的demo吧！

点我 hello word

转载于:https://www.cnblogs.com/css3China/p/3691820.html

diebi9395

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动设备上的“hello word”

时常有人在网上或者在技术群里问：移动端网页怎么做啊！？且不说移动端网页怎么做，html、css你会么？PC端的网页你做过么？如果回答是：会，做过。那么，移动端网页就没你想象的那么难了!记得当初我做第一个移动端网页的时候，还是把淘宝的移动端h5页面扒了下来，看了看他的html5的代码和css3代码！看了之后，觉得新鲜但是又不那么陌生！新鲜是因为我看到了一些以前没有看到过的代码，不陌生是...
复制链接

扫一扫