• Web前端的职业学习路线

    一、 HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户。因此,我们必须掌握HTML的基本结构和常用标记及属性。HTML 的学习是一个记忆和理解的过程,在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果,在“代码”视图中学本质, 将各种视图的优势发挥到极致,这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味,想必对各位初学的小盆友们来说必定是极好的!在学习了HTML之后,我们只是掌握了各种“原材料”的制作方法,要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。二、 CSS的学习 CSS是英文Cascading Style Sheets的缩写,叫做层叠样式表,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的,这样就极大地提高了我们开发的速度,降低了维护的成本。同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习,我们就可以顺利完成“一幢楼房”的建设。“楼房”建设完成之后,我们可以交给用户使用,但是如果想让用户获得更佳的体验,我们还可以对“楼房”进行更深一步的“装修”,让它看起来更“豪华”一些。为了完成这个任务,我们进入第三个阶段——JavaScript的学习三、 JavaScript的学习 JavaScript是一种在客户端广泛使用的脚步语言,在JavaScript当中为我们提供了一些内置函数、对象和DOM操作,借助这些内容我们可以来实现一些客户端的特效、验证、交互等,使我们的页面看起来不那么呆板,屌丝瞬间逆袭高富帅!有么有?此时,也许你还沉浸在JavaScript给你带来的惊喜之中,但你的项目经理却突然对你大吼道“这个效果在××浏览器下不兼容,重新搞……”“不兼容?”瞬间石化了有木有?“我擦,坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊,吐血了都!”JavaScript的兼容性和复杂性有时候的确让我们头疼,还好有“大神”帮我们做了封装。接下来我们进入第四个阶段——jQUery的学习四、 jQUery的学习 jQuery 是一个免费、开源的轻量级的JavaScript库,并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持),同时现在有很多基于jQuery的插件可供选择,这样在我们实现一些丰富的动态效果时更方便快捷,大大节省了我们开发的时间,提高了开发速度,这也充分体现了其 write less,do more的核心宗旨。这个Feel倍儿爽!有么有?“豪华大楼”至此拔地而起,但是每天这样日复一日,年复一年的盖楼,好繁琐!能不能将大楼里面每一个单独部件模块化,当需要盖楼时就像堆积木一样组合在一起,这样岂不是爽歪歪?可以实现吗?答案是肯定的。这种思想在Web前端开发中也是适合的,于是乎就出现了各种前端框架,在这里推荐给大家的是Bootstrap。Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架,并且支持响应式布局。一经推出后颇受欢迎,一直是GitHub上的热门开源项目。在项目开发过程中,我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置,然后再有针对性的微调样式,这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽!五、  Web学习建议 在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析,不能够从宏观上对页面中盒子间的嵌套关系进行把握,就急于动手去做,导致页面中各元素间的关系很混乱,容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下,逐步细化”的思想,先用几个盒子将页面从整体上划分,然后逐步在盒子中继续嵌套盒子。“君子生非异也,善假于物也”,在学习的过程中还要多浏览一些优秀的网站,善于分析借鉴其设计思路和布局方法,见多方能识广,进而才可以融会贯通,取他人之长为我所用。同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面,另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码,“偷”也是一种技能!

    浏览:199 发布于:2017.08.31
  • C4D渲染单帧正常,序列有动画痕迹

    全局光照-勾选全动画模式

    浏览:107 发布于:2017.08.30
  • 一组很喜欢的水彩插画~~诡异可爱的娃娃

    浏览:50 发布于:2017.08.30
  • 日本画家-世仓铁平作品(完)

    浏览:39 发布于:2017.08.29
  • 灌水

    灌水灌水灌水灌水灌水

    浏览:33 发布于:2017.08.29
  • 中心归位脚本分享

    链接:http://pan.baidu.com/s/1slc077J 密码:z0fp

    浏览:38 发布于:2017.08.29
  • 浏览器兼容问题及处理

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。碰到频率:100%解决方案:CSS里    *{margin:0;padding:0;}备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度碰到频率:60%解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug问题症状:IE6里的间距比超过设置的间距碰到几率:20%解决方案:在display:block;后面加入display:inline;display:table;备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。浏览器兼容问题五:图片默认有间距问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。碰到几率:20%解决方案:使用float属性为img布局备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)浏览器兼容问题六:标签最低高度设置min-height不兼容问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容碰到几率:5%解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。浏览器兼容问题七:透明度的兼容CSS设置做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。/* CSS hack*/我很少使用hacker的,可能是个人习惯吧,我不喜欢写的代码IE不兼容,然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)◆IE6认识的hacker 是下划线_ 和星号 *◆IE7 遨游认识的hacker是星号 *比如这样一个CSS设置:height:300px;*height:200px;_height:100px;IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

    浏览:358 发布于:2017.08.29
  • 如何区分中式、新中式、新古典风格

    装修风格的繁多与复杂,会不会经常有种傻傻分不清楚的状况,比如:中式、新中式、新古典风格,你都能区分清楚么?不懂没关心,小编刚开始的时候也是个小白呢,今天我们就一起来对这几种风格做一个清晰的了解,以方便快速的选中自己喜好且适宜的风格吧。  中式风格 中式风格是以宫廷建筑为代表的中国古典建筑的室内装饰设计艺术风格,气势恢弘、壮丽华贵、高空间、大进深、雕梁画栋、金碧辉煌,造型讲究对称,色彩讲究对比装饰材料以木材为主,图案多龙、凤、龟、狮等,精雕细琢、瑰丽奇巧。但中式风格的装修造价较高,且缺乏现代气息,只能在家居中点缀使用。适宜人群:性格沉稳、喜好中国传统文化的人。  新中式风格  新中式风格是目前把中国传统风格揉进现代时尚元素的一种流行趋势。这种风格既保持了中国的传统,又有时代感,突破了中国传统风格中沉稳有余,活泼不足等常见的弊端。新中式风格不是纯粹的元素堆砌,而是以现代人的审美需求来打造富有传统韵味的事物,让传统艺术的脉络传承下去。区别于传统中式风格,新中式家具既符合现代家具的时代气息,又带有浓郁的中国特色、新中式家具在造型上既摆脱了中国传统明清家具的雏形,又饱含着中国传统文化的风韵,反映出中华民族朴实无华、温情大气的文化特征。本设计餐桌、餐椅、酒柜构思来源于中国传统家具的造型符号,并根据现代人的生活习惯,对传统家具造型“符号”提炼并进行适当的简化变形,整体造型以简洁的直线做基调,为了平常的使用安全,家具的角用了倒角处理,结构主要用了榫卯结合的框架结构,樱桃木是主要的使用材料。  简单的说:"新中式风格"就是在中式风格的基础上,添加了一些现代元素。作为现代风格与中式风格的结合,新中式风格更符合当代年轻人的审美观点,所以新中式风格装修越来越受到80后90后的青睐。  新古典风格

    浏览:120 发布于:2017.08.29
  • 知道这些代码,做网页不求人!

    ...普通卷动...滑动...预设卷动...来回卷动...向下卷动...向上卷动向右卷动向左卷动...卷动次数...设定宽度...设定高度...设定背景颜色...设定卷动距离...设定卷动时间字体效果...标题字(最大)...标题字(最小)...粗体字...粗体字(强调)...斜体字...斜体字(强调)...斜体字(表示定义)...底线...底线(表示插入文字)...横线...删除线...删除线(表示删除)...键盘文字... 打字体...固定宽度字体(在文件中空白、换行、定位功能有效)...固定宽度字体(不执行标记符号)... 固定宽度小字体...字体颜色...最小字体...无限增大区断标记水平线水平线(设定大小)水平线(设定宽度)水平线(设定颜色)(换行)...水域(不换行)...水域(段落)...置中连结格式(预设好连结路径)外部连结外部连结(另开新视窗)外部连结(全视窗连结)外部连结(在指定页框连结)贴图/音乐贴图设定图片宽度设定图片高度设定图片提示文字设定图片边框背景音乐设定表格语法...表格位置,置左...表格位置,置中...背景图片的URL=就是路径网址...设定表格边框大小(使用数字)...设定表格的背景颜色...设定表格边框的颜色...设定表格边框的颜色...设定表格暗边框的颜色...设定表格亮边框的颜色...指定内容与格线之间的间距(使用数字)...指定格线与格线之间的距离(使用数字)...指定表格的栏数...设定表格外框线的显示方式...指定表格的宽度大小(使用数字)...指定表格的高度大小(使用数字)...指定储存格合并栏的栏数(使用数字)...指定储存格合并列的列数(使用数字)分割视窗左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整分割左右两个框架分割左中右三个框架 指定超连结的分割视窗 指定锚名称的超连结 指定超连结 被连结点的名称.... 用来显示电子邮箱地址 粗体字 指定超连结的分割视窗 更改预设字形大小 加入背景音乐 显示大字体 闪烁的文字 设定文字颜色 显示本文 换行 设定表格标题位置... 为表格加上标题 向中对齐... 用於引经据典的文字... 用於列出一段程式码... 加上注解 设定定义列表的项目解说... 显示"定义"文字... 列表文字标签... 设定定义列表的标签 设定定义列表的项目 强调之用 任意指定所用的字形 任意指定所用的字形 设定字体大小 设定户动式表单的处理方式 设定户动式表单之资料传送方式 设定视窗的上下边界 设定视窗的左右边界 为分割视窗命名 锁住分割视窗的大小 设定分割视窗的卷轴 将html档加入视窗 将视窗分割成左右的子视窗 将视窗分割成上下的子视窗... 划分分割视窗~ 设定文字大小 标示文件资讯 加上分格线 文件的开始与结束 斜体字 调整图形影像的位置 为你的图形影像加注 加入影片 插入图片并预设图形大小 插入图片并预设图形的左右边界 预载图片功能 设定图片边界 插入图片 插入图片并预设图形的上下边界 在表单中加入输入栏位 定义查询用表单... 表示使用者输入文字... 列表的项目 ( 可指定符号 ) 跑马灯效果... 条列文字标签 自动更新文件内容 可同时选择多项的列表栏 定义不出现分割视窗的文字... 有序号的列表 定义表单中列表栏的项目 设定对齐方向 分段... 显示人名 使用原有排列... 用於引用字... 在表单中定义列表栏 显示小字体 文字加横线 用於加强语气 下标字 上标字 调整表格的宽线高度 调整资料栏位之边界 调整表格线的宽度 调整表格的高度 调整表格的宽度... 产生表格的标签 调整表格栏位之左右对齐 设定表格栏位之背景颜色 表格栏位的合并 设定表格栏位不换行 调整表格栏位之上下对齐 调整表格栏位宽度... 定义表格的资料栏位 表单中加入多少列的文字输入栏 决定文字输入栏是自动否换行... 定义表格的标头栏位 文件标题... 定义表格美一行 打字机字体 文字加底线... 无序号的列表 ( 可指定符号 )... 用於显示变数

    浏览:322 发布于:2017.08.28
  • 《仙剑诀》游戏原画

    浏览:54 发布于:2017.08.28

18

October

success
学设计来火星,开启你的时代 立即体验