什么是移动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. Ubuntu16.04下添加打印机FujiXerox CP116w
			
    今天要打印一份北马的成绩单, 不想重启机器了, 在Ubuntu下尝试添加打印机, 最后成功了, 记录一下 打印机型号是FujiXerox CP116w, 通过WIFI连接的, 在Ubuntu16.04 ...
    
			
    2. 
						
  2. spring事务管理——编程式事务、声明式事务
			
    本教程将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. 先决条件 本教程假定您已经掌握了  ...
    
			
    3. 
						
  3. 手动搭建latex公式渲染服务器
			
    latex公式渲染有两种类型,一种是HTML形式展示公式,另一种是图片形式展示公式.如果是HTML形式展示公式,渲染是在前端完成的,一般会比较缓慢.知乎采取的方式是以图片形式展示公式.codecogs ...
    
			
    4. 
						
  4. maven groupID 和 ArtifactID的区别与作用
			
    GroupID是项目组织唯一的标识符,实际对应JAVA的包的结构,是main目录里java的目录结构. ArtifactID就是项目的唯一的标识符,实际对应项目的名称,就是项目根目录的名称.一般Gro ...
    
			
    5. 
						
  5. VirtualBox虚拟机增加CentOS根目录容量 LVM扩容
			
    对于目前的网络开发者来说,比较好的搭档就是Win7+VirtualBox+CentOS的组合,既可以发挥Linux强大的网络服务功能,也可以有效的隔离各项服务拖慢系统,影响系统的运行,对于新手来说可以 ...
    
			
    6. 
						
  6. 为什么现在很多年轻人愿意来北上广深打拼，即使过得异常艰苦，远离亲人，仍然义无反顾？ 谈谈程序员返回家乡的创业问题 利基市场就是那些不大不小的缝隙中的市场 马斯洛的需求无层次不适合中国。国人的需求分三个层次——生存、稳定、装逼。对应的，国内的产品也分三个层次——便宜、好用、装B。人们愿意为这些掏钱
			
    信念.思考.行动-谈谈程序员返回家乡的创业问题 昨天晚上在微博上看了篇 <为什么现在很多年轻人愿意来北上广深打拼,即使过得异常艰苦,远离亲人,仍然义无反顾?>,有些话想说. 感觉很多人的担 ...
    
			
    7. 
						
  7. eclipse导入class文件
			
    右键src文件夹->build path->config build path->library->add class folder->create new folder ...
    
			
    8. 
						
  8. 还没被玩坏的robobrowser(5)——Beautiful Soup的过滤器
			
    背景 本节的知识还是属于Beautiful Soup的内容. Beautiful Soup的find和find_all方法非常强大,他们支持下面一些类型的过滤器. 字符串 最简单的过滤器是字符串.在搜 ...
    
			
    9. 
						
  9. 跟我学SharePoint 2013视频培训课程——签出、签入文档（9）
			
    课程简介 第9天,怎样在SharePoint 2013中签出.签入文档 视频 SharePoint 2013 交流群 41032413
    
			
    10. 
						
  10. SharePoint 2013创建WCF REST Service
			
    SharePoint 2013为开发者提供了丰富的REST API,方便了我们在客户端操作List中的数据.当然我们也可以在SharePoint 2013中创建自定义的REST Service,比如通 ...
    
			
    11.