emm这个题目写的很抽象
素材:
就是把两个小图加在大图的两个角,作为修饰
思路: 把大图放在盒子里,给盒子相对定位,给小图绝对定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>绝对定位--图片修饰</title> <style> div { width: 310px; height: 190px; border: 1px solid lightgray; padding: 10px; position: relative; } .top { position: absolute; top: 0; left:0; } .bottom { position: absolute; bottom: 0; right:0; } </style> </head> <body> <div> <img src="top_tu.gif" class="top"> <img src="adv.jpg" alt="ad"> <img src="br.gif" class="bottom"> </div> </body> </html>
效果图: