怎么制作手机网页 如何制作一个手机html页面

怎么制作手机网页 如何制作一个手机html页面,第1张

这个还用说,其实道理和PC端网站是一样的道理。因为现在用户慢慢转向移动端,所以拥有一个移动网站也是很必要的。

其实自助建站自己做网站都是不成问题了,不管你懂不懂代码,都可以做的。

首先,注册一个凡科帐号,这是开始建站的第一步

第二,登录帐号后,会有建站、互动、微传单三块,一个帐号都可以用,你选择“网站建设”这一块;

第三,进入后台之后,选择自己喜欢的手机网站模板

第四,就可以开始设计自己的网站,排版、栏目、文字、图片等设计。第五,无论是否完全做好,先保存,再退出。第六,网站做好后,可以为网站添加需要的功能,拖拽就可以实现添加。

1、打开百度,在百度上搜索:易企秀,然后点击搜索,在搜索的结果中点击进入易企秀的官方网站。

2、进入后,先登录自己的账号,可以直接用QQ微信登录即可,登录后就可以开始制作自己的手机网页微场景了。

3、首先点击【我的场景】接着点击【制作场景】,接着会进入场景模板选择界面,里面有很多免费的模板。

4、可以在模板中心选择一个自己需要的点击,直接套用模板,也可以选择自己创建一个空白页面

5、进入后就可以根据自己的需要,将模板里面的文字图片和音乐替换成自己需要的即可,如图所示。

6、还可以给自己的手机网页添加背景音乐,动画效果,跳转链接,特效组件等等。

看天使经验的人应该都是有一定编程基础的人,天使就不一一介绍怎么打开vs2008了。点击【文件】【新建文件】【常规】【HTML页面】【打开】

如图所示,新建了一个空白的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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7307309.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存