关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

html制作一个照片墙的方法

发布时间:2020-02-24 00:00:00

一、 制作一个相片墙

二、  

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Titletitle><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="image/play_tennis2.jpg" alt="">li><li><img src="image/play_tennis2.jpg" alt="">li><li><img src="image/play_tennis2.jpg" alt="">li><li><img src="image/play_tennis2.jpg" alt="">li><li><img src="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_ShadowOfBoxAndWordtitle><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>



/template/Home/Zkeys/PC/Static