1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 a { 13 text-decoration: none; 14 color: black; 15 } 16 17 /*头部*/ 18 header { 19 100%; 20 display: flex; 21 } 22 23 header > a { 24 flex: 1; 25 } 26 27 header > a > img { 28 100%; 29 } 30 31 /*主要内容*/ 32 main { 33 100%; 34 padding: 0 10px; 35 /*background-color: red;*/ 36 box-sizing: border-box; 37 } 38 39 main > .item { 40 100%; 41 height: 100px; 42 margin-top: 10px; 43 border-radius: 10px; 44 /*伸缩布局*/ 45 display: flex; 46 } 47 48 main > .item:nth-child(1) { 49 background-color: rgb(78, 50, 182); 50 } 51 52 main > .item:nth-child(2) { 53 background-color: rgb(31, 153, 209); 54 } 55 56 main > .item:nth-child(3) { 57 background-color: rgb(240, 147, 7); 58 } 59 60 main > .item:nth-child(4) { 61 background-color: rgb(187, 19, 131); 62 } 63 64 .item > .left { 65 flex: 1; 66 } 67 68 .item > .right { 69 flex: 2; 70 /*伸缩布局*/ 71 display: flex; 72 /*换行*/ 73 flex-wrap: wrap; 74 } 75 76 .item > .right > a { 77 display: flex; 78 /*居中*/ 79 justify-content: center; 80 align-items: center; 81 50%; 82 color: #fff; 83 84 box-sizing: border-box; 85 border-left: 1px solid #cccccc; 86 border-bottom: 1px solid #cccccc; 87 } 88 89 .item > .right > a:nth-last-child(-n+2) { 90 border-bottom: none; 91 /* 最后的两个a标签不需要下划线 */ 92 } 93 94 .extra { 95 100%; 96 display: flex; 97 } 98 99 .extra > a { 100 flex: 1; 101 } 102 103 .extra > a > img { 104 100%; 105 } 106 107 /*尾部*/ 108 footer { 109 100%; 110 } 111 112 footer > .nav { 113 100%; 114 height: 30px; 115 border-top: 1px solid #cccccc; 116 border-bottom: 1px solid #cccccc; 117 display: flex; 118 } 119 120 footer > .nav > a{ 121 flex: 1; 122 display: flex; 123 justify-content: center; 124 align-items: center; 125 } 126 127 footer > .link{ 128 text-align: center; 129 margin: 5px 0; 130 } 131 132 footer > .copyright{ 133 text-align: center; 134 margin-bottom: 5px; 135 } 136 137 </style> 138 </head> 139 <body> 140 <div class="container"> 141 <!--头部--> 142 <header> 143 <a href="javascript:;"> 144 <img src="./images/banner.png" alt=""> 145 </a> 146 </header> 147 <!--主要内容--> 148 <main> 149 <section class="item"> 150 <div class="left"></div> 151 <div class="right"> 152 <a href="">海外酒店</a> 153 <a href="">团购</a> 154 <a href="">特价机票</a> 155 <a href="">民宿客栈</a> 156 </div> 157 </section> 158 <section class="item"> 159 <div class="left"></div> 160 <div class="right"> 161 <a href="">海外酒店</a> 162 <a href="">团购</a> 163 <a href="">特价机票</a> 164 <a href="">民宿客栈</a> 165 </div> 166 </section> 167 <section class="item"> 168 <div class="left"></div> 169 <div class="right"> 170 <a href="">海外酒店</a> 171 <a href="">团购</a> 172 <a href="">特价机票</a> 173 <a href="">民宿客栈</a> 174 </div> 175 </section> 176 <section class="item"> 177 <div class="left"></div> 178 <div class="right"> 179 <a href="">海外酒店</a> 180 <a href="">团购</a> 181 <a href="">特价机票</a> 182 <a href="">民宿客栈</a> 183 </div> 184 </section> 185 <section class="extra"> 186 <a href="javascript:;"><img src="./images/extra_1.jpg" alt=""></a> 187 <a href="javascript:;"><img src="./images/extra_2.jpg" alt=""></a> 188 </section> 189 </main> 190 <!--尾部--> 191 <footer> 192 <div class="nav"> 193 <a href="">电话预定</a> 194 <a href="">下载客户端</a> 195 <a href="">我的</a> 196 </div> 197 <p class="link"> 198 <a href="">网站地图</a> 199 <a href="">English</a> 200 <a href="">电脑版</a> 201 </p> 202 <p class="copyright">©携程旅行</p> 203 </footer> 204 </div> 205 </body> 206 </html>
day-6