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

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

開發 ul li name containe cursor arch ont select 代碼

一，項目題目：開發”小米商城官網首頁”（靜態頁面）

二，項目需求

1.熟練運用所學知識還原小米商城官網首頁靜態頁面

* 不需要做動態效果，只實現靜態頁面， 後期學完js再回來實現動態效果

三，項目布局

技術分享圖片

四，效果對比

　　目前的官網圖片和小編做的圖片對比

官網圖片

技術分享圖片

小編做的效果圖

技術分享圖片

五，代碼附上

鏈接：https://pan.baidu.com/s/1EVyF8RIgRXFvEIHQf42Pow

 密碼：zqs4

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>xiaomi</title>
		<link type="text/css" rel="stylesheet" href="css/index.css">
		
		
	
</head>
<body>
	<div class="wrap">
		<!--頂部導航欄-->
		<div class=‘topBar‘>
			<div class = ‘container1‘>
				<!--導航條-->
				<div class="topBar-nav">
					<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=‘#‘>政企服務</a>
					<span class="sep">|</span>
					<a href=‘#‘>Select Region</a>
				</div>
				
				<!--購物車-->
				<div class=‘topBar-cart‘>
					<a href="#">
						<span class="icon"></span>
						<span class="shop-cart">購物車（0）</span>
					</a>
				</div>
	
				
				<!--用戶信息-->
				<div class=‘topBar-message‘>
					<a href="#">登錄</a>	
					<span class="sep">|</span>
					<a href="#">註冊</a>		
					<span class="sep">|</span>
					<a href="#">消息通知</a>
				</div>
			</div>
		</div>
		
		<div class="header">
			<div class = ‘container2‘>
				<!--小米logo-->
				<div class="header-logo">
					<a href="#">
						<img class=‘logo‘ src=‘img/logo.png‘ alt=‘小米圖標‘>
					</a>
				</div>
				
				<!--第二行 導航欄-->
				<div class="header-nav">
					<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">
                    <label for="search"></label>
                    <input type="text" name="search" id="search">
                    <span class="hot-words">
                        <a href="#">小米8 </a>
                        <a href="#">小米MIX 2S </a>
                    </span>
                    <input type="submit" value="" id="submit">	               
	            </div>
			</div>
		</div>
		
		<div class=‘content‘>
			<div class = ‘container3‘>
				<!--內容選擇列表 前面部分-->
				<div class=‘con-up‘>
                    <div class="up-1">
                        <ul>
                            <li><a href="#">手機 電話卡</a><span>></span></li>
                            <li><a href="#">電視 盒子</a><span>></span></li>
                            <li><a href="#">筆記本 平板</a><span>></span></li>
                            <li><a href="#">家電 插線板</a><span>></span></li>
                            <li><a href="#">出行 穿戴</a><span>></span></li>
                            <li><a href="#">智能 路由器</a><span>></span></li>
                            <li><a href="#">電源 配件</a><span>></span></li>
                            <li><a href="#">個護 兒童</a><span>></span></li>
                            <li><a href="#">耳機 音響</a><span>></span></li>
                            <li><a href="#">生活 箱包</a><span>></span></li>
                        </ul>
                    </div>
					
					<div class=‘up-2‘>
						<a href=‘#‘>
							 <img src="img/xiaomi.jpg" alt="內容圖片" style="width: 1245px;height: 465px">
						</a>
					</div>
				</div>
				
					
				<!--下部分-->
				<div class=‘con-down‘>
					<div class=‘down-1‘>
						<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="img/xiaomiMIX 2S.jpg" alt=‘小米圖片‘</a></li>
							<li><a href=‘#‘><img src="img/hongmi6.jpg" alt=‘紅米圖片‘</a></li>
							<li><a href=‘#‘><img src="img/saodijiqiren.jpg" alt=‘掃地機器人圖片‘</a></li>
						</ul>
					</div>
				</div>
			</div>	
		</div>		
		
		<div class="shop1">
			<div class = ‘container4‘>
				<div class=‘left‘>小米閃購</div>
				<div class=‘right‘>
					<a href = ‘#‘ ><img src=‘img/right.jpg‘ alt=‘左右圖‘></a></div>
			</div>
		</div>
		
		<div class=‘shop2‘>
			<!--選購引導-->	
			<div class = ‘container5‘>
				<div class=‘advertising‘>
					<ul>
						<li><a href = ‘#‘ ><img src=‘img/01.jpg‘ alt=‘閃購圖1‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/02.jpg‘ alt=‘閃購圖2‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/03.jpg‘ alt=‘閃購圖3‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/04.jpg‘ alt=‘閃購圖4‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/05.jpg‘ alt=‘閃購圖5‘></a></li>
					</ul>
				</div>
			</div>
		</div>
		</div>
		
		<!--右側固定導航欄-->
		<div class="back-top">
			<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>
				<li><div class=‘fixed-4‘></div><p>返回頂部</p></li>
			</ul>
		</div>
			
		<!--底部內容-->
		<div class=‘footer‘>
			<div class = ‘container6‘>
				<!--小米logo-->
				<div class="footer-logo">
					<a href="#">
						<img class=‘logo‘ src=‘img/logo.png‘ alt=‘小米圖標‘>
					</a>
				</div>
				
				<!--第一行字-->
				<div class="footer-one">
					<a href=‘#‘>小米手機</a>
					<span class="sep">|</span>
					<a href=‘#‘>MIUI</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=‘#‘>政企服務</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="footer-two">
					<a href=‘#‘>@mi.com</a>
					<a href=‘#‘>京ICP證110507號 京ICP證110507號 京ICP證110507號 京ICP證110507號</a>
				</div>
				
				<!--第三行字-->
				<div class="footer-three">
					<a href=‘#‘>違法和不良信息舉報電話： </a>
					<a href=‘#‘>185-0130-1238， </a>
					<a href=‘#‘>本網站所列數據，除特殊說明，所有數據均出自我司實驗室測試</a>
				</div>
				
				<!--第4行圖-->
				<div class="footer-photo">		
					<ul>
						<li><a href = ‘#‘ ><img src=‘img/footer1.png‘ alt=‘廣告1‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/footer2.png‘ alt=‘廣告2‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/footer3.png‘ alt=‘廣告3‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/footer4.png‘ alt=‘廣告4‘></a></li>
						<li><a href = ‘#‘ ><img src=‘img/footer5.png‘ alt=‘廣告5‘></a></li>
					</ul>
				</div>
				
				
		</div>
			<p>探索黑科技，小米為發燒而生！</p>
		</div>

