什么是移动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. Electromagnetic radiation and Radio 电磁波/电磁辐射和无线电波
			
    电磁辐射,又称电磁波,是由同相振荡且互相垂直的电场与磁场在空间中以波的形式传递能量和动量,其传播方向垂直于电场与磁场构成的平面. 电磁辐射的载体为光子,不需要依靠介质传播,在真空中的传播速度为光速.电 ...
    
			
    2. 
						
  2. poj 2059 单调栈
			
    题意:求柱状图中最大矩形面积. 单调栈:顾名思义就是栈内元素单调递增的栈. 每次插入数据来维护这个栈,假设当前须要插入的数据小于栈顶的元素,那就一直弹出栈顶的元素.直到满足当前须要插入的元素大于栈顶元 ...
    
			
    3. 
						
  3. ios中uitableview上拉刷新和下拉刷新（1)
			
    在一个项目开发过程中为了更好的体验经常会用到下拉刷新更新数据,当然也伴随一些上拉加载更多数据的情况:当前比较火的EGOTableViewPullRefresh只实现了下拉功能,而没有上拉的功能.这里介 ...
    
			
    4. 
						
  4. Inside NGINX: How We Designed for Performance & Scale
			
    NGINX leads the pack in web performance, and it’s all due to the way the software is designed. Where ...
    
			
    5. 
						
  5. Swift3 JSON字符串和字典互转（JSON字符串转字典和字典转JSON字符串）
			
    直接上代码吧 1.JSONString转换为字典 /// JSONString转换为字典 /// /// - Parameter jsonString: <#jsonString descrip ...
    
			
    6. 
						
  6. leetcode770. Basic Calculator IV
			
    此题真可谓是练习编程语言的绝好材料 ! import java.util.*; class Solution { class Item { Map<String, Integer> var ...
    
			
    7. 
						
  7. 【LeetCode】174. Dungeon Game
			
    Dungeon Game The demons had captured the princess (P) and imprisoned her in the bottom-right corner  ...
    
			
    8. 
						
  8. 我收藏的技术知识图（每张都是大图）关于XX背后的知识、技术图，例如：Linux、Nginx架构、PHP知识卡、机会、HTML5移动、Android系统架构、YII架构的典型流程、Css知识表
			
    我收藏的技术知识图(每张都是大图) HTML5Linux/Unix系统设计思想读书笔记 LinuxMVCJava线程MVCSpring MVCCSS3Nginx架构VimCliCommandsPHP知 ...
    
			
    9. 
						
  9. struct timeval结构体 以及 gettimeofday()函数(转)
			
    struct timeval结构体 转载地址:http://blog.chinaunix.net/uid-20548989-id-2533161.html 该结构体是Linux系统中定义,struct ...
    
			
    10. 
						
  10. Swift 类型转换
			
    1.类型转换 1.1 隐式类型转换 如 C 语言的类型转换 1.2 显式类型转换 Swift 语言是一种强类型语言,其整型的强制类型转换就是调用了参数类型对应的整形扩展构造方法,然后通过对应扩展构造方 ...
    
			
    11.