什么是移动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. Oracle常用存储过程写法
			
    写在前面 这段时间工作最长接触到的就是Oracle数据库,不论查数据,还是统计.运行job,都离不开PL/SQL 存储过程,下面就整理下经常用到的知识. 一.Function函数 函数是执行非查询语句 ...
    
			
    2. 
						
  2. 类型“System.Data.SQLite.SQLiteParameter”在未被引用的程序集中定义。必须添加对程序集“System.Data.SQLite, Version=1.0.66.0, Culture=neutral, PublicKeyToken=db937bc2d44ff139”的引用
			
    出现这个问题是 你的系统是64位 同时 dll生成的 any cpu 应该换为 x86
    
			
    3. 
						
  3. NoSQL生态系统（nosql ecosystem）
			
    Unlike most of the other projects in this book, NoSQL is not a tool, but an ecosystem composed of se ...
    
			
    4. 
						
  4. SpringBoot开发项目，引入JPA找不到findOne方法
			
    写在前面 开发SpringBoot的DAO层之后,去测试的时候,发现findOne()这个方法找不到了,查看了对应的表字段名和实体类的属性都一致 网上有通过降低版本解决的, 方式太牵强. 还有一种方式 ...
    
			
    5. 
						
  5. <转>浅谈 Boost.Asio 的多线程模型
			
    本文转自:http://senlinzhan.github.io/2017/09/17/boost-asio/ Boost.Asio 有两种支持多线程的方式,第一种方式比较简单:在多线程的场景下,每个 ...
    
			
    6. 
						
  6. LC_ALL=C的含义
			
    在很多的shell脚本中,我们经常会看见某一句命令的前面有一句“LC_ALL=C” SAR_CMD="LC_ALL=C sar -u -b 1 5 | grep -i average &qu ...
    
			
    7. 
						
  7. MySQL导入SQL文件过大或连接超时的解决办法/在navcat执行sql卡在0%
			
    set global max_allowed_packet=100 000 000;set global net_buffer_length=100000;SET GLOBAL  interactiv ...
    
			
    8. 
						
  8. 在iOS开发的Quartz2D使用中实现图片剪切和截屏功能
			
    原文  http://www.jb51.net/article/75671.htm 图片剪切一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中先把图片绘制到view上.按照原始大小 ...
    
			
    9. 
						
  9. App Icon Gear App 图标制作工具
			
    1.App Icon Gear 简介 App Icon Gear(原名 AppIconMaker)不仅可以创建 App 图标.启动图 LaunchImage,还可以生成自定义尺寸的图标集(Image  ...
    
			
    10. 
						
  10. 关于varchar(max), nvarchar(max)和varbinary(max)
			
    在MS SQL2005及以上的版本中,加入大值数据类型(varchar(max).nvarchar(max).varbinary(max) ).大值数据类型最多可以存储2^30-1个字节的数据.这几个 ...
    
			
    11.