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

집

웹 프론트엔드

CSS 튜토리얼

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

anonymity

May 28, 2019 pm 02:58 PM

css

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 id="CSS-nbsp-Image-nbsp-Slider">CSS3 Image Slider</h1>
    <div id="images">
        <img  src="/static/imghwm/default1.png"  data-src="./images/1.jpg"  class="lazy"  id="image1"  / alt="CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법" >
        <img  src="/static/imghwm/default1.png"  data-src="./images/2.jpg"  class="lazy"  id="image2"  / alt="CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법" >
        <img  src="/static/imghwm/default1.png"  data-src="./images/3.jpg"  class="lazy"  id="image3"  / alt="CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법" >
            <img  src="/static/imghwm/default1.png"  data-src="./images/4.jpg"  class="lazy"  id="image4"  / alt="CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법" >
            <img  src="/static/imghwm/default1.png"  data-src="./images/5.JPG"  class="lazy"  id="image5"  / alt="CSS를 사용하여 dw에서 이미지 캐러셀을 만드는 방법" >
    </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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사