Heim >Web-Frontend >CSS-Tutorial >So erstellen Sie mit CSS ein Bildkarussell in DW
So erstellen Sie mit CSS ein Bildkarussell in DW
- anonymityOriginal
- 2019-05-28 14:58:0718601Durchsuche
Adobe Dreamweaver, kurz „DW“, chinesischer Name „Dream Weaver“, wurde ursprünglich von der amerikanischen Firma MACROMEDIA entwickelt und 2005 von Adobe übernommen. DW ist ein WYSIWYG-Webcode-Editor, der die Erstellung von Webseiten und die Verwaltung von Webseiten integriert. Dank der Unterstützung von HTML, CSS, JavaScript und mehr können Designer und Programmierer praktisch überall schnell Websites erstellen und erstellen.
Adobe Dreamweaver verwendet eine WYSIWYG-Schnittstelle und verfügt außerdem über eine HTML-Bearbeitungsfunktion (eine Anwendung unter der Standard Universal Markup Language). Mit Hilfe einer vereinfachten intelligenten Codierungs-Engine können Sie dynamische Websites einfach erstellen, programmieren und verwalten. . Greifen Sie auf Code-Tipps zu, um sich schnell mit HTML, CSS und anderen Webstandards vertraut zu machen. [2] Verwenden Sie visuelle Hilfsmittel, um Fehler zu reduzieren und die Website-Entwicklung zu beschleunigen.
Dieser HTML-Code ist sehr einfach. Richten Sie einfach zwei Divs ein, eines zum Platzieren des Bildes und eines zum Festlegen des 12345-Symbols unten. Wenn 1 bis 5 angeklickt wird, wird es angezeigt wird auf das entsprechende Bild verlinkt, und der Umschalteffekt des Bildes wird letztendlich durch die Attribute #imagesimg und #images img:target festgelegt.
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;
}Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS ein Bildkarussell in DW. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!