|
1.首先需要固定结构，在<body> </body> 下写 <ul> </ul> <li> </li> 等盒子，src后边是需要插入图片的路径；
2.利用CSS对html结构做装饰，即CSS样式，可设置盒子的大小，背景颜色，该部分在<head>下<style> </style> 书写内部样式或者单独创建一个css文件用link导入外部样式；我这里使用内部样式做示例； 代码中宽度需设置准确，可根据自己图片大小调整相应盒子的大小，最好放入的照片尺寸一致，transition 是对盒子动作的操作，设置变换时间为1s即可；
整体布局是利用flex(Flexible Box)布局,意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局。 完整的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>百叶窗</title> <style> /* CSS 对html结构做装饰 */ * { list-style: none; /* 设置列表样式 */ margin: 0; padding: 0; } ul { display: flex; /* 弹性布局 */ width: 1000px; /* height: 600px; */ /* background-color: rgb(63, 212, 217); */ overflow: hidden; /* 溢出隐藏 */ margin: 0 auto; /* 让整体布局居中 */ } li { width: 160px; height: 500px; transition: all 0.5s; } img { height: 100%; } /* 动作 变大 变小*/ ul:hover li { width: 60px; } ul li:hover { width: 760px; } </style> </head> <body> <ul> <li><img src="./images/p1.png" alt="" /></li> <li><img src="./images/p2.png" alt="" /></li> <li><img src="./images/p3.png" alt="" /></li> <li><img src="./images/p4.png" alt="" /></li> <li><img src="./images/p5.png" alt="" /></li> <li><img src="./images/p6.png" alt="" /></li> </ul> </body> </html> 通过学习这些有意思的小项目，不仅可以加深知识的理解，也更能提升对前端的学习兴趣。 |
|
公众号
