HTML实例-01-轮播图
body部分
<div class="outer">
<ul class="img-list">
<li><a href="#"><img src="img/1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/3.jpg" alt=""></a></li>
<li><a href="#"><img src="img/4.jpg" alt=""></a></li>
<li><a href="#"><img src="img/5.jpg" alt=""></a></li>
<li><a href="#"><img src="img/6.jpg" alt=""></a></li>
<li><a href="#"><img src="img/7.png" alt=""></a></li>
<li><a href="#"><img src="img/8.jpg" alt=""></a></li>
</ul>
<!--图片上的小点-->
<div class="pointer">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
样式
<style>
/*去除默认格式*/
*{margin: 0;
padding: 0;}
ul{list-style: none;}
.outer{
width:830px;
height: 482px;
margin: 50px auto;
/*设置为相对定位，不会脱离文档流*/
position: relative；}
/*设置为绝对定位*/
.img-list li{position: absolute；}
/*设置○*/
.pointer a{
width: 16px;
height: 16px;
background-color: rgba(255, 255 ,255, 0.5);
float: left;
/*利用float:left；设置○位置，可以调节距离*/
/*display: inline-block;*/
/*变成圆形*/
border-radius: 50%;
margin:0 5px;
}
.pointer a:hover{
background-color: #bd6e07;
}
.pointer{
/*开启绝对定位*/
position: absolute ;
top:332px;
width: 208px;
/*将○设置到居中位置*/
margin: 0 auto;
left: 0;
right: 0； }
</style>
最新文章
- python操作Excel--使用xlrd
- [转载]我的WCF之旅（1）：创建一个简单的WCF程序
- JavaScript的闭包原理
- DHCP Set Hostname
- [转] linux中pam模块
- Linux 必掌握的 SQL 命令
- 构建linux内核源码树
- IPV6 实现
- angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
- OnlineJudge 离线题库采集
- jquery插件的编写
- ubuntu中彻底删除nginx
- Webview之H5页面调用android的图库及文件管理
- HttpContext未null处理
- Android Fragment和FragmentActivity区别和用法
- CyberArticle(eLib电子图书馆)网文快捕
- JS --- trim() 函数
- 宝塔中mysql数据库命名小坑
- RPC框架yar安装
- C++ 构造中调用构造