CSS画像をスクロールするコードを記述するにはどうすればよいですか?カルーセル画像の横スクロール表示-CSSチュートリアル-php.cn

CSS画像をスクロールするコードを記述するにはどうすればよいですか?カルーセル画像の横スクロール表示

藏色散人

リリース： 2021-02-10 09:25:08

オリジナル

15413 人が閲覧しました

Web ページでのカルーセル画像の表示は日常業務に不可欠であるため、始めたばかりの初心者にとって、この記事の 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 では、タグは終了タグを持たないため、外部コンテナを改行せずに追加する必要があります。タグは Web ページに画像を挿入しませんが、Web ページから画像をリンクし、参照画像のプレースホルダーを作成します。