摘要:
下面是一個使用 HTML 和 CSS 創(chuàng)建基本 UI 元素的代碼示例,包括列表、表單、表格、登錄、注冊、水平和垂直導航欄、卡片和圖標。
<!-- 列表 --> <ul> <li>項目 1</li> <li>項目 2</li> <li>項目 3</li> </ul> <!-- 表單 --> <form> <label for="name">姓名:</label> <input type="text" id="name"> <input type="submit" value="提交"> </form> <!-- 表格 --> <table> <thead> <tr> <th>姓名</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>30</td> </tr> </tbody> </table> <!-- 登錄 --> <form> <label for="username">用戶名:</label> <input type="text" id="username"> <label for="password">密碼:</label> <input type="password" id="password"> <input type="submit" value="登錄"> </form> <!-- 注冊 --> <form> <label for="name">姓名:</label> <input type="text" id="name"> <label for="email">郵箱:</label> <input type="email" id="email"> <label for="password">密碼:</label> <input type="password" id="password"> <input type="submit" value="注冊"> </form> <!-- 水平導航欄 --> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關于</a></li> <li><a href="#">聯系我們</a></li> </ul> </nav> <!-- 垂直導航欄 --> <nav> <ul> <li><a href="#">Dashboard</a></li> <li><a href="#">用戶</a></li> <li><a href="#">訂單</a></li> </ul> </nav> <!-- 卡片 --> <div class="card"> <div class="card-body"> <h5>Card title</h5> <p>Card content</p> </div> </div> <!-- 圖標 --> <i class="fa fa-home"></i>
總結:
這是一個基本 UI 元素的代碼示例集合,可用于創(chuàng)建交互式 Web 應用??梢杂?HTML 和 CSS 輕松修改和自定義此代碼以符合您的特定需求。