HTML&CSS静态页面手动轮播图

您所在的位置:网站首页 网页图片轮播怎么设置 HTML&CSS静态页面手动轮播图

HTML&CSS静态页面手动轮播图

2024-07-12 00:12| 来源: 网络整理| 查看: 265

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