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

在电脑上制作的html页面用手机打开的话会很大,不能适应手机的屏幕大小,网页上的文字也会比较小,天使研究了好一阵子才知道如何制作一个手机html页面,下面分享给大家。

操作方法

  • 01

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

  • 02

    如图所示,新建了一个空白的html页面,拆分视图

  • 03

    设置页面body样式信息 【-webkit-touch-callout: none; -webkit-text-size-adjust: none;】 是防止用户复制和保存图片,只支持iphone、ipad、android

  • 04

    设置页面的宽度和高度 【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199); top:352px; min-height:550px;_height:550px;width:640px; }】

  • 05

    【关键点】 新建一个div标签,样式使用page-content

  • 06

    在段落标记<p>里面输入文字信息,这里天使就不排版了,主要是教大家方法,然后保存网页

  • 07

    将网页上传到服务器目录下

  • 08

    输入网站域名,在电脑上访问可以看见如图所示效果,只有左侧部分

  • 09

    我们使用手机访问,得到如图所示效果,就不会像直接书写html代码一样文字很小

  • 10

    完整代码 【 <!DOCTYPE html><html>    <head>    <meta http-equiv="Content-Type" content="text/html; charset=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: 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); max-width: 100%; font-size: 16.363636016845703px; font-family: 宋体; line-height: 26.666667938232422px; background-color: rgb(248, 247, 245); word-wrap: break-word !important; box-sizing: border-box !important;"><span style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important; color: rgb(57, 57, 57); font-family: 微软雅黑; font-size: 14px;">不落泪的天使</span></div></body></html> 】

(0)

相关推荐

  • 怎么将微信聊天记录从一个手机迁移到另一个手机

    平时用微信交流,如果一旦换手机,会很麻烦,如果要将手机中的微信记录,直接导入另外一部手机,就需要用到微信的聊天记录迁移功能,下面就介绍一下微信怎么将聊天记录从一个手机迁移到另一个手机 这种方法的前提是 ...

  • QQ浏览器设置手机网页显示及用手机看百度经验

    看的朋友们都有一种感觉,好像和电脑看差很多,而且还不能评论,那么怎么弄才能让手机和电脑一样可以看完整的网页呢?要怎么设置呢? 步骤1:设置手机网页浏览 01 打开手机上的QQ浏览器,点击手机功能键,在 ...

  • 如何将手机通讯录导入另一个手机

    随着时代的发展,手机的更新速度也日益加快,那我们在换新手机的时候如何将旧手机的通讯录导入到新手机中呢?让我们一起来看看吧! 操作方法 01 首先打开手机"设置". 02 找到&qu ...

  • 安卓手机能跟踪另一个手机吗?

    小编可以告诉你,当然可以 1.一般手机一个牌子都能用防丢找到 2.不是一个牌子可以用手机管家等软件做到 目前确定一部手机的位置,需要被确定位置的手机安装有拥有该功能的软件,且手机本身有GPS功能,两者 ...

  • 如何快速将一个手机通讯录导入另一个手机?

    简单的介绍下如何快速的将一个旧手机里的通讯录.短信.通话记录等导入到另一个新手机,看完本文你秒秒钟就会了. 操作方法 01 1.第一步:首先是将新旧手机都下载好同步助手. 02 2.第二步:先将旧手机 ...

  • 自学手机网站开发教程 手机网页设计和制作

    操作方法 01 如今有不少人通过手机上网,"哪里有人群,哪里就有发展",这也导致互联网正在向移动端发展,所以现在有很多人想学手机网站开发,可是要想手机网站开发,首先要有一份全的手机 ...

  • 教你这样进行手机网页加速!

    手机网页浏览会出现缓慢.卡顿的情况,很多朋友已经习以为常了.但是不知道有没有人想过给手机浏览器做一个安全扫描,像保护手机系统那样检测一番,然后清理浏览器的垃圾以及其他有害的因素呢?手机浏览器加速原来可 ...

  • 如何制作手机网页

    手机网页在生活中应用得越来越频繁,这与人们的生活习惯有关系,一只小小的手机可以在生活中做很多的事情,因此,手机网页的需求就越来越大了.其实,制作一个手机网页并不难,我们就来体验一下! 操作方法 01 ...

  • 百度手机输入法皮肤制作教程制作一个属于自己的

    百度手机输入法跟主打轻巧与简洁,与臃肿的搜狗手机输入法形成了鲜明对比,但很多朋友又割舍不下搜狗手机输入法数量众多又好看的皮肤。别担心,我们自己做一个属于自己的百度手机输入法皮肤。 百度手机输入法皮肤制 ...