HTMl和css项目总结,HTML+CSS项目开发总结

好几天没更新博客了,刚实战完一个HTML+CSS的简单项目。经过几天的摸索,发现收益良多。之前只是单纯得写demo,看知识点,没有亲自实战项目。但实战过后才会了解,如何才能更好地提升自己的技术。针对这次项目开发,我总结了以下内容:

一、技术总结

1、公共样式的设定

在开始项目之前,我们可以先大体了解一下项目中每个页面的内容,比如字体样式,段落结构,文字大小等。我们可以针对这些内容来设定一个固定的样式文件。在开发中 就可以直接引入此文件,而无需再重复敲CSS代码。

/*基本样式*/*{margin:0;padding:0;

}body{font-family:"微软雅黑";

}.clear{ /*清除两边浮动*/clear:both;

}.fl{ /*清除左浮动*/float:left;

}.fr{ /*清除右浮动*/float:right;

}a{ /*去掉链接的默认下划线*/text-decoration:none;

}li{ /*去掉列表默认样式*/list-style:none;

}

需要用到时就直接在类名后加上所要用到的类名即可:

div>

div>

2、整体布局

开发项目过程时,若事前先将每一页的框架搭建好,而后期就只需把具体内容填充进去就可以了。而我就习惯用以下框架来实现页面整体布局:

div>

div>

div>

div>

body>

一般来说,设定好页面大体框架后,剩下的就直接一块一块地填充进去就方便些了,这样开发起来思路也比较清晰。当然还要设定相应的CSS样式,但这个要视项目的具体  要求来做。

3、切图要素

当大体布局弄好后,接下来应该就是从切图开始入手了,虽然没有太多技术性的操作,但也有些要注意的地方。比如在切图中,要特别注意的是尺寸。虽然有些是比较细微 的部分,需要耐心处理。因为细节性的问题往往也会导致结果的不同。其实不要认为差不多就可以了,有时候差一点就是差一点,当效果不尽人意的时候,到头来还是得再去花时间去修改。再者,在保存切图时,由于会自动生成一个images文件,所以我们不用再自己新建目录,或者也不用进入到某个目录中,不然它还是会在相应的位置出现images这个文件夹。

4、命名、代码书写规范

规范的命名有助于提高代码可读性。在网上也有挺多相关的规范,在这里我也简单罗列几点:

(1)、直观命名

当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。

例如: top-panel

horizontal-nav

left-side

(2)、结构化命名

例如: main-nav

subnav

(3)、基于成员的命名规范

基于成员的命名规范是指按照文件,文件夹的从属关系,通过归类的方法进行命名,这样可以使文件的排列具有较强的逻辑性.

例如:一个图片文件是在鼠标点击之前为"file_on".而在点击后的图片文件命名为"file_off"根据这个类别命名.更加的清晰.

5、学会制作“雪碧图”

在项目开发中少不了会加入许多小图标,小图片。若一张张切下来后保存起来后,使用起来也比较麻烦,加之所占内存也大,如此一来页面加载速度就慢了许多。这可不是 什么好事,大大降低了用户体验度。所以,我们可以事先把小图片切下来放在同一张页面,到时候开发时就只需要把这张图片引入即可。然后再跟进情况调整背景图片的位 置,利用background-position这个属性可以设置。

6、知识点的清晰

在做项目时,我由于对某些知识点不够熟悉,不能熟练运用,所以导致开发速度慢。当我们熟练掌握了一个知识点后,是可以快速地写出代码实现相应的效果。在这个项目开发过程中,我主要是对以下知识点不够熟悉:

(1)、关系选择符的使用

f8a6b3dd4ce69b2d9f0b790337b7f772.png

(2)、伪类选择符的使用

97d6d63f11912b7c3291c94106147072.png

1ab638d40a161b21d0da5dc9036917f1.png

特别是E:first-of-type与E:first-child 。其实它两最大的区别在于前者是父元素下的第一个结构标签,而后者不需要一定是第一个结构标签。如下例子:

