什么是移动WEB开发，我个人理解就是，将网页更好的显示在移动端的一些设置，简单来说就两点如下：

1、流式布局，即百分比自适应布局

将body下的div容器的样式设置如下：

  1. div{
  2. width:100%;
  3. }

2、viewport视口

在head标签中，添加如下：

  1. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>

设置宽度width，设置成和设备一样的宽度device-width设备宽度

设置默认的缩放比initial-scale 1.0

设置是否运行用户自行缩放user-scalable 0 1 no yes

还有其他的，如：

maximum-scale：最大缩放比，大于0的数字

minimum-scale：最小缩放比，大于0的数字

可以将width不写么？

可以，仅仅固定字体的大小，viewport的width即使设置了固定值 ,但是设置了initial-scale这个属性后，会自动把width变成device-width(即使width不设置，也会默认设置width=device-width).

针对移动WEB端的基础样式/*重置样式*/

  1. *,::before,::after{
  2. /*选择所有的标签*/
  3. margin:;
  4. padding:;
  5. /*清楚移动端默认的 点击高亮效果*/
  6. -webkit-tap-highlight-color:transparent;
  7. /*设置所有的都是以边框开始计算宽度 百分比*/
  8. -webkit-box-sizing:border-box;/*兼容*/
  9. box-sizing:border-box;
  10. }
  11. body{
  12. font-size:14px;
  13. font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/
  14. color:;
  15. }
  16. a{
  17. color:;
  18. }
  19. a:hover{
  20. text-decoration:none;/*不显示下划线*/
  21. }
    ul,ol{
    list-style:none;
    }
  22. input{
  23. border:none;
  24. outline:none;
  25. /*清除移动端默认的表单样式*/
  26. -webkit-appearance:none;
  27. }
  28. /*公共样式*/
  29. .f_left{
  30. float:left;
  31. }
  32. .f_right{
  33. float:right;
  34. }
  35. .clearfix::before,.clearfix::after{
  36. content:"";
  37. height:;
  38. line-height:;
  39. display:block;
  40. visibility:hidden;
  41. clear:both;
  42. }

 text-decoration解释

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. h1 {text-decoration: overline}
  5. h2 {text-decoration: line-through}
  6. h3 {text-decoration: underline}
  7. h4 {text-decoration:blink}
  8. a {text-decoration: none}
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <h1>这是标题 1</h1>
  14. <h2>这是标题 2</h2>
  15. <h3>这是标题 3</h3>
  16. <h4>这是标题 4</h4>
  17. <p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
  18. </body>
  19.  
  20. </html>

效果如下所示：

将a标签的样式去掉后显示如下：

  1. box-sizing:border-box;的作用
    如果不写这个样式，标签的宽度是以标签的内容开始计算的，假如标签的边框很宽，会出现左右滚动条
  2.  
  3. -webkit-tap-highlight-color:transparent;的作用
    如果不写，比如一个button被点击后，就会出现一个高亮的点击按钮后的区域，将这个区域设置为透明
  1. -webkit-appearance的解释
  1. <input type="range" name="" style="-webkit-appearance: slider-horizontal">
  2. <input type="button" value="" style="-webkit-appearance: button;width:200px;height:30px;">
  3. <input type="button" value="" style="-webkit-appearance: push-button;width:200px;">
  4. <input type="text" name="" style="-webkit-appearance:searchfield;">
  1. 显示效果如下

clear属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。 
  1.  
  1.  

移动WEB开发基础入门的更多相关文章

  1. Mr.聂 带你成为web开发大牛——入门篇（上）

    作为一名IT届的后生,当初也经历过懵懂无知的实习期,对那种无力感深有体会.在这,希望能用我这几年的开发经验,让各位即将踏入或者刚刚踏入web开发领域的新人们少走些弯路.鉴于这是入门篇,下面我就从零为大 ...

  2. [置顶] 提高生产力：Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  3. 【ZZ】Web开发的入门指导 | 菜鸟教程

    Web开发的入门指导 http://www.runoob.com/w3cnote/a-beginners-guide-to-web-development.html

  4. Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接

      Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...

  5. 提高生产力：Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  6. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  7. PHP 系列：PHP Web 开发基础

    PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集 ...

  8. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发

    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...

  9. Web开发基础知识

    综述 最近开始Java Web方面的工作,千里之行始于足下,我们在开发过程中要善于总结自己遇到的问题.善于管理一些优秀的代码片段.本文的主要内容是Web开发的基础知识,对于大牛来说可以忽略,对于初入W ...

随机推荐

  1. 【php】分享一个php转换微信、QQ、微博 特殊非主流 | 杀马特 网名的 function

    1.实现的效果: 2.将上面带有图标.非主流的文字,转换成utf-8格式,能存进去和读出来. 3.code: function emoji_encode($nickname){ $strEncode ...

  2. ios中UIWebview和asiHttprequest的用法

    原文地址为:http://www.cnblogs.com/pengyingh/articles/2343062.htmlasiHttprequest的用法 它对Get请求的响应数据进行缓存(被缓存的数 ...

  3. 向大家介绍15个漂亮的Ubuntu GDM主题

    没事向大家介绍几个Ubuntu GDM主题,希望大家喜欢,这些Ubuntu GDM主题是我找了很久的…… "GNOME Display Manager允许用户轻松的设定登录界面主题.网上有大 ...

  4. Java8 新特性之流式数据处理(转)

    转自:https://www.cnblogs.com/shenlanzhizun/p/6027042.html 一. 流式处理简介 在我接触到java8流式处理的时候,我的第一感觉是流式处理让集合操作 ...

  5. Android轻量级ORM框架ActiveAndroid入门教程(转)

    注:没有找到出处,如有侵犯,请告知 开始ActiveAndroid神奇之旅: 在AndroidManifest.xml中我们需要添加这两个 AA_DB_NAME (数据库名称,这个name不能改,但是 ...

  6. 树莓派进阶之路 (013) - 树莓派2/3 C语言使用PWM

    我手里面的是树莓派3,系统是Raspbian官方操作系统,已经安装好了wiringPi.        PWM简介:脉宽调制(PWM)是指用微处理器的数字输出来对模拟电路进行控制,是一种对模拟信号电平 ...

  7. POJ 3207 Ikki's Story IV - Panda's Trick （2-sat）

    Ikki's Story IV - Panda's Trick Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 6691   ...

  8. dataset string dataset

    DataSet ds = new DataSet(); ds.ReadXml(dataFile); Console.WriteLine(data.Length); string dataxml = d ...

  9. 【struts2】值栈（前篇）

    1 值栈是什么? 简单的说:值栈是对应每一个请求对象的轻量级的内存数据中心. Struts2中一个很激动人心的特性就是引入了值栈,在这里统一管理着数据,供Action.Result.Intercept ...

  10. 我所经历的企业中IT部门在企业内部的地位

    本月参加了一个ITIL的培训,从培训中了解很多关于企业信息化及系统业务运维的知识和方法论.通过这次培训并结合自己近6年的IT 工作经历,明白了以前很多不明白的道理. 先说说自己经历的几家公司吧,我属于 ...