實戰后的效果

大家好，我是小葉同學，如今都大二了，跟著學校老師只學到皮毛，不如自己自學，說起來也慚愧，今天實戰Html+CSS小米官網左側導航開發，后面也會一點點對小米官網全部開發，歡迎前來坐坐沙發

布局

首先創建一個大盒子，里面給一個居中盒子，居中盒子給一個相對定位，左側導航根據居中盒子進行絕對定位，相當于對根據Logo定位比較簡單

當看到圖片的時候，相信各位有了布局思路，我們看看它的組成部分，分別是輪播圖和左側導航，但是你可以看見因為這兩個是重疊在一起的，因此可以知道 輪播圖 肯定是使用了 position：absolute 來進行定位的，至于左側開始菜單，也可以使用position：absolute來定位，左側菜單使用了定位后，層疊優先級會將左側顯示在前面，輪播圖就在下層了。

彈出頁面框

看到動畫效果，左側菜單切換內容框是沒有過渡效果，因此不用設置 transition 屬性，就可以通過display的none和block來設置，頁面的布局也是通過絕對定位父元素來進行的，全部的定位都是基于父元素居中盒子進行的。這樣看起來簡單而不會復雜

那里面的內容怎么設置呢？

里面的內容每一列通過ul和li來進行設置，ul最多只能有4個，也就是只能4列內容的顯示，寬度計算也很簡單 總寬度 / N(取決于你想顯示多少列)

li 通過設置內邊距填充，使其內容居中 ， padding：上下18px 左右20px

實現一個功能之前，首先在腦海里理清它的布局思路，這樣寫起CSS樣式起來才能得心應手，那我也不廢話了，代碼奉上

輪播圖

輪播圖代碼請看我另一篇文章，有詳細的說明

點擊這里跳轉

Html文件

<div class="hdm"><ul><li><a href="#">手機 電話卡</a><i class="iconfont">&#xe501;</i><div class="hdm_hidden"><ul><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li></ul><ul><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li><li><a href="#"><img src="./images/Redmi10X.webp"><span>Redmi 10X</span></a></li></ul></div></li><li><a href="#">電視 盒子</a><i class="iconfont">&#xe501;</i></li><li><a href="#">筆記本 顯示器 平板</a><i class="iconfont">&#xe501;</i></li><li><a href="#">家電 插線板</a><i class="iconfont">&#xe501;</i></li><li><a href="#">出行 穿戴</a><i class="iconfont">&#xe501;</i></li><li><a href="#">智能 路由器</a><i class="iconfont">&#xe501;</i></li><li><a href="#">電源 配件</a><i class="iconfont">&#xe501;</i></li><li><a href="#">健康 兒童</a><i class="iconfont">&#xe501;</i></li><li><a href="#">耳機 音箱</a><i class="iconfont">&#xe501;</i></li><li><a href="#">生活 箱包</a><i class="iconfont">&#xe501;</i></li></ul></div></div>

CSS文件

.hdm{width: 234px;height: 459px;position: absolute;top: 0;background-color: rgba(0,0,0,.5);padding: 20px 0;box-sizing: border-box; } .hdm>ul>li{height: 42px;line-height: 42px;height: 42px;text-align: left;padding-left: 30px; } .hdm>ul>li>a{font-size: 14px;color: #fff; } .hdm>ul>li:hover{background-color: #ff6700; } .hdm i{color: rgba(255,255,255,.5);float: right;margin-right: 30px;font-size: 12px; } .hdm_hidden{width: 993px;height: 459px;background-color: #fff;border: 1px solid #e0e0e0;box-shadow: 0 8px 16px rgba(0,0,0,.18);position: absolute;top: 0;left: 100%;display: none; } .hdm li:hover .hdm_hidden{display: block; } .hdm_hidden ul{width: 248px;height: 459px;float: left; } .hdm_hidden ul>li{width: 265px;height: 76px;padding: 18px 20px;box-sizing: border-box; } .hdm_hidden img{margin-right: 12px; } .hdm_hidden span{color: #333; } .hdm_hidden span:hover{color: #ff6700; }

總結

以上是生活随笔為你收集整理的Html5+Css实战前端小米官网左侧导航（思路+详解+素材）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。