如图所示，新建了一个空白的html页面，拆分视图
设置页面body样式信息
【-webkit-touch-callout: none-webkit-text-size-adjust: none】
是防止用户复制和保存图片,只支持iphone、ipad、android
设置页面的宽度和高度
【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199)top:352pxmin-height:550px_height:550pxwidth:640px}】
【关键点】
新建一个div标签，样式使用page-content
在段落标记<p>里面输入文字信息，这里天使就不排版了，主要是教大家方法，然后保存网页
将网页上传到服务器目录下
输入网站域名，在电脑上访问可以看见如图所示效果，只有左侧部分
我们使用手机访问，得到如图所示效果，就不会像直接书写html代码一样文字很小
完整代码
【
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <title>不落泪的天使</title></head><body ><div style="margin: 0pxpadding: 5pxborder: 1px solid rgb(204, 204, 204)max-width: 100%font-size: 16.363636016845703pxfont-family: 宋体line-height: 26.666667938232422pxbackground-color: rgb(248, 247, 245)word-wrap: break-word !importantbox-sizing: border-box !important"><span style="max-width: 100%word-wrap: break-word !importantbox-sizing: border-box !importantcolor: rgb(57, 57, 57)font-family: 微软雅黑font-size: 14px">不落泪的天使</span></div></body></html>
】
1、学html5，然后自己编程，如果有html的基础，其实不会太难；2、去html5页面制作平台，如vxplo、wix、maka.im都可以做html5的手机页面，不过wix现在没有中文网站；vxplo功能很齐全，但同时 *** 作很复杂，一般人不会使用；maka.im通过模板组合、添加图文的方式制作，适合刚入门的童鞋。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）