主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
[精]css3弹性盒模型实现轮播幻灯
2020-06-18
网页编程网
网页编程网
<style> body{margin:0;padding: 0;} .banner{ width: 820px; height: 375px; background:rgba(255,255,255,.8); margin:5px auto; } .banner ul{ display:flex;/**弹性盒模型/ width: 100%;/*继承其父*/ align-items: flex-end;/*交叉轴在结束部分，就是最底*/ position: relative; height: 100%; list-style: none; } .banner li{ flex: 1;/*占1份，不用宽度*/ height: 35px; background-color:#e3e3e2; text-align: center; line-height: 35px; } .banner li:hover{ background-color:white; color:red; box-shadow:0 -3px 0 red inset; } .banner img{ position: absolute; top: 0; left: 0; opacity: 0; height: 90%; } .banner li:hover img{ opacity: 1; } .banner li:nth-child(1) img{ opacity: 1; } </style> </head> <body> <div class="banner"> <ul> <li>这是标题 <img src="1.jpg"> </li> <li>标题2 <img src="2.jpg"></li> <li>标题3 <img src="3.jpg"> </li> <li>这4 <img src="4.jpg"> </li> <li>这是5 <img src="5.jpg"> </li> </ul> </div> </body>
阅读原文
阅读
4140
123
显示电脑版