小米商城主頁展示HTML+CSS

来源:https://www.cnblogs.com/Mickeybo101/archive/2023/05/07/17379595.html
-Advertisement-
Play Games

大佬們呀，花了好幾天的時間總算是看著頁面展示可以了，求賜教！ 小米商城主頁，對大佬來說肯定簡單爆了，我抄寫了好久呀，總是有一點點的小問題，還搞不明白 主要是一個靜態的小米商城頁面，HTML前端代碼不複雜，一堆的div和ul、li就沒問題了，主要是css代碼搞不懂導致顯示不正常 話不多說，直接上代碼： ...


大佬們呀，花了好幾天的時間總算是看著頁面展示可以了，求賜教！

小米商城主頁，對大佬來說肯定簡單爆了，我抄寫了好久呀，總是有一點點的小問題，還搞不明白

主要是一個靜態的小米商城頁面，HTML前端代碼不複雜，一堆的div和ul、li就沒問題了，主要是css代碼搞不懂導致顯示不正常

話不多說，直接上代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>小米商城首頁</title>
        <link rel="icon" href="img/favicon.ico">
        <link rel="stylesheet" href="./css/topBar.css">
        <link rel="stylesheet" href="./css/head.css">
        <link rel="stylesheet" href="./css/body.css">
        <link rel="stylesheet" href="./css/foot.css">
    </head>

    <body>
        <!-- 頂部導航欄 -->
        <div class="topBar">
            <div class="container1">
                <div class="topBar-nav">
                    <a href="#">MIUI</a>
                    <span class="sep">|</span>
                    <a href="#">loT</a>
                    <span class="sep">|</span>
                    <a href="#">雲服務</a>
                    <span class="sep">|</span>
                    <a href="#">金融</a>
                    <span class="sep">|</span>
                    <a href="#">有品</a>
                    <span class="sep">|</span>
                    <a href="#">小愛開放平臺</a>
                    <span class="sep">|</span>
                    <a href="#">政企服務</a>
                    <span class="sep">|</span>
                    <a href="#">下載app</a>
                    <span class="sep">|</span>
                    <a href="#">select Region</a>
                    <span class="sep">|</span>
                </div>

                <div class="topBar-cart">
                    <a href="#" target="_self">
                        <img src="img/cart.png" alt="購物車" id="t-cart">購物車
                    </a>
                </div>

                <div class="user-info">
                    <a href="#">登錄</a>
                    <span class="sep">|</span>
                    <a href="#">註冊</a>
                    <span class="sep">|</span>
                    <a href="#">消息通知</a>
                    <span class="sep">|</span>
                </div>
            </div>
        </div>

        <!-- 頭部logo導航 和商品搜索部分 -->
        <div class="header">
            <div class="container2">
                <!-- logo的盒子 -->
                <div class="logo">
                    <img src="img/logo.png" alt="LOGO">
                </div>
                <!-- 下麵是導航的盒子 -->
                <div class="nav">
                    <div class="sub-nav">
                        <a href="#">小米手機&nbsp</a>
                        <a href="#">紅米手機&nbsp</a>
                        <a href="#">電視&nbsp</a>
                        <a href="#">筆記本&nbsp</a>
                        <a href="#">空調&nbsp</a>
                        <a href="#">新品&nbsp</a>
                        <a href="#">路由器&nbsp</a>
                        <a href="#">智能硬體&nbsp</a>
                        <a href="#">服務&nbsp</a>
                        <a href="#">社區&nbsp</a>
                    </div>
                </div>
                <div class="search">
                    <input type="text" name="goods" value="請輸入商品名:&nbsp&nbsp" id="s1">
                    <input type="submit" name="submit" value="搜索" id="s2">
                </div>
            </div>
        </div>

        <!-- 內容主題部分 -->
        <div class="content">
            <!-- 內容選擇樣表 -->
            <div class="content-list">
                <div class="sub-content">
                    <ul>
                        <li>手機電話卡&nbsp&nbsp&nbsp></li><br>
                        <li>電視&nbsp&nbsp&nbsp盒子&nbsp&nbsp&nbsp></li><br>
                        <li>筆記本平板&nbsp&nbsp&nbsp></li><br>
                        <li>家電插線板&nbsp&nbsp&nbsp></li><br>
                        <li>出行&nbsp&nbsp&nbsp穿戴&nbsp&nbsp&nbsp></li><br>
                        <li>智能路由器&nbsp&nbsp&nbsp></li><br>
                        <li>電源&nbsp&nbsp&nbsp配件  &nbsp&nbsp&nbsp></li><br>
                        <li>健康&nbsp&nbsp&nbsp兒童  &nbsp&nbsp&nbsp></li><br>
                        <li>耳機&nbsp&nbsp&nbsp箱包  &nbsp&nbsp&nbsp></li><br>
                    </ul>
                </div>
            </div>

            <!-- 輪播圖 -->
            <div class="viewpager">
                <a href="#">
                    <img src="img/lunbo.jpg" alt="輪播圖" width="992px" height="460px">
                </a>
            </div>
        </div>
        
        <div class="shop">
            <!-- 選購引導 -->
            <div class="channel">
                <ul>
                    <li><a href="#">選購手機</a></li>
                    <li><a href="#">企業團購</a></li>
                    <li><a href="#">F碼通道</a></li>
                    <li><a href="#">米粉卡</a></li>
                    <li><a href="#">以舊換新</a></li>
                    <li><a href="#">話費充值</a></li>
                </ul>
            </div>

            <div class="advertise">
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/ad1.jpg" alt="廣告1" width="316px" height="170px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad2.jpg" alt="廣告1" width="316px" height="170px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad3.jpg" alt="廣告1" width="316px" height="170px">
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 內容主體 閃購部分 -->
        <div class="tag">
            <div class="letter">小米閃購</div>
            <div class="form">查看更多</div>
        </div>

        <div class="limit-shop">
            <div class="shangou">
            </div>
            <div class="shangpin">
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/ad4.png" alt="廣告" width="233px" height="388px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad5.png" alt="廣告" width="233px" height="388px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad6.png" alt="廣告" width="233px" height="388px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad7.png" alt="廣告" width="233px" height="388px">
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 頁末 售後部分 -->
        <div class="foot">
            <div class="f-cont">
                <div class="f1">
                    <ul>
                        <li><div class="f11"><a href="#">預約維修服務</a></div></li>
                        <li><div class="f11"><a href="#">7天無理由退換貨</a></div></li>
                        <li><div class="f11"><a href="#">15天免費換貨</a></div></li>
                        <li><div class="f11"><a href="#">滿150元包郵</a></div></li>
                        <li><div class="f12"><a href="#">520家售後網點</a></div></li>
                    </ul>
                </div>
                <div class="f2">
                    <div class="f21">
                        <div class="f22">幫助中心</div>
                        <ul>
                            <li><a href="#">賬戶管理</a></li>
                            <li><a href="#">購物指南</a></li>
                            <li><a href="#">訂單操作</a></li>
                        </
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Qt中信號與槽
    1.什麼是信號： 信號的種類很多，不同的控制項觸發不同的特定信號 例如button的信號：（在父類中可以找到）信號與槽同時是通過關聯使用的。 2.什麼是槽？ 槽：用於關聯某一個控制項的信號，信號觸發的時候將會執行槽函數（槽函數的關聯分為手動關聯和自動關聯） 槽的自動關聯; 在前面板選中對應的控制項 右擊- ...
  • 快速上手Linux核心命令（十一）：Linux用戶相關命令
    (Linux用戶相關命令) 前言 上一篇中已經預告，我們這篇主要說一說Linux中用戶相關的命令。 可能各位小伙伴用的Windows會比較多一點，在Windows操作系統中，我們知道有Administrator用戶，Administrator 是Windows系統中的管理員用戶，有著最高的許可權。 用 ...
  • 讀SQL進階教程筆記15_SQL編程思維
    1. 還原論 1.1. 認為可以把高級現象還原為低級基本現象的學說 1.2. 將複雜的東西看成是由簡單單元組合而成的 1.2.1. 以賦值、條件分支、迴圈等作為基本處理單元，並將系統整體分割成很多這樣的單元的思維方式 1.2.2. 文件系統也是將大量的數據分割成記錄這樣的小單元進行處理的 2. 整體 ...
  • shp數據插入sde連接的PostgreSQL庫(一)----基於 IntelliJ IDE的GeoTools快速搭建環境
    前言 早就聽聞大名鼎鼎的GeoTools，因為自己不搞Java，所以之前沒用過， 背景 最近有個需求，一個白模系統，具體是數據是用SDE導入到postgresql中，然後用arcgis server發佈了矢量，最後用 arcgis api for js 4.x拉伸，得到有高度的白模。以前的數據都是通 ...
  • 資料庫系統概論—安全、完整性
    資料庫系統概論—基礎篇(3) 三.資料庫安全性 1.資料庫安全性概述 資料庫的安全性指保護資料庫以防不合法使用所造成的數據泄露、更改或破壞 2.資料庫安全性控制 2.1用戶身份鑒別 靜態口令鑒別 動態口令鑒別 生物鑒別特征 智能卡鑒別 2.2存取控制 自主存取控制：給用戶限權(DAC，C1級) 強制 ...
  • 當我再次用Kotlin完成五年前已經通過Kotlin完成的項目後
    > 近日來對Kotlin的使用頻率越來越高, 也對自己近年來寫過的Kotlin代碼嘗試進行一個簡單的整理. 翻到了自己五年前第一次使用Kotlin來完成的一個項目([貝塞爾曲線](https://juejin.cn/post/6844903556173004807)), 一時興起, 又用發展到現在的 ...
  • AutoGPT：有手就會的安裝教程
    AutoGPT 是什麼 Auto-GPT 是一個實驗性開源應用程式，展示了 GPT-4 語言模型的功能。該程式由 GPT-4 驅動，將 LLM 的“思想”鏈接在一起，以自主實現您設定的任何目標。作為 GPT-4 完全自主運行的首批示例之一，Auto-GPT 突破了 AI 的可能性界限。 AutoGP ...
  • 圖片填滿div，真讓人頭大
    家人們，這圖片到底怎樣才能完全填滿div啊，想問度娘結果搜索的問題都亂七八糟的 （怎麼那麼多問題QAQ），描述問題都描述不來 具體問題如下：圖片有自己的解析度大小，例如寬100px，高100px，將圖片添加到div中： <div class="xx"> <img src="xxx"> </div> ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類