<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <title></title> <style type="text/css"> body,div{ padding:0; margin:0; } nav{ width:75%; margin:0 auto; height:auto; padding:40px; } div{ box-sizing: border-box; float:left; border:1px dashed black; padding:4px; } div>img{ width:100%; height:auto; } div>span{ display: block; width:100%; min-height: 30px; text-align: center; padding-bottom:2px; font-size:15px; } footer{ display: none } @media screen and (max- 1950px){ div{ width:200px; } } @media screen and (max- 1050px){ div{ width:50%; } footer{ display: block; width: 100% } footer>form>input[type=text]{ display: block; width: 100%; box-sizing: border-box; height:30px; padding: 12px 20px; border: 1px solid #ccc; border-radius: 4px; margin: 8px 0; } footer>form>input[type=button]{ width: 100%; background-color: #4CAF50; color: white; padding: 14px 40px; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 20px } .clear{ display: block; clear: both; } footer{ clear: both; } } @media screen and (max- 600px){ div{ width:100%; } footer{ display: block; width: 100% } footer>form>input[type=text]{ display: block; width: 100%; box-sizing: border-box; height:30px; padding: 12px 20px; border: 1px solid #ccc; border-radius: 4px; margin: 8px 0; } footer>form>input[type=button]{ width:auto; float:left; background-color: #4CAF50; color: white; padding: 14px 40px; border: none; border-radius: 4px; cursor: pointer; margin-left:10px; margin-bottom: 20px } footer>form>input[type=button]:last-child{ float:right; margin-right:10px; } } </style> </head> <body> <nav> <div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello wor水电费ld! </span> </div> <div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div><div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div><div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div><div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div><div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div> <div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div> <div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div> <div> <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"> <span> hello world! </span> </div> <span class="clear"></span> <footer> <form> <label for="fname">First Name</label> <input type="text" name=""> <label for="fname">First Name</label> <input type="text" name=""> <label for="fname">First Name</label> <input type="text" name=""> <input type="button" name="" value="提交"> <input type="button" name="" value="修改"> </form> </footer> </nav> </body> </html>
移动端页面
平板电脑
电脑上
