天天看點
傳回

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

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

二，項目需求 

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;
}

不經一番徹骨寒 怎得梅花撲鼻香

python 項目及規範要求 前端開發基礎知識
上一篇: JavaScript之ECMA對象的學習
下一篇: vue解決IOS10低版本白屏問題

繼續閱讀