实习第一周总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实习第一周总结相关的知识，希望对你有一定的参考价值。
实习了一周，基础太差，只做了写页面一件事，真正做起来才发现要对接后台，我写的完全不合格，最后还得麻烦老大帮忙重新改了一遍才能给后台绑定数据，前路漫漫啊（年纪轻轻为啥这么想不开，打什么代码呢？-----）
1.position：absolute 与定位问题
使用了position：absolute之后发现想要居中，margin不起作用了，一查资料发现，absolute以后，盒子模型脱离了文档流，如果他的父级元素没有定义relative，那么这个盒子模型会以body为父级元素相对定位。而 absolute与margin-left好像是天生的冤家，你在我就走。这里就需要absolute和top、left、bottom、right配合使用。当然不知道还有没有其他办法，我是使用了这种方法，下面是例子：
1 <style type="text/css"> 2 .l1{ 3 width: 100px; 4 height: 100px; 5 background-color:red; 6 position: relative; 7 margin: 0 auto; 8 } 9 .bg{ 10 width: 50px; 11 height: 50px; 12 position: absolute; 13 left: 0px; 14 right:0px; 15 top: 0px; 16 bottom: 0px; 17 margin: auto; 18 19 background-color: green; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="l1"> 25 <div class="bg"></div> 26 </div>
效果如图：
2、代码命名要规范，代码重复利用率高，以及简洁！！！能用最少的代码就不要balabala写一堆，效率要高！！！
3.扎扎实实学好JS！！！
4.css鼠标经过效果，如果效果一样，可以不需要命名多个CLASS类名，只要一个就可以了，每个元素对应的鼠标事件会有对应的响应，不会因为类名相同都发生鼠标事件。
错误的代码：
1 <!--左边内容--> 2 <div class="container-left" id="CLeft"> 3 <img src="images/jianbian.png" class="box-img"> 4 <div class="slide-img-left"></div> 5 <img src="images/3.1P.png" alt="图片加载失败" class="BG"> 6 <div class="moveBox-left"> 7 <p class="p1">浙江大学B校区</p> 8 <p class="p2">面积：1240m2 资产：1247 当前警告：2</p> 9 </div> 10 <div class="btn-left"> 11 <a href="#" class="btn1">运行模式</a> 12 <a href="#" class="btn2">编辑模式</a> 13 <a href="#" class="btn3">后台</a> 14 </div> 15 </div> 16 17 <!--中间内容--> 18 <div class="container-center" id="CCenter"> 19 <img src="images/jianbian.png" class="box-img"> 20 <div class="slide-img-center"></div> 21 <img src="images/3.2P.png" alt="图片加载失败" class="BG"> 22 <div class="moveBox-center"> 23 <p class="p1">浙江大学B校区</p> 24 <p class="p2">面积：1240m2 资产：1247 当前警告：2</p> 25 </div> 26 <div class="btn-center"> 27 <a href="#" class="btn1">运行模式</a> 28 <a href="#" class="btn2">编辑模式</a> 29 <a href="#" class="btn3">后台</a> 30 </div> 31 </div> 32 33 <!--右边内容--> 34 <div class="container-right" id="CRight"> 35 <img src="images/jianbian.png" alt="" class="box-img"> 36 <div class="slide-img-right"></div> 37 <img src="images/3.3P.png" alt="图片加载失败" class="BG"> 38 <div class="moveBox-right"> 39 <p class="p1">浙江大学B校区</p> 40 <p class="p2">面积：1240m2 资产：1247 当前警告：2</p> 41 </div> 42 <div class="btn-right"> 43 <a href="#" class="btn1">运行模式</a> 44 <a href="#" class="btn2">编辑模式</a> 45 <a href="#" class="btn3">后台</a> 46 </div> 47 </div> 48 </div>
正确写法：
1 <style type="text/css"> 2 .l1{ 3 width: 100px; 4 height: 100px; 5 background-color:red; 6 position: relative; 7 margin: 0 auto; 8 top: 10px; 9 } 10 .bg{ 11 width: 50px; 12 height: 50px; 13 position: absolute; 14 left: 0px; 15 right:0px; 16 top: 0px; 17 bottom: 0px; 18 margin: auto; 19 background-color: green; 20 } 21 .l1:hover .bg{ 22 transition: all 0.3s ease; 23 transform: translate(0px,-20px); 24 } 25 </style> 26 </head> 27 <body> 28 <div class="l1"> 29 <div class="bg"></div> 30 </div> 31 <div class="l1"> 32 <div class="bg"></div> 33 </div> 34 <div class="l1"> 35 <div class="bg"></div> 36 </div> 37 <div class="l1"> 38 <div class="bg"></div> 39 </div>
5.下一步弄明白如何让选中的事件后面加上active,自动显示为当前发生的事件。方便别人知道选中的是哪一个。
6.暂时没想起来，想起来再说吧。
以上是关于实习第一周总结的主要内容，如果未能解决你的问题，请参考以下文章
双非一本字节跳动后端实习经历分享，第一周做了什么？体验如何？