開發”小米商城官網首頁”（靜態頁面）

阿新 • • 發佈：2018-05-11

配件 16px -i ont div name :after 路由器 clas

開發“小米官方網站首頁”（靜態頁面）

官網 https://www.mi.com/

技術分享圖片

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="description" content="小米商場官方網站">
    <meta name=" 
keywords" content="小米" >
    <link rel="icon" href="images/logo.png">
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
    <div class="wrap">
        <!--頂部導航欄-->
        <div class="topheader">
            <div class="container">
                <!--導航-->
                <div class 
="topheader-navi">
                    <a href="#">小米商城</a>
                    <span class="sep">|</span>
                    <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="#">Select Region</a>
                </div>
                <!--購物車-->
                <div class="topheader-cart">
                    <a href="#">
                        <span class="icon"></span>
                        <span class="shop-cart">購物車(0)</span>
                    </a>
                </div>
                <!--用戶信息-->
                <div class="topheader-info">
                    <a href="#">登錄</a>
                    <span class="sep">|</span>
                    <a href="#">註冊</a>
                    <span class="sep">|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>
        <!--header-->
        <div class="header">
            <div class="container">
                <!--logo-->
                <div class="header-logo">
                    <a href="#"><img class="logo" src="images/logo.png" alt="小米圖標"></a>
                </div>
                <!--導航-->
                <div class="header-navi">
                    <ul>
                        <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>
                        <li><a href="#">社區</a></li>
                    </ul>
                </div>
                <!--搜索框-->
                <div class="header-search">
                    <form action="http://list.mi.com/" method="get">
                        <label for="search"></label>
                        <input type="text" name="search" id="search">
                        <span class="hot-words">
                            <a href="#">小米小愛音響mini </a>
                            <a href="#">紅米Note5 </a>
                        </span>
                        <input type="submit" value="" id="submit">
                    </form>
                </div>
            </div>
        </div>
        <!--主要內容-->
        <div class="content">
            <div class="container">
                <!--上部分-->
                <div class="con-up">
                    <div class="up-l">
                        <ul>
                            <li><a href="#">手機&nbsp;電話卡</a><span>&gt;</span></li>
                            <li><a href="#">電視&nbsp;盒子</a><span>&gt;</span></li>
                            <li><a href="#">筆記本</a><span>&gt;</span></li>
                            <li><a href="#">智能&nbsp;家電</a><span>&gt;</span></li>
                            <li><a href="#">健康&nbsp;家居</a><span>&gt;</span></li>
                            <li><a href="#">出行&nbsp;兒童</a><span>&gt;</span></li>
                            <li><a href="#">路由器&nbsp;手機配件</a><span>&gt;</span></li>
                            <li><a href="#">移動電源&nbsp;插線板</a><span>&gt;</span></li>
                            <li><a href="#">耳機&nbsp;音響</a><span>&gt;</span></li>
                            <li><a href="#">生活&nbsp;米兔</a><span>&gt;</span></li>
                        </ul>
                    </div>
                    <div class="up-2">
                        <a href="#">
                            <img src="images/母親節.jpg" alt="內容圖片" style="width: 1245px;height: 465px">
                        </a>
                    </div>
                </div>
                <!--下部分-->
                <div class="con-down">
                    <div class="down-l">
                        <ul>
                            <li><div class="p-1"></div><p>選購手機</p></li>
                            <li><div class="p-2"></div><p>企業團購</p></li>
                            <li><div class="p-3"></div><p>F碼通道</p></li>
                            <li><div class="p-4"></div><p>米粉卡</p></li>
                            <li><div class="p-5"></div><p>以舊換新</p></li>
                            <li><div class="p-6"></div><p>話費充值</p></li>
                        </ul>
                    </div>
                    <div class="down-2">
                        <ul>
                            <li><a href="#"><img src="images/紅米5A.jpg" alt="小米圖片"></a></li>
                            <li><a href="#"><img src="images/小米MIX2.jpg" alt="紅米圖片"></a></li>
                            <li><a href="#"><img src="images/凈水器.jpg" alt="凈水器圖片"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--右側固定欄-->
        <div class="bar-right">
            <ul id="right-ul">
                <li><div class="fixed-1"></div><p>掃一掃</p></li>
                <li ><div class="fixed-2"></div><p>個人中心</p></li>
                <li ><div class="fixed-3"></div><p>聯系客服</p>
                <li ><div class="fixed-4"></div><p>購物車</p></li>
            </ul>
        </div>
        <!--底部-->
        <div class="footer">
            <p>搜索黑科技，小米為發燒而生！</p>
        </div>
    </div>