p标签p>

a标签a>

a标签a>

div>

a:first-child是.test下的第一个结构标签,而且是a标签,不是则不起效果 。

a:first-of-type不需要是第一个子元素只需要.test下的a标签的第一个即可。

(3)、CSS属性之opacity、z-index 、display

a、opacity

在这次项目开发中,有一个效果是需要用到遮蔽层的效果。如下图。一开始我的做法是写两个div,然后将第二个div设置透明。然后再用hover后,将它透明度调回不透明。 同时也将第二个div定位,与第一个div重合。但我发现这样写下来代码多且容易乱。而参考了其他小伙伴的代码,发现其实灵活运用z-index也可以做到此效果。下面是具体实现

CSS代码:

.div1 {

width: 200px;

height: 200px;

background-color: #ccc;

position: relative;

font-size: 20px;

text-align: center;

line-height: 200px;

}

.div2 {

width: 200px;

height: 200px;

position: absolute;/*使其与父元素重合*/

top:0;

left:0;

background: rgba(21,85,144,0.2);

opacity: 0;/*先设置为透明*/

transition: all 0.3s;/*过渡效果*/

cursor: pointer;

}

.div2:hover {

opacity: 1;

}

HTML代码:请把鼠标放在这里div>

div>

896c3a2509394994a98355b41fb014e3.gif

b、z-index

检索或设置对象的层叠顺序。

并级的对象,此属性参数值越大,则被层叠在最上面。

如两个对象的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。

必须定position属性值为absolute、relative或fixed,此取值方可生效。

c、display

none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline:指定对象为内联元素。block:指定对象为块元素。

list-item:指定对象为列表项目。

inline-block:指定对象为内联块元素。(CSS2)

二、心态总结

经过这次的项目练习,我发现其实很多时候不是直接的能力问题,而是态度问题。一开始,十几个页面要赶在几天内完成,我对自己最后做出的结果是怀疑的。但我也想到,假如以后工作了,也避免不了会"高压"作业。也就是会可能在短时间内把工作任务完成到位。过程总是坚辛的,但往往别人看重的只有结果。结果没出来,就是工作没到位,虽然如此说来挺残酷的,但事实确实如此。这次的项目完成力度大概90%,还差一些效果没有实现。但后来发现还得做浏览器兼容,这确实是个头疼的问题。虽然麻烦,但这也是必不可少的一部分。针对这次的项目练习,我总结了以下几点,我认为自己可以提升的地方:

1、熟悉并熟练使用每个HTML便签和CSS属性。我认为导致开发速度慢的原因之一是因为自己对知识点的掌握不够。比如说,要实现某个效果,但却由于想不起来用到了哪些属性,或者忘记了属性名称,又得花时间去查找资料。无形中时间就耗掉了。

2、减少冗余,优化代码。可以省略的还是省略为好,因为代码多了占用内存,页面加载速度也会变慢。在写代码的过程中,也可以先思考一下有什么比较简洁的写法,提高代码书写速度。当然这也是一点点积累出来的,练习多了自然也会慢慢了解如何才会提高代码书写速度以及降低冗余。

3、切图速度。也许是比较少用设计工具,对软件界面的操作不太熟悉。但切图其实也不需要太高技术,但需注意的一点是准确性。同时也能提高专注度。

4、多思多练、不耻下问。在遇到一个技术难题时,我通常的做法是先自己想,实在想不出的可以百度,参考网上的,然后再实现自己的。若网上的资料不太清晰或者不太理解的情况下。我觉得还是问同学或老师,通过互相交流学习,其实是可以比较快速地了解知识点,并且发现自己不足之处。同时学习借鉴别人做的好的方面。

5、培养严谨的态度

关于细节性的问题,是很多人都比较容易忽略的。而我自己看来,我并不觉得自己是个严谨的人。有些时候还是因为自己的粗心而导致结果不佳。所以,在认识了这点之后,我会时时刻刻提醒自己。不能因为追求速度而忽略了一些看似无关紧要的东西。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360368.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Camel日志组件示例

