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

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

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

div{

width:100%;

}

2、viewport视口

在head标签中，添加如下：

<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端的基础样式/*重置样式*/

*,::before,::after{

/*选择所有的标签*/

margin:;

padding:;

/*清楚移动端默认的 点击高亮效果*/

-webkit-tap-highlight-color:transparent;

/*设置所有的都是以边框开始计算宽度 百分比*/

-webkit-box-sizing:border-box;/*兼容*/

box-sizing:border-box;

}

body{

font-size:14px;

font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/

color:;

}

a{

color:;

}

a:hover{

text-decoration:none;/*不显示下划线*/

}
ul,ol{
list-style:none;
}

input{

border:none;

outline:none;

/*清除移动端默认的表单样式*/

-webkit-appearance:none;

}

/*公共样式*/

.f_left{

float:left;

}

.f_right{

float:right;

}

.clearfix::before,.clearfix::after{

content:"";

height:;

line-height:;

display:block;

visibility:hidden;

clear:both;

}

 text-decoration解释

<html>

<head>

<style type="text/css">

h1 {text-decoration: overline}

h2 {text-decoration: line-through}

h3 {text-decoration: underline}

h4 {text-decoration:blink}

a {text-decoration: none}

</style>

</head>

<body>

<h1>这是标题 1</h1>

<h2>这是标题 2</h2>

<h3>这是标题 3</h3>

<h4>这是标题 4</h4>

<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>

</body>

</html>

效果如下所示：

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

box-sizing:border-box;的作用
如果不写这个样式，标签的宽度是以标签的内容开始计算的，假如标签的边框很宽，会出现左右滚动条

-webkit-tap-highlight-color:transparent;的作用
如果不写，比如一个button被点击后，就会出现一个高亮的点击按钮后的区域，将这个区域设置为透明
-webkit-appearance的解释
<input type="range" name="" style="-webkit-appearance: slider-horizontal">

<input type="button" value="" style="-webkit-appearance: button;width:200px;height:30px;">

<input type="button" value="" style="-webkit-appearance: push-button;width:200px;">

<input type="text" name="" style="-webkit-appearance:searchfield;">
显示效果如下

clear属性

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

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


												


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

    
								
  1. Mr.聂   带你成为web开发大牛——入门篇（上）
		
    作为一名IT届的后生,当初也经历过懵懂无知的实习期,对那种无力感深有体会.在这,希望能用我这几年的开发经验,让各位即将踏入或者刚刚踏入web开发领域的新人们少走些弯路.鉴于这是入门篇,下面我就从零为大 ...
    
		
    2. 
						
  2. [置顶] 提高生产力：Web开发基础平台WebCommon的设计和实现
		
    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
    
		
    3. 
						
  3. 【ZZ】Web开发的入门指导 | 菜鸟教程
		
    Web开发的入门指导 http://www.runoob.com/w3cnote/a-beginners-guide-to-web-development.html
    
		
    4. 
						
  4. Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接
		
      Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...
    
		
    5. 
						
  5. 提高生产力：Web开发基础平台WebCommon的设计和实现
		
    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
    
		
    6. 
						
  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. 
						
  7. PHP 系列：PHP Web 开发基础
		
    PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集 ...
    
		
    8. 
						
  8. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发
		
    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...
    
		
    9. 
						
  9. Web开发基础知识
		
    综述 最近开始Java Web方面的工作,千里之行始于足下,我们在开发过程中要善于总结自己遇到的问题.善于管理一些优秀的代码片段.本文的主要内容是Web开发的基础知识,对于大牛来说可以忽略,对于初入W ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 使用PHP打造QQ空间神奇图片
			
    说明 你一定在qq空间遇到过这样的东西:打开一张图片,上面有你的QQ号和昵称,你觉得很神奇,是不是? 其实原理很简单,那张图片是动态生成的,上面显示的信息是根据你访问的Url获得的,然后用程序动态的画 ...
    
			
    2. 
						
  2. QQ登录整合/oauth2.0认证-03-对第二节的代码改进
			
    ---------------------------目录---------------------------------- QQ登录整合/oauth2.0认证-01-申请appkey和appid  ...
    
			
    3. 
						
  3. 时间选择器(js,css,html)
			
    忘了从哪下载的了, 整理电脑, 做个记录, 效果图: 下载链接: 链接: https://pan.baidu.com/s/1qfYkcfn8dtLFg0oniB2GHA 提取码: 2amm
    
			
    4. 
						
  4. zabbix数据库需要多大硬盘?我告诉你
			
    本次案例:100台服务器,每台服务器有30个监控项,每个监控项60秒刷新一次,需要多大的硬盘呢?众所周知,zabbix基本都是通过web配置,这些配置数据也是存放到数据库里的,但是它对硬盘容量的要求基 ...
    
			
    5. 
						
  5. C# 用timer做成服务后 timer_Tick () 为什么不执行？
			
    不能使用 窗体的 Timer,他只能在窗体中使用,服务中无法使用请使用 System.Timers.Timer类 protected override void OnStart(string[] ar ...
    
			
    6. 
						
  6. 中小研发团队架构实践之生产环境诊断工具WinDbg  三分钟学会.NET微服务之Polly  使用.Net Core+IView+Vue集成上传图片功能  Fiddler原理~知多少?  ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一）        C#程序中设置全局代理(Global Proxy)  WCF 4.0 使用说明   如何在IIS上发布，并能正常访问
			
    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
    
			
    7. 
						
  7. weblogic+eclipse插件部署多个项目
			
    第一篇博客...上班时间不多废话,直接上图. 首先环境我就不说了,装好weblogic,eclipse,以及weblogic的插件. eclipse的weblogic插件能够从eclipse上的Hel ...
    
			
    8. 
						
  8. 【转】java原理—反射机制
			
    一.什么是反射:反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语言 ...
    
			
    9. 
						
  9. 【转载，整理】Linux性能监控
			
    一. 比较全的linux性能检测网站 1. 很好的网站,原文:http://os.51cto.com/art/201402/430050.htm 监测 cpu.内存.网络.IO等命令及工具   2.  ...
    
			
    10. 
						
  10. Android开发中Context类的作用以及Context的详细用法
			
    Android中Context的作用以及Context的详细用法 本文我们一起来探讨一下关于Android中Context的作用以及Context的详细用法,这对我们学习Android的资源访问有很大 ...
    
			
    11.