Rumah >hujung hadapan web >tutorial css >dw怎么用css做图片轮播

dw怎么用css做图片轮播

anonymityasal: 2019-05-28 14:58:0718601semak imbas

Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。 [2] 使用视觉辅助功能减少错误并提高网站开发速度。

dw怎么用css做图片轮播

这个html很简单，就设置了两个div,一个放置img，一个设置下面的12345图标，当点击1~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;
}

Atas ialah kandungan terperinci dw怎么用css做图片轮播. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html 接口 dreamweaver

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css columns属性怎么用Artikel seterusnya：css背景图片怎么自适应

Artikel berkaitan

Lihat lagi