HTML5是一種非常流行的網頁開發語言,它可以讓我們輕松地創建漂亮的網頁。陰陽八卦圖是一種古老的符號,廣泛用于中國文化中。通過HTML5,我們可以輕松地創建一個陰陽八卦圖,并將其放置在我們的網頁上。
<!DOCTYPE html> <html> <head> <title>陰陽八卦圖</title> <meta charset="UTF-8"> <style> /* 樣式 */ .yin { background-color: #000; width: 200px; height: 200px; border-radius: 50%; position: relative; } .yang { background-color: #fff; width: 100px; height: 100px; border-radius: 50%; position: absolute; left: 50%; margin-left: -50px; margin-top: -50px; } .line { background-color: #000; width: 12px; height: 100px; position: absolute; left: 50%; margin-left: -6px; top: 50%; margin-top: -50px; } </style> </head> <body> <div class="yin"> <div class="yang"></div> <div class="line"></div> </div> </body> </html>
以上就是一個簡單的陰陽八卦圖的HTML5代碼。我們首先創建了一個大圓圈,用于表示陰。然后在其中添加了一個小圓圈,用于表示陽。最后,我們添加了一根直線,將陰陽分開。
在CSS中,我們將陰圓的背景顏色設置為黑色,將陽圓的背景顏色設置為白色。我們還將兩個圓都設置為圓形,以及把陽圓居于陰圓中間。最后,我們使用一根豎線將兩個圓分開,使它們的位置更明顯。
這是一個非常簡單的HTML5代碼,但是卻可以輕松地創建一個陰陽八卦的圖像,為你的網頁增添更多的文化氣息。