Home > Article > Web Front-end > HTML+CSS project development experience summary
HTML+CSS project development experience summary
- 高洛峰Original
- 2017-02-11 14:31:451647browse
I haven’t updated my blog for several days. I just finished a simple HTML+CSS project. After a few days of exploration, I found a lot of benefits. Before, I just had to write demos and read knowledge points, without actually practicing projects. But only after actual combat will you understand how to better improve your skills. For this project development, I summarized the following contents:
1. Technical summary
1. Setting of public styles
Before starting the project, we can first outline Understand the content of each page in the project, such as font style, paragraph structure, text size, etc. We can set a fixed style file for these contents. During development, you can directly introduce this file without repeatedly typing CSS code.
/*基本样式*/
* {
margin:0;
padding:0;
}
body {
font-family: "微软雅黑";
}
.clear { /*清除两边浮动*/
clear: both;
}
.fl { /*清除左浮动*/
float: left;
}
.fr { /*清除右浮动*/
float: rightright;
}
a { /*去掉链接的默认下划线*/
text-decoration: none;
}
li { /*去掉列表默认样式*/
list-style: none;
}When you need to use it, just add the class name to be used directly after the class name:
<div class="div01 lf"></div> <div class="div02 clear"></div>
2. Overall layout
When developing the project, If you build the framework of each page in advance, you only need to fill in the specific content later. And I am used to using the following framework to achieve the overall layout of the page:
<body>
<div id="header"></div><!--页面顶部内容-->
<div id="nav"></div><!--导航部分-->
<div id="content"></div><!--页面中间内容-->
<div id="footer"></div><!--页面底部-->
</body>Generally speaking, after setting the general framework of the page, it is more convenient to just fill in the rest piece by piece. This way it can be developed The thinking is also clearer. Of course, you also need to set the corresponding CSS style, but this depends on the specific requirements of the project.
3. Elements of cutting pictures
After the general layout is completed, the next step should be to start with cutting pictures. Although there are not many technical operations, there are some things that need to be paid attention to. . For example, when cutting pictures, special attention should be paid to the size. Although some are more subtle parts, they need to be dealt with patiently. Because detailed issues often lead to different results. In fact, don't think that it's almost enough. Sometimes, just a little bit is just a little bit worse. When the effect is not satisfactory, you still have to spend time to modify it in the end. Furthermore, when saving the cut image, since an images file will be automatically generated, we do not need to create a new directory ourselves, or we do not need to enter a certain directory, otherwise the images folder will still appear in the corresponding location.
4. Naming and code writing standards
Standard naming helps improve code readability. There are many related specifications on the Internet, and I will briefly list a few here:
(1) Intuitive naming
When designing a Web page and needing to identify a div , the most natural idea is to name the element using a word that describes its location on the page.
For example: top-panel
horizontal-nav
left-side
(2), structured naming
For example: main-nav
subnav
(3) Member-based naming convention
Member-based naming convention refers to the classification according to the affiliation of files and folders. Naming method can make the arrangement of files more logical.
For example: a picture file is named "file_on" before the mouse click. And the picture file after clicking is named "file_off" "Name it according to this category. It will be more clear.
5. Learn to make "Sprite Pictures"
In project development, many small icons and small pictures will inevitably be added. If you cut them out one by one and save them, it will be more troublesome to use, and it will take up a lot of memory, so the page loading speed will be much slower. This is not a good thing and greatly reduces the user experience. Therefore, we can cut out the small picture and put it on the same page in advance, and then we only need to introduce this picture during development. Then follow up the situation to adjust the position of the background image, which can be set using the background-position attribute.
6. Clarity of knowledge points
When I was working on the project, I was not familiar enough with certain knowledge points and could not use them skillfully, so the development speed was slow. When we master a knowledge point proficiently, we can quickly write code to achieve the corresponding effect. During the development of this project, I was mainly not familiar with the following knowledge points:
(1), the use of relationship selectors
(2) , Use of pseudo-class selectors
特别是E:first-of-type与E：first-child 。其实它两最大的区别在于前者是父元素下的第一个结构标签，而后者不需要一定是第一个结构标签。如下例子：
<div class="test">
<!-- <a href="#">测试</a> -->
<p>p标签</p>
<a href="#">a标签</a>
<a href="#">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 class="div1">
请把鼠标放在这里
<div class="div2"></div>
</div>
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、培养严谨的态度
关于细节性的问题，是很多人都比较容易忽略的。而我自己看来，我并不觉得自己是个严谨的人。有些时候还是因为自己的粗心而导致结果不佳。所以，在认识了这点之后，我会时时刻刻提醒自己。不能因为追求速度而忽略了一些看似无关紧要的东西。
以上这篇HTML+CSS project development experience summary(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
更多HTML+CSS project development experience summary相关文章请关注PHP中文网！