国产网曝门99视频在线看_免费看片a级毛片免费看_4hu四虎永久在线观看_高清无套内精线观看456_国产欧美亚洲日韩久久福利_av在线无码观看另类重口_欧美精品一二三区较多收藏_欧美老熟妇伦视频_婷婷六月综合激情_最新国产成人野战在线观看


分享網站公共圖片頁面調用代碼

    時間: 瀏覽:135次  來源:站長在線
昨天晚上,搞了一個晚上寫了一個小初高在線的《網站公共頁面調用代碼》的自適應頁面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è)感謝你的支持!

猜你喜歡

截止2024年11月6日,未注冊的xx尾5聲母.com域名列表,共5301個

截止2024年11月6日,未注冊的xx尾5聲母.com域名列表,共5301個

2024-11-06  分類:行業(yè)資訊  瀏覽:12次


截止2024年11月6日,未注冊的zx尾5聲母.com域名列表,共5251個

截止2024年11月6日,未注冊的zx尾5聲母.com域名列表,共5251個

2024-11-06  分類:行業(yè)資訊  瀏覽:15次


2024年11月8日刪除的部分cn和com.cn域名列表cn

站長在線導讀:2024年11月8日刪除的部分cn和com.cn域名列表:一、4位以內純數字cn和com.cn域名。二、3字母以內cn和com.cn域名。三、4字母cn和com.cn域名。四、5聲母cn和com.cn域名。

2024-11-06  分類:CN刪除域名  瀏覽:11次


給你的服務器添加一個MySQL守護的執(zhí)行任務,讓MySQL出現(xiàn)問題的時候自動重啟

今天下午我在登錄百度統(tǒng)計的時候,發(fā)現(xiàn)我的文案網(wenan.wang)的統(tǒng)計為0,我就猜到了,該網站打不開了,登錄那臺服務器的寶塔管理面版,發(fā)現(xiàn)該服務器的MySQL服務沒有啟動

2024-11-05  分類:建站知識  瀏覽:15次


2024年11月7日刪除的部分cn和com.cn域名列表cn

站長在線導讀:2024年11月7日刪除的部分cn和com.cn域名列表:一、4位以內純數字cn和com.cn域名。二、3字母以內cn和com.cn域名。三、4字母cn和com.cn域名。四、5聲母cn和com.cn域名。

2024-11-05  分類:CN刪除域名  瀏覽:90次


2024年11月6日刪除的部分cn和com.cn域名列表cn

站長在線導讀:2024年11月6日刪除的部分cn和com.cn域名列表:一、4位以內純數字cn和com.cn域名。二、3字母以內cn和com.cn域名。三、4字母cn和com.cn域名。四、5聲母cn和com.cn域名。

2024-11-04  分類:CN刪除域名  瀏覽:25次


2024年11月5日刪除的部分cn和com.cn域名列表cn

站長在線導讀:2024年11月5日刪除的部分cn和com.cn域名列表:一、4位以內純數字cn和com.cn域名。二、3字母以內cn和com.cn域名。三、4字母cn和com.cn域名。四、5聲母cn和com.cn域名。

2024-11-03  分類:CN刪除域名  瀏覽:39次


2024年11月4日刪除的部分cn和com.cn域名列表cn

站長在線導讀:2024年11月4日刪除的部分cn和com.cn域名列表:一、4位以內純數字cn和com.cn域名。二、3字母以內cn和com.cn域名。三、4字母cn和com.cn域名。四、5字母cn和com.cn域名。

2024-11-02  分類:CN刪除域名  瀏覽:42次


2024年11月3日刪除的部分cn和com.cn域名列表cn

站長在線導讀:2024年11月3日刪除的部分cn和com.cn域名列表:一、4位以內純數字cn和com.cn域名。二、3字母以內cn和com.cn域名。三、4字母cn和com.cn域名。四、5字母cn和com.cn域名。

2024-11-01  分類:CN刪除域名  瀏覽:199次


2024年11月2日刪除的部分cn和com.cn域名列表cn

站長在線導讀:2024年11月2日刪除的部分cn和com.cn域名列表:一、4位以內純數字cn和com.cn域名。二、3字母以內cn和com.cn域名。三、4字母cn和com.cn域名。四、5字母cn和com.cn域名。

2024-10-31  分類:CN刪除域名  瀏覽:150次