京東首頁項目(2)---頂部模塊

這篇就開始寫京東首頁。這篇所需完成的工作如下：

頂部模塊一共包含3個部分: 1、京東頂部模塊 2、快捷導航模塊 3、頭部區域模塊。

一、公共樣式(base.css)

base.css 是用來存放公共的樣式的，公共樣式可以用於整個前端項目。

/* 版心 */
.w {
 	width: 1190px;   /*設置版心的寬度*/
 	margin: auto;    /* 水平居中*/
}
.fr {
	float: right;   /*左浮動*/
}
.fl {
	float: left;    /*右浮動*/
}
.style-red {
	color: #f10215!important;
}
li {
	list-style: none;      /*li標簽去除默認樣式*/
}
ul {
	margin: 0;
	padding: 0;
}
input, button {
	padding: 0;
	border: 0;
}
a {
	text-decoration: none;  /* a標簽去處下划線*/
}

img {
	vertical-align: top;  /* 去除 圖片低測縫隙  圖片和文字的基線對齊 */
}


.clearfix:before,.clearfix:after { /* 去除浮動*/
  content:"";
  display: table;  /* 這句話可以出發BFC BFC可以清除浮動,BFC我們后面講 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

* {
	margin: 0;
	padding: 0;
}

@font-face {                /*引入字體樣式*/
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?axvffw');
  src:  url('../fonts/icomoon.eot?axvffw#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?axvffw') format('truetype'),
    url('../fonts/icomoon.woff?axvffw') format('woff'),
    url('../fonts/icomoon.svg?axvffw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
	background-color: #F6F6F6;  /*body背景色*/
}

二、京東頂部模塊

這個模塊主要是2部分:

中間的圖片部分
圖片右上角的叉叉部分（絕對定位實現）

如圖

html部分

<div class="J_event">  
   <!-- NO.1 圖片部分-->
		<a href="#" class="w"> 
<!--NO.2 這里面是頁面上圖片上的那個 叉 這個?其實是一種字體 這里無法顯示因為博客沒有這種字體 -->
			<i>?</i>   
		</a>
	</div>

css部分

.J_event {
	background-color: #000;  /*設置背景色*/
}
.J_event a {
	display: block;  /* 將a標簽轉為塊級元素*/
	height: 80px;
	background: url(../images/top.jpg) no-repeat; /*引入圖片*/
	position: relative;  /*設置相對定位 主要為右上角那個 ❌ 服務*/
}
.J_event a i {
	width: 20px;    /*設置 ❌的寬和高*/
	height: 20px;
	position: absolute; /*設置絕對定位*/
	right: 0;
	top: 5px;
	font-family: "icomoon"; /*設置字體*/
	font-style: normal;
	text-align: center;
	line-height: 20px;
	color: #fff;
	background: rgba(0,0,0,0.4);
}

三、快捷導航模塊

這個模塊分為3部分:

定位圖標 + 北京（左浮動實現）
導航欄（右浮動實現）
二維碼圖片（絕對定位實現）

如圖

HTML部分

<div class="shortcut">  
		<div class="w">
       <!-- NO.1 左浮動部分  -->
			<ul class="fl">  
				<li> 
					<i class="pos">?</i> <!-- 這個？為 定位 圖標也是一種字體 -->
				    北京
				 </li>
			</ul>
      <!-- NO.2 右浮動部分  -->
			<ul class="fr"> 
				<li>
					<a href="#">
						 你好，請登錄&nbsp;&nbsp;
					</a>
					<a href="#" class="style-red">
						 免費注冊
					</a>
				</li>
				<li class="spacer"></li>  <!--  這里li為 '|'  -->
				<li>
					<a href="#">
						我的訂單
					</a>
				</li>
				<li class="spacer"></li>
				<li class="dropdown">  
					<a href="#">
						我的京東
					</a>
					<i></i>     <!-- 這個?為小於號向下的箭頭 -->
				</li>
				<li class="spacer"></li>
				<li>
					<a href="#">
						京東會員
					</a>
				</li>
				<li class="spacer"></li>
				<li>
					<a href="#">
						企業采購
					</a>
				</li>
				<li class="spacer"></li>
				<li class="dropdown">
					<a href="#">
						客戶服務
					</a>
					<i></i>
				</li>
				<li class="spacer"></li>
				<li class="dropdown">
					<a href="#">
						網站導航
					</a>
					<i></i>
				</li>
				<li class="spacer"></li>
				<li style="position: relative; z-index: 1;">  
					<a href="#">
						手機京東
					</a>
           <!-- NO.3 二維碼圖片  -->
					<div class="erweima">  
						<img src="images/erweima.png" alt="">
					</div>
				</li>
			</ul>
		</div>
	</div>

CSS部分

.shortcut {                   /*設置最外層div樣式*/
	height: 30px; 
	line-height: 30px;
	background-color: #E3E4E5;
	border-bottom: 1px solid #DDDDDD;
	color: #9D9D9D;
	font-size: 12px;
}
.shortcut a {                 /*a標簽樣式*/
	color: #9D9D9D;
	font-size: 12px;
	text-decoration: none;
}
.shortcut a:hover {           /*a標簽獲得焦點*/
	color: #c81623;
}
.pos {                        /* 設置特殊字體 這里為向下的 “>”*/
	font-family: "icomoon";
	font-style: normal;
	font-size: 14px;
	color: #f10215;
}
.shortcut .fl li {           /*左浮動*/
	margin-left: 200px;
	height: 30px;
	overflow: hidden;
}
.shortcut .fr li {           /* 右浮動的里面li子元素左浮動*/
	float: left;
}
.spacer {  設置 " | "
	width: 1px;
	height: 10px;
	background-color: #ccc;
	margin: 10px 10px 0;
}
.dropdown {  相對定位
	padding-right: 15px;
	position: relative;
}
.dropdown i {               /*絕對定位*/
	font-family: "icomoon";
	font-style: normal;
	font-size: 16px;
	position: absolute;
	right: -2px;
	top: -2px;
}
.erweima {                 /*二維碼信息*/
	width: 60px;
	height: 60px;
	border: 1px solid #ccc;
	padding: 3px;
	position: absolute;
	left: -8px;
    top: 35px;
}

四、頭部區域模塊

這個模塊分為5部分

logo （絕對定位實現）
搜索（絕對定位 + 浮動實現）
熱詞（絕對定位實現）
購物車（絕對定位實現）
電腦圖片（絕對定位實現）

如圖

html部分

	<div class="header"> 
		<div class="w inner">
		     <!--NO.1 logo 部分 -->
			 <div class="logo">
			 	<h1>
			 		<a href="#" title="京東網">京東</a>
			 	</h1>
			 </div>
			 <!--NO.2 搜索部分 -->
			 <div class="search">
			 	<input type="text" value="單反相機">
			 	<button>
			 		<i></i>
			 	</button>
			 	<em></em>
			 </div>
			 <!--NO.3 熱詞部分 -->
			 <div class="hotwords">
			 	<a href="#" class="style-red">學生專享</a>
			 	<a href="#">300減160</a>
			 	<a href="#">七折返場</a>
			 	<a href="#">騎行運動</a>
			 	<a href="#">家電榜單</a>
			 	<a href="#">無損播放器</a>
			 	<a href="#">汽車腳墊</a>
			 	<a href="#">巧克力</a>
			 	<a href="#">鋁合金門窗</a>
			 </div>
				<!--NO.4 購物車 -->
			 <div class="myCar">
			 	<i></i>
			 	<a href="#">我的購物車</a>
			 	<s>0</s>
			 </div>
			<!--NO.5 電腦 -->
			<div class="computer">
				<a href="#">
					<img src="images/computer.jpg" height="40" width="190" alt="">
				</a>
			</div>
		</div>
	</div>

CSS部分

.header {                        /*head相關樣式*/
	height: 140px;
}
.inner {                  
	height: 140px;
	background-color: pink;
	position: relative;
}
.logo {                          /*log相關樣式*/
	width: 190px;
	height: 170px;
	position: absolute;
	top: -30px;
	left: 0;
	background-color: purple;
	box-shadow: 0 -12px 10px rgba(0,0,0,.2);
}
.logo h1 {             
	margin: 0;
}
.logo a {               
	display: block;
	width: 190px;
	height: 170px;
	background: url(../images/logo.jpg) no-repeat;
	text-indent: -99999px;
	overflow: hidden;
}
.search {                      /* 搜索相關樣式*/
	width: 550px;
	height: 35px;
	position: absolute;
	top: 25px;
	left: 320px;
}
.search input {
	width: 493px;
	height: 33px;
	border: 1px solid #F10215;
	padding-left: 5px;
	outline: none; /* 取消藍色邊框 */
	color: #989898;
	float: left;
}
.search button {
	width: 50px;
	height: 35px;
	background-color: #F10215;
	float: left;
	cursor: pointer; /* 鼠標變成小手 */
	outline: none;
}
.search i {
	font-family: "icomoon";
	color: #fff;
	font-style: normal;
	font-size: 16px;
}
.search em {
	position: absolute;
	top: 10px;
	right: 65px;
	width: 19px;
	height: 15px;
	cursor: pointer;
	background: url(../images/sprite-search.png) no-repeat;
}
.search em:hover {
	background-position: -30px 0;
}

.hotwords {                   /* 熱詞相關樣式*/
	position: absolute;
	top: 70px;
	left: 320px;
}
.hotwords a {
	color: #9E9B99;
	font-size: 12px;
}
.hotwords a:hover {
	color: #f10215;
}
.myCar {        /* 購物車相關樣式*/
	width: 188px;
	height: 33px;
	border: 1px solid #ccc;
	position: absolute;
	top: 25px;
	right: 100px;
	text-align: center;
	line-height: 33px;
}
.myCar a {                 
	font-size: 12px;
	color: #f10215;

}
.myCar i {
	font-family: "icomoon";
	font-style: normal;
	color: #f10215;
	margin-right: 3px;
}
.myCar s {
	position: absolute;
	top: 5px;
	left: 140px;
	text-decoration: none;
	background-color: #f10215;
	height: 16px;
	line-height: 16px;
	font-size: 12px;
	padding: 0 3px;
	border-radius: 7px;
	color: #fff;
}
.computer {             /*電腦圖片相關樣式*/
	position: absolute;
	right: 0;
	bottom: 10px;
}

你如果願意有所作為，就必須有始有終。(12)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 京東首頁項目(4)---中間模塊實現京東商城項目實戰（1）------京東商城首頁京東首頁項目(1)---總述 css實現京東頂部導航條 18 Flutter仿京東商城項目商品詳情頂部tab切換頂部下拉菜單底部浮動導航京東首頁右側固定層 04Flutter仿京東商城項目首頁商品列表布局 vue項目實現返回頂部功能 iOS不得姐項目--TabBar的重復點擊實現當前模塊刷新;狀態欄點擊實現當前模塊回滾到最頂部扒皮下京東首頁樓層圖標的動畫效果實現方式