HTML和CSS都是網頁設計中必不可少的技能。在設計網頁時，我們經常需要制作登錄框。下面，讓我們來學習一下HTML和CSS制作登錄框的代碼。 首先，讓我們來看一下HTML代碼。代碼使用了form標簽來創建一個登陸表單，以便用戶可以輸入用戶名和密碼。代碼如下：

<form>
<p><label for="username">用戶名:</label><input type="text" id="username" name="username"></p>
<p><label for="password">密碼:</label><input type="password" id="password" name="password"></p>
<p><input type="submit" value="登錄"></p>
</form>

在這個表單中，我們使用了兩個字段：一個是用戶名，另一個是密碼。這兩個字段在HTML中使用了input標簽來創建。在這里，我們分別使用了type為"text"和"type"為"password"。 同時，我們也需要提供一個“提交”按鈕來提交用戶輸入的信息。在這里，我們使用了type為"submit"的input標簽來創建一個按鈕，當用戶點擊這個按鈕時，它將提交表單中的信息。 接下來，我們來看一下CSS代碼。我們將為我們的表單添加樣式以使其看起來更美觀和現代。代碼如下：

body{
background-color: #F7F7F7;
}
form{
display: block;
background-color: #FFFFFF;
width: 400px;
margin: 50px auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
label{
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #333333;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #CCCCCC;
border-radius: 3px;
font-size: 16px;
font-family: Arial, sans-serif;
}
input[type="submit"]{
background-color: #3097D1;
color: #FFFFFF;
border: none;
border-radius: 5px;
padding: 10px 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}

在這里，我們首先為整個頁面設置了一個背景色。我們使用了一個漸變灰色來為用戶呈現一個舒適的環境。 接下來，我們為表單設置了樣式。我們使表單在中央align，然后設置了一些邊距和背景色以使其與頁面對齊。我們還使用了陰影效果，這樣表單就有一種漂浮在頁面上的感覺。 在CSS代碼的后半部分，我們使輸入框看起來更現代。我們設置了一個下邊框和采用了圓角設計。我們還為提交按鈕添加了樣式，使其顯示為藍色背景和白色文本，以便吸引用戶的注意。 以上就是使用HTML和CSS代碼制作的一個簡單的登錄框，我們可以使用這種方法繼續增加其他的元素，如驗證碼等。