HTML期末大作业-小米商城
生活随笔
收集整理的這篇文章主要介紹了
HTML期末大作业-小米商城
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?HTML期末作業作業-仿小米商城最新更新(2021-06-16)(HTML+CSS+JavaScript),一個頁面。
?部分網頁源代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/fonts.css"><title>小米商城</title> </head><body><!-- 頂部欄 --><div class="topBar"><div class="container"><!-- 頂部欄由三塊組成，列表，購物車以及登錄 --><!-- 頂部欄的列表區 --><div class="topBar-list"><!-- 每個列表可以分為兩部分，一個a標簽代表鏈接以及span標簽“|”分隔開 --><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">loT</a><span>|</span><a href="#">云服務</a><span>|</span><a href="#">金融</a><span>|</span><a href="#">有品</a><span>|</span><a href="#">小愛開放平臺</a><span>|</span><a href="#">政企服務</a><span>|</span><a href="#">資質證照</a><span>|</span></div><!-- 頂部欄的購物車區 --><div class="shop"><a href="#"><i class="iconfont" style="font-size: 14px;"></i>購物車（0）</a></div><!-- 頂部欄的登錄區 --><div class="login"><a href="#">登錄</a><span>|</span><a href="#">注冊</a><span>|</span><a href="#">消息通知</a><span>|</span></div></div></div><!-- 導航欄 --><div class="header"><div class="container"><!-- 導航欄由三塊組成，圖標，列表，以及搜索框 --><!-- 導航欄的圖標區 --><div class="site-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><!-- 導航欄的列表區 --><div class="site-list"><ul class="clearfix"><li class="site-category"><a href="#"><img src="./img/mifen.gif" alt=""></a><!-- 側邊欄 --><div class="category-list"><ul><li><a href="#">手機 電話卡<span class="iconfont"></span></a></li><li><a href="#">電視 盒子<span class="iconfont"></span></a></li><li><a href="#">筆記本 顯示器 平板<span class="iconfont"></span></a></li><li><a href="#">家電 插線板<span class="iconfont"></span></a></li><li><a href="#">出現 穿戴<span class="iconfont"></span></a></li><li><a href="#">智能 路由器<span class="iconfont"></span></a></li><li><a href="#">電源 配件<span class="iconfont"></span></a></li><li><a href="#">健康 兒童<span class="iconfont"></span></a></li><li><a href="#">耳機 音箱<span class="iconfont"></span></a></li><li><a href="#">生活 箱包<span class="iconfont"></span></a></li></ul></div></li><li><a href="#">小米手機</a></li><li><a href="#">紅米</a></li><li><a href="#">電視</a></li><li><a href="#">筆記本</a></li><li><a href="#">家電</a></li><li><a href="#">路由器</a></li><li><a href="#">智能硬件</a></li><li><a href="#">服務</a></li><li><a href="#">社區</a></li></ul></div><!-- 導航欄的搜索框 --><div class="site-search"><form action=""><input type="text" name="search" class="search-text" placeholder="耳機"><input type="submit" class="search-btn iconfont" value="" style="font-size: 24px;"></form></div></div></div><!-- 主頁內容區 --><div class="site-content"><div class="container"><!-- 輪播圖 --><div class="site-slider"><a href="#"><div id="benner"><div class="img"><img src="img/11.jpg" class="imga active"><img src="img/22.jpg" class="imga"><img src="img/33.jpg" class="imga"><img src="img/44.jpg" class="imga"><img src="img/55.jpg" class="imga"></div><ul class="title"><li class="nr active"></li><li class="nr"></li><li class="nr"></li><li class="nr"></li><li class="nr"></li></ul></div></a></div><!-- 向導 --><div class="content-sub"><!-- 向導左 --><div class="content-channel"><ul class="channel-list clearfix"><li><a href="#"><i class="iconfont"></i>選購手機</a></li><li><a href="#"><i class="iconfont"></i>企業團購</a></li><li><a href="#"><i class="iconfont"></i>F碼通道</a></li><li><a href="#"><i class="iconfont"></i>米粉卡</a></li><li><a href="#"><i class="iconfont"></i>以舊換新</a></li><li><a href="#"><i class="iconfont"></i> </i>話費充值</a></li></ul></div><!-- 向導右 --><div class="content-list"><ul class="clearfix"><li><a href=""><img src="img/image1.jpg"></a></li><li><a href=""><img src="img/image2.jpg"></a></li><li><a href=""><img src="img/image3.jpg"></a></li></ul></div></div></div><!-- banner圖 --><div class="content-banner"><div class="container"> <a href="#"><img src="./img/banner.jpg"></a></div> </div></div><!-- 內容詳情 --><div class="content-desc"><div class="container"><!-- 上層標題 --><div class="box-hd"><h2>手機</h2><div class="more"><a href="#">查看全部<i class="iconfont"></i></a></div></div><!-- 下層內容 --><div class="box-bd"><div class="row clearfix"><!-- 內容左邊大圖 --><div class="row-l"><a href="#"><img src="./img/iphone.jpg"></a></div><!-- 內容右邊小圖分為兩大部分，圖片，商品描述 --><div class="row-r"><ul><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure1.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10 青春版 5G</a></h3><p class="desc">50倍潛望式變焦/輕薄5G手機</p><p class="price"><span class="num">1899</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure2.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10</a></h3><p class="desc">驍龍865/1億像素相機</p><p class="price"><span class="num">3799</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure3.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 Pro</a></h3><p class="desc">雙模5G、 驍龍865、 彈出全面屏</p><p class="price"><span class="num">2499</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure4.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 Pro 變焦版</a></h3><p class="desc">雙模5G、 驍龍865、 彈出全面屏</p><p class="price"><span class="num">3799</span>元</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure5.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10 Pro</a></h3><p class="desc">驍龍865/50倍變焦</p><p class="price"><span class="num">4999</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure6.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30</a></h3><p class="desc">120 Hz流速屏、 全速熱愛</p><p class="price"><span class="num">1399</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure7.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 5G</a></h3><p class="desc">雙模5G、 120Hz流速屏</p><p class="price"><span class="num">1899</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure8.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi 8</a></h3><p class="desc">5000mAh超長續航</p><p class="price"><span class="num">799</span>元</p></li></ul></div></div></div></div><div class="container"><!-- 上層標題 --><div class="box-hd"><h2>電視</h2><div class="more"><a href="#">查看全部<i class="iconfont"></i></a></div></div><!-- 下層內容 --><div class="box-bd"><div class="row clearfix"><!-- 內容左邊大圖 --><div class="row-l"><a href="#"><img src="./img/1.png"></a></div><!-- 內容右邊小圖分為兩大部分，圖片，商品描述 --><div class="row-r"><ul><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure1.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10 青春版 5G</a></h3><p class="desc">50倍潛望式變焦/輕薄5G手機</p><p class="price"><span class="num">1899</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure2.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10</a></h3><p class="desc">驍龍865/1億像素相機</p><p class="price"><span class="num">3799</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure3.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 Pro</a></h3><p class="desc">雙模5G、 驍龍865、 彈出全面屏</p><p class="price"><span class="num">2499</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure4.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 Pro 變焦版</a></h3><p class="desc">雙模5G、 驍龍865、 彈出全面屏</p><p class="price"><span class="num">3799</span>元</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure5.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10 Pro</a></h3><p class="desc">驍龍865/50倍變焦</p><p class="price"><span class="num">4999</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure6.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30</a></h3><p class="desc">120 Hz流速屏、 全速熱愛</p><p class="price"><span class="num">1399</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure7.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 5G</a></h3><p class="desc">雙模5G、 120Hz流速屏</p><p class="price"><span class="num">1899</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure8.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi 8</a></h3><p class="desc">5000mAh超長續航</p><p class="price"><span class="num">799</span>元</p></li></ul></div></div></div></div><div class="container"><!-- 上層標題 --><div class="box-hd"><h2>家電</h2><div class="more"><a href="#">查看全部<i class="iconfont"></i></a></div></div><!-- 下層內容 --><div class="box-bd"><div class="row clearfix"><!-- 內容左邊大圖 --><div class="row-l"><a href="#"><img src="./img/2.png"></a></div><!-- 內容右邊小圖分為兩大部分，圖片，商品描述 --><div class="row-r"><ul><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure1.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10 青春版 5G</a></h3><p class="desc">50倍潛望式變焦/輕薄5G手機</p><p class="price"><span class="num">1899</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure2.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10</a></h3><p class="desc">驍龍865/1億像素相機</p><p class="price"><span class="num">3799</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure3.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 Pro</a></h3><p class="desc">雙模5G、 驍龍865、 彈出全面屏</p><p class="price"><span class="num">2499</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure4.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 Pro 變焦版</a></h3><p class="desc">雙模5G、 驍龍865、 彈出全面屏</p><p class="price"><span class="num">3799</span>元</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure5.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">小米10 Pro</a></h3><p class="desc">驍龍865/50倍變焦</p><p class="price"><span class="num">4999</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure6.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30</a></h3><p class="desc">120 Hz流速屏、 全速熱愛</p><p class="price"><span class="num">1399</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure7.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi K30 5G</a></h3><p class="desc">雙模5G、 120Hz流速屏</p><p class="price"><span class="num">1899</span>元起</p></li><li><!-- 圖片區 --><div class="figure"><a href="#"><img src="./img/figure8.jpg"></a></div><!-- 商品描述 --><h3 class="title"><a href="#">Redmi 8</a></h3><p class="desc">5000mAh超長續航</p><p class="price"><span class="num">799</span>元</p></li></ul></div></div></div></div></div><!-- 腳部 --><div class="footer"><div class="container"><!-- 腳部一共分為兩部分，上部分的服務以及其他小字 --><div class="footer-service"><ul class="clearfix"><li class="first"><a href="#"><i class="iconfont"></i>預約維修服務</a></li><li><a href="#"><i class="iconfont"></i>7天無理由退貨</a></li><li><a href="#"><i class="iconfont"></i>15天免費換貨</a></li><li><a href="#"><i class="iconfont"></i>滿99元包郵</a></li><li><a href="#"><i class="iconfont"></i>520余家售后網點</a></li></ul></div><div class="footer-links clearfix"><dl class="col-links"><dt>幫助中心</dt><dd>賬戶管理</dd><dd>購物指南</dd><dd>訂單操作</dd></dl><dl class="col-links"><dt>服務支持</dt><dd>售后政策</dd><dd>自助服務</dd><dd>相關下載</dd></dl><dl class="col-links"><dt>線下門店</dt><dd>小米之家</dd><dd>服務網點</dd><dd>授權體驗店</dd></dl><dl class="col-links"><dt>關于小米</dt><dd>了解小米</dd><dd>加入小米</dd><dd>投資者關系</dd></dl><dl class="col-links"><dt>關注我們</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>聯系我們</dd></dl><dl class="col-links"><dt>特色服務</dt><dd>F碼通道</dd><dd>禮物碼</dd><dd>防偽查詢</dd></dl><div class="col-contact"><p class="phone">400-100-5678</p><p>8:00-18:00（僅收市話費）</p><a href="#"><i class="iconfont"></i>人工客服</a></div></div></div></div> </body> <script src="./js/index.js"></script> </html>?部分網頁截圖
總結
以上是生活随笔為你收集整理的HTML期末大作业-小米商城的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle 9i闪回schema,Or
- 下一篇： HTML期末作业-宠物网