网站建设基础5——HTML5+CSS3子图层

HTML5+CSS3子图层

二、仪器设备（含软件）：计算机、Sublime text 3

三、实验耗材：无

四、学习步骤：

 编写HTML内容，其中包含图层和子图层两个div，二者为嵌套关系。图层中包含图片和h4标题字。子图层包含三个标记，分别是标题字h1，段落描述和超链接查看更多。代码如下：

最终以效果图为准：

设置样式，要求如下：

使h4和子图层绝对定位到父图层的左下角

最初h4显示，子图层不显示

鼠标移到父图层上，h4不显示，子图层显示，图片以幻灯片方式在0.5s内放大到1.5倍大小。

图片溢出的部分不显示

字体设置为白色。代码如下： 

最终效果如图所示：

拓展：鼠标悬浮实现图片移动（参考学习通教学）

欢迎关注网站建设基础学习5，有任何问题请随时咨询顺晟北京网站建设公司客服~