项目总结
- 代码重复
在实际项目制作中，因为项目包含的页面非常多，在很多页面中都有大部分的区域是和其他页面重复的，如果在项目一开始就直接埋头写代码，而不对项目进行规划的话，到最后项目代码肯定会有非常之多的重复代码，这样既耗时又不讨好。即使中途发现存在重复代码开始复制粘贴来提高效率，这些重复代码也一样会出现在各个文件中，影响到项目在浏览器中的加载速度，同时如果在项目后期这些重复代码需要修改的话，也会变得非常之麻烦了。
在有了以上几点问题之后，项目的前期规划就显得特别重要了，规划中不仅要完成好项目的总体布局，还要对项目中可复用的代码集中在一起统一使用和管理，方便使用和修改。在前端中有一个词叫"组件化"，意思是对项目中有各种各样功能或者可能会重复用到的代码写成一个个的组件，最常见的组件有轮播、弹窗之类的，网络上也有很多基于JQuery的各种各样方便又能快速使用的组件，组件是组件开发者把某些功能通过js代码封装成组件构造器，而且组件使用者只需要通过实例化组件即可达到使用组件的效果。我们需要的就是组件化的思维，既对于重复代码的集中管理和使用。
把组件化思维体现在项目中的话我们能做到以下几点：
- 把项目中在多数页面中都有出现的基本结构集中写在一个HTML文件里，把这个HTML文件当做项目HTML代码的基本模板，后续开发中的HTML文件都通过这个模板代码进行扩展。
- 把HTML模板文件对应的css代码写在一个css文件里，并命名为"base.css"，base.css中不光可以放HTML模板文件中对应的css代码，在项目中有一定出现次数的css代码都可以写入base.css中，base.css中的代码需要做到良好的命名规范和友好可读的注释。
- 良好的命名规范和友好可读的注释不光是base.css里的代码要做到，项目中所有其他的代码也需要做到这一点，这是作为一个程序员非常基本也非常重要的一个习惯。
- 要做到良好的命名规范和友好可读的注释就需要有一套可行的规范，在团队开发中，一套可行的规范非常重要。如果没有规范的话，团队中所有人都使用自己的习惯书写代码，最后只会导致项目代码混乱不堪，难以维护。团队规范的定义需要团队中的所有成员一起集思广益，把团队成员觉得好的并且都能接受的规则加入到规范之中。在遵守规范的前提下进行团队开发的话，可以大幅提高团队效率，减少不必要的时间和沟通成本。
- 交互
在一般的项目开发中HTML、CSS主要的作用是进行静态页面的制作，也就是所谓的切图，而大多数的交互效果都是交由JS进行实现的，但是在这次的项目开发中，通过其他同学的分享，有再一次地让我见识到了CSS3的强大。可以模拟轮播、弹窗、点击切换图片等等的交互效果，虽然只是模拟，而且做出来的效果也没有JS实现的那么完善，但是该有的效果也都有，并且实现起来比JS要简单许多。在以往的认知中这些效果都是需要JS才能实现的，不过现在如果把CSS3和JS结合起来使用的话，想必能做出 更多更有趣的效果。
1 DOCTYPE html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title>Documenttitle> 6 style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 ul{ 12 list-style:none; 13 } 14 .warp{ 15 margin:50px; 16 width:200px; 17 height:100px; 18 position:relative; 19 overflow:hidden; 20 } 21 ul{ 22 width:600px; 23 height:100px; 24 position:absolute; 25 top:0; 26 left:0; 27 } 28 ul li{ 29 display:block; 30 width:200px; 31 height:100px; 32 font-size:50px; 33 line-height:100px; 34 text-align:center; 35 color:#fff; 36 float:left; 37 } 38 ul li:nth-child(1){ 39 background-color:red; 40 } 41 ul li:nth-child(2){ 42 background-color:blue; 43 } 44 ul li:nth-child(3){ 45 background-color:black; 46 } 47 @keyframes slider1{ 48 0%{margin-left:-0px;} 49 14%{margin-left:-0px;} 50 19%{margin-left:-200px;} 51 47%{margin-left:-200px;} 52 52%{margin-left:-400px;} 53 80%{margin-left:-400px;} 54 85%{margin-left:0px;} 55 100%{margin-left:0px;} 56 } 57 @keyframes slider2{ 58 0%{margin-left:-200px;} 59 14%{margin-left:-200px;} 60 19%{margin-left:-400px;} 61 47%{margin-left:-400px;} 62 52%{margin-left:0px;} 63 80%{margin-left:0px;} 64 85%{margin-left:-200px;} 65 100%{margin-left:-200px;} 66 } 67 @keyframes slider3{ 68 0%{margin-left:-400px;} 69 14%{margin-left:-400px;} 70 19%{margin-left:0px;} 71 47%{margin-left:0px;} 72 52%{margin-left:-200px;} 73 80%{margin-left:-200px;} 74 85%{margin-left:-400px;} 75 100%{margin-left:-400px;} 76 } 77 .warp ul{ 78 -webkit-animation:slider1 6s infinite; 79 } 80 #click1:checked ~ .warp ul{ 81 -webkit-animation-name:slider1; 82 } 83 #click2:checked ~ .warp ul{ 84 -webkit-animation-name:slider2; 85 } 86 #click3:checked ~ .warp ul{ 87 -webkit-animation-name:slider3; 88 } 89 #click1,#click2,#click3{ 90 display:none; 91 } 92 label{ 93 display:inline-block; 94 width:50px; 95 font-size:24px; 96 height:50px; 97 line-height:50px; 98 color:#fff; 99 background-color:#ccc; 100 text-align:center; 101 } 102 label:first-of-type{ 103 margin-left:66px; 104 } 105 .warp:hover ul{ 106 animation-play-state:paused; 107 } 108 style> 109 head> 110 body> 111 input type="radio" checked name="ctrl" id="click1"> 112 input type="radio" name="ctrl" id="click2"> 113 input type="radio" name="ctrl" id="click3"> 114 115 div class="warp"> 116 ul> 117 li>1li> 118 li>2li> 119 li>3li> 120 ul> 121 div> 122 label for="click1">1label> 123 label for="click2">2label> 124 label for="click3">3label> 125 body> 126 html>
以上为css模拟的轮播效果。