css样式设计思路总结

html-css017

css样式设计思路总结,第1张

如何清除图片下方出现几像素的空白间隙?

方法1:

方法2:

除了top值,还可以设置为text-top | middle | bottom | text-bottom

甚至特定的<length>和<percentage>值都可以

方法3:

如何让文本垂直对齐文本输入框?

如何让单行文本在容器内垂直居中?

如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?

按L-V-H-A的顺序设置超链接样式即可,可速记为LoVe(喜欢)HAte(讨厌)

为什么Standard mode下IE无法设置滚动条的颜色?

将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

如何使文本溢出边界不换行强制在一行内显示?

设置容器的宽度和white-space为nowrap即可,其效果类似<nobr>标签

如何使文本溢出边界显示为省略号?

方法(此方法Firefox5.0尚不支持):

如何使连续的长字符串自动换行?

word-wrap的break-word值允许单词内换行

如何清除浮动?

方法1:

方法2:

方法3:

如何定义鼠标指针的光标形状为手型并兼容所有浏览器?

若将cursor设置为hand,将只有IE和Opera支持,且hand为非标准属性值

如何让已知高度的容器在页面中水平垂直居中?

Know More:已知高度的容器如何在页面中水平垂直居中

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?

如何设置span的宽度和高度(即如何设置内联元素的宽高)?

如何给一个元素定义多个不同的css规则?

如何让某个元素充满整个页面?

如何让某个元素距离窗口上右下左4边各10像素?

如何去掉超链接的虚线框?

IE7及更早浏览器由于不支持outline属性,需要通过js的blur()方法来实现,如<a onfocus="this.blur()"...

如何容器透明,内容不透明?

原理是容器层与内容层并级,容器层设置透明度,内容层通过负margin或者position绝对定位等方式覆盖到容器层上

方法2:

高级浏览器直接使用rgba颜色值实现;IE浏览器在定义容器透明的同时,让子节点相对定位,也可达到效果

如何让整个页面水平居中?

定义body的text-align值为center将使得IE5.5也能实现居中

为什么容器的背景色没显示出来?为什么容器无法自适应内容高度?

通常出现这样的情况都是由于没有清除浮动而引起的

如何做1像素细边框的table?

方法1:

方法2:

IE7及更早浏览器不支持border-spacing属性,但是可以通过table的标签属性cellspacing来替代。

如何使页面文本行距始终保持为n倍字体大小的基调?

注意,不要给n加单位

标准模式Standard mode和怪异模式Quirks mode下的盒模型区别?

标准模式下:Element width = width + padding + border

怪异模式下:Element width = width

以图换字的几种方法及优劣分析

思路1:使用text-indent的负值,将内容移出容器

该方法优点在于结构简洁,不理想的地方:

1.由于使用场景不同,负缩进的值可能会不一样,不易抽象成公用样式;

2.当该元素为链接时,在非IE下虚线框将变得不完整;

3.如果该元素被定义为内联级或者内联块级,不同浏览器下会有较多的差异

思路2:使用display:none或visibility:hidden将内容隐藏;

该方法优点在于兼容性强并且容易抽象成公用样式,缺点在于结构较复杂

思路3:使用padding或者line-height将内容挤出容器之外;

该方法优点在于结构简洁,缺点在于:

1.由于使用场景不同,padding或line-height的值可能会不一样,不易抽象成公用样式;

2.要兼容IE5.5及更早浏览器还得hack

思路4:使用超小字体和文本全透明法;

该方法结构简单易用,推荐使用

为什么2个相邻div的margin只有1个生效?

本例中box1的底部margin为10px,box2的顶部margin为20px,但表现在页面上2者之间的间隔为20px,而不是预想中的10+20px=30px,结果是选择2者之间最大的那个margin,我们把这种机制称之为“外边距合并”;外边距合并不仅仅出现在相邻的元素间,父子间同样会出现。

简单列举几点注意事项:

 外边距合并只出现在块级元素上;

 浮动元素不会和相邻的元素产生外边距合并;

 绝对定位元素不会和相邻的元素产生外边距合并;

 内联块级元素间不会产生外边距合并;

 根元素间不会不会产生外边距合并(如html与body间);

 设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并;

如何在文本框中禁用中文输入法?

ime-mode为非标准属性,写该文档时只有IE和Firefox支持

如何解决列表中list-style-image不能精准定位的问题?

不使用list-style-image来定义列表项目标记符号,而用background-image来代替,

并通过background-position来进行定位

如何解决伪对象:before和:after在input标签上的怪异表现的问题?

现象:

在编写本条目时,除了Opera,在所有浏览器下input标签使用伪对象:before和:after都没有效果,即使Opera的表现也同样令人诧异。大家可以试玩一下。浏览器版本:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

除了Firefox,在所有浏览器下伪对象:before和:after无法定义过渡和动画效果。