</body>
</html>

indesx.css

*{
	padding: 0;
	margin: 0;
}

.wrap{
	width: 100%;
	/*有父子關系的margin 防止外邊距合並*/
	overflow: hidden;
	/*設置透明度*/
	/*background-color: rgba(245,245,245,0.98);*/
}

ul>li{
	list-style: none;
}

a{
	text-decoration: none;
}

.topBar{
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	background-color: black;
}

.topBar a{
    color:#b0b0b0; /*字體顏色*/
}

.topBar a:hover{    
	/* 偽類選擇器 hover鼠標懸停時超鏈接狀態*/
    color: white;
}

.topBar .sep{
    color: #424242;
    margin: 0 2px;  /*外邊距*/
}

.container1{
	width: 1225px;
	overflow: hidden;
	margin: 0 auto;
}

.topBar-nav{
	float: left;
}

.topBar-cart,.topBar-message{
	float: right;
}

.topBar-cart .icon{     
	/*給購物車添加背景圖片*/
    background: url("../img/shop1.png") 3px 24px;
    width: 35px;
    height: 22px;
    display: inline-block;
    /*行內塊元素 同時具有行內和和塊級元素，和其他元素在一行，距離都可以設置*/
    position: relative;
    top:6px;
}

.topBar-cart a{
    /*display: block; !*塊級元素,每個塊級元素都從新的一行開始，距離都可設置*!*/
    margin-left: 15px;
    padding: 0 15px;
}

.topBar-cart a:hover{
    background-color: white;
    color: rgba(255,103,0,0.98);
}

.header{
	height: 100px;
	line-height: 100px;
	overflow: hidden;
}

.container2{
	width: 1225px;
	overflow: hidden;
	margin: 0 auto;
}

.header-logo,.header-nav{
	float: left;
	height: 100px;
}

.header-logo .logo{
	margin-right: 10px;
	margin-top: 20px;
}

.header-search{
	float: right;
	position: relative;
}
.header-nav ul li{
	float: left;
	margin: 0 auto;
	padding: 0 10px;
	color: #000000;
}

.header-nav ul li a{
	color: #333;
	font-size: 16px;
}

.header-nav 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("../img/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("../img/search2.png") no-repeat 8px 8px;
    background-color: rgba(255,107,0,0.98);
}

.content .con-up .up-1{
	background-color: rgba(0,0,0,0.6);
	width: 240px;
	position: absolute;
}

.container3{
	width: 1225px;
	overflow: hidden;
	margin: 0 auto;
}

.con-up ul:before,.con-up:after{
	/*用子盒子來填充父盒子 解決浮動產生的問題*/
	content: "";
	height: 26px;
	display: block;
}

