在网页布局中如何制作图片列表

 时间:2024-10-13 10:37:36

1、经常会在网页上看到如下的效果:基本上都是图片在上,标题在下,然后鼠标移动到上边有个样式的变化,而且整个图片和标题都可以点击的。

在网页布局中如何制作图片列表

2、 准备一张240*170的图片,添加如下代码:

在网页布局中如何制作图片列表

3、 预览效果如下图:

在网页布局中如何制作图片列表

4、 首先定义全局样式

在网页布局中如何制作图片列表

5、 预览基本没什么效果, 现在让每个li都靠左浮动

在网页布局中如何制作图片列表

6、 预览效果:

在网页布局中如何制作图片列表

7、美化一下效果,规定每个li的宽度,正好是图片的宽度,规定下li的外边据,并让文字居中

在网页布局中如何制作图片列表

8、 预览效果如下:

在网页布局中如何制作图片列表

9、现在的图片列表基本已经完成,剩下的就是对它的美化首先增加a标签的选择区域,让整个a标签变为块元素。并且给a下边的img一个固定宽度的边框,边框与图片有一像素的距离,并且图片距离底部3像素

在网页布局中如何制作图片列表

10、预览效果:

在网页布局中如何制作图片列表

11、给图片增加一个滑动过的效果,

在网页布局中如何制作图片列表

12、 最终预览效果图:

在网页布局中如何制作图片列表
  • HTML教程 列表标签——有序列表
  • 使用CSS3的什么属性可以设置边框的圆角效果
  • 怎么让网页居中显示,html如何让网页居中
  • Python教程 字符串的复制
  • 怎么退出教师端电脑控制
  • 热门搜索
    阿弥陀佛是什么佛 悠闲的意思是什么 ap模式是什么意思 当之无愧是什么意思 买二手房需要注意什么 奶酪是什么 喝蜂蜜有什么好处 pb是什么元素 类风湿因子是什么 什么是法西斯