<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画面自适应</title>
<link rel="stylesheet" href="css/pic480.css" media="(max-width:480px)"> <link rel="stylesheet" href="css/pic800.css" media="(min-width:480px) and (max-width:800px)"> <link rel="stylesheet" href="css/pic800+.css" media="(min-width:800px) and (max-width:1200px)"> <link rel="stylesheet" href="css/pic1200.css" media="(min-width:1200px)"> <style> .pic{ text-align: center; width: 100%; overflow: hidden; } .pic>div>img{ padding: 1px; } .pic>div>img:hover{ border: 1px solid grey; padding: 0; } </style>
</head><body><p>
</p><div class="pic"> <div> <img src="css响应式效果/images/pic6.jpg" alt="加载失败"> <div>时尚风格</div> </div> <div> <img src="css响应式效果/images/pic7.jpg" alt="加载失败"> <div>风格时尚</div> </div> <div> <img src="css响应式效果/images/pic8.jpg" alt="加载失败"> <div>时尚风格</div> </div> <div> <img src="css响应式效果/images/pic9.jpg" alt="加载失败"> <div>风格时尚</div> </div> <div> <img src="css响应式效果/images/pic10.jpg" alt="加载失败"> <div>时尚风格</div> </div> <div> <img src="css响应式效果/images/pic11.jpg" alt="加载失败"> <div>风格时尚</div> </div> <div> <img src="css响应式效果/images/pic12.jpg" alt="加载失败"> <div>时尚风格</div> </div> <div> <img src="css响应式效果/images/pic13.jpg" alt="加载失败"> <div>风格时尚</div> </div></div></body></html>
时间： 2024-08-26 01:46:56