요일 동안 블로그를 업데이트하지 않았습니다. 방금 간단한 HTML+CSS 프로젝트를 마쳤습니다. 며칠간의 탐색 끝에 많은 이점을 발견했습니다. 이전에는 실제로 프로젝트를 연습하지 않고 데모를 작성하고 지식 포인트만 읽어야 했습니다. 그러나 실제 전투가 끝난 후에야 기술을 더 잘 향상시키는 방법을 이해할 수 있습니다. 이번 프로젝트 개발을 위해 다음과 같은 내용을 정리했습니다.
1. 기술적 요약
1. 공개 스타일 설정
프로젝트를 시작하기 전에 먼저 개요를 이해할 수 있습니다. 글꼴 스타일, 단락 구조, 텍스트 크기 등과 같은 프로젝트의 각 페이지 내용. 이러한 콘텐츠에 대해 고정 스타일 파일을 설정할 수 있습니다. 개발 중에 CSS 코드를 반복적으로 입력하지 않고도 이 파일을 직접 도입할 수 있습니다.
/*基本样式*/
* {
margin:0;
padding:0;
}
body {
font-family: "微软雅黑";
}
.clear { /*清除两边浮动*/
clear: both;
}
.fl { /*清除左浮动*/
float: left;
}
.fr { /*清除右浮动*/
float: rightright;
}
a { /*去掉链接的默认下划线*/
text-decoration: none;
}
li { /*去掉列表默认样式*/
list-style: none;
}로그인 후 복사
필요할 때는 클래스 이름 바로 뒤에 사용할 클래스 이름을 추가하면 됩니다.
<div class="div01 lf"></div>
<div class="div02 clear"></div>
로그인 후 복사
2. 전체 레이아웃
개발 프로젝트 진행 중 , 각 페이지의 틀을 미리 구축했다면 나중에 구체적인 내용만 채워 넣으면 됩니다. 그리고 나는 페이지의 전체 레이아웃을 달성하기 위해 다음 프레임워크를 사용하는 데 익숙합니다.
<body>
<div id="header"></div><!--页面顶部内容-->
<div id="nav"></div><!--导航部分-->
<div id="content"></div><!--页面中间内容-->
<div id="footer"></div><!--页面底部-->
</body>로그인 후 복사
일반적으로 페이지의 일반적인 프레임워크를 설정한 후 나머지 부분을 하나씩 채우는 것이 더 편리합니다. .이렇게 하면 발전할 수 있다. 생각도 더 명확해진다. 물론 해당 CSS 스타일도 설정해야 하지만 이는 프로젝트의 특정 요구 사항에 따라 다릅니다.
3. 요소 자르기
일반 레이아웃이 완료되면 다음 단계는 자르기부터 시작해야 합니다. 기술적인 작업은 많지 않지만 지불해야 할 사항이 있습니다. 에 주의. 예를 들어, 사진을 자를 때는 크기에 특별한 주의를 기울여야 합니다. 일부는 더 미묘한 부분이지만 인내심을 갖고 다뤄야 합니다. 세부적인 문제로 인해 다른 결과가 나오는 경우가 많기 때문입니다. 사실 거의 충분하다고 생각하지 마세요. 때로는 조금이라도 효과가 만족스럽지 않으면 결국 수정하는 데 시간을 투자해야 합니다. 또한 잘라낸 이미지를 저장할 때 이미지 파일이 자동으로 생성되므로 직접 새 디렉터리를 만들거나 특정 디렉터리를 입력할 필요가 없습니다. 그렇지 않으면 이미지 폴더가 해당 위치에 계속 나타납니다. .
4. 명명 및 코드 작성 표준
표준 명명은 코드 가독성을 높이는 데 도움이 됩니다. 인터넷에는 관련 사양이 많이 있는데 몇 가지만 간단히 나열하겠습니다.
(1) 직관적인 명명
웹 페이지를 디자인하고 div를 식별해야 할 때 가장 자연스러운 것은 아이디어는 페이지에서의 위치를 설명하는 단어를 사용하여 요소의 이름을 지정하는 것입니다.
예: top-panel
horizontal-nav
left-side
(2), 구조적 이름 지정
예: : main-nav
subnav
(3), 멤버 기반 명명 규칙
멤버 기반 명명 규칙은 파일과 폴더의 소속에 따른 분류를 말합니다. 이름을 지정하는 방법을 사용하면 파일 배열을 보다 논리적으로 만들 수 있습니다.
예를 들어, 마우스 클릭 전의 사진 파일은 "file_on"이고 클릭 후의 사진 파일 이름은 "file_off"입니다. 카테고리가 더 명확해졌습니다.
5. "스프라이트" 만드는 법을 배우세요
프로젝트 개발에는 많은 작은 아이콘과 작은 그림이 추가됩니다. 하나씩 잘라내서 저장하게 되면 사용하기가 더 번거롭고, 메모리도 많이 차지하게 되어 페이지 로딩 속도가 많이 느려지게 됩니다. 이는 좋은 일이 아니며 사용자 경험을 크게 감소시킵니다. 그러므로 작은 그림을 미리 잘라서 같은 페이지에 올려놓고 개발할 때 이 그림만 소개하면 됩니다. 그런 다음 배경 위치 속성을 사용하여 설정할 수 있는 배경 이미지의 위치를 조정하는 상황을 추적합니다.
6. 지식 포인트의 명확성
프로젝트를 진행하면서 특정 지식 포인트에 대해 충분히 숙지하지 못하고 능숙하게 사용하지 못해 개발 속도가 느려졌습니다. 지식 포인트를 능숙하게 마스터하면 해당 효과를 달성하기 위한 코드를 빠르게 작성할 수 있습니다. 이 프로젝트를 개발하면서 저는 주로 다음 지식 포인트에 익숙하지 않았습니다:
(1), 관계 선택기 사용
(2) ) , 의사 클래스 선택기 사용
特别是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 프로젝트 개발 경험 요약(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
更多HTML+CSS 프로젝트 개발 경험 요약相关文章请关注PHP中文网！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