Apache Camel日志组件示例 您要将消息记录到底层的记录机制,请使用骆驼的log:组件。 Camel使用sfl4j作为记录器API,然后允许您配置记录器实现。 在本文中,我们将使用Log4j作为实际的记录器机制。 让我们从示例开始。 依存关系 您需要添加&am…

HDU--4768

题目&#xff1a; Flyer 原题链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4768 分析&#xff1a;二分。只需要注意到最多只有一个为奇数&#xff0c;则可以首先求出学生获得的总的传单数&#xff0c;为奇数时&#xff0c;二分找到答案。 1 #include<cstdio&…

js return的值取不到_【JS基础】隐式转换(一)

开篇JS作为一门动态语言十分灵活&#xff0c;但是伴随而来的弱类型隐式转化的问题让我们十分头疼。隐式作为一个大课题&#xff0c;很难用一个很简短的篇幅把JS的隐式转换讲解的十分清楚。所以我选择用多次少量的策略进行梳理&#xff0c;争取让你每看完一篇都会有加深对于JS隐…

html5 loaded,How do you check if a HTML5 audio element is loaded?

问题I am wanting to know how to check if a HTML5 audio element is loaded.回答1:To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onl…

Java的坏功能是什么

总览 当您第一次学习开发时&#xff0c;您会看到关于不同功能的过分笼统的陈述&#xff0c;对于设计&#xff0c;性能&#xff0c;清晰度&#xff0c;可维护性来说&#xff0c;都是不好的&#xff0c;感觉就像是黑客&#xff0c;或者他们只是不喜欢。 这可能会得到现实世界经验…

面试题(2)

逻辑推理 1、你让工人为你工作7天&#xff0c;给工人的回报是一根金条。金条平分成相连的7段 &#xff0c;你必须在每天结束时给他们一段金条&#xff0c;如果只许你两次把金条弄断&#xff0c;你如何给你 的工人付费&#xff1f;   2、请把一盒蛋糕切成8份&#xff0c;分给8…

语句 查询每个人每个科目的最高分_转行数据分析师专栏(SQL篇)-05多表查询...

数据表&#xff08;4张&#xff09;及数据情况&#xff1a;搭建数据表数据参考&#xff1a;空杯希望&#xff1a;转行数据分析师专栏&#xff08;SQL篇&#xff09;-01SQL入门​zhuanlan.zhihu.com一、表的加法1、先新建一个表course1&#xff08;和course表数据结构一致&#…

星海中学2021高考成绩查询,广东中考时间2021

忙碌了整整一个学期&#xff0c;同学们最关心的当然是什么时候能好好的回家调节一下学习的节奏&#xff0c;一起来看看广东各个大学的寒假放假时间吧&#xff01;下面是由出国留学网小编为大家整理的“2021广东各大学寒假放假时间”&#xff0c;仅供参考&#xff0c;欢迎大家阅…

JDK 8 SummaryStatistics类

JDK 8中引入的三个新类是java.util包的DoubleSummaryStatistics &#xff0c; IntSummaryStatistics和LongSummaryStatistics 。 这些类使计算元素总数&#xff0c;元素最小值&#xff0c;元素最大值&#xff0c;元素平均值以及双精度&#xff0c;整数或long的集合中的元素总和…

plsql 设置鼠标行执行_如何制作键盘鼠标产品质量合格证

鼠标前盘属于办公用品套装&#xff0c;一般会一起销售&#xff0c;但是也不排除分开销售&#xff0c;无论是哪种方式键盘鼠标在生产销售时都需要携带对应产品质量合格证&#xff0c;对产品进行简单的说明&#xff0c;更能保障消费者的权益。那么如何制作产品质量合格证呢&#…

第四章例4-2

/* 输入一批学生的成绩&#xff0c;以负数作为结束标志&#xff0c;计算平均成绩&#xff0c;并统计不及格人数 */ #include<stdio.h> int main(void) {int count,num;double grade,total;num0;total0;count0;printf("Enter grades:");scanf_s("%lf"…

