HTML 左右列選框源代碼
在設計網頁時,我們經常需要使用到左右列選框。這種布局方式可以讓網頁更加有層次感,也更加易于閱讀。下面是一段 HTML 左右列選框源代碼示例:
<!DOCTYPE html> <html> <head> <title>左右列選框示例</title> </head> <body> <div style="display: flex;"> <div style="padding: 10px; width: 30%; background-color: #f2f2f2;"> <h2>左側列</h2> <p>這是左側列的內容。</p> </div> <div style="padding: 10px; width: 70%; background-color: #e5e5e5;"> <h2>右側列</h2> <p>這是右側列的內容。</p> </div> </div> </body> </html>上述代碼使用了 `div` 元素,并設置了 `display: flex` 樣式來實現左右列選框的布局。其中,左側列和右側列分別用一個 `div` 元素來包裹,通過設置 `padding`、`width` 和 `background-color` 樣式來實現樣式的設置,讓選框看起來更加美觀。同時,也在每個列中添加了一個標題和一段文本內容。 總之,這段 HTML 左右列選框源代碼非常簡單易懂,學習使用也十分容易,可以幫助你更加方便地設計網頁。
上一篇html必須輸入代碼
下一篇html左右滑動代碼