渣渣的幻燈片製作

使用html,css製作的幻燈片

html部分

<body>
		<div class="slide">
			<div class="slide-img">
				<ul >
				<li id="m1"><img src="../images/pic05.jpg" /> </li>
				<li id="m2"><img src="../images/pic06.jpg" /> </li>
				<li id="m3"><img src="../images/pic09.jpg" /> </li>
			</ul>
			</div>
			<div class="slide-items">
			<ul >
				<li><a href="#m1"><img src="../images/pic05.jpg" width="50px" height="50px"/> </a></li>
				<li><a href="#m2"><img src="../images/pic06.jpg" width="50px" height="50px"/> </a></li>
				<li><a href="#m3"><img src="../images/pic09.jpg" width="50px" height="50px"/> </a></li>
			</ul>
			</div>
		</div>
	</body>

css部分

<style type="text/css">
			body,div,ul,li,a{
				margin: 0;
				padding: 0;
			}
			.slide-img{
				width: 450px;
				height: 450px;
				overflow: hidden;
			}
			li{
				list-style: none;
				float: left;
			}
			.slide-img li{
				width: 450px;
				height: 450px;
			}
			.slide-items{
				margin-top: 20px;
			}
			.slide-items li{
				text-align: center;
				margin-left: 10px;
			}
			.slide-items li a{
				width: 50px;
				height: 50px;
				display: block;	
			}
			
		</style>

由於個人問題,只能附圖了。渣渣我會加油的!!!
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章