2-13 帮我看看?老师谢谢
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title ></ title > < style type = "text/css" > ul,li,body,img,div{ padding: 0; margin:0; } .container{ width:90%; height:600px; margin:0 auto; } .imgtop{ width:100%; height:400px; background-color:skyblue; } .imgtop .bigimg{ width: 50%; height: 400px; float: left; text-align: center; } .imgtop .bigimg img{ position: relative; top:calc(50% - 107px); } .smallimg ul li{ width: 100%; height: 200px; background-color: pink; float: left; list-style: none; width: calc(100% / 3); text-align: center; } .smallimg img{ position: relative; top:calc(50% - 15px); } </ style > </ head > < body > < div class = "container" > < div class = "imgtop" > < div class = "bigimg" > < img src = "http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt = "" > </ div > < div class = "bigimg" > < img src = "http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt = "" > </ div > </ div > < div class = "smallimg" > < ul > < li >< img src = "http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt = "" ></ li > < li >< img src = "http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt = "" ></ li > < li >< img src = "http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt = "" ></ li > </ ul > </ div > </ div > </ body > </ html > |
14
收起
正在回答 回答被采纳积分+1
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