响应式网页设计的七个技巧
响应式网页设计的七个技巧
响应式网页设计已经是如今当之无愧的标准配置了,我们需要响应式的技术来应对日渐碎片化的屏幕尺寸,网页设计师也力图做好这件事情。而网页中的图片和图库的响应式设计,也是其中的重点难点。它们是网页中最常见,也是最直观可见的元素。打开一个漂亮精致的网站,然而其中的图片和图库看起来怎么都和页面不匹配,这样的情况恐怕是最让人抓狂的了。
响应式网站
如果要设计好响应式的图片和图库,今天天极响应式网站专家聊聊成都响应式网页设计的七个技巧,兴许能给你提供一个明确而系统的思路。它们并不涉及到具体代码实现,更多牵涉到设计过程和处理手法,做好了这些工作,具体实现起来就不难了。
1、考虑高宽比桌面端的图片浏览体验和移动端是完全不同的,这一点毋庸置疑。对于绝大多数的网站而言,图片展示的位置都很相近,大同小异。而设计师的任务,是要确保网站随着屏幕和设备变化的时候,图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。这个时候,就要始终牢记图片的高宽比,并且始终控制高宽比不会改变。回到桌面端网页中,大幅的背景图或者置于页面顶端的图片看起来非常漂亮,可是当它切换到移动端设备中的时候,首先屏幕比例和方
向就不同了,那么它是否还那么好看呢?图片被缩小之后,信息的呈现是否会丢失?它是否会被拉伸?这个时候,图片的高宽比的控制就显得特别重要了。控制原始图片不被拉伸,同时让图片所展示出来的部分的高宽比能够尽可能合理地匹配对应的屏幕,这样也就不必担心响应式断点过多,导致你需要上传过多的图片。
2、尺寸和比例的一致性响应式设计就不能不说断点。为了照顾不同的屏幕,我们需要将图片裁剪成不同比例不同尺寸的大小,而这也直接影响着整个设计与开发的设计流程。许多人仅仅只是将图片上传到CMS系统中,就希望它能以完美的样式呈现出来。这不现实。每张图片都应当被裁剪为合理的尺寸,并且放置在理想的位置上,确保它们会以用户期望的样子呈现出来。后端可能会在这件事情上花费相当的时间和精力,但是这些努力是值得的。
3、使用轮播图或者图库轮播图控件和图库控件是网站中最常见的图片载体,并且也可以更加自如的管理图片。尤其是当你使用了那些比较著名或者适配范围比较广的第三方控件的时候,控制图片元素的粗活重活基本上都会被这些控件接手过去。不过,我们之前提到的图片长宽比和尺寸大小的控制同样也是要注意的,否则一样会让网页的展示效果变尴尬。除此之外,你还需要什么场合使用什么样的控件。如果你拥有若干高品质的图片或者需要推荐特定的文章和专题,那么你需要使用幻灯片轮播图控件。如果你拥有大量有待展示的图片,可以缩小展示也不存在可读性问题的话,不妨使用图库类的控件来展示。许多作品集类的网站常常会使用图库控件。
4、尽量避免使用图片说明(Captions)虽然图片说明能够让你的图片的信息更加丰富,但是它会非常直接地影响到网页的运作。尽量避免使用它们,如果实在是需要,尽量用其他的方式来呈现。图片的Caption属性加入之后,确实能在桌面端拥有良好的渲染效果,但是小屏幕上常常问题不断。为了不让这些细小的可用性的问题影响用户体验,尽量避免使用就好了。因为这种小问题而让用户无法忍受并且离去,并不划算。
5、图片和视频混用要小心如果网站中同时存在图片和视频类的多媒体,用户和设计者应该都是能够接受的,甚至许多用户已经习惯了这样的设计。但是要注意的是,即便是在同一个页面中,也尽量不要让图片和视频同时存在于同一个控件或者区块中。也许这样看起来很炫酷,也许一部分图片和视频能够搭配起来,但是更多的视频和图片很难在尺寸上保持一致,导致总会有一部分图片或者视频会留下空白和间隙。最好的方案还是将两者分开展示,避免了媒体属性和尺寸上的差异与冲突。这几乎适用于任何设计元素,而图片和视频尤甚。
6、削减不必要的元素虽然轮播图和图库控件非常好用,但是许多设计师常常会往其中添加许多垃圾的内容,最常见的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮。这样的例子不胜枚举。一般情况下,用户其实是熟知如何同轮播图这类控件进行交互的。除非你的设计和我们的认知有着巨大的差异,以至于必
须使用其他的导航方式来引导用户。尽量只保留用户需要的元素,把事情简单化,不要给予太多的选择。其实简单化之后的设计可以提升你的转化率。
7、只使用高素质的图片虽然这个道理不言自明,但是它仍然必须反复提醒。如果你没有高素质的图片,那么还不如干脆不要用图片得了。现在,高素质、高分辨率的图片比以往任何一个时代都显得必需和重要。用户不会花费时间去看一个图片素质低下的网站。大家的屏幕都已经是视网膜屏幕了,低素质的图片在这样的屏幕上显得更加无法直视。既然大家都在追求顶尖的视觉效果,那么高素质图片无疑是必需品。当然,找图片也是一项非常关键的技能。结语我们都希望能够搭建出让用户能够操作、愿意使用的优质网站,而优秀的图片是其中最关键的元素,绝对不能疏忽。当你的网站还处于想框图绘制阶段的时候,最好将多种设备的展示效果都纳入考虑中来,虽然这样看起来有点麻烦,但是会让后期省心很多,从长远来看是相当值得的。
论网页设计的发展趋势和未来前景
论网页设计的发展趋势和未来前景 作者:刘斌专业班级:资源0802班学号:0120808280228 【摘要】 本文介绍了网页设计的发展趋势,中国的网络市场存在着巨大的潜力。在互联网越来越深入到生活中每一个角落的年代,网页的表现形式更加多样化。网页设计师是现代社会不可或缺的职业,是未来非常有发展前景的工作,只要有能力就可以得到非常诱人的薪水,必须全面提升自己特别是专业的技能,要立志做一个有竞争力的网页设计师。 【关键词】 网页设计网站策划网页设计师工资发展趋势未来前景 【正文】 美国市场调研机构ComScore NetWorks提供的报告显示,2007年1月,全球15岁及以上使用互联网的人数达到了7.47亿,同比增长10%。ComScore发现,美国互联网用户达到了1.53亿,依然是全球网民最多的国家,但增长率仅为2%,中国网民数量仅次于美国,为8670万,但增长率却高达20%。通过以上数据,我们不难发现中国的网络市场存在着巨大的潜力,那么如何把握住这个机遇,培养出合格的人才,就成了我们这些高校专业教师需要考虑的问题,我认为作为一名有竞争力的网页设计师,不但要做到有美术修养,还要做到懂编程,这样一来我们的网页设计师就可以既能胜任前台的设计工作又能胜任后台的编程工作了。 一、网页设计的发展趋势 网页设计是成功网站平台建设成败的关键内容之一。在中国真正普及全职的网站设计员严格讲是2002年,在之前更多是由技术性人才担任此项职位,随着中国互联网环境转晴,网站的高竞争使网站策划的地位突显。我们可以看到,许多真正处于领军性地位的网站平台90%具有一个特点——网站策划思路清晰合理,界面友好,网站营销作用强;因此专业的网站设计是未来网站成功的重要条件之一。 在未来,网页设计呈现以下5大趋势: 1.具备市场销售意识,且掌握扎实技术的专业网站策划人才成抢手货
网页设计美工工作总结报告
网页设计美工工作总结报告 时光匆匆,xx年马上离我们远去。回首这走来的一年,似乎去年 的圣诞歌还在耳边萦绕,实是感叹时间的飞逝,让自己的脚步显得如 此匆忙。可细细品味,却也发觉自己在不轻易间成熟了很多。不知不 觉中,充满希望的xx年就伴随着新年伊始临近。回首xx年的工作, 有硕果累累的喜悦,也有遇到困难和挫折时惆怅。 在医院我所从事的岗位是网络美工,工作主要涉及到网站的广告 设计,广告图片替换,页面策划修改;网站的页面制作,样式修改,后 期维护等不同工作。能够说凡是需要突出我们网络部及网站整体形象 的地方,就需要美工参与工作。 设计工作是痛苦并着快乐,每当面临重大的设计任务时充满了压力,开始搜集各种资料(包括文字的、图片的),接下来寻找设计灵感,沉思、焦灼,经过痛苦煎熬,终于有了满意的创意时倍感轻松。每当 经过艰苦的磨砺,自己的劳动成果得到大家的肯定时,便是工作中的 快乐!充满了快意。 下面是我过去一年来工作回顾,工作主要围绕以下内容: 1、官方网站改版。 2、激光美容网制作与设计。 3、中韩整形美容网站相关样式修改,日常维护,广告设计,内容 更新。 4、活动专题,与项目专题的设计。根据文案提供的内容来设计策 划专题活动。平均 3天/个。 二、经验总结: 作为一个网页美工除了要求网页三剑客,ps这些必会的软件之外,还要求对html用得熟练,对asp或php,以及jsp要有初步的了解。
1.表达一定的艺术效果,特别是医疗网站,视觉效果很重要。一 个成功的网站应该把网页设计得吸引人,同时又要传达设计思想和情感。网页作为一种媒体,它必须具有一定的艺术感染力,一个平淡无奇、杂乱无章或毫无美感的网页很难会有浏览者喜欢,更不说去浏览 它的内容了。 2.使页面结构清晰可读性强经常能够看到这样的页面,上面堆砌 了很多内容,却没有考虑它的空间框架,让人无法知晓那些内容才是的。没有流畅的视觉流程,这是典型的没有注意到编排清晰度、可读 性的表现。 3.实现不同的功能:在网络这条信息高速公路上,网页最主要的 功能就是一种传递信息的手段。所以,它一切内容都是为了这个目的 而服务。都要围绕这个中心实行设计。然后,要实现这个功能,网页 的美工设计和内容都必须有针对性。所谓针对性,就是指对不同类别 的网页要求采用不同的美工艺术效果。 4.网页的内容: 网页设计人员美化网页,增加网页设计的艺术感,都是为了网页 设计的内容服务的。一般来说,网页的几项基本内容:标题、网站标志、主体内容、导航、广告栏等。 5.确定网站的风格: 整形美容行业的网站或者专题,浏览用户群体,一般都是爱美人士。年龄大约在20~45岁之间,对于这类群体,页面设计得浪漫并有 艺术感。 6.确定网页之间的链接关系: 在网站的部体规划列出来后,就必须要考虑各个网页之间的关系,是星型、树形、网型还是直线链接!
响应式网页设计的基础
By Emily P. Lewis翻译: 亓光宇 在过去的一年里,如果你不是住在深山里,就一定知道响应式网页设计,它已经成为当今的主流。响应式设计是Ethan Marcotte提出的,概念很简单:使网站的页面布局能够根据不同设备和分辨率进行自动调整。 当我第一次了解到它时,我就立即被迷住了--特别是media queries,我马上就用到我自己的个人兼职网站上。我甚至写了一篇文章介绍《如何使用CSS3 Media Queries响应不同设备》(强烈建议在读这篇文章之前读一下)。 在第一次尝试使用media queries后,我很快意识到我忽略了一个响应式设计的重点:灵活性。 挑战固定宽度 我的个人兼职网站使用了固定宽度的设计,所有的width, margin和padding都使用了固定的像素值。我一般都会这样写网站,因为对我来说它更 简单,更快速。 但当我试图在我的固定宽度的网站上应用media queries的时候,那些简单和快速的优势全部都消失了。为什么?因为对于固定宽度的设计,我需要非常细致的定义media queries并在CSS文件中调整每个单独的像素值,基本上,我需要为每一种可能的分辨率都设计一个全新的布局,繁琐!慢!!还不好玩!!! 我有幸听了Marcotte先生在《In Control 2011》的演讲,他讨论了响应式设计的理论和最佳实践,诸如fluid grid(流体网格)实现方式。 流动且灵活的公式 流动式布局是灵活的。由于width,margin和padding(甚至字体和图像)使用了百分比和em(相对长度单位),因此页面布局会随着浏览器的窗口变化而变化。随着分辨率的改变,布局会成比例地进行调整,实现过程中不需要用到任何media query。 这对于实现响应式网页设计来说简直太美妙了。如果我有一个基于比例值的布局,流动式的网格将替我完成大部分繁重的工作。我的media query将不再需要包含那些覆盖其他分辨率的所有width, margin和padding的样式定义。 但是也有一点让我感到头疼,计算流动式网格的比例宽度需要用到一些数学知识,我数学不太好… 幸运的是, Ethan 提供了一个很简单(即便对我来说)的公式来计算比例宽度:
2020年智慧树知道网课《动态网页设计技术》课后习题章节测试满分答案
第一章测试 1 【单选题】(2分) 关于CSS的描述,下列说法正确的是()。 A. 只有独立的CSS文件才符合结构与表现分离的特点。 B. 当CSS作为独立的文件时,必须以.html为后缀名。 C. CSS用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。 D. 目前流行的CSS版本为CSS3。 2 【单选题】(2分) 下列选项中,JavaScript运算符的优先级最高的是()。 A. == B. ++ C. () D. +
3 【单选题】(2分) 根据运算符的优先级,表达式z=2*(1+2*3)的运算结果为()。 A. 16 B. 18 C. 14 D. 12 4 【单选题】(2分) 下列选项中,没有对应的结束标记的是哪一项?()。 A.
D.
5 【单选题】(2分) 下列选项中,字号最大的是哪一项?()。 A.
B. C. D. 第二章测试 1 【单选题】(2分) 一个格式良好的XML文件的根元素个数是()。 A. 3 B. 4 C. 2 D. 1
D. 第二章测试 1 【单选题】(2分) 一个格式良好的XML文件的根元素个数是()。 A. 3 B. 4 C. 2 D. 1
2 【单选题】(2分) 假设在helloapp应用中有一个hello.jsp,它的文件路径如下:
网页设计工作总结(最新版)
网页设计工作总结(最新版) Work summary is to summarize, analyze and research the work in a certain period of time, affirm the achievements, find out the problems, and draw lessons from experience. ( 工作总结) 部门:_______________________ 姓名:_______________________ 日期:_______________________ 本文档文字可以自由修改
网页设计工作总结(最新版) 说明:本文适用于工作总结,工作总结是对一定时期内的工作加以总结,分析和研究,肯定成绩,找出问题,得出经验教训,明确下一步工作的方向,少走弯路,少犯错误,提高工作效益。下载后可直接打印使用。 网页设计工作总结 在公司工作已有1个多月之久,也学会了不少东西,在这样的过程中,既工作,也可以学到其它的知识,当中也有过很大的压力,经常犯错,也曾对自己失去信心,但日子长了,慢慢地适应了这里的环境,与周围的人、事物都熟悉起来,压在心中的大石头也随之渐渐减轻,感觉工作起来心情也愉快得多了,偶尔的困难也会很快得到解决。1个月以来工作情况总结有如下几点: 1、掌握了公司的价格表,工作的制作流程。 2、学会了运用photoshop进行图片处理,打印一寸照片拼图等,学会了autocad制作工程图纸. 3、学会了使用打印机,复印机,学会了制作专业vcd,dvd光盘.
4、每天跟着主管学习3DMAX,收获很大。 在这1个月中,由于初步接手这份工作,在工作中出现了一些棘手的事情,经过师傅和同事的耐心指导后,工作也渐顺利完成。我坚信只要自己细心、耐心、努力学习,没有什么问题是解决不了的。我相信,在公司领导的培养下,能把自己的本职工作做到更好。 这里填写您的企业名字 Fill In Your Business Name Here
简单网页制作实验总结报告
《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日
目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)
第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”,包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句,色彩缤纷,十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐,影视,购物等非常热门的东西,本站设计的主题是花,能让人们在闲下来的时候看看花,品品诗歌,所以做有关花的网页是个不错的选择。同时,让人们分清楚春夏秋冬都各有什么典型的花。
第二章网站内容设计 1.1链接1标题:春の花 春天是生命的季节,在这个季节里,万物复苏。所以就找了虞美人,桃花,牡丹,以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题:夏の花 夏天充满了激情与阳光,我找了兰花,荷花,百合花等来代表这个季节,色彩艳丽,十分醒目夺人。 1.3 链接3标题:秋の花 大丽花,菊花,月季和牡丹花都竞相出现在本网页,色彩缤纷,赏心悦目。 1.4 链接4标题:冬の花 蝴蝶兰,水仙,迎春花,梅花是冬季的代表,他们刻画了一副傲立冬天的坚强的姿态。
最新ui设计就业前景分析报告
ui设计就业前景分析 在设计行业不断发展的今天,如果你还认为ui设计就是网页设计,那你真是out了。在设计行业高速发展的今天,UI已经远远突破了网上设计的畴,UI设计还包括软件界面的美术设计、创意制作;根据各种相关软件的用户群,提出构思新颖、有高度吸引力的创意设计;对页面进行优化,使用户操作更趋于人性化;维护现有的应用产品;收集和分析用户对于GUI的需求等。 UI设计师可以说是兼具美术设计、程序编码、市场调查、心理学分析等诸多方面的综合能力。作为一名UI设计师,我们需要紧跟时代对UI设计师的最新要求,否则我们必被时代无情的淘汰,因为我们的能力单一化,我们只能做出一个网页出来。 XX年也必将延续移动互联网高速发展的态势,产业规模不断扩大,增速飞快,用户体验至上的时代已经来临。随着技术领域的逐步拓展,产品生产的人性化意识日趋增强,UI 设计师也成为了人才市场上十分紧俏的职业。需要招聘该类型人才的企业不仅仅局限于移动互联网企业,越来越多的企业开始注重交互设计、用户测试方面的投入,如金融、交通、零售等一些行业均需要该类型设计人才。 移动互联时代,移动设备和大屏幕设备越来越多,手持界面和大屏幕的用户体验设计是大势所趋,你仅仅会设计,
更懂得用设计抓住用户心理,锁定用户需求。 目前在国UI设计还是一个相对陌生的词,即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着:招聘界面美工、界面美术设计师等等。这表明在国对UI设计的理解还停留在美术设计方面,缺乏对用户交互的重要性的理解;另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术,而UI 设计仅仅是次要的辅助,这点在人员的比例与待遇上可以表现出来。?但这不是UI设计真正的价值体现,只是UI设计发展的一个必经过程。 UI即用户界面设计,也称人机界面,最普遍的应用是在软件开发中,主要是指程序的用户操作界面的设计,随着Web 应用的普及,UI也应用在了Web的用户界面规划上了。用户界面(W?UI)要经过规划、美术设计、制作几个过程。简而言之,UI一般指界面、软件界面、手机应用界面等所有图形用户界面的设计,手机操作系统、游戏操作系统、各种网页的界面设计,也属于UI设计畴。但专业、顶尖的UI设计师不仅仅局限在网页、APP应用程序上的界面设计,更应掌握人机交互的技能。以用户体验为基础进行的人机交互设计,能考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且高效使用产品。交互设计的
网页设计与制作总结
网页设计与制作 实训报告 班级:多媒体152 姓名:张莉钧 学号: 指导老师:薛杨王淑惠 实训时间:6.20——6.24 一、实训目的: 1、进一步熟悉和掌握网站建设的基本流程和技术规范; 2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识; 3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识; 4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法,能独立设计一个内容完整、图文并茂、技术运用得当的网站; 5、具备独立撰写实训报告基本能力; 6、在网页设计的实践中培养分析问题、解决问题的能力,培养协作、交流的能力,培养创新能力和团队意识; 7、紧紧围绕网页制作的流程:规划、设计、开发、发布、维护来进行网站的开发,制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结,使学生复习、巩固所学过的理论,并予 以适当的深化,进一步训练学生的基本技能(如:搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等),为今后从事网站开 发、维护和管理奠定基础 二、实训项目——特色美食餐厅网站设计 1、网站主题 我的网站的主旨在于从各个方面全面的介绍特色美食餐厅,包括它的菜品、餐厅的环境以及促销活动。另外,网站里还包括餐厅资料和联系方式,网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是橙色和白色搭配,用以展示餐厅特色的效果。其实最重要的是要做出自己的风格,给浏览者好的欣赏感受。 2、网站材料 主要在网站上搜集所要的网页信息,包括图片、文字。同时,查 询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等,用以得来更加具有说服力的页面。要想做好自己的网站,能够给浏览者好的欣感受,就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。 3、网站规划 我的网站共有7个主页面:首页、美食介绍、优惠活动、商品促销、宴会定制、会员中心和关于我们。每一个页面用统一的模块,以保证网站统一的页面风格。网页布局主要用框架和表格,用框架定位内容的大体结构,再用表格具体定位。位子的设计也是重要的一个部分,根据具体内容决定字体风格,相同的风格多次调用是CSS设计一个样式,以保证随时、准确的调用。 三、网页设计工具使用 1、Dreamweaver——我们使用它做网页的主要布局。 2、Photoshop——我们使用它做网页图片的处理以及logo的制作。
论网页设计的发展趋势和未来前景.
论网页设计的发展趋势和未来前景 作者:刘斌专业班级:资源0802班学号:0120808280228 【摘要】 本文介绍了网页设计的发展趋势,中国的网络市场存在着巨大的潜力。在互联网越来越深入到生活中每一个角落的年代,网页的表现形式更加多样化。网页设计师是现代社会不可或缺的职业,是未来非常有发展前景的工作,只要有能力就可以得到非常诱人的薪水,必须全面提升自己特别是专业的技能,要立志做一个有竞争力的网页设计师。 【关键词】 网页设计网站策划网页设计师工资发展趋势未来前景 【正文】 美国市场调研机构ComScore NetWorks提供的报告显示,2007年1月,全球15岁及以上使用互联网的人数达到了7.47亿,同比增长10%。ComScore发现,美国互联网用户达到了1.53亿,依然是全球网民最多的国家,但增长率仅为2%,中国网民数量仅次于美国,为8670万,但增长率却高达20%。通过以上数据,我们不难发现中国的网络市场存在着巨大的潜力,那么如何把握住这个机遇,培养出合格的人才,就成了我们这些高校专业教师需要考虑的问题,我认为作为一名有竞争力的网页设计师,不但要做到有美术修养,还要做到懂编程,这样一来我们的网页设计师就可以既能胜任前台的设计工作又能胜任后台的编程工作了。 一、网页设计的发展趋势 网页设计是成功网站平台建设成败的关键内容之一。在中国真正普及全职的网站设计员严格讲是2002年,在之前更多是由技术性人才担任此项职位,随着中国互联网环境转晴,网站的高竞争使网站策划的地位突显。我们可以看到,许多真正处于领军性地位的网站平台90%具有一个特点——网站策划思路清晰合理,界面友好,网站营销作用强;因此专业的网站设计是未来网站成功的重要条件之一。
大学网页设计实习报告
大学网页设计实习报告 网页是世界上最有价值的不动产之一。以下是小编整理的大学网页设计实习报告范文,欢迎阅读! 大学网页设计实习报告1 实习目的:熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。 网页是世界上最有价值的不动产之一。人们在这个不足平米的空间内投资达数百万美元。网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的链接,绕过主页而进入WEB的深层。 1.讨论网站主题:因为自己对普罗旺斯很感兴趣,于是就想到要是一下为心中的仙境设计一个旅游网站。 2.定位网站CI形象:旅游网站最重要的就是是浏览者产生想去亲身体验一下的共鸣。于是在网页设计上面,根据普罗旺斯梦幻般的意境,我采用的是清新隽永的CI形象。使浏览者有宾至如归的感受。 3.确定栏目和板块: 1]首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。
2]其次就应该考虑导航条的设置了。 3]正文的框架设置 (横向因素和纵向因素交错) 在浏览了很多精美的旅游网站之后,再结合自己的想法,我先在草纸上画出了大体的栏目和板块。 4.网站的整体风格和创意:建立一个浪漫的旅行网站,走映像派路线,目的务必使浏览者留下映像。 1.资料的搜集:由于个人的爱好,我很早以前就收集了许多普罗旺斯的美图,这次就方便多了。接着就搜集了一些有梦幻效果的网页背景,FIASH源代码、小图标和一些GIF 的动画等。 2.熟悉制作工具软件: 主页制作的基本条件有: 硬件: 一台电脑(64MB以上内存,当然越大越好啦);可以拨号上网;如果你有条件的话,建议:配置扫描仪,这将大大方便图像和文字的输入;软件: HTML编辑软件:常用的有Frontpage、Hotdog等,本文重点介绍 Dreamweaver; 图像处理软件:常用的有Photoshop、flash、Fireworks 等; 文件上传软件:常用的有Cuteftp、WSftp等。 真的是万事开头难啊,遇到了很多问题,比如:插入的
动态网页设计习题答案
模块1 建设基础 一、填空题 1. 全球信息网 2. html、htm 3. 域名、空间 4. cascading style shee,被称为层叠样式表或级联样式表 5. 记事本、HotDog Professional、HomeSite、UltraEdit、WYSIWYG Web Builder 8.1、Dreamweaver、Frontpage 6. uniform resource locator 7. HTML、HTML 8. W3C 9.JavaScript 二、简答题 1.写出URL包含的3部分容的作用。 答:URL通常包括3部分,第一部分是Scheme,告诉浏览器该如何工作;第二部分是文件所在的主机;第三部分是文件的路径和文件名。 2.网页和有什么区别? 答:网页是上的某一个页面,它是一个以扩展名为html或htm 的文件,向浏览者传递信息的载体,以超文本和超媒体为技术,采用HTML、CSS、XML、JavaScript等语言来描述组成页面的元素,并通
过浏览器进行解释,最后把结果信息通过浏览器在网页上显示出来。 (website)是指Internet上的一个固定的面向全世界发布消息的地方,由域名(也就是地址)和空间构成,通常包括主页和其他具有超文件的页面。 3.写出开发的基本流程。 答:1.建设前的市场分析 2.建设的目的及功能定位 3.技术解决方案 4.容及实现方式 5.进行网页设计 6.选择网页设计的工具 7.费用预算 8.测试 9.维护 10.发布与推广 模块2 Web标准及其构成 一、填空题 1. W3C和ECMA 2. 表现标准语言主要包括CSS,行为标准语言主要包括对象模型(如W3C DOM)、ECMAScript
网页设计实训总结心得6篇
网页设计实训总结心得6篇 网页设计实训总结心得6篇 photoshop等软件的功能和应用。不但如此,更增加了同学间的友谊,陪养了彼此间的团结。 在这期间,每一天老师都会发一些素材和实训给我们,首先是网页素材的准备,在网上查看一些网页背景和背景颜色搭配,让我了解到网页的颜色不能多过3种色彩。接下来的几天再结合自己的网页来进行策划,在做首页之前,先用图纸把网页的结构画出来,内容和结构都想清楚用fireorks把网页设计出来,再切割图片,把它们导成html格式在dreameaver中进行进一步的编辑。 我们的网站主要是围绕宿舍而展开的一串活动、人物等,宿舍给我们一种很温馨、很快乐的感觉,所以我们决定将这次的网页名叫funnroom。主题确定好了,那么分工出就明确了,我们组有三个人,两个人负责找素材,另一个美术好的就负责网页的页面设计,但是我们始终不是学美术方面的,所以色彩方面搭配的不是很好,后来采用了色彩比较清新自然的绿色来作为首页的主色调,让人第一眼看上去就有难忘的感觉。而从第二页开始就采用粉色为主色调,让人可以感受到我们的主题,因为首页和其它的颜色不一样,所以我们就把首页当作是过渡页,第二页开始才是网页的为了增加网页的新鲜感和活泼感,还适当在添加一些透明flash和一些网页特效。在这实训的时间里面,我们分工合作,共同努力,对网页反复调试和修改,特别是对于fireorks软件不那么熟悉,有很多的实例都要看过老师的演示才会明白,不过这也恰恰让我学到更多。虽然中途难不免会有因为意见的
不合而发生一些小小的争吵,但我觉得不影响我们的网页设计,反而会因为这些不同的意见而重新学到更多的知识。 网页设计实训总结心得体会范文3 通过这次实训对这门课程的学习,做好网页,并不是一件容易的事,它包括网页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。所以我得出一下总结: 一、准备资料和挑选符合目的主题的合适素材 做网页当然要收集、准备资料。在网上多转转,看到什么漂亮的网页,把它保存起来,作为以后自己设计主页时的另外,还包括搜集美化主页可能要用到的各种材料,如背景、小动画图标等等。可以在硬盘上建一个文件夹,下分图片、声音、动画等文件夹,养成上网时看到有创意、新鲜的图像,就按鼠标右键存入你硬盘相应文件夹的习惯,时间一长就拥有了一个可观的图库,等做网页时随手拈来或加以修改就成你自己的东西了。 二、规划好整个网站 主页的设计应以醒目优先,应该令人一目了然,切勿堆砌太多不必要的细节,或使画面过于复杂。切记,页面给人的第一观感最为重要!在网上到处浏览网站的人很多,如果你的主页给人的第一印像没有吸引力,很难令他们深入观赏,而且他们恐怕再也不会访问你的网站了。 三、善用图片,增强艺术效果 我记得老师说过网页的迷人之处之一,要算它上面能点缀许多漂亮的图片。精美的图片设计,可以使自己的网页增辉不少,令人过目
2013网页设计趋势
2013年的11个网页设计趋势热点 最近有很多工作中都是用web设计的,所以对web设计也比较感兴趣,看到一篇好文章,跟大家分享一下,也把自己的观点写下来。 2013年的11个网页设计趋势热点 导语:设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面,足矣?或许五年前是吧!现在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果设计师追求华而不实的设计,那么相信你很快会被时代遗弃。2013年不再属于单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计(responsive design)、持续联系(constant connection)和虚拟现实(virtual reality)。 作为设计师的你,2013年会做什么打算?真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。肤浅的赞赏易得肤浅的设计也易被遗忘。出色的设计师犹如造梦师,给用户创造一个梦境,让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素:优秀的配色,直观的设计,良好的交互性和快的响应速度。此外,永远不要低估简约的力量。2013年,你的设计不但要考虑笔记本、台式电脑,还要考虑智能手机、上网本和平板电脑等设备。你都准备好了吗? 2013年网页设计趋势有何变化?一起关注11个网页设计趋势热点:
1. 更多的CSS3 + HTML5 这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5,但在2013年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者,新技术(指CSS3+HTML5)将会取而代之。2013年,Flash渐行渐远,魔术师“HTML5”成为舞台的主角: 当然,说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此,2013年两者会各自保持属于自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计,他们会在一些可用的地方使用 HTML5替代Flash,使网站变得简单运行更快速。然而,目前HTML5还不能够取代Flash,Flash的某些效果HTML5暂时还不能够实现。 然而最值得人兴奋的是CSS3的应用越来越广,在某些地方甚至超越PS(Adobe 表示有压力),因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会,是时候去了解CSS3和HTML5。 html5目前已经逐渐成为了行业内的标准,关键是谁能给我们带来更简单通用的方法。 2. 简单的配色方案
响应式网页设计的七个技巧
响应式网页设计的七个技巧 响应式网页设计已经是如今当之无愧的标准配置了,我们需要响应式的技术来应对日渐碎片化的屏幕尺寸,网页设计师也力图做好这件事情。而网页中的图片和图库的响应式设计,也是其中的重点难点。它们是网页中最常见,也是最直观可见的元素。打开一个漂亮精致的网站,然而其中的图片和图库看起来怎么都和页面不匹配,这样的情况恐怕是最让人抓狂的了。 响应式网站 如果要设计好响应式的图片和图库,今天天极响应式网站专家聊聊成都响应式网页设计的七个技巧,兴许能给你提供一个明确而系统的思路。它们并不涉及到具体代码实现,更多牵涉到设计过程和处理手法,做好了这些工作,具体实现起来就不难了。 1、考虑高宽比桌面端的图片浏览体验和移动端是完全不同的,这一点毋庸置疑。对于绝大多数的网站而言,图片展示的位置都很相近,大同小异。而设计师的任务,是要确保网站随着屏幕和设备变化的时候,图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。这个时候,就要始终牢记图片的高宽比,并且始终控制高宽比不会改变。回到桌面端网页中,大幅的背景图或者置于页面顶端的图片看起来非常漂亮,可是当它切换到移动端设备中的时候,首先屏幕比例和方
向就不同了,那么它是否还那么好看呢?图片被缩小之后,信息的呈现是否会丢失?它是否会被拉伸?这个时候,图片的高宽比的控制就显得特别重要了。控制原始图片不被拉伸,同时让图片所展示出来的部分的高宽比能够尽可能合理地匹配对应的屏幕,这样也就不必担心响应式断点过多,导致你需要上传过多的图片。 2、尺寸和比例的一致性响应式设计就不能不说断点。为了照顾不同的屏幕,我们需要将图片裁剪成不同比例不同尺寸的大小,而这也直接影响着整个设计与开发的设计流程。许多人仅仅只是将图片上传到CMS系统中,就希望它能以完美的样式呈现出来。这不现实。每张图片都应当被裁剪为合理的尺寸,并且放置在理想的位置上,确保它们会以用户期望的样子呈现出来。后端可能会在这件事情上花费相当的时间和精力,但是这些努力是值得的。 3、使用轮播图或者图库轮播图控件和图库控件是网站中最常见的图片载体,并且也可以更加自如的管理图片。尤其是当你使用了那些比较著名或者适配范围比较广的第三方控件的时候,控制图片元素的粗活重活基本上都会被这些控件接手过去。不过,我们之前提到的图片长宽比和尺寸大小的控制同样也是要注意的,否则一样会让网页的展示效果变尴尬。除此之外,你还需要什么场合使用什么样的控件。如果你拥有若干高品质的图片或者需要推荐特定的文章和专题,那么你需要使用幻灯片轮播图控件。如果你拥有大量有待展示的图片,可以缩小展示也不存在可读性问题的话,不妨使用图库类的控件来展示。许多作品集类的网站常常会使用图库控件。 4、尽量避免使用图片说明(Captions)虽然图片说明能够让你的图片的信息更加丰富,但是它会非常直接地影响到网页的运作。尽量避免使用它们,如果实在是需要,尽量用其他的方式来呈现。图片的Caption属性加入之后,确实能在桌面端拥有良好的渲染效果,但是小屏幕上常常问题不断。为了不让这些细小的可用性的问题影响用户体验,尽量避免使用就好了。因为这种小问题而让用户无法忍受并且离去,并不划算。 5、图片和视频混用要小心如果网站中同时存在图片和视频类的多媒体,用户和设计者应该都是能够接受的,甚至许多用户已经习惯了这样的设计。但是要注意的是,即便是在同一个页面中,也尽量不要让图片和视频同时存在于同一个控件或者区块中。也许这样看起来很炫酷,也许一部分图片和视频能够搭配起来,但是更多的视频和图片很难在尺寸上保持一致,导致总会有一部分图片或者视频会留下空白和间隙。最好的方案还是将两者分开展示,避免了媒体属性和尺寸上的差异与冲突。这几乎适用于任何设计元素,而图片和视频尤甚。 6、削减不必要的元素虽然轮播图和图库控件非常好用,但是许多设计师常常会往其中添加许多垃圾的内容,最常见的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮。这样的例子不胜枚举。一般情况下,用户其实是熟知如何同轮播图这类控件进行交互的。除非你的设计和我们的认知有着巨大的差异,以至于必
网页设计师前景分析
网页设计师前景分析 在互联网越来越深入到生活中每一个角落的年代,网页的表现形式就如同以前书本上的文字,传达着的是网络语言,每一条线、每一个色块、每一种版式、每一种组合都传递给阅读者一种感觉。 实际上网页的表现形式已是互联网至关重要的元素,这些工作都是由网页设计师来做的,是一种创造性、有成就感的工作,更是不可或缺的职业。 做网页设计师,有创造的快乐,也有很多无奈。如果做的是公司内部网站的设计,或是维护自己公司的网站,定期的改版,图片FLASH的增加等工作,那还好,自己内部嘛,通常沟通的清楚,自己的创意可以得到更多的尊重。 如果是给客户做网站,即使是理解客户的所谓需求,作出来的东西常被客户指指点点,有任人宰割的感觉,但这没办法,出钱的都是爷,客户是上帝,客户永远是对的。不必要在心里品评客户的品味,大千世界,人各有所好。 网页设计示例图片 要紧的是耐心地与客户沟通,尽管有时客户也说不清到底想要的是什么,更有甚者,需求也老是在变,直至最后的境况通常是你怎么说我就怎么做了,唉,这也是作为网页设计师的无言的结局。 我们每个人都知道要抓住机会,但是,你首先要能够看到机会,否则根本没有这个机会可抓,即将出现的网页设计师需求井喷机会你看到了吗?常言道,机会总是给那些有准备的人,你准备好网页设计师的技能了吗? 知道了网页设计师的前景,我们再一起来了解一下,要想成为一个合格的网页设计师需要学习哪些内容。 网站前台初级学习内容: 网页梦幻三组合:Dreamweaver cs4、Flash cs4、Fireworks cs4; 本课程遵循循序渐进的原则,理论和实践相结合,让学生能够从中拓展创作思维。讲解
网页设计实习总结范文3篇
网页设计实习总结范文3篇 网页设计实习总结范文1 现在,计算机和网络已经深入到了我们生活中的方方面面,也已经成了生活中不可缺少的一部分,网络成了我们获取知 识和信息的一种便捷工具,现在的网民也在不断的增多,所以,了解和学习网络知识是我们作为一名大学生迫切所需的,我利用寒假的时间,对网页设计进行了初步的认识和了解,并基weaver》时的一些关于网页设计的见解。在具体的制作 一个网页时我了解到一个优秀的网页设计应该具备一些基weaver的时候,我很茫然,因为刚接触陌生的软件心里会很 害怕跟不上老师的进程。刚开始几节课,老师讲得比较基础,还能跟得上,渐渐的老师授课的进程开始加速,有些跟不上了,需要下课后自己补上,问老师和周围的同学。渐渐的,在老师的悉心教导下,我们开始熟悉这个软件了。老师布置 的第一个任务,要求做一个自我形象网站。由于学习的时间 较短,老师只要求用PS做好模板即可,任务相对简单。但也要求设计感强,色彩搭配和谐,并且尽可能的做成实用又 符合实际的漂亮网页。 第二个网页设计老师要求相对较高,用dreamweaver做一个比较接近真实的网页,还要做一个二级页面。于是开始收 集各方面的资料。确定了主题
题就开始布局了。最开始使用了一个表格,然后在表格内进行拆分合并处理,接着就把通过ps处理出来一个版头并且把修改过大小的图片放进去了。 中间时预览,问题出现了,发现版头与下面的图片文字之间出现了很大的一段距离,但是在软件中已经把距离缩小为0了,多次尝试后没有效果。最后想到可以另外再加一个表格,把版头放在一个表格内面,这样问题就解决了。预览是效果还不错。但是总觉得首页做得太普通,一次浏览学长做的网页时,觉得他们的文字滚动窗口做得效果做得不错,于是想借见一下。就决定把自己网站的左边修改修改。复制了他的代码,把上面的内容修改成我的网站需要的文字。本以为可以轻松的完成,但是却出现大问题了。 因为需要滚动的文字占的空间太大,把左边的那部分表格全部占满了,而在实际的网页预览中,这个有文字滚动的框只占了左边Oeasy教你玩转网页设计浏览的工具建站程序三分之一,左边有三分之二留白了。我就想可不可以把文字这样一层层的放在上面,试了很多方法,在网站查了很多资料,可能因为没有专业术语作为搜索的关键词,查不到任何相关的资料,试过div标签,试过不停的拆分表格,最后还是没有效果。就这样试着试着,突然想到了层这个概念。于是在布局中点击了绘制层,结果成功了,经过一些加工,终于成功的完成左边的布局。印象还比较深刻的是插入声音,记得
网页设计的四大发展趋势
南通科迅教育培训中心 网页设计的四大发展趋势 每个事物都是有自己的发展规律的,网页设计也不是例外的一个,深圳网络公司小编今天在这里讨论的所有的趋势是相互依存的,从根本上定义的四个原则:以内容为导向,UX-为本和简单的设计互动。下面小编就给大家分享网页设计的发展趋势: 网页设计第一大趋势:内容第一 内容首先将这一体系的核心。内容也是我们经常讨论的。这方面我们应该把内容深入地呈现给用户,而且应该做到去适应它的设备。无论在那个阶段这都是我们必须重视的。这就需要我们建立高效,搜索,访问,多平台的内容,并确保达到跟用户最好的互动体验。 网页设计第二大趋势:简单设计的互动内容 简单的新方式。简化就是将是唯一的工具,我们将所表现的内容和内容的可读性,做出最佳的用户体验。另外,内容战略,UX,可用性,可访问性和视觉设计都必须遵循这一要点。 网页设计第三大趋势:UX中心的设计 从用户的角度来看,从网站到体验,其最重要的还是内容本身。所用户都一直赞同提供简化的视觉设计和交互水平。传统的网站一直
在采取移动应用程序的UI模式,一直是在提供一个简单和高效的用户体验,这多少给了我们一些提示,“应用程序风格的界面” 网页设计第四大趋势:APP风格的界面 我们现在正在想一个方面转移,就设计对于大多数桌面网站,将越来越多地模仿的风格和移动应用程序的接口,统一并简化内容和设计,并同时促进创建响应项目。 注意: 当然发展都是一切实物的趋势的,我们也不能停止不前,需要我们多多的学习的,顺应时代的发展,才能立于不败之地。 在如今这样人人都需要网络的时代,可想网页设计师的这个行业的前景是无限美好的。来科迅学习,让你成为一名优秀的网页设计师。南通科迅教育对学员承诺: 1 一对一教学; 2 包教包会; 3 在规定时间内提前学完的学生,若对其他的软件感兴趣,可以免费教学! 4 毕业颁发国家认证的毕业证书; 5 包推荐就业!
网页设计毕业实习报告
网页设计毕业实习报告 篇一网页是世界上最有价值的不动产之一。人们在这个不足平米的空间内投资达数百万美元。网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的链接,绕过主页而进入WEB的深层。 一.网站的整体规划 1.讨论网站主题:因为自己对普罗旺斯很感兴趣,于是就想到要是一下为心中的仙境设计一个旅游网站。 2.定位网站CI形象:旅游网站最重要的就是是浏览者产生想去亲身体验一下的共鸣。于是在网页设计上面,根据普罗旺斯梦幻般的意境,我采用的是清新隽永的CI形象。使浏览者有宾至如归的感受。 3.确定栏目和板块: 1]首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。 2]其次就应该考虑导航条的设置了。 3]正文的框架设置 (横向因素和纵向因素交错) 在浏览了很多精美的旅游网站之后,再结合自己的想法,我先在草纸上画出了大体的栏目和板块。 4.网站的整体风格和创意:建立一个浪漫的旅行网站,
走映像派路线,目的务必使浏览者留下映像。 二.网页制作的前期策划与准备 1.资料的搜集:由于个人的爱好,我很早以前就收集了许多普罗旺斯的美图,这次就方便多了。接着就搜集了一些有梦幻效果的网页背景,FIASH源代码、小图标和一些GIF 的动画等。 2.熟悉制作工具软件: 主页制作的基本条件有: 硬件: 一台电脑(64MB以上内存,当然越大越好啦);可以拨号上网;如果你有条件的话,建议:配置扫描仪,这将大大方便图像和文字的输入;软件: HTML编辑软件:常用的有Frontpage、Hotdog等,本文重点介绍 Dreamweaver; 图像处理软件:常用的有Photoshop、flash、Fireworks 等; 文件上传软件:常用的有Cuteftp、WSftp等。 三.网页制作 真的是万事开头难啊,遇到了很多问题,比如:插入的图片不符合规格,一下子把其他内容的框架挤开;插入的层太多,大一点的就把小一点的给覆盖掉了;插入的 FLASH不
响应式web网站设计制作方法
在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式文件 2. 一个模块的mq样式整体放在这个模块的样式的之后,符合层叠逻辑,也同时以免被层叠。 3. 祈求在一个相应点上同时做变化几乎是不可能的,因为版式中间的变化,无论是视觉还是具体的编码人员不可能掌握所有细节。 4. 流体布局很关键,%视父级为参照物,这一点虽然很多人都知道,但是实际做的时候却最容易被忽略。 5. 清除浮动也很重要,切记。 6. 如果你希望边框、边距(内、外)也在100%的范围内,直接设置width:auto就好了,不要给予希望在新的css3属性上,也不要寄希望在-webkit上,-webkit-很容易就会变成下一个ie6了。 7. 合理的嵌套更加健壮,用一个包装元素来替代设置当前元素margin或者padding。举例,假如有A和B两个元素,width是40%,maring-right是10%,这样很容易在搜索浏览器的时候篡位,所以用一个包装元素C去分别包裹A和B,然给给C设置50%,A和B分别设置为80%。这样就是合理且健壮的嵌套了。 8. 两行两列这种设计,由于流体布局和字数的不同,所以为每一行添加一个包装元素,更加健壮。也就是说,先做两行,再在每一行里做两列。 9. 不要奢望在在每一个像素的宽度上不会出现超出预期的表现,因为没有任何人知道页面在每一个像素宽度时候的表现的样子,页面越负责可预期的就越不准确。所以mq可能真的是“非预期数值”(预期数值指代在设计和实现之前约定的响应点) 10. 相同区间的mq和mq会层叠,全局的样式也会和mq中的样式层叠,所以属性尽量不要写成缩写。以减少忘记的风险。 11. 图片的自适应处理不容易,特别是有边框的,如果正常条件(没有利用mq来约束)下设置了宽和高,在另外一个mq下,仅仅设置一个属性是不行的,还是那句话,mq不是二选一(除非是两个不同的mq区间),而是层叠!! 12. 如果水平列表的两端的元素两端对齐,以四个元素为例,那么除了前三个预留左边距,最后一个为零;或者第一个右边据为0;后三个有右边距以外。可以采用第一个左侧有,最后一个右侧有,中间两个左右偏移边距来做,短的一面为边距除以空白数,比如4个列表项,边距为40,则40除以3。好处么?就是可以保证每一个外包装为通栏的25%。 13. 四个25%,两个50% 没关系,但是50% 25% 25%就可能会掉下去最后一个,所以24.99,22.49有时还会相差1~2像素。 14. 如果版式变化不大,那么从大到小的写mq,不必写一个区间,只写最大值即可,这样一层一层的继承,小尺寸继承大尺寸,另外,不用过分担心选择器本身权重的问题,mq会提高其优先级。 15. 像导航和版权这种在pc、pad、phone截然不同的版式。mq,就写区间。这样在区间外就等于这些dom毫无样式,这样就不比担心由继承引发的覆盖、优先级、重写以及未知问题。减少了属性的重写,提高了效率、降低了修改成本。其实就是等于一个dom,为不同