HTML连载70-相片墙、盒子阴影和文字阴影
2024-09-03 05:56:03
一、 制作一个相片墙
二、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } ul{ height: 400px; border:1px solid black; background-color: skyblue; margin-top:100px; text-align: center;/*这个属性是用来表示给内部五张图片是水平居中的*/ } ul li { list-style:none; width: 150px; height: 200px; background-color: red; display:inline-block; transition:transform 1s; position:relative;/*使用相对定位,是想把图片能够置顶*/ box-shadow: 0 0 10px;/*使图片有阴影*/ } ul li:nth-child(1){ transform: rotate(30deg); } ul li:nth-child(2){ transform: rotate(-30deg); } ul li:nth-child(3){ transform: rotate(50deg); } ul li:nth-child(4){ transform: rotate(-50deg); } ul li image{ width: 150px; height: 200px; box-sizing:border-box; } ul li:hover{ /*transform:rotate(0px);*/ transform: scale(1.5);/*放大*/ z-index: 998; } </style> </head> <body> <ul> <li><img src="data:image/play_tennis2.jpg" alt=""></li> <li><img src="data:image/play_tennis2.jpg" alt=""></li> <li><img src="data:image/play_tennis2.jpg" alt=""></li> <li><img src="data:image/play_tennis2.jpg" alt=""></li> <li><img src="data:image/play_tennis2.jpg" alt=""></li> </ul> </body> </html>
二、盒子阴影和文字阴影
1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影(内阴影就是inset)
2.盒子的阴影分为外阴影和内阴影,默认情况下就是外阴影
3.阴影颜色如果不写,那就默认是文字的颜色
4.省略的写法:box-shadow:水平偏移 垂直偏移 阴影扩展 ;
5.如何给文字添加阴影
text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D173_ShadowOfBoxAndWord</title> <style> *{ padding:0px; margin:0px; } div{ height: 200px; width: 200px; margin:20px auto; background-color: red; border:1px solid black; text-align: center; line-height:200px; font-size:30px; box-shadow:10px 10px 10px 0px black;/*水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影*/ text-shadow:3px 3px 3px blue; } </style> </head> <body> <div>我是盒子</div> </body> </html>
三、源码:
D172_PhotoWall.html
D173_ShadowOfBoxAndWord.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D172_PhotoWall.html
https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html
2.CSDN:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
最新文章
- Python 第五天 装饰器
- Linux下的压缩解压缩命令详解
- 图解CSS的padding,margin,border属性
- 选择哪种方式进行SharePoint的备份
- Hibernate出现javax.naming.NoInitialContextException 错误的解决办法
- 周赛-kiki&#39;s game 分类: 比赛 2015-08-02 09:24 7人阅读 评论(0) 收藏
- 如何用 redis 造一把分布式锁
- Flex博客
- Oracle收缩表空间
- 【转】 树莓派学习笔记——I2C设备载入和速率设置
- Delphi通过IE窗口句柄获取网页接口(IWebBrowser2) good
- C标签之forEach
- hdu1760博弈SG
- ●POJ 3608 Bridge Across Islands
- 一个数组保存了N个结构,每个结构保存了一个坐标,结构间的坐标都不相同,请问如何找到指定坐标的结构(除了遍历整个数组,是否有更好的办法)?
- JDK源码分析(3)之 ArrayList 相关
- 【转载】Centos系统快速部署LNMP环境
- 【HNOI2013】切糕
- jmap -histo pid 输出的[C [B [I [S 的含义
- POJ1094——拓扑排序和它的唯一性