</body>
</html>

CSS

index.css

*{
    padding: 0;
    margin: 0;
}
.wrap{
    width: 100%;
    overflow: hidden; /*有父子關系的margin 防止外邊距合並*/
    background-color: rgba(245,245,245,0.98); /*設置透明度*/
}
a{text-decoration: none;}
ul>li{ list-style: none;} /*兒子選擇器*/

.topheader{
    height: 40px;
    line-height:40px;/*行高*/
    font-size:12px;
    background-color: #333;
}
.topheader a{
    color:#b0b0b0; /*字體顏色*/
}
.topheader a:hover{    /* 偽類選擇器 hover鼠標懸停時超鏈接狀態*/
    color: white;
}
.topheader .sep{
    color: #424242;
    margin: 0 2px;  /*外邊距*/
}
.container{
    width: 1225px; overflow: hidden;margin: 0 auto;
}
.topheader-navi{
    float: left;
}
.topheader-cart,.topheader-info{
    float: right
}
.topheader-cart .icon{     /*給購物車添加背景圖片*/
    background: url("../images/shop1.png") 3px 24px;
    width: 35px;
    height: 22px;
    display: inline-block;/*行內塊元素 同時具有行內和和塊級元素，和其他元素在一行，距離都可以設置*/
    position: relative;
    top:6px;
}
.topheader-cart a{
    /*display: block; !*塊級元素,每個塊級元素都從新的一行開始，距離都可設置*!*/
    margin-left: 15px;
    padding: 0 15px;
}
.topheader-cart a:hover{
    background-color: white;
    color: rgba(255,103,0,0.98);
}

.header{
    height: 100px;
    line-height: 100px;
    overflow: hidden;
}
.header-logo,.header-navi{
    float: left;
    height: 100px;
}
.header-logo .logo{
    margin-right: 10px;
    margin-top: 20px;}

.header-search{
    float: right;
    position: relative;
}
.header-navi ul li{
    float: left;
    margin: 0 auto;
    padding: 0 10px;
    color: black
}
.header-navi ul li a{
    color: #333;
    font-size: 16px;
}
.header-navi ul li a:hover{
    color: rgba(255,103,0,0.98);
}

.header-search input[type="text"]{
    height: 44px;
    width: 243px;
    border: 1px solid #e0e0e0;
    margin-right: -1px;
}
.header-search input[type="text"]:hover{
    border: 1px solid #b0b0b0;
}
.header-search input[type="text"]:focus{    /*獲取焦點時的樣式*/
    outline:none;  /*輪廓是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用*/
}
.hot-words{
    font-size: 12px;
    position: absolute;
    right: 40px;}
.hot-words a{
    background-color: #eee;
    color: #757575;
    padding: 3px 6px;
    position: relative;
    top: 2px;
    right: 16px;
}
.hot-words a:hover{
    background-color: rgba(255,103,0,0.98);
    color: white;
}
.header-search input[type="submit"]{
    height: 45px; width: 45px;
    background: url("../images/search1.png") no-repeat 3px 6px;
    border: 1px solid #e0e0e0;
    position: relative;
    top: 17px;
    cursor: pointer;  /*設置鼠標形狀, 變成小手了*/
    left: -5px;
}
.header-search input[type="submit"]:hover{
    background: url("../images/search2.png") no-repeat 8px 8px;
    background-color: rgba(255,107,0,0.98);
}

.content .con-up .up-l{
    background-color: rgba(89,89,89,0.9);
    width: 240px;
    position: absolute;
}
.con-up ul:before,.con-up ul:after{   /*用子盒子來填充父盒子 解決浮動產生的問題*/
    content: "";
    height: 26px;
    display: block;
}
.con-up ul li{
    padding: 10px 25px;
}
.con-up ul li:hover{
    background-color: rgba(255,103,0,0.98);
}
.con-up ul li a{
    color: white;}
.con-up ul li span{    /*設置空格*/
    float: right;
    color: white;}

