html+css製作五環(程式碼極簡)
奧運五環
把奧運五環做成一個浮動,總是位於螢幕中央的效果。
難點
-
定位的練習 position :fixed
-
位於body中間的時候 left:50%;top:50%;
-
css內部樣式表的使用 style="text/css"
方法
- 使用border-radius: 50%再加上z-index設定層疊關係
- 首先我們用5個塊級元素來形成5個環的顏色和形狀,並把這5個環放置到一個父級容器div內,再將這個父級元素div放置到瀏覽器中間位置。
設計須知
-
div的作用:div是一個塊級元素。它可以將html分割成獨立的、不同的部分。如果用id和class來標記div,那麼該標籤便可以被css所使用變的更有效,通過id或class設計各種的樣式。
設計細節
html的設計:
首先給5個環設定class用來css檔案關聯樣式,並把這5個環放置一個父級div中
div class ="plat"> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <div class="a4"></div> <div class="a5"></div> <div>
css樣式設計:
-
通過繫結html中設定好的class,然後繪製五個環的形狀和大小還有位置
.a1,.a2,.a3,.a4,.a5{ position:absolute; width: 100px; height: 100px; background-color: transparent; border: 10px solid; border-radius: 110px; }
-
繪製每個環的顏色和位置:
.a1{ border-color: blue; left: 0; top: 0; } .a2{ border-color: black; top: 0px; left: 130px; z-index: 4; } .a3{ border-color: yellow; top: 0px; left: 260px; z-index: 4; } .a4{ border-color: red; top: 65px; left: 65px; z-index: 5; } .a5{ border-color: green; top: 65px; left: 198px; z-index: 6; }
-
設計父級div的位置:
首先要知道,我們設計的5環是在div內部,所以調整div的位置便可以實現瀏覽器居中i效果。
.plat{ position: fixed; top: 50%; left: 50%; margin-left:-140px; margin-top: -70px; width: 280px; height: 140px; }
程式碼
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>居中五環</title> <style type="text/css"> .a1,.a2,.a3,.a4,.a5{ position:absolute; width: 100px; height: 100px; background-color: transparent; border: 10px solid; border-radius: 110px; } .plat{ position: fixed; top: 50%; left: 50%; margin-left:-140px; margin-top: -70px; width: 280px; height: 140px; } .a1{ border-color: blue; left: 0; top: 0; } .a2{ border-color: black; top: 0px; left: 130px; z-index: 4; } .a3{ border-color: yellow; top: 0px; left: 260px; z-index: 4; } .a4{ border-color: red; top: 65px; left: 65px; z-index: 5; } .a5{ border-color: green; top: 65px; left: 198px; z-index: 6; } </style> <body> <div class ="plat"> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <div class="a4"></div> <div class="a5"></div> <div> </body> </html>
效果