如何开始您的第一个 HTML 登陆页面

在本文中，我将教您如何使用 HTML CSS 和引导程序开始您的基本登录页面设计

最美丽的部分： 这是现成的代码结构，使用它:)。

现在让我们开始吧！

这是HTML：

基本结构
添加CSS
添加引导程序

**索引.html** <!doctype html>  
 <html>  
 <head>  
 <title>这是网页的标题！</title>  
 </head>  
 <body><p>这是一个示例段落..</p></body>  
 </html>

添加引导程序：

 </html>  
 <head>  
 <title>边做边学 Bootstrap！</title>  
 <!-- Add Bootstrap <link> below -->  
   ** <link  
 href="**[ **https://cdn.jsdelivr.net/npm/ [email protected]/dist/css/bootstrap.min.css**](https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css) **"  
 rel="样式表"  
 完整性="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOMLASjC"  
 crossorigin="匿名"  
 />  
  **  
 </head>  
 </html>

添加CSS：

 </html>  
 <head>  
 ** <link rel="stylesheet" href="css/styles.css" />**  
 </head>  
 </html>

感到困惑..冷静..这真的很简单

创建文件夹 css → 创建文件 styles.css 现在添加链接标签 ** ** 在你的 html 文件中。在此处链接您的 style.css 文件。现在可以在此文件中找到任何 css 设计。

对于 Bootsrap 也是一样的，只需要附上上面的外部链接即可。只是复制粘贴。

最终的 Html css bootsrap

索引.html：

 <!DOCTYPE html> <html lang="en"> <head>  
 <meta charset="UTF-8" />  
 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>QTrip</title>  
 <link rel="stylesheet" href="css/styles.css" /> _ <!-- TODO: MODULE_LAYOUT -->_ _ <!-- 1. Create a <link> to the first stylesheet needed for Bootstrap -->_ </head> <body> _ <!-- TODO: MODULE_LAYOUT -->_ _ <!-- 1. Use appropriate css classes on nav element. -->_ _ <!-- 2. Add child elements as required. -->_ <nav></nav> _ <!-- TODO: MODULE_LAYOUT -->_ _ <!-- 1. Use appropriate css classes on the hero image container element. -->_ _ <!-- 2. Add child elements as required. -->_ <div class="hero-image d-flex"></div> <div class="container"> _ <!-- TODO: MODULE_LAYOUT -->_ _ <!-- 1. Create the grid like layout as required. -->_ </div> <footer> <div class="container">© QTrip 2020</div> </footer> _ <!-- TODO: MODULE_LAYOUT -->_ _ <!-- Add scripts needed for bootstrap to work -->_ </body>  
 </html>