.con-down{
    overflow: hidden;
    padding-top: 10px;
}
.con-down .down-l{
    width: 240px;
    overflow: hidden;
    background-color: rgba(95,87,80,1);
    float: left;
}
.con-down ul{
    overflow: hidden;
}
.con-down .down-l ul li{
    float: left;
    width: 78px;
    height: 83px;
    border: 1px solid #665e57;
    text-align: center;  /*兩端居中*/
}
.down-l ul li p{
    color: #b0b0b0;
    position: relative;

    font-size: 15px;
}
.down-l ul li p:hover{
    color: white;
}

.down-l .p-1{
    background: url("../images/手機.png") no-repeat center;
    background-size: 50px; height: 60px;}
.down-l .p-2{
    background: url("../images/企業團購.png") no-repeat center;
    background-size: 50px; height: 60px;}
.down-l .p-3{
    background: url("../images/F碼通道.png") no-repeat center;
    background-size: 50px; height: 60px;}
.down-l .p-4{
    background: url("../images/米粉卡.png") no-repeat center;
    background-size: 50px; height: 60px;}
.down-l .p-5{
    background: url("../images/以舊換新.png") no-repeat center;
    background-size: 50px; height: 60px;}
.down-l .p-6{
    background: url("../images/話費充值.png") no-repeat center;
    background-size: 50px; height: 60px;}

.con-down .down-2{
    float: left;}
.con-down .down-2 ul li{
    float: left;
}
.down-2 img{
    width: 315px;
    height: 170px;
    margin-left: 13px;
}
.down-2 img:hover{
    box-shadow: 0 5px 1px #b0b0b0; /*box-shadow 向框添加一個或多個陰影*/
}

.bar-right{
    position: fixed;
    /*z-index: 3;*/
    right: 0;
    top: 250px;
    background-color: white; }
.bar-right ul li{
    font-size: 14px;
    padding: 10px;
    border: 1px solid #e0e0e0;
}
.bar-right ul li:hover{
    color: rgba(255,103,0,0.98);
    cursor: pointer;
}
.bar-right ul li p{
    text-align: center;
    padding-top: 5px;
}

.bar-right .fixed-1{
    background: url("../images/掃一掃.png") no-repeat center;
    background-size: 30px; height: 30px;
}
.bar-right .fixed-2{
    background: url("../images/個人中心.png") no-repeat center;
    background-size: 30px;
    height: 30px;}
.bar-right .fixed-3{
background: url("../images/聯系客服.png") no-repeat center;
    background-size: 30px;
    height:30px ;
}
.bar-right .fixed-4{
background: url("../images/購物車.png") no-repeat center;
    background-size: 30px;
    height:30px ;
}
.footer p{
    text-align: center;
    color: #b0b0b0;
    font-size: 16px;}

效果展示：

技術分享圖片

開發”小米商城官網首頁”（靜態頁面）

配件 16px -i ont div name :after 路由器 clas 開發“小米官方網站首頁”（靜態頁面）官網 https://www.mi.com/ HTML index.html <!DOCTYPE html> <html lang

開發“小米商城官網首頁”（靜態頁面）

開發 ul li name containe cursor arch ont select 代碼一，項目題目：開發”小米商城官網首頁”（靜態頁面）二，項目需求 1.熟練運用所學知識還原小米商城官網首頁靜態頁面 * 不需要做動態效果，只實現靜態頁面，後期學完js再回

利用HTML和CSS設計一個靜態的“小米商城官網首頁”

一、小專案說明　　這是個例行的小專案練習，主要利用html和css的基礎知識，復刻一個縮減版的小米商城網頁。包括【導航欄】、【頭部logo區，快捷鍵、搜尋框】、【網頁主體】、【網頁尾部】幾個部分。目前只實現靜態的網頁顯示。最終效果圖如下：二、程式框架　　按照開發規範，先

仿照（小米官網首頁輪播圖）特效js程式碼

最近跟輪播圖槓上了，以前也接觸過這個輪播圖的寫法，但是一般都是用外掛，久而久之就忘記了！昨晚有學習了一下自己寫這個js，雖然是依靠零散的記憶寫出來的，可能自己並未真正理解吧！！！以下是我寫的程式碼：&

three.js的wave特效（ivew官網首頁波浪特效實現）

alt 使用實現功夫 inf 有效訪問顏色 index 查看效果請訪問：https://521lbx.github.io/Web3D/index.html公司的好幾個vue項目都是用ivew作為UI框架，所以ivew官網時不時就得逛一圈。每一次進首頁都會被首頁的波浪

Netty官網首頁（翻譯）

