CSS 이미지 스크롤 코드를 작성하는 방법은 무엇입니까? 캐러셀 이미지의 가로 스크롤 표시-CSS 튜토리얼-php.cn

CSS 이미지 스크롤 코드를 작성하는 방법은 무엇입니까? 캐러셀 이미지의 가로 스크롤 표시

藏色散人

풀어 주다： 2021-02-10 09:25:08

원래의

15433명이 탐색했습니다.

웹 페이지의 회전식 이미지 표시는 일상 작업에 필수적이므로 이제 막 시작한 초보자에게는 이 기사의 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에서 태그에는 닫는 태그가 없으며 외부 컨테이너는 줄 바꿈 없이 추가되어야 합니다. 태그는 웹페이지에 이미지를 삽입하지 않지만 웹페이지의 이미지를 연결하여 참조된 이미지에 대한 자리 표시자 공간을 만듭니다.