列表選項和CSS是網頁設計中常用的兩個元素，列表選項可以將信息以清晰的方式呈現，CSS可以美化網頁，增加用戶體驗。在下面的例子中，我們將展示如何使用列表選項和CSS來創建一個漂亮的網頁。
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.main {
margin: 50px;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px grey;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula suscipit, consectetur magna eu, blandit dolor. Sed vitae quam quis nisl vehicula lacinia vitae et ipsum. Nunc id purus felis. Integer bibendum quam vel sapien iaculis, ut venenatis arcu blandit. Maecenas feugiat mauris sit amet magna placerat, sit amet scelerisque quam convallis. Fusce augue ipsum, sodales ut euismod ut, consequat auctor ex. Proin eget sapien sit amet odio dignissim efficitur. Suspendisse sed tortor ultrices, dignissim mauris vel, blandit nisi. Fusce porttitor dui vitae nunc varius, in malesuada urna sagittis. Proin massa ex, facilisis sed dolor eu, condimentum auctor velit. Ut fermentum leo in lectus accumsan, sed semper massa eleifend. Aenean eleifend vitae urna non imperdiet. Sed vel urna aliquet, pretium velit non, vestibulum odio. Sed at dolor euismod, suscipit augue quis, finibus justo.</p>
</div>
</body>
</html>在上面的代碼中，我們使用了<ul>和<li>標簽來創建列表選項，其中<ul>標簽用于定義無序列表，<li>標簽用于定義列表項。通過設置CSS，我們實現了以下效果：
- 給列表項添加了背景顏色(#333)
- 將列表項向左浮動，使它們水平排列
- 通過設置:hover改變鼠標懸停時的背景顏色
除此之外，我們還使用了.box類來定義一個主要內容的 div，以及一些樣式來美化它。通過將內容包含在這個div中，我們可以很容易地為主要內容添加一些樣式。
通過使用列表選項和CSS，我們可以創建一個美麗的網頁，增強用戶體驗，同時使信息更直觀易懂。