維護 protoc 網絡編程技術影響 tex str 編寫 sport 官網：https://netty.io/ Netty是一個異步事件驅動的網絡應用程序框架，用於快速開發可維護的高性能協議服務器和客戶端。 Netty是一個NIO客戶端服務器框架，可以快速輕松地開

仿豆瓣網首頁（HTML+CSS)

一、放豆瓣網首頁 1.1 douban.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

Threejs實現滴滴官網首頁地球動畫

偶然翻滴滴官網看到首頁下翻第六欄（大概）有個絢麗的地球的三維動畫，試著用there.js實現了下，基本實現了動畫效果，不過還是有些問題；這個動畫看似簡單，但也用到好的繪製方法和計算，這裡先寫一下主要功能的實現；先看示例：http://39.106.166.212:8080/webgl/t

TensorFlow 官網API學習（Reading data）

TensorFlow 官網API學習（Reading data）標籤（空格分隔）： TensorFlow官網API API地址 TensorFlow程式中四種獲取資料途徑 1.tf.dataAPI:很容易構建複雜的輸入流水線（推薦的方法！） 2.Feeding：在執行每一

JDK 1.8 官網下載地址（linux / windows）

JDK 1.8 官網下載地址：上面連線可以直接點選，連線地址： http://www.oracle.com/technetwork/java/javase/downloads/jdk8-down

折800首頁的靜態頁面

<!doctype html> <html> <head> <meta charset="utf-8"> <title>電商</title> <link rel="stylesheet" href="c

用 vue-router 實現 tab 標籤頁（單頁面）

vue-router 是 Vue.js 官方的路由外掛，適合用於構建標籤頁應用。Vue 的標籤頁應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來，vue-router 會把各個元件

甘姿國際模式系統解析（靜態頁面）

this 空間變量數字 println void ++ 使用問題：　　當一個公司有多個開發團隊時，我們可能會遇到這樣一些問題：　　技術選項雜亂，大家各玩各　　業務重復度高，各種通用api，登錄註銷，權限管理都需要重復實現（甚至一個團隊都需要重復實現）　　業務壁

html title屬性內容換行方法（靜態頁面）

滑鼠經過懸停於物件時提示內容（title屬性內容）換行排版方法，html title 換行方法總結。html的title屬性預設是顯示一行的，這裡介紹兩種換行方法為大家分享使用。一、直接title內容換行直接填寫title內容時候“回車鍵”換行，示例程式碼如下： &

React Native入門——佈局實踐：開發京東客戶端首頁（二）TabBar的構建

上篇文章講到構建京東客戶端首頁的搜尋欄，本篇我們一起來學習TabBar的構建。根據之前的調研，在構建TabBar的方式上，我推薦使用國外大神James Ide（https://github.com/ide）釋出在Exponent上的react-native-tab-navig

React Native佈局實踐：開發京東客戶端首頁（四）——首頁功能按鈕及控制元件封裝

從我寫第一篇React Native文章以來，我們幾乎是把所有的程式碼都放在一個js檔案中實現的，隨著工程複雜度的增加，各種自定義控制元件的程式碼就和業務邏輯程式碼耦合嚴重，這篇文章就來解決這一問題，讓我們一起來學習控制元件封裝的方法。1.明確需求首頁功能按鈕由一個圖片、一行

Vue 旅遊網首頁開發

旅遊 node.js vue bsp 安裝開發 node nod 首頁 Vue 旅遊網首頁開發環境安裝安裝 node.js

入侵拿下DVBBS php官網詳細過程（圖）

sta 電話 subst wget 團隊 sim 不遠 cls 接下來幾個月前，DVBBS php2.0暴了一個可以直接讀出管理員密碼的sql註入漏洞，當時這個漏洞出來的時候，我看的心癢，怎麽還會有這麽弱智的漏洞，DVBBS php2.0這套代碼我還沒仔細看過，於是5月

網站首頁（含菜單欄）實現

range sub sea light odin charset ctype settime hide <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="

我的第一個RN應用（漂亮的首頁和笑話列表）

native exp index shee str import 折騰 load port 　　對於不想折騰Android(or Kotlin)的Phper來說，要寫app，RN真的是個不錯的選擇。　　開發環境就不多說了，用npm輕松搞定，容易被墻，自行解決。　　先看下

開發”小米商城官網首頁”（靜態頁面）

相關推薦