如果这个过渡或动画效果是必须,可以考虑使用真实对象。

网页设计实训总结心得体会范文4

上周,也就是5月31日到6月4日的五天里,我们电商专业进行了为期五天的网页制作实训。

在机房里待了一个星期,虽然生理反应不大,但是还是不好受。原本以为是实训比平时上课要舒服多了吧,但是这一个星期下来差点没被累死,比平时上课还疼苦。但是在这实训的一星期里我的收获还是很多的。

第一、从这次实训当中我深刻的体会到理论知识的重要性,只有在自己熟练理论知识后再能在实践中游刃有余,才不会出现“书到用时方恨少”的尴尬体会。

第二、实训中我印象最深的是对各种网页制作工具的使用不熟练,甚至还有个别不会用的,只是自己想要做个图片或图标等都做不好,其心情想而知。所以对这些网页是做工具的使用都要练习。

第三、集体协作是我又一个体会。这次网页制作由于某些原因我一个人一组,是我搞掘到压力很大而且很累,而且我自己的思维能力很有限,网站设计和制作上也略显粗糙和不足,正所谓:你有一个思想,我有一个思想,分享后我们就都有两个思想。所以与同学合作是很有必要的。

总之,这5天里自己虽然很累,但是自己的收获也是很不小的,所以我也是很开心的。

网页设计实训总结心得体会范文5

实训的五天中,我的心情就好像这五天的天气变化,有晴有阴,只是差了点眼泪。但这并没有使我放弃,我不想落后,也不想拖小组的后腿,我告诉自己只有努力做好一切才是我的选择。一次次的失败,一次次的尝试,做好的那一刻,激动、高兴。我不是天才,有些知识不会。查书,问同学,找代码等等,时间飞速的流逝着,有些学会了,但仍然有不会的。

我们的小组从开始就产生了分歧,网站主题不一致。直到制作网站的第三天,我们才达成共识,两方各退一步。还好,大家做出来的效果差不多,接下来的几天大家一起努力制作网页。遇到问题了,互相讨论,找出解决的方法,解决不了的就找人问。

在规划网站结构前,我们在互联网上大量的寻找网站布局规划,“不行”、“不行”、“与主题不搭”等一遍遍否定的话不断说出,终于确定了。我们做旅游的,以春夏秋冬四季分作,色调意思及颜色搭配。制作的过程中,我们改变了初衷,不知道是好,还是坏,决定做春夏冬三季及另外涉及天下旅游方面的主网页。

选取素材,一个个的挑,看的越多也变得越难选,好多与自己想要的想差太远,找的眼都花了,还是得找。磨练又一次的来了,坚持吧,努力吧,找完就好了。

制作网页,一遍遍的改。不对、不对,颜色不搭,不能突出主题,浏览出来的结构不搭,改吧。累啊,烦呢,还是得继续做。做网站是即使出现再多的错误,也要坚持做,耐心点,做好做完就好了,就轻松了。

我们经常在嘴边挂着要有“团队合作理念”,但行动起来时,有些人还是会忘记,也许是固执,也许是其他原因。遇到这种情况时,要有人站出来调节,尽快解决矛盾,否者会影响整体的工作进程,彼此不高兴。制作网页不协调,影响质量。

我们这次实训的目的及要求是:以小组为单位,合作完成从确定网站主题、规划网站结构、选取网页素材、到制作网页内容等步骤,从而掌握网站建设的全流程。同时,培养团队协作精神,提高综合运用所学分析、解决实际问题的能力,实现由理论知识向操作技能的转化。

网页设计实训总结心得体会范文6

从学校 毕业 后,我第一次步入了社会,从此开始了面对社会、工作的生活。刚刚走入社会的我是一个性格有些内向的人,面对陌生的人,我不善言辞,不会给自己的外表进行很好的包装,不适合做那些销售、接待的工作,只有技术类的工作,少说多干的活适合我,这个我很清楚。现在,中国每年都有很多毕业的大学生找不到工作,我也不例外,所以,这第一次实习工作肯定不会太好找,但是相反,我的运气还不错。找到了一份网页设计的工作。现将我在工作中的情况 报告 如下。

一、工作介绍

我工作的这家公司,从事网站开发工作的,公司在技术团队这部分是比较正规的,一般是五到六人为一个小组,小组中有明确分工,有负责联系客户接恰生意的,有专门做技术的,而在技术这块分为网站前台、后台开发,我在学校主要做的是后台开发,当然前台设计工作也还算熟练,但不是很精通。我们这个小组一般接下的活都是一些小型网站的开发工作,这样的网站技术难度不大,而且工作周期短,有相当一部分的,只需要通过cms软件就可以进行开发。但是有个别的网站开发时,我们还是需要进行一些手写代码工作的。

二、开发技术

