CSS是前端網(wǎng)頁(yè)開發(fā)中的重要樣式表語(yǔ)言，可以通過(guò)CSS輕松實(shí)現(xiàn)城市選擇功能。

/* 定義下拉選擇框樣式 */
select {
padding: 4px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
/* 定義選項(xiàng)樣式 */
option {
font-size: 16px;
}
/* 定義城市選擇器格式 */
.city {
display: flex;
flex-direction: row;
align-items: center;
}
/* 定義城市選擇器文本顏色 */
.city .text {
color: #666;
font-size: 14px;
margin-right: 8px;
}

城市選擇器通常使用下拉框?qū)崿F(xiàn)，可以使用HTML中的<select>標(biāo)簽和<option>標(biāo)簽，再結(jié)合CSS樣式美化即可。以下是一個(gè)城市選擇器的HTML結(jié)構(gòu)：

<div class="city">
<span class="text">請(qǐng)選擇城市：</span>
<select name="city">
<option value=""></option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="廣州市">廣州市</option>
<option value="深圳市">深圳市</option>
<option value="杭州市">杭州市</option>
</select>
</div>

以上HTML代碼中，首先使用了<div>標(biāo)簽包裹城市選擇器。<span>標(biāo)簽用于顯示“請(qǐng)選擇城市”文本，<select>標(biāo)簽用于展示城市選項(xiàng)，<option>標(biāo)簽用于設(shè)置選項(xiàng)值。在<select>標(biāo)簽中，可以使用name屬性設(shè)置表單提交的字段名。