Spring RESTful错误处理

这篇文章将说明在Spring中可以为RESTful Web服务实现异常处理的方式&#xff0c;这种方式使得异常处理的关注点与应用程序逻辑分离。 利用ControllerAdvice批注&#xff0c;我们能够为所有控制器创建一个全局帮助器类。 通过添加用ExceptionHandler和ResponseStatus注释的方法…

html.action 访问分部视图,MVC+EF 随笔小计——分部视图(Partial View)及Html.Partial和Html.Action差异...

Partial View指可以应用于View中以作为其中一部分的View的片段(类似于之前的user control), 可以像类一样&#xff0c;编写一次&#xff0c; 然后在其他View中被反复使用。一般放在"Views/Shared"文件夹中以共享。创建Partial View&#xff1a;一般直接右键"Vie…

svm核函数gamma参数_非线性SVM与核函数

前面几篇我们介绍的都是线性支持向量机&#xff0c;换句话说&#xff0c;我们总可以用一条线或一个超平面将数据进行分割。如下图所示&#xff1a;但在更多情况下&#xff0c;有些数据是无法进行线性分割的。比如下面的例子&#xff1a;也就是说&#xff0c;你永远无法用一条直…

a查询计算机主机路由表信息,计算机网络主机A向其他主机B进行通信的流程

当主机A要与主机B通信时&#xff0c;地址解析协议可以将主机B的IP地址如(192.168.1.2)解析成主机B的MAC地址&#xff0c;以下为工作流程&#xff1a;第1步&#xff1a;根据主机A上的路由表内容&#xff0c;IP确定用于访问主机B的转发IP地址是192.168.1.2。然后A主机在自己的本地…

使用Java将数据流式传输到HPCC

高性能计算集群&#xff08;HPCC&#xff09;是类似于Hadoop的分布式处理框架&#xff0c;除了它运行以自己的称为企业控制语言&#xff08;ECL&#xff09;的特定领域语言&#xff08;DSL&#xff09;编写的程序外。 ECL很棒&#xff0c;但是偶尔您会想用其他语言来执行繁重的…

anychart说明文档

今天学习anychart&#xff0c;在慧都控件网上看有关文档&#xff0c;模仿试着做了个demo&#xff0c;发现慧都空间网的“Flash图表AnyChart应用教程六&#xff1a;创建圆形仪表”里的指针“<pointer type"bar" value"35" color"Gray" />”…

h5 神策埋点_咕咚技术总监唐平麟:神策使我们的数据平台成本降低约 75%,迭代效率提升 2~3 倍...

在这个数据爆炸的时代&#xff0c;数据成为各行各业出奇制胜的法宝&#xff0c;运动行业也不例外&#xff0c;那么大数据对运动业有什么价值呢&#xff1f;咕咚作为智能运动的倡导者和先行者&#xff0c;致力于成为全球领先的运动大数据和服务平台&#xff0c;现已为超过 1.5 亿…

JavaFX,Jigsaw项目和JEP 253

因此&#xff0c; Java 9可能会破坏您的代码 …… 如果您的项目使用JavaFX&#xff0c;则这尤其可能&#xff0c;因为许多自定义项和自制控件都需要使用内部API。 借助Project Jigsaw&#xff0c;这些内容将无法在Java 9中访问。幸运的是&#xff0c; Oracle在几天前宣布了 JE…

微型计算机技术6,微型计算机技术课后习题6-8章答案.ppt

微型计算机技术课后习题6-8章答案MOV AL L2: MOV CX,8 L1: OUT 20H,AL CALL DELAY2S ROR AL,1 LOOP L1 JMP L2 习题:8.24 8253A-5的计数通道0连接如图习8-4所示,试回答:(1)计数通道0工作于何种方式&#xff0c;并写出工作方式名称&#xff1b;(2)写出计数通道0的计数初值(列出计…