css圖片滾動程式碼怎麼寫？輪播圖橫向滾動展示-css教學-PHP中文網

css圖片滾動程式碼怎麼寫？輪播圖橫向滾動展示

藏色散人

發布： 2021-02-10 09:25:08

原創

15348 人瀏覽過

在日常工作中網頁上的輪播圖展示必不可少，那麼對於剛入門的小白而言本篇文章關於css圖片滾動代碼的介紹更是淺顯易懂。希望這篇文章對大家有幫助。

css圖片滾動程式碼範例具體如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css图片滚动代码示例</title>
</head>
<body>
<style>
    .imglist{
        overflow-x: auto;
        overflow-y: hidden;
        height:180px;
        white-space: nowrap;}
    img{
        width:auto;
        height:100%;
        margin-right:10px;
    }
</style>
<div class="imglist">
    <img  src="img/1.png"/ alt="css圖片滾動程式碼怎麼寫？輪播圖橫向滾動展示" >
    <img  src="img/2.png"/ alt="css圖片滾動程式碼怎麼寫？輪播圖橫向滾動展示" >
    <img  src="img/3.png"/ alt="css圖片滾動程式碼怎麼寫？輪播圖橫向滾動展示" >
    <img  src="img/4.png"/ alt="css圖片滾動程式碼怎麼寫？輪播圖橫向滾動展示" >
    <img  src="img/5.png"/ alt="css圖片滾動程式碼怎麼寫？輪播圖橫向滾動展示" >
</div>
</body>
</html>

登入後複製

附註：在HTML 中，標籤沒有結束標籤，且不能左浮動，外層容器必須加不換行。標籤不會在網頁中插入圖像，而是從網頁上連結圖像，而創建的是被引用圖像的佔位空間。