CSS懸浮窗登錄是一種常見的網站設計元素，它可以讓用戶在任何頁面上方便地進行登錄和注冊操作。在以下代碼中，我們將創建一個懸浮窗登錄框。

/*
* HTML代碼
*/
<div class="login-form">
<h4>登錄</h4>
<form>
<label>用戶名:</label>
<input type="text" name="username">
<label>密碼:</label>
<input type="password" name="password">
<button type="submit">登錄</button>
</form>
</div>
/*
* CSS樣式
*/
.login-form {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 30px;
border: 1px solid #cccccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.login-form h4 {
font-size: 24px;
margin-bottom: 20px;
}
.login-form label {
display: block;
margin-bottom: 10px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #cccccc;
border-radius: 5px;
margin-bottom: 20px;
}
.login-form button[type="submit"] {
background-color: #0087d1;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 18px;
}
.login-form button[type="submit"]:hover {
background-color: #006699;
cursor: pointer;
}

代碼中，.login-form是登錄框的容器，使用position:fixed使其在頁面上懸浮。然后使用top:50%和left:50%將其居中。接著使用transform:translate(-50%,-50%)微調其位置，使其垂直和水平居中。我們還為其添加了背景顏色、內邊距、邊框和陰影等樣式。

登錄框中包含一個標題<h4>、一個表單<form>，表單中包含兩個文本字段<input type="text">和<input type="password">，以及一個提交按鈕<button type="submit">。我們使用CSS樣式來設置它們的外觀和樣式。

當鼠標指向提交按鈕時，使用:hover偽類為按鈕指定樣式，使其背景顏色和鼠標指針發生變化，從而提高用戶交互性。

通過以上代碼，我們可以輕松地創建一個漂亮、實用的CSS懸浮窗登錄框。