Dreamweaver简单排版设计-HOT图标

Dreamweaver简单排版设计-HOT图标

在商城中经常可以看到在一些图片的右上角看到有hot的样式，下面我们就以代码的形式制作出来。

打开Dreamweaver软件，新建一个html文件

然后在body中建立div标签，在div再建立Img图片标签和文字标签h1

对div设置一个宽度，然后居中对齐，设置相对定位

将图片设置宽度为100%；

设置h1标签属性，如下图

h1设置绝对定位，设置方向，最后效果如图：

h1{margin:0;width:45px;height:45px;background-color:red; border-radius:50%;font-size:18px;line-height:45px;text-align:center;color:white;position:absolute;right:-22.5px;top:-22.5px;}