眾所周知，CSS對于網站的美化以及頁面布局是非常重要的，今天我們講解一下如何通過li選擇器來實現百度注冊頁面的CSS樣式。在頁面中，我們可以看到很多地方都運用了li標簽，這里便以輸入框為例子來介紹。

<ul>
<li>
<label>用戶名</label>
<input type="text" class="input" name="userName">
</li>
<li>
<label>密碼</label>
<input type="password" class="input" name="password">
</li>
<li>
<label>確認密碼</label>
<input type="password" class="input" name="confirmPassword">
</li>
</ul>

以上代碼是一個基本的輸入框的HTML結構，現在我們開始對它進行美化。首先，我們需要為ul設定樣式：

ul {
list-style: none;
padding: 0px;
margin: 0px;
}

通過以上樣式，可以去掉li的默認符號，并且去掉padding和margin

接下來，我們開始為li標簽設置樣式，主要分為兩步，左側title的樣式和右側輸入框的樣式

li {
position: relative;
margin-bottom: 20px;
}

以上樣式是為了讓每一個li都具有一個相對位置，方便后面使用絕對定位的方法控制title的位置。 margin-bottom用于控制li與li之間的間隔。

li label {
position: absolute;
top: 0px;
left: 0px;
width: 110px;
height: 30px;
line-height: 30px;
text-align: right;
}

以上樣式是控制title的位置，其中 position:absolute是把它相對于最近的有定位的祖先元素進行絕對定位，top和left則是控制title的位置，width和height是控制title的大小，line-height是控制上下對齊與title高度一致，text-align是控制文字在title內的對齊方式

li input {
width: 250px;
height: 30px;
border: 1px solid #ccc;
outline: none;
padding-left: 5px;
}

以上樣式是控制輸入框的樣式，其中width和height是控制寬度和高度，border是控制邊框樣式，outline是控制輸入框獲得焦點時的外觀，padding則是控制輸入框內部的邊距

綜上所述，通過以上樣式的組合，我們可以實現如下效果：