在現代網頁設計中,為頁面添加古詩css代碼是一項非常有趣的技巧。通過添加幾行css代碼,可以讓網頁在風格上更具有古典文化氣息,讓網站更有內涵。
.poem { font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif; font-size: 1.2rem; line-height: 1.5; text-align: center; width: 80%; margin: 0 auto; padding: 30px 0; border: 1px solid #ccc; background-color: #f5f5f5; } .poem-title { font-size: 2rem; font-weight: bold; margin-bottom: 10px; } .poem-author { font-size: 1.2rem; font-style: italic; } .poem-content { margin-top: 20px; }
在這段代碼中,我們定義了兩個類,一個是.poem,一個是.poem-title。.poem定義了整首詩的樣式,包括字體、字號、行高、居中對齊、寬度、邊框、背景色等。.poem-title定義了詩的標題樣式,包括字號、加粗、底部間距等。
在.poem類中,我們使用了日文字體'Yu Mincho',這個字體很適合古詩的風格。同時,我們使用了box-sizing:border-box;來讓邊框不影響元素的大小。這樣就可以實現軟件邊框了。
.poem-author用了斜體字添增一些古典氣息。
最后,我們給詩歌內容添加了一個20px的上邊距,讓它距離標題有一些距離。
在使用這段代碼的時候,只需要在HTML中添加這樣的代碼:
<div class="poem"> <h2 class="poem-title">《靜夜思》</h2> <p class="poem-author">唐代:李白</p> <div class="poem-content"> 床前明月光,疑是地上霜。 舉頭望明月,低頭思故鄉。 </div> </div>
這樣,就可以在網頁中添加上一篇古詩了。同時,你也可以根據需要進行修改,讓網頁更符合你的需求。
上一篇html 頁面預覽代碼
下一篇qrcode vue