学习电脑的基本知识
在当下,计算机成为一个不可或缺的工具,无论是学习、工作,还是生活中,都离不开它。,对于一位电脑初学者来说,电脑操作显得非常复杂,这其中包括了开机、软件的安装以及系统设置等许多麻烦的步骤,小编给大家介绍下学习电脑的基本知识,仅供初学者参考!
学习电脑的基本知识
1、 电脑由哪几部分组成?
从外观上看,电脑是由:主机(主要部分)、输出设备(显示器)、输入设备(键盘和鼠标)三大件组成。
从逻辑组成来看,电脑可以分为五大部分:控制器、运算器、存储器、输入设备、输出设备。
2、什么是电脑配置?如何查看电脑的配置?
电脑的配置是指电脑的硬件基本信息,如CPU型号、硬盘大小、显示器尺寸等。方法: ①桌面查看。 “我的电脑”-“属性”,可查看系统版本、CPU型号、内存大小;若点“常规”-“设备管理器”,可查看CPU核心数、硬盘型号及大小、光驱等配置;若点“高级”-“性能设置”-“视觉效果”或“高级”,可以查看视觉效果、虚拟内存等设置。
② “系统工具”查看。单击“开始”-“程序”-“附件”-“系统工具”-“系统信息”, 即可查看电脑的详细配置。
③软件查看。下载安装鲁大师、EVEREST、Windows优化大师、超级兔子等,也可查看详细配置,而且这些软件还可以对电脑的性能进行测试。
④通过控制面板查看。(略) ⑤使用cmd命令:dxdiag。(略)
3、什么是操作系统?Windows系统有哪些? 现在常用的是什么系统?
操作系统(Operating System,简称OS)是一组管理电脑硬件与软件资源的程序。 现在较常见的是由美国微软公司开发的窗口化操作系统,即Windows操作系统,如Windows 95、Windows 98、Windows 2000、Windows XP、Windows Vista、Windows 7(按低级版本到高级版本排列)。其中以Windows
XP使用最普遍、最广泛、最流行、操作最方便,不过现在新买的笔记本一般都是Win 7系统的,win7是目前最高级、功能最强大的系统(Win8也已开发出来,但应用尚不普遍),是未来市场的主流,但win7占用空间大、对电脑配置要求高(很多旧电脑都不适合装win7系统),操作没有XP方便,且兼容性没有XP好。
4、我们常说的C、D、E、F盘是什么意思?
我们常说的C、D、E、F盘其实是硬盘(Hard Disk Drive 简称HDD,又称硬盘驱动器)的分区。
一台电脑一般只有一个硬盘,容量为80-500G不等,一个硬盘可以按一个分区来用(系统默认为C盘,但不建议,原因见5),也可以分成几个区(一般为4个)来用。分成几个分区时,便会看到C、D盘??
这样各分区相互独立,互不影响,有利于数据保存。一般地,C盘为系统盘,装操作系统;D盘放软件、重要资料等;E、F盘可以放资料、电影等。
5、关于C盘的一些问题。
?C盘为系统盘,里面的资料、文件如果不熟悉不可随便移动、改名、合并、删除,尤其是Windows文件夹里的资料,否则会导致无法正常开机、死机,甚至系统瘫痪。
?凡重要文件、资料如照片、txt、doc、ppt、xls文档等,不要放在C盘(也不要放在桌面,桌面也属于C盘),常用软件、程序等也不要装在C盘,因为一旦重装系统,C盘里的资料将会全部丢失,其他盘则不受影响,所以我们应该把硬盘分成几个分区来使用。
?C盘的空余空间要留大一点,至少大于1G,否则系统会运行缓慢,如果小于100M,就会导致无法开机。
6、什么是可移动磁盘?关于可移动磁盘的一些问题。
可移动磁盘,顾名思义,就是可以移动的磁盘,讲的专业一点,就是可移动的存储设备,如U盘、有数据线与电脑连接的手机、读卡器、MP4、移动硬盘等。
?退出可移动磁盘时,要注意点桌面右下角绿色小箭头-“安全删除硬件”,然后再拔出磁盘。否则会导致磁盘里的数据错误,造成文件不完整,严重的还会造成USB设备的损坏。 ?无法识别的USB设备:
出现这种情况的原因很多,如电脑不支持、USB没插好,线路接触不良、USB接口电压不足、USB设备正在读写数据时被强行拔出等等。解决办法很多,如多换几台电脑试试、重新拔插、多换几根数据线试试等,如果还不能解决问题,那就是你的USB设备坏了,只能买一个新的了。
?现在无法停止通用卷设备: 原因有以下:可移动磁盘里有文件或程序、窗口处于打开状态;其他程序的影响;病毒的问题。所以这时最好不要强行拔出磁盘,否则可能会造成磁盘里的数据损坏、文件丢失或不可用,损坏电脑的USB接口甚至磁盘报废。
?磁盘里的文件或文件夹后面都多了一个“.exe”,且一些文件不可用,有的还不见了。这是移动磁盘中毒的症状,原因是你在有毒的电脑上插过磁盘,尤其是网吧、学校的电脑,病毒很多。解决办法: 首先在电脑上调出杀毒软件,扫描磁盘,清除病毒。然后在“文件夹选项”中“显示所有文件和文件夹”,并显示“隐藏受保护的操作系统文件”
(详见15),这时丢失的文件会显示。如发现所有中毒文件都变成了灰色的(即处于隐藏状态),那就比较麻烦了:要使用cmd命令修改属性。
?从电脑上往可移动磁盘里拷贝资料时,系统弹出“磁盘被写保护,请去掉写保护或使用另一张磁盘”对话框,怎么办? 解决方法: 修改注册表。
?可移动磁盘里的文件全部丢失,但磁盘容量却显示被占用。 解决办法:检查-“自动修复文件错误”和“扫描并试图恢复坏扇区”,然后删除隐藏的FOUND.000文件夹。
7、什么是任务管理器?它有什么作用?
又称Windows任务管理器,是在Windows系统中管理应用程序和进程的工具。它可以查看当前运行的程序和进程及对内存、CPU的占用,并可以结束某些程序和进程,此外还可以监控系统资源的使用状况。
“关机”菜单下可以完成待机、休眠、关闭、重新启动、注销、切换用户等操作; 应用程序下显示了所有当前正在运行的应用程序,如我的电脑、浏览器、正在打开的文件夹、文档等, 当某个应用程序无响应时,你可以在这里点击“结束任务”直接将其关闭;
进程下显示了所有当前正在运行的进程,包括应用程序、后台服务等,如QQ.exe(腾讯QQ)、360SE.exe(360安全浏览器)、Thuder.exe(迅雷)等; 性能下可以看到CPU和内存、页面文件的使用情况。卡机、死机、中毒时, CPU使用率会达到100%。
(注): 电脑卡机、死机了怎么办? 首先不要有任何操作,等数分钟以后,一般会恢复正常;如果还是卡机,调出任务管理器,在“应用程序”下关闭无响应的程序; 或者在“进程”结束“EXPLORER.EXE”或“explorer.exe”,这时桌面上什么也没有了,再次调出任务管理器-“进程”-
“新建任务”-输入“explorer.exe”,确定即可,这时桌面又回来了,卡机的问题也就解决了。如果任务管理器也调不出了,那就只有重启或者强行关机。
8、什么是非正常关机?非正常关机有哪些后果?
按windows的专门说法,基本上只要不是通过选择开始-关闭计算机的关机都可以认为是非正常关机(也称非法关机),如强行关机(在系统死机,不再对键盘和鼠标产生任何反应时,按住主机电源按钮3-5秒关闭主机),突然断电(包括用户直接关闭插座板和突然停电),病毒程序导致系统自动关机。
经常非正常关机危害不小: 极易对硬盘造成损伤。极易给系统制造许多错误及冗余数据。非正常关机后,电脑再次启动时会在进入系统前扫描硬盘,如“Check file system on D……”,检查硬盘是否有坏的扇区,导致开机时间延长,启动缓慢。
所以,学会正确的关机方法十分重要: 首先,关闭所有正在运行的程序,然后单击“开始”-“关机”,等待电脑自动关闭。待机箱电源灯熄灭后,关闭显示器,再断开外围设备的启动开关,最后断开总电源开关。不过一般不会出现前两种情况。
(注:) 夏天雷雨天气时要注意断开主机、显示器及其它外部设备外接电源,以免雷击。 9、什么是文件名?什么是文件扩展名?常见的文件扩展名有哪些?什么是文件路径? ?为了区分不同的文件,必须给每个文件命名:
①文件名通常由主文件名和文件扩展名组成, 二者之间由一个小圆点隔开。
②文件名可以是汉字、数字、英文字母(不区分大小写)、特殊符号$#&@()- [ ] ^ ~等及几者的任意组合。
③文件名中允许使用空格,但不允许使用下列字符(英文输入法状态) < > /
: " * ? ?文件扩展名是操作系统用来标志文件格式的一种机制。通常来说,一个扩展名是跟在文件名后面的,由一个分隔符分隔。 文件扩展名可以帮助计算机使用者辨别文件的类型,也可以帮助计算机将文件分类,并标识这一类拓展名的文件用什么程序去打开。
常见文件的扩展名有.doc(Word文档)、.xls(Excel电子表格)、.ppt(Powerpoint演示文稿)、.txt(文本文档)、.rar(压缩文件)、.mp3(音乐)、.wma(音乐)、.wav(音乐)、.lrc(歌词文件)、.rmvb(视频)、.rm(视频)、.mp4(视频)、.3gp(视频)、.swf(flash动画文件)、.jpg(图片)、.gif(图片)、.bmp(图片)、.exe(程序,可执行文件)。
?路径:文件路径即文件在电脑中的存放位置。把鼠标直接放在上面即可自动显示,或在文件上单击右键,从属性里查看。注意下载文件的路径,软件、程序安装的路径,计算机等级考试上机时也要特别注意路径。
此外要注意:同一路径下不能有相同的文件夹名;同一路径下在文件扩展名相同时不能有相同的主文件名。
10、常用软件有哪些?
我们经常使用的软件主要有;
①杀毒软件、防火墙,如金山毒霸(金山网镖)、瑞星(瑞星个人防火墙)、江民(江民防火墙)、诺顿、卡巴斯基、360杀毒、可牛杀毒等; ②浏览器,如IE、搜狗、360、遨游、世界之窗、腾讯TT等;
③聊天软件,如QQ、51彩虹、MSN、飞信、校内; ④输入法,如微软拼音、搜狗、QQ拼音、极品五笔等;
⑤音频播放器,如酷我音乐盒、酷狗、千千静听、QQ音乐等;
⑥视频播放器,如暴风影音、迅雷看看、QVOD快播、KMPlayer、RealPlayer、微软的Windows Media Player、UUSee网络电视、PPS网络电视、PPLive网络电视 、QQLive网络电视等; ⑦压缩软件,如WinRAR、好压(HaoZip)等;
⑧下载软件,如迅雷5、迅雷7、Web迅雷(网页迅雷)、快车(FlashGet)、风行、电驴(eMule)、QQ旋风;
⑨电脑检测、优化软件,如鲁大师、EVEREST、Windows优化大师、超级兔子、金山卫士、360安全卫士、QQ软件管理等; ⑩图片浏览、处理软件,如Windows图片和传真查看器、Photoshop、光影魔术手(光影看看)、可牛影像(可牛看图)、美图美秀等; (11)办公软件,如国产金山WPS、微软Office办公软件。 11、关于office软件。
Office全称Microsoft Office,是一套由微软公司开发的办公软件,有office97、office2000、officeXP、office2003、office2007(2006年发布)、office2010(2010年
4月发布)等多个版本(office2013也即将面世),每一个版本都包括Word、Excel 、PowerPoint、FrontPage、Access、Outlook、Publisher等多个组件,其中以word、excel 、ppt最为常用。
office97、2000、XP是早期版本,目前使用较少,而且功能也很有限, office 2003是目前使用人数最多、最流行、最方便、使用最广泛的版本,office 2007和2010则是最新版本,相对2003,强能强大得多,但是占用空间比较大、对电脑配置要求较高、安装比较麻烦。
12、关于桌面的一些问题。
?什么是快捷方式?
快捷方式是Windows提供的一种快速启动程序、打开文件或文件夹的方法,它是应用程序的快速连接,扩展名为“。lnk”,其显著标志为图标上有一个黑色小箭头。一般说来,每安装一个程序都会自动在桌面创建一个快捷方式(也可以通过右键“发送到”-“桌面快捷方式”来创建)。桌面上的快捷方式可以删除,对程序不会有任何影响。此外,为了美观,也可以把快捷方式的小箭头去掉(方法:略)。
?桌面上的图标、文件、资料等不要放得太多,太多的桌面图标会减慢系统开机的速度。因为Windows每次启动并显示桌面时,都需要逐个查找桌面快捷方式的图标并加载它们,图标越多,所花费的时间当然就越多,开机的速度也就越慢。
?关于桌面“显示属性”:
桌面单击右键-“属性”,即可对显示器的显示属性进行设置。显示属性一般有“主题”、“桌面”、“屏幕保护程序”、“外观”、“设置”5个选项卡,其中“主题”提供了几种不同风格的操作界面,每一种主题的桌面背景、活动窗口的颜色,电脑上自动显示的字体大小以及我的电脑、我的文档、回收站、网上邻居的图标等各有不同;“桌面”则可以设置桌面壁纸以及桌面壁纸的显示方式;“屏幕保护”可以保护显示器,防止电脑因无人操作致使显示器长时间显示同一个画面而导致老化、缩短显示器寿命。
此外,如勾选“在恢复时使用密码保护”,可以在你暂时离开电脑时防止别人偷窥你的隐私;“外观”可以设置窗口字体、颜色、形状等;“设置”可以设置显示器的分辨率。
13、常用快捷键有哪些?
快捷键又叫快速键或热键,指通过某些特定的按键、按键顺序或按键组合来完成一个操作。 快捷键很多,就平常用得较多的来讲,主要有以下:Ctrl+A(全选)、Ctrl+C(复制)、Ctrl+X(剪切)、Ctrl+V(粘贴)、Ctrl+Shift(输入法切换)、Shift
(中英文切换)、Ctrl+Alt+A(截图)、Ctrl+Alt+Del(任务管理器)、F1(帮助)、F2(改名)、F5(刷新)、Esc(取消当前任务,退出电影全屏或游戏时常用)。
14、如果不小心删除了电脑或可移动磁盘里的资料,怎么办?
如果有清空回收站,可在回收站里“还原”。如清空了回收站,可用专门软件恢复,如Recuva就是一款很好的免费数据恢复软件。
15、如果不想让别人看我的电脑上的资料,怎么办?
这里介绍2种方法:
?直接隐藏。这种方法方便快捷,不过对电脑高手而言形同虚设。
方法:在要隐藏的文件或文件夹上单击右键-“属性”,“属性”打勾。双击“我的电脑”,在窗口工具栏中点“工具”-“文件夹选项”-“查看”-“不显示隐藏的文件和文件夹”,打勾。(此外,在这里还可设置是否“隐藏已知文件类型的扩展名”)。
?加密:①对于office文档,打开“另存为”对话框-“工具”-“常规选项”,输入打开
文件时的密码。 ②下载一个加密软件,如宏杰文件夹加密软件,对隐私资料进行加密。但这种方法解密比较麻烦,特别是有多个子文件夹的文件,而且还存在忘记密码和软件出错问题。 ③使用cmd命令进行加密。这种方法比较保险,但是相当麻烦,而且一般的人不知道这些命令。
16、关于电脑的温度问题。
这里所说的电脑温度是指电脑硬件的温度,如CPU、显卡、硬盘、主板等。 一般说来,这些硬件的温度值都有一个范围,但夏天的温度会很高,电脑运行久了或者没有很好的散热就会超出这个范围,如:CPU正常情况下温度在45-65℃或更低,
高于75-80℃则要检查CPU和风扇间的散热硅脂是否失效、更换CPU风扇或给风扇除尘,部分CPU会自我保护,温度过高会自动降频(一般为标准频率的一半)。如果达到90多度甚至更高,系统会自动关机。
显卡一般是整个机箱里温度最高的硬件,常规下50-70℃(或更低),独立显卡的温度相对而言要比集成显卡高,尤其是在夏天,很容易达到80-90度甚至更高,导致显示器花屏,无法正常显示。
主板温度正常情况下20-60℃左右(或更低),是硬件中温度最低的。具体视不同的主板品牌、芯片组而定,高于70℃可能要考虑增加机箱风扇或打开机箱。
硬盘温度一般情况下30-60℃左右,硬盘经常是机箱里温度最低或第二低的硬件。如果超过70℃则可以考虑加装机箱风扇。
笔记本的温度高于台式机,尤其是在夏天,室外气温越高电脑硬件的温度越高。所以台式机夏天一般敞开机箱“裸奔”,最好是拿一台风扇对着机箱吹,笔记本则不宜上网太久,或者买一台风扇垫在底下。
所有的硬件检测数据仅供参考,以实际使用中的具体运行效果为准,可以通过手触
摸、开机箱观察转速等方法确认硬件状态,只要不频繁死机,不自动重启,系统不报错均而认为正常范畴。
一、计算机操作者必须掌握四个方面的知识。一是对计算机的基本结构及工作原理大概有所了解;二是必须掌握管理计算机硬件和软件资源的DOS操作系统的基本命令;三是掌握一种文字处理软件,就目前来看,选用WS文字处理软件,即可满足一般工作需要;四是在基本上掌握了以上三个方面知识的基础上,选学一至二门计算机高级语言,对初学者来说,选学BASIC或dBASEⅢ较为适合。
二、由简到繁,循序渐进。学习计算机知识,不能急于求成,要从头学起,先掌握最基本的东西,然后在实际应用中不断拓宽知识面。要从计算机由哪几个部件构成、各部件是怎样连接的、如何开关机开始,直到掌握一门计算机高级语言,自己可以编写简单应用程序为止。
DOS操作系统是管理计算机硬件和软件资源的系统软件,学习它必须掌握最基本的操作命令。DOS操作系统中最基本的操作命令如下:
①FORMAT磁盘格式
②DIR列目录
③TYPE显示文件内容
④COPY拷贝文件
⑤REN文件改名
⑥DEL删除文件
⑦CD改变目录
⑧MD建立目录
⑨RD删除目录
初学者熟练掌握以上几个命令的功能、格式及使用方法即可,其它命令在今后实际操作中会慢慢体验和掌握的。
在计算机应用中,处理文件或编写程序都离不开文字处理软件,学习一种文字处理软件是十分必要的。在学习文字软件之前,应掌握至少一种汉字输入方法,汉字输入方法较多,而以拼音输入法较为简单,初学者应选学拼音输入法。学习文字处理软件应主要掌握如何进入编辑系统;怎样移动光标;如何删除和插入字符;如何删除一行和插入一行;如何将编好的文件存盘;怎样退出文字编辑系统,其它功能在实际操作中去慢慢掌握,逐渐学会掌握文字处理软件的所有功能。
在掌握以上知识的基础上,开始选学一门高级语言。学习高级语言,应首先对所学语言由哪几个文件构成,该语言对硬件和软件有什么要求,即运行环境有所了解。然后开始学习命令和函数,力求掌握每一条命令和每一个函数的功能。对常用命令要反复学习,反复上机,熟练掌握。之后要利用所学知识编写简单程序,并上机试运行。你编写的程序可能顺利实现,也可能不能通过,若为后者,你可按照屏幕提示进行修改或请教别人帮助你共同解决,一定要使亲自编写的程序在机器上正常运行,这样才会提高你学习计算机知识的兴趣,激发学习热情。通过编写和修改程序,进一步加深对所学语言的了解,为日后开发计算机应用程序打下良好基础。
三、多上机,勤上机,才能巩固所学知识。通过上机,可以亲眼目睹每条命令或每个程序在计算机上实现的过程和最终结果,对不正确的命令知道其错误信息和正确的命令格式,这样不仅可以增强感性认识,而且可以加深对命令功能及格式的了解
1学习电脑的几个主要方法
学习电脑主要靠自学
电脑对初学者,老师引进门很重要,但以后就要靠自学。自学能力对于计算机学习尤为重要,原因就是计算机发展奇快,掌握了自学方法,具备了自学能力,才能应付计算机日新月异的发展形势。有人说,"自学,谈何容易!"我说别的学科自学可能较难,而计算机却相对容易一些。为什么这样说呢?因为计算机越来越"平易近人",让人能够看得见、摸得着。能够让人动的东西就好学,比如几岁的娃娃就敢去开电视机和调台,能够去控制VCD等,难道电视机和VCD机不是高科技产品吗?计算机作为学习对象,理论知识和实践环境是统一的,学习内容和进度自己可以掌握,自学当中有弄不懂的东西,大多可以通过上机加以解决。因此,我说它易于自学、便于自学。当然,有一本便于自学的指导书就更好了。
2学习电脑要勤动手
电脑这个学科实践性特强,不动手是学不会的`。计算机从诞生那天起就被人蒙上了神秘的面纱,许多专著像"天书",让初学者望而生畏。但是,很多小孩子为什么能把计算机用得那么好呢?窍门在哪儿呢?动手!一动手就会感到"原来如此"、"没有什么了不得"!这样,就会越学越轻松、越学越有兴趣。边动手边动脑是计算机学习的基本模式,可以自然而然地摈弃那种死记硬背、"纸上谈兵"的学习模式,既动手又动脑,形成生动活泼的学习氛围。动手,还能强化理论联系实际的优良学风、培养实干精神。
3学习电脑要注重应用
在学习计算机知识与技能的过程中,要想到"用","用"到自己的学习、工作和生活中。作为智力工具,作为人脑的延伸物,让计算机帮助我们思维、论证、决策,以提高分析问题和解决问题的能力。参加信息学奥林匹克活动的孩子们为什么能在国际大赛中摘取金牌,就是他们学以致用,在"用"中加深理解,把计算机变成了得心应手的工具。人们常说"熟能生巧",泛指学用一般工具,对学用计算机这种智力工具,就不仅仅是"生巧"了,而且还"益智",即有利于开发智力。计算机中浓缩着人类智慧的结晶,集成着现代人的思维方式和科学方法,通过人脑指挥电脑、电脑帮助人脑的过程,会使人越来越聪明,越来越能干。在新世纪大智大勇,富有创造才能的人,一定是会使用电脑帮自己工作的人。
学习电脑要上网查看资料
计算机教育不仅仅是学科教育,更重要的是一种文化教育。目前,分布在五大洲的几千万台计算机已经联到了互联网上,形成了一种新的文化氛围;会不会使用网络成为衡量现代人文化水准的一个新尺度。在网络文化氛围中,获取信息、处理信息、交流信息的能力十分重要,这也是现代人的一种基本能力,从某种意义上看,"网络就是计算机"。学习网络方面的知识与技能是十分重要的,谁不充分认识这件事的重要性,将来就会追悔莫及。另一方面,文化不等于文明,网络上存在着很多很有用的东西,但也有糟粕,怎样区分有用的信息和无用的信息,识别香花与毒草的能力,也是现代人的一种基本能力。在上网这件事上,"因噎废食"不可取,打点"预防针"却是必要的。
新手使用电脑的十大守则
一、制作系统启动盘:电脑拿到手,第一件事应该立即制作一张"能够驱动光驱的系统启动盘"。一旦系统中毒、损坏或要重新安装操作系统时,少了这张小小的软盘,一切都无法进行。普通系统启动盘制作很简单,在格式化软盘的时候带个 /S 的参数就行了,但是如果要将光驱的驱动程序也随同这张启动盘一起启动,那就必须要费一些工夫,以前正版 Windows95
都带有附赠的一张启动盘,光驱驱动程序也保存在其中,但是似乎无法适合各种电脑,常常有找不到光驱的情况发生,不过,现在 Windows98 制作的系统启动盘,已经可以值得信赖,甚至驱动 SCSI 规格的光驱也没问题。
二、小心保存驱动程序盘:电脑搬回家,一定有一大堆的说明书、保修单,以及存有各类硬件驱动程序与应用软件的软盘或光盘,其中最重要的莫过于这些软盘和光盘,这些都是安装整理系统时候必须要用到的文件,少了它们,您的电脑无法驱动周边硬件或其他储存设备,形同残废,千万不要将它们随地放置,或是移作他用,要仔细一一核对检查,是否有遗漏,之后分类归纳集中保存。普通软盘片容易受潮失效,最好将其中的软件备份到硬盘或其他储存设备上,然后把原盘放入防潮箱中保存。。
三、临危不乱:电脑在操作时突然没有反应,并不表示一定"当"掉了,一般人通常会激动起来,拼命的乱敲键盘和鼠标,没等几秒钟就按下 Ctrl + Alt + Del
三键,甚至按Reset按钮强迫电脑重新启动,结果通常能够挽救得了的数据也因此灰飞烟灭。正确的做法是:遇到画面冻结,按两下按键或鼠标,然后等三到五分钟,顺便观察电脑机壳上的硬盘指示灯状况,如果指示灯偶尔还在不断闪烁,则表明电脑还没昏迷,只是暂时的丧失理智而已,稍待一会儿应该能恢复正常;如果指示灯在三到五分钟内不断亮起或不亮,才可能是凶多吉少的征兆,此时强迫重新开机才算恰当。。
四、勿把"忠臣"当"妖怪":有一些工具软件,最常见的是杀毒软件或者系统维护程序,在开机之后,会自行启动,在您看不见的地方敲敲打打,修修补补,偶尔时间到了,也会蹦到屏幕桌面上来个大扫除,此时作为新手可不要以为它们是不速之客,立即终止它们的运行,甚至以为是中毒而强迫关机,这样会导致不可预测的后果。除了上述两种类型的软件之外,现在也有许多的程序喜欢搞这种地下活动,猛不其然蹦出个信息说如何如何,这种设计出发点固然是为使用者的方便着想,但搞太多的话,一则消耗电脑的系统资源,二则各种类型的软件在后台同时运行,恐怕也会发生系统冲突,使系统不稳定,如果可以的话,除了一些必要的驱动程序以及杀毒软件之外,其余程序一律取消开机自动运行功能,需要的时候再请出来施展身手。
五、不要随便安装软件:作为电脑新手,这一条应该列为最重要的原则,向电脑中安装软件,看似单纯,其实等于系统被重装一次,牵一发而动全身,而且软件所执行的功能越接近硬件层级,危险性就越大,首号危险人物,应是安装额外的驱动程序,这些驱动程序或可以加速网络速度,或可以降低处理器的工作温度,好用则好用,一旦安装不成功,或与其他软件相冲突,作为一名新手就只有干瞪眼的份。
六、说"NO"比说"YES"保险:如同险恶的社会一样,当电脑屏幕出现一个对话窗口,说明了一大堆文字之后,要您选择按下"YES"或是"NO"之时,如果您不知道这项选择到底是做什么的时候,回答"NO"是比较保险的做法,因为回答"YES",系统通常会主动的改变一些设置,这些您无法预测的结果,不论是好是坏,都会造成困扰,还不如先说"NO",待慢慢了解问题的原委之后再作改变也不迟。
七、不要乱删文件:不要因为 Windows95/98 的屏幕桌面上有个回收站,就兴奋的将许多文件都放到里面"试试看",
第一,您丢的进去,不一定能够及时的将它们恢复原位;
第二,有些文件进了回收站,就再也回不来了。而且,凡是扩展名为 EXE、COM、BAT、SYS、DLL之类的文件,通通都是动不得的文件,还有,对于操作系统大本营的"Windows"这个文件夹,请您不要轻易删除其中的任何文件,否则即使开得了机,屏幕上也会出现一大堆缺东少西烦死人的提示信息。
八、求人帮助要有原则:遇到一些问题自己解决不了,一定要向别人请求帮助了,这时您必须要做好以下这些工作:首先,将您电脑的硬件配置,CPU的种类、内存容量、所有硬件产品的品牌规格,软件配置,什么操作系统?使用哪些软件?最近安装了哪些软件?发生问题时的详细描述,当机时正在执行什么工作、网络连接不上时的状态等等,统统详细的记录下来,并向求救对象详述,这样才能让对方及时掌握重点,对症下药,一句"为什么我的电脑不能看VCD?"是不会引起任何反应的。
九、养成使用逻辑思维的思考习惯:这是能否成为电脑高手的很重要的一个方面。所谓有果必有因,电脑的任何反应,都是有指令下达,都是有软硬件在运作,尝试开始了解电脑系统各组件与软件之间的互动关系,当一个错误发生时,通盘思考导致错误的各种可能原因,然后依次排除,一个一个的试试看,这是进步的开始,长期的积累必然会从量变引起质变,当然,您也要不断的充实自己的电脑知识。
14十、练好基本功夫:系统基本操作、中文输入法(智能ABC,全拼等)、基本文书处理软件(写字板,记事本)、基本绘图软件(画图)、网络相关软件(拨号网络、浏览器、电子邮件收发)这五大入门神功务必演练一遍,请注意,这些软件通通在您的WINDOWS系统中,不必另外寻找,然而它们都是电脑操作的基本功,将基本功练好以后,您会发现,用电脑其实也有快马轻蹄、悠游自在的境界喔。
【学习电脑的基本知识】相关文章:
学习电脑的基本知识和操作01-26
电脑正确打字基本知识10-23
新手学电脑入门基本知识11-13
防范电脑病毒基本知识11-16
实用电脑小技巧图片的基本知识03-27
少儿声乐学习基本知识09-16
电脑的学习方法10-27
少儿声乐学习基本知识问答01-27
电脑入门学习规划01-28
}
css/css3常用样式
CSS修改选中文字的颜色
html代码:
第一段文字选中效果
第二段文字选中效果
css代码:
.p1::selection{background:red;color:#fff;}
.p2::selection{background: black;color:red;}
选中文字后的效果如图所示:
强制文本显示
单行显示语法:white-space:nowrap;让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下
div{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
多行文本最后省略号:
div{
display: -webkit-box;
-webkit-line-clamp:2;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
这里用到了文本溢出显示省略号的,即设置溢出文本显示为省略标记:
语法:text-overflow:text-overflow:clip
ellipsis
ellipsis-word(css3新增加的);
clip:表示直接裁切溢出的文本;
ellipsis:表示文本溢出时,显示省略标记(...),省略标记代替最后一个字符;
ellipsis-word:表示文本溢出时,也是显示省略标记(...),不同的是,省略标记代替的是最后一个词)
zoom:1的原理和作用
语法:zoom:normal
取值:
兼容性:
例子:
zoom_CSS参考手册_web前端开发参考手册系列
zoom:normal
zoom:normal
zoom:5
zoom:5
zoom:300%
zoom:300%
谷歌与IE浏览器结果如图所示(Firefox不支持):
参考地址:http://www.css88.com/book/css/properties/user-interface/zoom.htm
Zoom属性是IE浏览器的专有属性, 它可以设置或检索对象的缩放比例。
在平常的css编写过程中,zoom:1能够比较神奇地解决ie下比较奇葩的bug。
譬如外边距(margin)的重叠,譬如浮动的清除,譬如触发ie的 haslayout属性等等。
(重点)当设置了zoom的值之后,所设置的元素就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
ie下子元素浮动时候父元素不随着自动扩大的问题,使用下面的CSS写法:
.父元素 {
overflow: auto; zoom: 1
}
css ie6、ie7中overflow:hidden无效解决办法
产生原因:当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时,父元素的overflow:hidden 属性就会失效。
解决办法:我们在IE 6、7 内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。解决这个bug很简单,在父元素中使用 *position:relative; 即可解决该bug。
表格语法
表格位置,置左表格位置,置中背景图片的URL=就是路径网址设定表格边框大小(使用数字)设定表格的背景颜色设定表格边框的颜色设定表格暗边框的颜色设定表格亮边框的颜色指定内容与格线之间的间距(使用数字)指定格线与格线之间的距离(使用数字)指定表格的栏数设定表格外框线的显示方式指定表格的宽度大小(使用数字)指定表格的高度大小(使用数字)... | 指定储存格合并栏的栏数(使用数字)... | 指定储存格合并列的列数(使用数字)
设置表格中的td宽度固定table-layout:fixed
table{table-layout:fixed;}
语法:table-layout:automatic
fixed
inherit
automatic:默认。列宽度由单元格内容设定。
fixed:列宽由表格宽度和列宽度设定。
inherit:规定应该从父元素继承 table-layout 属性的值。
合并表格边框border-collapse:collapse
table{border-collapse:collapse;}
语法:border-collapse:separate
collapse
inherit
separate:默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit:规定应该从父元素继承 border-collapse 属性的值。
例如:
table{border-collapse:collapse;}
table, td, th{border:1px solid black;}
CSS text-transform控制文本的大小写
描述:text-transform 属性控制文本的大小写。
语法:text-transform:none
capitalize
uppercase
lowercase
inherit
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
text-stroke
[ text-stroke-width ]:设置或检索对象中的文字的描边厚度[ text-stroke-color ]:设置或检索对象中的文字的描边颜色
text-stroke(文本描边)和text-fill-color(文本填充色)注意点:
目前这两个属性只有webkit内核的Safari和Chrome支持,例如:
.box{-webkit-text-stroke: 3.3px #2A75BF;}
text-fill-color:颜色值,和color属性差不多都是文字的样式;
注意:同时使用text-fill-color和color属性,text-fill-color将覆盖color属性的颜色值;
text-fill-color可以使用透明值,即:text-fill-color:transparent
text-shadow
.box{text-shadow:0px 0px 0px #333333;}
属性值依次:水平方向位移(支持负值)、垂直方向位移(支持负值)、模糊半径、阴影颜色text-shadow对同一个text,可设置多个阴影,与box-shadow类似,使用逗号","分割,前一个设置效果在后一个设置效果之上。box-shadow 参考:http://www.cnblogs.com/lhb25/...
box-shadow
为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。全面的写法:
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
}
参考地址:http://blog.csdn.net/freshlov...
letter-spacing字符间距
letter-spacing 属性增加或减少字符间的空白(字符间距)。例如: letter-spacing: 2px;
textarea去掉右侧滚动条,去掉右下角拖拽
css中透明度兼容代码
div{filter: alpha(opacity=80);opacity:0.8;}
根据input的type来控制css样式
1.用css中的type选择器
input[type="text"]{ background-color:#FFC;}
2.用css的expression判断表达式
input{ background-color:expression(this.type=="text"?'#FFC':'');}
3.用javascript脚本实现(觉得没必要,省略...)
css3设置字体
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
网页字体设置
font-family:'YourWebFontName';
src:url('YourWebFontName.eot'); /* IE9 Compat Modes */
src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf')
format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}
参考地址:《css学习笔记 - 网页中导入特殊字体@font-face属性详解》
css强制性换行
div{
word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/
}
CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效,不识别)
:nth-child(2)选取第几个标签,“2可以是你想要的数字”:nth-child(2n)选取偶数标签,2n也可以是even:nth-child(2n-1)选取奇数标签,2n-1可以是odd:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”
css3实现背景颜色渐变
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
第一个参数:设置渐变的起始位置第二个参数:设置起始位置的颜色第三个参数:设置终止位置的颜色
IE 浏览器IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
第一个参数:渐变起始位置的颜色第二个参数:渐变终止位置的颜色第三个参数:渐变的类型0 代表竖向渐变 1 代表横向渐变
css3的RGB颜色和HSL颜色, IE8不识别rgba写法
其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);
如果需要设置透明背景 则可以用到他们:
background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);
不使用opacity的原因是:opacity使里面的元素也透明了,而上面的不会。background-color:rgba(0,0,0,0.5),此写法解决opacity带来的元素也透明问题,但IE8低版本浏览器不支持。
初始化em,u的斜体
em,u{font-style: normal;}
媒体查询功能
一般写法:
@media screen and (max-width: 960px){
body{
background: #000;
}
}
应该有人会发现上面这段代码里面有个screen,他的意思是在告知设备在打印页面时使用衬线字体,在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时,你可以直接这样写:
@media (max-width: 960px){
body{
background: #000;
}
}
其中css2的媒体查询:
我们想知道移动设备是不是纵向放置的显示屏,可以这样写:
我们把第一段的代码也用CSS2来实现,让它一样可以让页面宽度小于960的执行指定的样式文件:
但是上面这个方法,最大的弊端是他会增加页面http的请求次数,增加了页面负担,我们用CSS3把样式都写在一个文件里面才是最佳的方法。
下面的写法是实现尺寸等于480px:
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
/*自己添加的样式*/
}
其中对于-webkit-min-device-pixel-ratio作如下解释:
-webkit-min-device-pixel-ratio为1.0
所有非Retina的Mac
所有非Retina的iOS设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3
Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
-webkit-min-device-pixel-ratio为2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X
样式实现三角形
div{
position:absolute;
left:50%;
bottom:0;
margin-left:-10px;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed dashed;
border-color:transparent transparent #71151c transparent;
}
css3水平垂直居中
div{
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。
现在规范中支持的效果有:
grayscale 灰度 值为0-1之间的小数
sepia 褐色 值为0-1之间的小数
saturate 饱和度 值为num
hue-rotate 色相旋转 值为angle
invert 反色 值为0-1之间的小数
opacity 透明度 值为0-1之间的小数
brightness 亮度 值为0-1之间的小数
contrast 对比度 值为num
blur 模糊 值为length
drop-shadow 阴影
用法是标准的CSS写法,如:
-webkit-filter: blur(2px);
使用方法:(配合动画使用)
.jaguar-con-show img.jaguar-con-imglast{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.jaguar-con-show img.jaguar-con-imglast{
-webkit-filter: blur(3px) brightness(.6);
-moz-filter: blur(3px) brightness(.6);
-o-filter: blur(3px) brightness(.6);
-ms-filter: blur(3px) brightness(.6);
filter: blur(3px) brightness(.5);
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
/*border: 3px solid #000;*/
}
CSS pointer-events
pointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events,基本上可以将它设置为auto,这是正常的行为,而“none”是一个有趣的属性。如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件,而是让事件穿过该元素到达下面的元素.
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性,IE6/7/8/9都不支持,Opera在SVG中支持该属性但是HTML中不支持。
禁止button按钮的点击与禁止a标签的跳转
pointer-events:none禁止掉鼠标事件(css3属性)禁止button按钮的点击:
button禁止点击的样式:
button{cursor: not-allowed;}
所以button用到了disabled="disabled"与样式cursor: not-allowed
禁止a标签的跳转行为:
链接
禁用链接
样式:
a{pointer-events: none;cursor:not-allowed}
参考地址:http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate但是用到键盘tab键的时候出现a标签可以跳转,实现键盘tab也禁止a标签跳转 参考地:http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
样式改变单词的大小写
首字母大写:text-transform:capitalize全部大写:text-transform:uppercase全部小写:text-transform:lowercasecase
this is a test!!!
首字母大写
全部大写
全部小写
html title属性内容换行方法
a.直接填写title内容时候“回车键”换行b.使用html title换行代码使用代码换行共两种代码,均可实现html标签内title内容显示时换行。换行代码符合分别为:“
”和“
”“
”拼写:&(and符号,键盘数字键7一起&)+ #(井号)+ 10(阿拉伯数字十)+ ;(小写分号)“
”拼写:&(and符号,键盘数字键7一起&)+ #(井号)+ 13(阿拉伯数字十三)+ ;(小写分号)以上符合数字输入均必须英文半角模式输入。使用时候,在需要换行地方任选一种(组)换行符号代码即可。
移动端定宽布局,安卓上文字变大了解决办法
例如:
那么解决办法:给文字区外面的div设最大高度100%。
HTML5:input file控件限制上传文件类型
input file控件限制上传文件类型文件类型中间用,分开html和htm这样的要写成两个
如果限制上传文件为图片类型,如下:
去掉input聚焦,点击a标签,出现的外虚线框
input:focus{outline: none;}
CSS3 vw让overflow:auto页面滚动条出现时不跳动
传统的实现方式:
body { overflow-y: scroll; }
css3实现方式:
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或者:
.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先,.wrap-outer指的是居中定宽主体的父级,如果没有,创建一个(使用主体也是可以实现类似效果,不过本着宽度分离原则,不推荐);然后,calc是CSS3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在background-position上);最后,100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。于是,calc(100vw - 100%)就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0)!左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!
参考地址:http://www.zhangxinxu.com/wor...
***以下内容将主要是在移动端使用的多***
meta相关知识
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
忽略将页面中的数字识别为电话号码
忽略Android平台中对邮箱地址的识别
当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
移动端viewport模板
viewport通用
viewport模板 - target-densitydpi=device-dpi,android 2.3.5以下版本不支持
自己做移动端活动的时候常如下方式:
viewport通用
移动端问题总结
移动端如何定义字体font-family
中文字体使用系统默认即可,英文用Helvetica,为什么呢,首先先看一下各平台的主流字体支持情况(来源网络,没有验证)!!!
各系统的默认字体和常用字体:(表格稍后补上)需要详细相关信息,可查看《兼容PC手机端字体》文章
结论
各个手机系统有自己的默认字体,且都不支持微软雅黑
如无特殊需求,手机端无需定义中文字体,使用系统默认
英文字体和数字字体可使用 Helvetica ,三种系统都支持
代码:
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}
移动端touch事件(区分webkit 和 winphone)
当用户手指放在移动设备在屏幕上滑动会触发的touch事件
以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用
TouchEvent
touches:屏幕上所有手指的信息
targetTouches:手指在目标区域的手指信息
changedTouches:最近一次触发该事件的手指信息
touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息
参数信息(changedTouches[0])
以下支持winphone 8
MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action:none;}可以阻止默认情况的发生:阻止页面滚动
MSPointerUp——当手指离开屏幕时触发
移动端click事件有300 ms的延迟响应问题
历史原因:
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to
zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS
safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
解决方案:
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
解决300ms延迟的问题,也可以通过绑定ontouchstart事件,加快对事件的响应
清除IOS系统手机对input等表单元素的默认样式
.css{-webkit-appearance:none;}
伪元素改变number类型input框的默认样式
input[type=number]::-webkit-textfield-decoration-container {
background-color: transparent;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
CSS美化Placeholder提示信息的样式兼容
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
手机对Placeholder提示信息都基本带有默认的样式,兼容各种浏览器的使用方式:
.css::-webkit-input-placeholder {color: #777;}
/* WebKit browsers */
.css:-moz-placeholder {color: #777;opacity: 1;}
/* Mozilla Firefox 4 to 18 */
.css::-moz-placeholder {color: #777;opacity: 1;}
/* Mozilla Firefox 19+ */
.css:-ms-input-placeholder {color: #777;}
/* Internet Explorer 10+ */
webkit表单输入框placeholder的文字能换行么
ios可以,android不行~
在textarea标签下都可以换行~
取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
-webkit-tap-highlight-color :当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。
详细参考:《-webkit-tap-highlight-color》
关闭手机端横屏或者竖屏自动调整字体大小功能
ios使用-webkit-text-size-adjust禁止调整字体大小:
body{-webkit-text-size-adjust: 100%!important;}
text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能。
android使用以下代码,该接口只在微信浏览器下有效:
/**
* 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
* 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示
* 仅供参考
*/
(function(){
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
});
} else {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
}
})();
禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
适用于:链接元素比如新窗口打开,img元素比如保存图像等等取值:
none:系统默认菜单被禁用
inherit:系统默认菜单不被禁用
详细参考:《-webkit-touch-callout》
禁止ios和android用户选中文字
.css{-webkit-user-select:none}
当然pc端现在也在用禁止用户选中文字,兼容写法:
.test{
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
}
当然有时候pc上也直接写到html代码中,如:
选择我试试,你会发现怎么也选择不到我,哈哈哈哈
代码解释:
IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到user-select:none 的效果;Safari和Chrome也支持该标签属性;
直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable="on" 来达到user-select:none 的效果;unselectable 的另一个值是 off;
除Chrome和Safari外,在其它浏览器中,如果将文本设置为-ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为-ms-user-select:none; 的区域文本;
对应的脚本特性为userSelect。
打电话发短信,发邮件的怎么实现
打电话:打电话给:0755-10086
发短信:winphone系统无效,发短信给: 10086
发邮件:10086@qq.com
详细了解mailTo:移动web页面给用户发送邮件的方法
(邮件含文本、图片、链接)
移动端实现类似hover效果
移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活移动端css的active效果。
直接在body上添加ontouchstart,同样可激活移动端css的active效果,比较推荐这种方式,代码如下:
html代码:
css代码:
.btn:active{background-color: red;}
开启硬件加速
解决页面闪白,保证动画流畅
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
取消input在ios下,输入的时候英文首字母的默认大写
如何阻止windows Phone的默认触摸事件
winphone下默认触摸事件事件使用e.preventDefault是无效的
目前解决方法是使用样式来禁用
html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */
屏幕旋转的事件和样式
window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式;
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}
样式:
//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}
IE10(winphone8)表单元素默认外观如何重置
禁用 select 默认下拉箭头
::-ms-expand 适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
select::-ms-expand {
display: none;
}
禁用 radio 和 checkbox 默认样式
::-ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}
禁用PC端表单输入框默认清除按钮
当表单文本输入框输入内容后会显示文本清除按钮,::-ms-clear 适用于该清除按钮的修改,同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}
Retina 显示屏的问题
retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个
在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍
那么,前端的应对方案是:
设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为:200px*200px,那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px
.css{font-size:20px}
移动端设置滚动条的默认样式
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}
为移动端页面中滑动滚动条的时候,添加惯性效果的方法
首先设置:
div{height:100%;overflow-y:auto;}
但是实际在 iPhone 上测试时,发现 Safari(也包括很多 iOS App 内置浏览器使用的 UIWebView)竟然完全禁用掉了著名的「惯性滚动」效果。
但解决方法是有的,令人吃惊的是还非常简单:只有一条 CSS 属性即可解决问题:
body{-webkit-overflow-scrolling:touch;}
有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题,实际上可以通过一条 CSS 属性把页面加载到内存来解决:
body{-webkit-transform:translate3d(0,0,0);}
注:如果设置了-webkit-overflow-scrolling: touch;那么在IOS系统下对于改变滚动条的默认样式将失效,即上面一条所述。
移动端实现控制文本行数
div{
display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
移动端使用flex让内容平均分配
htm代码:
css代码:
nav{display:-webkit-flex;display:flex;}
a{-webkit-flex:1;flex:1;}
更新于2017.06.02,逐步更新中...
}