本节案例讲解巧用淘宝系统类实现全屏海报,学完本课内容后,同学们可以在下方评论区进行留言,作业也可以在评论区进行提交,老师会一一解答。
那我们开始今天的课程。
1.首先打开【DW】,在代码中创建一个【div】并加上【style】样式,再次在父级【div】下创建一个子级【div】并插入一张图片,此时图片的位置是不变的,代码如图所示。
2.将子级【div】删除,使用【h1】标签插入“虎课网”三个字,并在其最外层创建一个【div】加上【style】样式和【postiion:reeltive;】相对定位,代码如图所示。
3.接下来使用百分比来出居中效果,给子级 【div】的样式一个【left:50%;】属性,然后再创建一个【div】设置【style】的样式,具体代码如图所示。
4.再次在【DW】中创建一个文件,将大图片上传到淘宝并复制网络地址,在代码中插入图像,在头部创建一个【style】样式把默认样式清楚,代码如图所示。
5.接下来再创建两个【div】给父级【div】添加属性和绝对定位,子级【div】设置【style】样式属性和绝对定位。代码如图所示。