HTML&CSS静态页面手动轮播图 |
您所在的位置:网站首页 › 网页图片轮播怎么设置 › HTML&CSS静态页面手动轮播图 |
html部分代码: 轮播图 1 2 3 4普遍代码common.css,用来清除一些标签的默认属性: body,p,h1,h2,h3,h4,h5,h6,ul{ margin: 0; } ul{ padding: 0; } ul li{ list-style: none; } a{ text-decoration: none; }css代码部分: .box{ position: relative; width: 1000px; height: 600px; margin: 50px auto; background-color: aquamarine; position: relative; } .box .ul_1{ overflow: hidden; width: 1000px; height: 600px; } .box .ul_1 li{ width: 1000px; height: 600px; border: 1px solid #f5e5; } .box .ul_1 li img{ width: 100%; height: 100%; } .ul_2{ position: absolute; right: 0; bottom: 10px; z-index: 5; } .ul_2 li{ width: 20px; height: 20px; background-color: blanchedalmond; text-align: center; float: left; } .ul_2 li a{ text-align: center; }大家可以复制粘贴到自己的电脑上将图片的url改成自己要用的图片,在这里我的效果图放不上去就不放了。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |