HTMl與CSS簡單頁面頁面效果例項
阿新 • • 發佈：2018-12-23
效果圖如下：
下面一張圖是接上面的圖片的，包含網頁的底部。
HTML和CSS程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div{ position: relative; margin-left: 100px; margin-top:100px; width: 600px; height:600px; border:1px solid yellow; } .div1{ position: relative; margin-left: 200px; margin-top: 200px; width:400px; height: 400px; border:1px solid red; } .div2{ position: absolute; left: 100px; top:100px; width: 100px; height:100px; border: 1px solid blue; } </style> </head> <body> <div class="div"> <div class="div1"> <div class="div2"> </div> </div> </div> </body> </html>