HTML左側懸浮框是網頁設計中常用的一種布局方式，可以使網站頁面更加美觀和實用。下面是一段簡單的HTML懸浮框代碼：

<div class="left-menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞動態</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

上面這段代碼中，首先使用了一個div標簽，設置了它的class屬性為“left-menu”，并將菜單內容放在其內部。菜單內容使用了ul和li標簽，通過樣式設置，使菜單項可以垂直排列，方便用戶瀏覽。 CSS樣式部分則可以用如下代碼來實現：

.left-menu {
position: fixed;
top: 100px;
left: 0;
width: 200px;
height: 100%;
background: #f5f5f5;
box-shadow: 1px 1px 2px #ccc;
}
.left-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.left-menu li {
border-bottom: 1px solid #ddd;
}
.left-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.left-menu li a:hover {
background: #e0e0e0;
}

樣式代碼中，首先將懸浮框的position屬性設置為fixed，使其可以在用戶滾動頁面時始終保持在左側，不被覆蓋。然后設置了寬度、高度、背景色等基本樣式。 其中，鼠標懸停在菜單項上時，使用:hover偽類設置了背景顏色變化的效果，提高了用戶體驗。 整個HTML懸浮框的設計簡潔明了，代碼也較為簡單，是初學者可以嘗試的一個小項目。