Summary of the first week of internship, the first week of internship

Summary of the first week of internship, the first week of internship

After a week of practice, I had a poor foundation. I only wrote one thing on the page. I realized that I was not qualified to connect to the background, in the end, I had to ask the boss to help me re-modify it to bind data to the backend. The road was long (why can't I think about it at a young age? What code should I use? -----)

 

1. position: absolute and problem locating
After position: absolute is used, you can find that you want to center, and margin does not work. After absolute, you can find that the box model is out of the Document Stream. If its parent element does not define relative, the box model then positions the parent element with the body. While absolute and margin-left seem to be born enemies, and you will leave here. Here we need to use absolute with top, left, bottom, and right. Of course, I don't know whether there are other methods. I used this method. The following is an example:

 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 
Effect
 
2. code naming should be standardized, code reuse utilization should be high, and concise !!! Do not use balabala to write a bunch of codes with the least amount of code, which is highly efficient !!!
3. Learn JS in a down-to-earth Manner !!!
4.css the mouse goes through the effect. If the effect is the same, you do not need to name multiple CLASS names. You only need one CLASS name. The mouse event corresponding to each element will respond accordingly, the mouse event will not occur because the class names are the same.
Error code:
1 <! -- Left content --> 2 <div class = "container-left" id = "CLeft"> 3  4 <div class = "slide-img-left"> </div> 5  6 <div class = "moveBox-left"> 7 <p class = "p1"> Zhejiang University B campus </p> 8 <p class = "p2"> area: 1240m² & nbsp; asset: 1247 & nbsp; Current warning: 2 </p> 9 </div> 10 <div class = "btn-left"> 11 <a href = "#" class = "btn1"> running mode </> 12 <a href = "#" class = "btn2 "> Editing mode </a> 13 <a href =" # "class =" btn3 "> background </a> 14 </div> 15 </div> 16 17 <! -- Intermediate content --> 18 <div class = "container-center" id = "CCenter"> 19  20 <div class = "slide-img-center"> </div> 21  22 <div class = "moveBox-center"> 23 <p class = "p1"> Zhejiang University B campus </p> 24 <p class = "p2"> area: 1240m² & nbsp; asset: 1247 & nbsp; Current warning: 2 </p> 25 </div> 26 <div class = "btn-center"> 27 <a href = "#" class = "btn1"> running mode </> 28 <a href = "#" c Lass = "btn2"> editing mode </a> 29 <a href = "#" class = "btn3"> background </a> 30 </div> 31 </div> 32 33 <! -- Content on the right --> 34 <div class = "container-right" id = "CRight"> 35  36 <div class =" slide-img-right "> </div> 37  38 <div class =" moveBox-right "> 39 <p class =" p1 "> Zhejiang University B campus </p> 40 <p class =" p2 "> area: 1240m² & nbsp; asset: 1247 & nbsp; Current warning: 2 </p> 41 </div> 42 <div class = "btn-right"> 43 <a href = "#" class = "btn1"> running mode </> 44 <a href = "#" class = "btn2"> editing mode </a> 45 <a href = "#" class = "btn3"> background </a> 46 </div> 47 </div> 48 </div>
View Code
Correct syntax:
 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 View Code
5. The next step shows how to add the selected event to the end and automatically display it as the current event. It is convenient for others to know which one is selected.
6. Don't think about it for the moment.