做为一个刚毕业的大学生,我的知识储备肯定有不足的地方,毕竟学校教的东西肯定会有一部分和社会是脱节的,但好在我的领导对于我没有太多的要求,他只是要求我尽快的适应公司的工作和生活,在短时间内熟练的掌握相关技术,干好本职工作。

在大学里对一个学生来说什么是最重要的,那就是学习能力。要知道,这个世界上,知识在发展,人类在进步,每天都在进行日新月异的变化,我们的知识储备总会有不够的地方,但是一定要有学习能力,将不会知识快速掌握,只有这样才能占据主动,减少被动情况的尴尬发生,通过二个星期的时间,我成功的适应了公司的工作和生活节奏,每天早九点上班,晚17:30下班,中午休息一个半小时,每周还有两天假期。我利用业余时间,抓紧学习,将工作中所需要的技术进行了强化学习,其实这些东西在学校的时候就接触过,只是不精通。那个时候学的东西多,难免有个主次之分,这次工作了,才知道哪个应该多学点,但好在我都有学过,所以有个好的基础在这里,也就不怕了,比如说:flash,公司要求技术人员会做flash,flash这东西以前我在宿舍的时候经常玩的,可是后来在分析就业情况时,分析错了方向,以为这东西没有什么用处,结果就给荒废了。但好在还有印象,并且当初记了很多的笔记,所以说记笔记是很重要的事情。而其它像javascript、xml、数据库这些东西我都学过,只是实践能力稍差一点,但好在从前在学习方面用的功不是白费的。通过这种实战环境,和半个月的刻苦学习,我终于可以感上小组的工作进度了,已经可以很好的完成领导教给我的任务了。

像我这个组常用的是css+div排版,后台使用php技术进行开发,服务器平台采用,linux+apache+mysql+php,这种lamp组合,我很高兴在学校学的东西能学有所用。以前我们是用表格(table)进行排版,这种方式简单但是已经有些过时了,现在大部分网站都开始了重新构架,所以都采用css+div进行网页排版,我目前正在学习,掌握的还算比较快。而在后台开发部分,我们使用php来进行开发,我的工作是手写一些小模块。或者用javascript写一些特效小代码。

三、工作流程

小组分工时,我负责后台里小模块的开发工作,如:留言板或论坛,还有一部分javascript代码编写工作。前台部分的工作是和组里的丁珊珊做一些排版的工作,使用css+div技术。编写代码这种工作看起来有些枯燥,其实时间长了以后,还真有点厌烦,但是后来我明白,只有将自己的本职工作做好,提高自己的技术,做出优良的东西,这样自己才会有价值感,才会对自己的工作保持新鲜感。所以我每天都在工作后,记录下每天在技术上的不足之处,回家后,将强学习,这所谓:找出不会的地方,学会它,你就变的强大了。

php是现在比较流行的一种网站开发技术,由于它是开源的免费代码,并因良好的跨平台性能受到了大重的喜欢,我个人认为php很简单,适合初学者学习使用,但是在某些地方想要做好,就需要你认真的学习了。目前,我负责的只是技术性较低和规模较小的模块,不过,我觉得从简单处做起也挺好的,但是我在写代码时,还是经常犯些小错误,导致代码页面经常出错,而自己往往还找不到是哪错了,有几次急的都不行,不管怎么弄,结果就是错误,后来我才发现,原来只是一个小错误,小的不仔细察看,我都找不到。于是我明白,做开发工作,一定要细心,否则就会给自己和别人带来麻烦。

四、安全检查

安全检查是很重要的一个环节,就像你给人家盖房子,房子盖好了,可是门和窗不结实,那这种就必然不会安全的了。页站的制做也是同样的道理,在安全方面,有一个地方是和开发人员有很大的关系的。因为开发人员技术的高低决定了网站的安全性,有些人员在一些环节上的疏漏,很有可能导致网站在实际使用时,遭到黑客攻击,如果造成了经济损失就无法挽救了。

所以,我们每个人在将各自的工作完成以后,组长和其它专门的技术人员会对网站的安全性进行测试,找出存在的漏洞,然后加以修改。以使它的安全性达到最高最稳定的状态。

在公司进行实习工作的这段时间,我在个人技术上收获了很多,现在的我已经能独档一面了,做一些难度比较大的工作,我通过优异的表现,已经转为正式员工,我对自己的表现感到满意,最重要的是我给自己的学校争了光,但是在社交能力方面,沟通能力上还有不足的地方。我决定在今后的工作和学习,要加强和别人的沟通能力。使自己变的更好,为国家为社会做出更多的贡献。

网页设计实训总结心得6篇相关 文章 :

★ 网页设计实训总结心得6篇

★ 网页设计实习心得体会3篇

★ 网页设计实训报告心得

★ 网页设计实训心得

★ 网页设计实习心得体会总结

★ 网页设计实训心得三篇

★ 网页设计实习心得体会

★ 网页设计实习心得体会感想

★ 学习网页设计的总结

★ 有关网页制作实训报告心得体会