CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법

anonymity

풀어 주다： 2019-05-28 14:58:07

원래의

18549명이 탐색했습니다.

Adobe Dreamweaver는 "DW", 중국어 이름 "Dream Weaver"로 원래 미국 MACROMEDIA 회사에서 개발되었으며 2005년 Adobe에 인수되었습니다. DW는 웹페이지 제작과 웹사이트 관리를 통합한 WYSIWYG 웹 코드 편집기입니다. HTML, CSS, JavaScript 등의 지원을 통해 디자이너와 프로그래머는 거의 모든 곳에서 웹 사이트를 빠르게 만들고 구축할 수 있습니다.

Adobe Dreamweaver는 WYSIWYG 인터페이스를 사용하며 HTML(Standard Universal Markup Language에 따른 응용 프로그램) 편집 기능도 갖추고 있습니다. 단순화된 지능형 코딩 엔진 덕분에 생성, 코딩 및 관리가 쉽습니다. 동적 웹사이트. HTML, CSS 및 기타 웹 표준에 대해 빠르게 알아보려면 코드 팁에 액세스하세요. [2] 시각적 도구를 사용하여 오류를 줄이고 웹사이트 개발 속도를 높입니다.

CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법

이 html은 두 개의 div를 설정하기만 하면 됩니다. 하나는 img를 배치하고 다른 하나는 아래 12345 아이콘을 설정하기만 하면 됩니다. 5를 클릭하면 해당 이미지로 연결되며, 이미지의 전환 효과는 최종적으로 #imagesimg 및 #images img:target 속성에 의해 설정됩니다.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>How to Create An Image Slider With Pure CSS3</title>
<link href="images.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>CSS3 Image Slider</h1>
    <div id="images">
        <img id="image1" src="./images/1.jpg" />
        <img id="image2" src="./images/2.jpg" />
        <img id="image3" src="./images/3.jpg" />
            <img id="image4" src="./images/4.jpg" />
            <img id="image5" src="./images/5.JPG" />
    </div>
    <div id="slider">
        <a href="#image1">1</a>
        <a href="#image2">2</a>
            <a href="#image3">3</a>
            <a href="#image4">4</a>
            <a href="#image5">5</a>
    </div>
</body>
</html>

로그인 후 복사

CSS

@CHARSET "UTF-8";
body {
    background-image:url("./images/sdl (31).png");
    background-attachment: fixed;
}
h1 {
    font: bold 35px/60px Helvetica, Arial, Sans-serif;
    text-align: center; color: #eee;
    text-shadow: 0px 2px 6px #333;
}
#images {
    width: 400px;
    height: 600px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 1;
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
}
#slider {
    width: 150px;
    height: 30px;
    margin: 20px auto;
}
#slider a {
    text-decoration: none;
    background: #45b97c;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
    margin: 20px auto;
}
#slider a:hover {
    background: #C6E4F2;
}

로그인 후 복사

위 내용은 CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!