分享網站公共圖片頁面調用代碼
昨天晚上，搞了一個晚上寫了一個小初高在線的《網站公共頁面調用代碼》的自適應頁面index.html，放在根目錄的img文件夾里面，頁面地址：https://www.xcgzx.com/img/
昨天晚上，搞了一個晚上寫了一個小初高在線的《網站公共圖片頁面調用代碼》的自適應頁面index.html，放在根目錄的img文件夾里面，頁面地址：https://www.xcgzx.com/img/
頁面效果截圖：
我為什么要做這樣的頁面呢？還是頁面第一行所寫的：這里是小初高在線的公共圖片調用頁面，相同的圖片，在不同的文章反復調用，可以節(jié)省很多的空間,不同屏幕之間自適應瀏覽器，顯示1-4列。
和站長在線門戶網站一樣，旗下70多個網站，文章列表全部移除了縮略圖，就是想減少圖片的發(fā)布，減少占用空間。一個網站弄幾十個公共圖片，讓不同的文章都可以調用，就減少了不少的空間，因此，這個頁面寫出來以后，我其他的網站也可以使用，當然我可以使用，我相信其他的站長也有使用需求，于是，就把我寫代碼公開出來，讓大家一起使用，當然你可以根據我的代碼，寫出更好的代碼來。
整個頁面代碼如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小初高在線公共圖片調用頁面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.image-container {
column-count: 4; /* 默認4列 */
column-gap: 0; /* 確保列之間沒有間隙 */
}
.image-container img {
display: block; /* 移除圖片下方的空白 */
width: 100%; /* 圖片寬度填滿列寬 */
height: auto; /* 保持圖片原始寬高比 */
margin-bottom: 0; /* 移除圖片之間的垂直間距 */
}
/* 響應式設計 */
@media (max-width: 1200px) {
.image-container {
column-count: 3; /* 在較小屏幕上減少到3列 */
}
}
@media (max-width: 900px) {
.image-container {
column-count: 2; /* 在更小的屏幕上減少到2列 */
}
}
@media (max-width: 600px) {
.image-container {
column-count: 1; /* 在移動設備上使用單列 */
}
}
</style>
</head>
<body>
<div align="center">這里是<a href="https://www.xcgzx.com">小初高在線</a>的公共圖片調用頁面，相同的圖片，在不同的文章反復調用，可以節(jié)省很多的空間,不同屏幕之間自適應瀏覽器，顯示1-4列</div>
<div class="image-container">
<!-- 示例圖片，請?zhí)鎿Q為您自己的圖片url -->
<img alt="小初高在線" src="https://www.xcgzx.com/img/xcgzx.jpg">
<img alt="小初高在線" src="https://www.xcgzx.com/img/gudaixuexi.jpg">
<!-- 可以繼續(xù)添加更多圖片 -->
</div>
</body>
</html>
好了，有需求的用戶，自己拿去吧！
本文地址：http://003188.cn/fenxiangwangzhangonggongtupianyemiandiaoyongdaima.html
碼字不易，打個賞唄
楊澤業(yè)感謝你的支持！
站長在線站長一對一網絡指導服務，一元一分鐘，50元一個小時
阿里云虛擬主機1G空間，120元一年
香港、美國虛擬主機100元一年，1000元永久
騰訊云雙十一0.4折起，2核8G5M三年僅700元，2核4G8M三年僅198元
阿里云虛擬主機1G空間，120元一年
香港、美國虛擬主機100元一年，1000元永久
騰訊云雙十一0.4折起，2核8G5M三年僅700元，2核4G8M三年僅198元
猜你喜歡