<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <style type="text/css"> .header{width:980px; background-color:#C00; margin:0 auto;} .content{width:980px; background-color:#F36; margin:0 auto;} .contentl{width:400px; float:left; } .contentr{width:400px; float:right;} @media screen and (max-width:980px){ .header{width:94%; height:auto;} .content{width:94%; height:auto;} .contentl{width:50%;} .contentr{width:50%;} } @media screen and (max-width:500px){ .header{width:auto; height:auto;} .content{width:auto; height:auto;} .contentl{width:auto; float:none;} .contentr{width:auto; float:none;} @media screen and (max-width:480px){ .img2{width:95%; height:auto;} .img1{width:95%; height:auto;} } </style> </head> <body><div class="header"></div> <div class="content"> <div class="contentl"><img class="img1" src="../images/00.jpg" /></div> <div clas="contentr"><img class="img2" src="../images/02.jpg"/></div> </div> </body> </html>
无标题文档
![](https://i-blog.csdnimg.cn/blog_migrate/16d4ad109d7c4e98a32e3f8a73697822.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/6674085e6c1aeaea5d19b183f6dc85ca.jpeg)