.con-up ul li{
	padding: 10px 25px;
}

.con-up ul li:hover{
	background-color: #ff6700;
}

.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-1{
	width: 240px;
	overflow: hidden;
	background-color: #665e57;
	float: left;
}

.con-down ul{
	overflow: hidden;
}

.con-down .down-1 ul li{
	float: left;
	width: 78px;
	height: 83px;
	border: 1px solid #665e57;
	text-align: center;
}

.down-1 ul li p{
    color: #b0b0b0;
    position: relative;
    font-size: 15px;
}

.down-1 ul li p:hover{
    color: white;
}

.down-1 .p-1{
    background: url("../img/tubiao.png") no-repeat center;
    background-size: 50px; height: 60px;}
    
.down-1 .p-2{
    background: url("../img/tubiao.png") no-repeat center;
    background-size: 50px; height: 60px;}
    
.down-1 .p-3{
    background: url("../img/tubiao.png") no-repeat center;
    background-size: 50px; height: 60px;}
    
.down-1 .p-4{
    background: url("../img/tubiao.png") no-repeat center;
    background-size: 50px; height: 60px;}
    
.down-1 .p-5{
    background: url("../img/tubiao.png") no-repeat center;
    background-size: 50px; height: 60px;}
    
.down-1 .p-6{
    background: url("../img/tubiao.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 向框添加一個或多個陰影*/
}

.shop1{
	height: 58px;
	line-height: 58px;
	font-size: 22px;
	color: #333333;
}

.shop1 .left .right:hover{
	color: white;
}

.container4{
	width: 1225px;
	overflow: hidden;
	margin: 0 auto;
}

.shop1 .left{
	float: left;
	margin-top: 15px;
	font-size: 22px;
	font-weight: 200;
	line-height: 58px;
	color: #000000;
}
.shop1 .right{
	float: right;
	margin-top: 15px;
}
.shop2{
	margin: 0 auto;
	width: 1240px;
	height: 339px;
	padding-top: 39px;
	border-top-width: 1px;
	color: #e53935;
}

.container5{
	width: 1225px;
	overflow: hidden;
	margin: 0 auto;
}
.shop2 ul li{
	float: left;
	width: 234px;
	margin-right: 11px;
	/*padding-right: 1px;*/
	color: #333;
}
.shop2 ul li a{
	color: #000000;
	font-size: 100%;
	
}

.shop2 ul li a:hover{ 
	color: orange;
}
    
.back-top{
	position: fixed;
	right: 0;
	top: 400px;
	background-color: white;
}

.back-top ul li{
	font-size: 14px;
	padding: 10px;
	border: 1px solid #E0E0E0;
}

.back-top ul li:hover{
	color: #757575;
	cursor: pointer;
}

.back-top ul li p{
	text-align: center;
	padding-top: 5px;
}

.back-top .fixed-1{
    background: url("../img/fixed.png") no-repeat center;
    background-size: 30px; 
    height: 30px;
}

.back-top .fixed-2{
    background: url("../img/erji.png") no-repeat center;
    background-size: 30px;
    height: 30px;
}
    
.back-top .fixed-3{
	background: url("../img/shopping_cart.png") no-repeat center;
    background-size: 30px;
    height:30px ;
}

.back-top .fixed-4{
	background: url("../img/back_top.png") no-repeat center;
    background-size: 30px;
    height:30px ;
}


.footer{
	padding: 30px 0;
	font-size: 12px;
	background-color: #fafafa;
}

.container6{
	width: 1225px;
	overflow: hidden;
	margin: 0 auto;
}

.footer-logo a{
	margin-right: 10px;
	float: left;
	width: 57px;
	height: 57px;
}
.footer-one .footer-two .footer-two{
	float: left;
}

.footer-photo{
	float: right;
}

.footer-photo ul li{
	float: right;
	width: 83;
	height: 28px;
	margin-left: 0px;
	/*padding-right: 1px;*/
	color: #333;
}
.footer-photo ul li a{
	color: #000000;
	font-size: 100%;
	
}

.footer-photo ul li a:hover{ 
	color: orange;
}

.footer p{
	padding: 30px 0;
	text-align: center;
	color: #333;
	font-size: 14px;
	background: #fff;
	font-family: "楷體";
	min-width: 1226px;
}

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

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

配件 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輕松搞定，容易被墻，自行解決。　　先看下

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

一，項目題目：開發”小米商城官網首頁”（靜態頁面）

二，項目需求

三，項目布局

四，效果對比

官網圖片

小編做的效果圖

五，代碼附上

index.html

indesx.css

相關推薦