页面效果如上;其它元素自行添加!
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {background-color: #333;color: #F5ECE7;}img {max-width: 100%;height: auto;}/* 全局样式 */body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;flex-direction: column;min-height: 100vh;}/* 导航栏样式 */.navbar {background-color: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);border-bottom: 1px solid rgba(255, 255, 255, 0.3);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.nav-list {list-style-type: none;margin: 0;padding: 0;display: flex;justify-content: space-around;align-items: center;height: 60px;}.nav-item {margin: 0 10px;}.nav-link {text-decoration: none;color: #333;font-weight: bold;transition: color 0.3s ease;}.nav-link:hover {color: #666;}/* 图文双列表样式 */.content {flex: 1;display: flex;justify-content: space-around;align-items: flex-start;flex-wrap: wrap;padding: 20px;}.product-list {width: 45%;margin-bottom: 20px;display: flex;flex-direction: column;align-items: center;}.product-item {background-color: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.3);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);padding: 20px;margin-bottom: 20px;text-align: center;width: 100%;}.product-image {width: 100%;height: 200px;object-fit: cover;border-radius: 5px;margin-bottom: 10px;}.product-title {margin-top: 0;color: #333;}.product-description {color: #666;margin-bottom: 20px;}/* 购买按钮样式 */.buy-button {background-color: #007bff;color: white;border: none;border-radius: 5px;padding: 10px 20px;cursor: pointer;transition: background-color 0.3s ease;display: block;margin: 0 auto;}.buy-button:hover {background-color: #0056b3;}</style><title>自适应玻璃拟态图片展示</title></head><body><!-- 导航栏 --><nav class="navbar"><ul class="nav-list"><li class="nav-item"><a href="#" class="nav-link">网站首页</a></li><li class="nav-item"><a href="#" class="nav-link">图片分类</a></li><li class="nav-item"><a href="#" class="nav-link">特色图片</a></li><li class="nav-item"><a href="#" class="nav-link">个人中心</a></li></ul></nav><!-- 图片列表 --><div class="content"><div class="product-list"><div class="product-item"><img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/4d40d44d67a46fb1023c688a1f7e4e00/1738827371786_9OJyH.png" alt="图片1" onclick="showPopup(this)"></div><div class="product-item"><img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/cc3a417967a4713505b33c3a31f01b07/1738827453101_oNEZi.png" alt="图片2"></div></div><div class="product-list"><div class="product-item"><img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/c7008c9c669ffbeb002055c56d5f53bf/1720614867169_G7U_D.png" alt="图片3"></div><div class="product-item"><img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/d6b4ca8f669ffc2e0022aa2a6e58bdcf/1720614830844_jkuvc.png" alt="图片4"></div></div></div><!--<button class="buy-button">按钮</button>--></body></html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #333; color: #F5ECE7; } img { max-width: 100%; height: auto; } /* 全局样式 */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; } /* 导航栏样式 */ .navbar { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .nav-list { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; align-items: center; height: 60px; } .nav-item { margin: 0 10px; } .nav-link { text-decoration: none; color: #333; font-weight: bold; transition: color 0.3s ease; } .nav-link:hover { color: #666; } /* 图文双列表样式 */ .content { flex: 1; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; padding: 20px; } .product-list { width: 45%; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; } .product-item { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; margin-bottom: 20px; text-align: center; width: 100%; } .product-image { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 10px; } .product-title { margin-top: 0; color: #333; } .product-description { color: #666; margin-bottom: 20px; } /* 购买按钮样式 */ .buy-button { background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; display: block; margin: 0 auto; } .buy-button:hover { background-color: #0056b3; } </style> <title>自适应玻璃拟态图片展示</title> </head> <body> <!-- 导航栏 --> <nav class="navbar"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">网站首页</a></li> <li class="nav-item"><a href="#" class="nav-link">图片分类</a></li> <li class="nav-item"><a href="#" class="nav-link">特色图片</a></li> <li class="nav-item"><a href="#" class="nav-link">个人中心</a></li> </ul> </nav> <!-- 图片列表 --> <div class="content"> <div class="product-list"> <div class="product-item"> <img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/4d40d44d67a46fb1023c688a1f7e4e00/1738827371786_9OJyH.png" alt="图片1" onclick="showPopup(this)"> </div> <div class="product-item"> <img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/cc3a417967a4713505b33c3a31f01b07/1738827453101_oNEZi.png" alt="图片2"> </div> </div> <div class="product-list"> <div class="product-item"> <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/c7008c9c669ffbeb002055c56d5f53bf/1720614867169_G7U_D.png" alt="图片3"> </div> <div class="product-item"> <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/d6b4ca8f669ffc2e0022aa2a6e58bdcf/1720614830844_jkuvc.png" alt="图片4"> </div> </div> </div> <!--<button class="buy-button">按钮</button>--> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #333; color: #F5ECE7; } img { max-width: 100%; height: auto; } /* 全局样式 */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; } /* 导航栏样式 */ .navbar { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .nav-list { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; align-items: center; height: 60px; } .nav-item { margin: 0 10px; } .nav-link { text-decoration: none; color: #333; font-weight: bold; transition: color 0.3s ease; } .nav-link:hover { color: #666; } /* 图文双列表样式 */ .content { flex: 1; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; padding: 20px; } .product-list { width: 45%; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; } .product-item { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; margin-bottom: 20px; text-align: center; width: 100%; } .product-image { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 10px; } .product-title { margin-top: 0; color: #333; } .product-description { color: #666; margin-bottom: 20px; } /* 购买按钮样式 */ .buy-button { background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; display: block; margin: 0 auto; } .buy-button:hover { background-color: #0056b3; } </style> <title>自适应玻璃拟态图片展示</title> </head> <body> <!-- 导航栏 --> <nav class="navbar"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">网站首页</a></li> <li class="nav-item"><a href="#" class="nav-link">图片分类</a></li> <li class="nav-item"><a href="#" class="nav-link">特色图片</a></li> <li class="nav-item"><a href="#" class="nav-link">个人中心</a></li> </ul> </nav> <!-- 图片列表 --> <div class="content"> <div class="product-list"> <div class="product-item"> <img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/4d40d44d67a46fb1023c688a1f7e4e00/1738827371786_9OJyH.png" alt="图片1" onclick="showPopup(this)"> </div> <div class="product-item"> <img src="https://public.giantapp.cn/upload/692c4903c2db4256bc70a830d9ef3977/wallpapers/cc3a417967a4713505b33c3a31f01b07/1738827453101_oNEZi.png" alt="图片2"> </div> </div> <div class="product-list"> <div class="product-item"> <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/c7008c9c669ffbeb002055c56d5f53bf/1720614867169_G7U_D.png" alt="图片3"> </div> <div class="product-item"> <img src="https://public.giantapp.cn/upload/3f533cac0d3b4df1be65756dc2e3cf98/wallpapers/d6b4ca8f669ffc2e0022aa2a6e58bdcf/1720614830844_jkuvc.png" alt="图片4"> </div> </div> </div> <!--<button class="buy-button">按钮</button>--> </body> </html>
感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
暂无评论内容