实习了一周，基础太差，只做了写页面一件事，真正做起来才发现要对接后台，我写的完全不合格，最后还得麻烦老大帮忙重新改了一遍才能给后台绑定数据，前路漫漫啊（年纪轻轻为啥这么想不开，打什么代码呢？-----）
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.暂时没想起来，想起来再说吧。
时间： 2024-08-02 18:35:47