<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位布局案例</title> <style type="text/css"> *{margin: 0;padding: 0;} .is{ width: 500px; margin: 0 auto; position: relative; } .is img{display: block;} .is .title{ position: absolute; bottom: 0; margin: 0; width: 100%; line-height: 45px; background-color: #000; opacity: 0.7; } .is .title a{ margin-left: 20px; text-decoration: none; color: #fff; } .is .contorls{ position: absolute; bottom: 18px; right: 10px; line-height: 10px; } .is .contorls span{ display: inline-block; width: 10px; margin:auto 1px; height: 10px; border-radius: 10px; background: gray; } .is .contorls span.cur{ background-color: #fff; } </style> </head> <body> <div class="is"> <img src="1.jpg" alt="aa" /> <p class="title"><a href="#">认知学习到底是什么？</a></p> <div class="contorls"> <span></span><span class="cur"></span><span></span><span></span><span></span> </div> </div> </body> </html>
