Article directory
Topic 1: implement the tool box framework of Taobao Homepage
1. Use the border,margin,padding and position attributes in the div box model to implement the tool box framework structure of Taobao Homepage
The solid boxes are all picture objects; the border boxes are text objects;
solution
Renderings (under iPhone 6 / 7 / 8 plus screen size)
Existing problems
1. Poor ability to adapt to screen changes
Most elements are case dead
2. The edge of the icon is not aligned
Browser direct preview will have a more obvious look
Problems that have occurred
When adjusting the location of the composite elements of the lower services, display: inline block; is used. The display location is a bit strange (as shown in the figure). At that time, only the size of the orange area and the outer box are reset, and the other styles are the same as the group styles.
There is no reason to understand. Then adjust the position by relative positioning.
index.html
Class name naming reference CSS naming rules
It is explained in the question that the solid boxes are all picture objects, in which < div > is used instead of
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>EX04</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="g-index"> <div class="g-hd"> <div class="m-nav"> <div class="u-title z-active">Notice</div> <div class="u-title">rule</div> <div class="u-title">forum</div> <div class="u-title">security</div> <div class="u-title">public welfare</div> </div> </div> <div class="g-bd"> <div class="m-info"> <p class="u-text"></p> <p class="u-text"></p> </div> <div class="m-login"> <div class="u-pic"></div> <div class="u-input"> <p class="u-text"></p> <p class="u-text"></p> </div> <div> <div class="u-btn">Sign in</div> <div class="u-btn">Free registration</div> <div class="u-btn right">Free shop</div> </div> </div> <div class="m-info"> <p class="u-text"></p> </div> <div class="m-service"> <div class="u-func first"> <div class="u-pic first"></div> <br /><br />Pay the phone bill </div> <div class="u-serline"> <div> <div class="u-func"> <div class="u-pic"></div> Game </div> <div class="u-func"> <div class="u-pic"></div> travel </div> <div class="u-func"> <div class="u-pic"></div> Insurance </div> </div> <div> <div class="u-func"> <div class="u-pic"></div> lottery </div> <div class="u-func"> <div class="u-pic"></div> Film </div> <div class="u-func"> <div class="u-pic"></div> Take away </div> </div> </div> <div class="u-serline endline"> <div class="u-func"> <div class="u-pic"></div> Conduct financial transactions </div> <div class="u-func"> <div class="u-pic"></div> Looking for services </div> <div class="u-func"> <div class="u-pic"></div> Music </div> <div class="u-func"> <div class="u-pic"></div> Hydropower coal </div> <div class="u-func"> <div class="u-pic"></div> Train tickets </div> </div> </div> </div> </div> </body> </html>
index.css
.g-index { border: 2px solid #eee; } .m-nav { background: #f7f7f7; } .u-title { display: inline-block; border-bottom: 2px solid #eee; padding:10px 42px 10px 42px; font-size: 50px; color: #3c3c3c; } .u-title.z-active { background: #fff; border-bottom: 2px solid #fff; border-right: 2px solid #eee; padding:10px 42px 10px 42px; font-weight: bolder; color: #111; } .m-info { border-bottom: 2px solid #eee; padding: 30px 42px 30px 42px; width: 882px; } .m-info .u-text { height: 50px; border: 1px solid #000; } .u-pic { background: #ff4400; } .m-login { border-bottom: 2px solid #eee; padding: 30px 42px 30px 42px; } .m-login .u-pic { display: inline-block; height: 200px; width: 200px; } .m-login .u-input { display: inline-block; margin-left: 38px; margin-bottom: 20px; } .m-login .u-text { height: 50px; width: 631px; border: 1px solid #000; } .m-login .u-btn { display:inline-block; padding: 20px 0; margin-top: 20px; margin-right: 17px; width: 276px; text-align: center; background: #ff4400; color: #fff; font-size: 45px; } .m-login .u-btn.right { margin-right: 0px; } .m-service .u-func { display: inline-block; border: 2px solid #eee; padding: 27px; color: #999; font-size: 40px; text-align: center; } .m-service .u-pic { background-color: #ff4400; height: 130px; width: 130px; margin-bottom: 10px; } .m-service .u-serline { display: inline-block; } .m-service .u-func.first { position: relative; top: -28px; height: 446px; width: 321px; } .m-service .u-pic.first { position: relative; top: 85px; left: 70px; height: 250px; width: 160px; } .m-service .u-serline.endline { position: relative; top: -28px; }
Question 2: draw a figure (upper left triangle)
2. Write the following figure
solution
Reference article: Common CSS graphics drawing collections (code)
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>EX04</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="back"></div> <div class="triangleL"></div> <div class="triangleS"></div> </body> </html>
index.css
.back { height: 200px; width: 200px; background: #eee; } .triangleL { position: relative; top: -200px; width: 0; border-top: 100px solid red; border-right: 100px solid transparent; } .triangleS { position: relative; top:-300px; width: 0; border-top: 50px solid #fff; border-right: 50px solid transparent; }
