Html與CSS學習記錄三
阿新 • • 發佈:2018-11-08
元素的顯示與隱藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: blue; display: block; none:隱藏某個元素,不保留位置 visibility: visible; hidden:隱藏某個元素,保留位置 } </style> </head> <body> <div></div> </body> </html>
案例:仿土豆顯示透明盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{ display: block; width: 448px; height: 252px; margin: 100px; position: relative; } .mask{ width: 100%; height: 100%; background: rgba(0,0,0,.4) url("images/arr.png") no-repeat center; position: absolute; top: 0; left: 0; display: none; } a:hover .mask{ display: block; } </style> </head> <body> <a href="#"> <img src="images/tudou.jpg" height="252" width="448"> <div class="mask"></div> </a> </body> </html>
溢位隱藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; border: 1px solid blue; overflow: hidden; 溢位隱藏 scroll 顯示滾動條 auto 自動 } </style> </head> <body> <div> 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 ...許多文字... </div> </body> </html>
滑鼠樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
cursor: move; 拖拉十字架樣式
pointer 小手樣式
text 預設的那個文字選擇的,有點像大寫的 I
default 不發生變化
}
</style>
</head>
<body>
<div>
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
...許多文字...
</div>
</body>
</html>
輪廓線和文字域寬高屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
outline: none; 獲得焦點之後,預設有一個輪廓線通過這個屬性,可以取消輪廓線
border: 1px solid #ccc;
width: 200px;
height: 25px;
background: url("images/s.png") no-repeat 180px center;
}
textarea{
resize: none; 取消文字域的可拖拉效果
}
</style>
</head>
<body>
<input type="text">
<textarea cols="30" rows="20"></textarea> cols:多少行 rows:多少列
</body>
</html>
垂直對齊的使用:vertical-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
vertical-align: middle;
}
div{
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<img src="images/tudou.jpg" height="252" width="448">
hello world
</div>
</body>
</html>
溢位文字通過省略號來進行顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 30px;
}
li{
list-style: none;
width: 200px;
height: 30px;
border: 1px solid blue;
white-space: nowrap; 強制同一行顯示,除非遇到br標籤
overflow: hidden;
text-overflow: ellipsis; 溢位的部分使用省略號代替
line-height: 30px;
}
</style>
</head>
<body>
<ul>
<li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
...多個li標籤...
</ul>
</body>
</html>
精靈圖的使用:減輕伺服器高併發壓力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h3{
background: url("images/index.png") no-repeat -2px -184px;
width: 26px;
height: 26px;
}
div{
width: 236px;
height: 106px;
background: url("images/index.png") no-repeat 0 -350px;
}
</style>
</head>
<body>
<h3></h3>
<div></div>
</body>
</html>
案例:精靈圖,獲取自己的名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
display: inline-block;
background: url("images/abcd.jpg") no-repeat;
}
.aa{
width: 108px;
height: 110px;
background-position: 0 -9px;
}
.n{
width: 112px;
height: 110px;
background-position: -255px -276px;
}
.d{
width: 97px;
height: 107px;
background-position: -363px -8px;
}
.y{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
</head>
<body>
<span class="aa"></span>
<span class="n"></span>
<span class="d"></span>
<span class="y"></span>
</body>
</html>
案例:微信滑動門效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background:url("images/wx.jpg") repeat-x;
}
.nav li{
float: left;
}
.nav a{
height: 33px;
line-height: 33px;
color: #fff;
text-decoration: none;
background: url("images/to.png") no-repeat;
display: inline-block;
padding-left: 15px;
}
.nav span{
background: url("images/to.png") no-repeat right;
display: inline-block;
height: 33px;
padding-right: 15px;
}
.nav a:hover{
background-image: url(images/ao.png);
}
.nav a:hover span{
background-image: url(images/ao.png);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">
<span>首頁</span>
</a>
</li>
<li>
<a href="#">
<span>客戶端</span>
</a>
</li>
<li>
<a href="#">
<span>微信小程式</span>
</a>
</li>
</ul>
</body>
</html>
字型圖示的使用:一些可以當做字型的圖示。使用需要先官網下載,使用也用固定的格式。
*下載的壓縮包不要刪除,裡邊有一些東西,圖示顯示的時候要使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face { 宣告字型 引用字型,固定格式不需要記憶
font-family: "icomoon"; 我們自己起名字可以
src: url('fonts/icomoon.eot?7kkyc2'); 相容ie,四種格式需要匯入四次
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-style: normal; 傾斜字型正常
}
span{
font-family: 'icomoon';
font-size: 100px;
color: blue;
fond-style:normal;
}
.car{
font-family: 'icomoon';
}
</style>
</head>
<body>
<span></span>
<div class="car"></div> 上邊那個注意說的就是這裡,看到div中間的那個東西,字型圖示需要使用的就是,壓縮包中demo.html中粘過來的。
</body>
</html>
行高不帶單位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
line-height: 2; 不帶單位表達的是倍數,如這裡值得是,32px
}
div{
border: 1px solid black;
font-size: 16px;
}
</style>
</head>
<body>
<div>行高不帶單位</div>
</body>
</html>
綜合案例:京東首頁仿寫,一小部分實現。
* title 的複製
*tab中ico的顯示。( https://www.jd.com/favicon.ico 所有的網站都可以通過這種方式來獲取,ico圖示,注:不是圖片)
*匯入初始化css normalize.css
*base.css中寫入一些公共的類樣式,供直接使用,如版心的寬、位置。頭部和底部的樣式
*匯入首頁的css樣式 index.css
*頭部的分析:一個黑色的背景+居中的版心+關閉的按鈕分析之後,就可以程式碼實現了。
*快捷導航欄:左邊和右邊兩個。清除padding和margin。
*header部分的編寫:其中包含多個元素並且使用了絕對定位來實現排版。logo+搜尋框+搜尋框底部熱詞+右部的定點陣圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物!</title>
<!--網站說明,瀏覽器訪問時,顯示的文字宣告-->
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務,為您提供愉悅的網上購物體驗!" />
<!--關鍵字,進行搜尋時的查詢關鍵字-->
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,京東" />
<link rel="shortcut icon" href="favicon.ico"/> 標題圖片
<link rel="stylesheet" href="css/normalize.css"> 預設設定
<link rel="stylesheet" href="css/base.css"> 公用的設定
<link rel="stylesheet" href="css/index.css"> 首頁的設定
</head>
<body>
<!--頂部開始-->
<div class="J_event"> 頂部的背景
<a href="#" class="w"> 居中的版心
<i></i> 關閉的按鈕
</a>
</div>
<!--頂部結束-->
<!--快捷導航開始-->
<div class="shortcut"> 快件導航欄(分兩部分:版心+兩邊)
<div class="w"> 版心
<ul class="fl"> 左浮動定點陣圖標
<li>
<i class="pos"></i>
北京
</li>
</ul>
<ul class="fr"> 右浮動的快鍵導航部分
<li>
<a href="#">
你好,請登入
</a>
<a href="#" class="style-red"> 引用紅色樣式,注:這裡優先順序不夠,css中設定了優先順序
免費註冊
</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>
<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>
<div class="erweima">
<img src="images/erweima.png" alt="">
</div>
</li>
</ul>
</div>
</div>
<!--快捷導航結束-->
<!--header部分開始-->
<div class="header">
<div class="w inner"> 頭部包含五部分:logo+搜尋框+熱詞+定點陣圖片。使用絕對定位來實現定位
<!--logo部分-->
<div class="logo">
<h1>
<a href="#" title="京東網">京東</a>
</h1>
</div>
<!--搜尋部分-->
<div class="search">
<input type="text" value="單反相機">
<button> button是一個雙標籤,裡邊可以放東西(放大鏡),比input好用
<i></i>
</button>
<em></em> 這裡是搜尋框中的那個相機圖片
</div>
<!--搜素底部熱詞-->
<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>
<!--我的購物車-->
<div class="myCar">
<i></i>
<a href="#">我的購物車</a>
<s>1000000</s>
</div>
<!--電腦模組-->
<div class="computer">
<a href="#">
<img src="images/computer.jpg">
</a>
</div>
</div>
</div>
<!--header部分結束-->
</body>
</html>
base.css樣式內容
.fr{
float: right;
}
.fl{
float: left;
}
li{
list-style: none;
}
ul{
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
.w{
width: 1190px; 版心的標準設定
margin: auto;
}
.inner{
height: 140px;
background-color: pink;
position: relative;
}
.style-red{
color: #f10215!important; 注:這裡樣式出不來,因優先順序不夠,可以通過瀏覽器元素檢視器,發現有過期中線。通過這種方式可以讓其顯示出來
}
@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;
}
/*頂部開始*/
.J_event{
background-color: #000; 背景色
}
.J_event a{ 中間的版心
display: block;
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);
}
/*頂部結束*/
/*快捷導航欄開始*/
.shortcut{
height: 30px;
line-height: 30px;
background-color: #E3E4E5;
border-bottom: 1px solid #DDDDDD;
color: #9D9D9D;
font-size: 12px;
}
.shortcut a{
color: #9D9D9D;
font-size: 12px;
}
.shortcut a:hover{
color: #c81623;
}
.shortcut .fr li{
float: left;
}
.pos{
font-family: icomoon;
font-style: normal;
font-size: 14px;
color: #f10215;
}
.shortcut .fl li{
margin-left: 200px;
height: 30px;
}
.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: -3px;
}
.erweima{
width: 60px;
height: 60px;
border: 1px solid #ccc;
padding: 3px;
position: absolute;
left: -8px;
top: 35px;
}
/*快捷導航欄結束*/
/*header部分開始*/
.logo{
height: 170px;
width: 190px;
position: absolute;
top: -29px;
left: -0.5px;
background-color: blue;
box-shadow: 0 -12px 10px rgba(0,0,0,.2);
}
.logo h1{
margin: 0;
}
.logo a{
height: 170px;
width: 190px;
display: block;
background: url(../images/logo.jpg) no-repeat;
text-indent: -3em;
overflow: hidden;
}
.search{
width: 550px;
height: 35px;
position: absolute;
top: 25px;
left: 320px;
}
.search input{
padding: 0 0 0 5px;
width: 493px; 注:這裡需要減去上邊的內邊距5px,否則會撐開
height: 33px;
border: 1px solid #F10215;
outline: none;
color: #989898;
float: left; 行內元素之間是有間隙的,通過浮動來去除間隙,下邊也需要新增
}
.search button{
border: 0;
padding:0;
width: 50px;
height: 35px;
background-color: #F10215;
float: left;
cursor: pointer;
outline: none;
}
.search i{
font-family: 'icomoon';
color: #fff;
font-style: normal;
font-style: 16px;
}
.search em{
position: absolute;
top: 9px;
right: 65px;
width: 19px;
height: 15px;
background:url("../images/sprite-search.png") no-repeat;
cursor: pointer;
}
.search em:hover{
background-position: -30px 0;
}
.hotwords{
position: absolute;
top: 70px;
left: 320px;
}
.hotwords a{
font-size: 12px;
color: #9E9B99;
}
.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: 14px;
color: #f10215;
}
.myCar i{
font-family: 'icomoon';
font-style: normal;
font-size: 14px;
color: #f10215;
}
.myCar s{
position: absolute;
top: 5px;
left: 140px;
text-decoration: none;
background-color: #f20215;
height: 16px;
line-height: 16px;
font-size: 12px;
padding: 0 3px;
border-radius: 6px;
color: #fff;
}
.computer{
position: absolute;
right: 0;
bottom: 10px;
}
/*header部分結束*/
案例:京東差不多版記錄,底部和中間部分和在了一塊。這個是自己踩過雷的
*index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物!</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<!--頁面頂部開始-->
<div class="J_event">
<a href="#" class="w">
<i></i>
</a>
</div>
<!--頁面頂部結束-->
<!--快捷導航欄開始-->
<div class="shortcut">
<div class="w">
<ul class="fl">
<li>
<i class="pos"></i>
北京
</li>
</ul>
<ul class="fr">
<li>
<a href="#">
你好,請登入
</a>
<a href="#" class="style-red">
免費註冊
</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>
<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>
<div class="erweima">
<img src="images/erweima.png">
</div>
</li>
</ul>
</div>
</div>
<!--快捷導航欄結束-->
<!--header部分開始-->
<div class="header">
<div class="w inner">
<!--logo部分-->
<div class="logo">
<h1>
<a href="#" title="京東網">京東</a>
</h1>
</div>
<!--搜尋框-->
<div class="search">
<input value="單反相機">
<button>
<i></i>
</button>
<em></em>
</div>
<!--熱詞部分-->
<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>
<!--購物車-->
<div class="myCar">
<i></i>
<a href="#">我的購物車</a>
<s>0</s>
</div>
<!--電腦模組-->
<div class="computer">
<a href="#">
<img src="images/computer.jpg">
</a>
</div>
<!--導航資訊欄-->
<div class="navitems">
<ul>
<li><a href="#">秒殺</a></li>
<li><a href="#">優惠券</a></li>
<li><a href="#">閃購</a></li>
<li><a href="#">拍賣</a></li>
</ul>
<div class="spacer"></div>
<ul>
<li><a href="#">京東服飾</a></li>
<li><a href="#">京東超市</a></li>
<li><a href="#">生鮮</a></li>
<li><a href="#">全球購</a></li>
</ul>
<div class="spacer"></div>
<ul>
<li><a href="#">京東金融</a></li>
</ul>
</div>
</div>
</div>
<!--header部分結束-->
<!--main部分開始-->
<div class="jd">
<div class="w jd-inner">
<div class="jd-col1">
<ul>
<li><a href="#">家用電器</a></li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">電腦</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
<li>
<a href="#">手機</a>
<span>/</span>
<a href="#">運營商</a>
<span>/</span>
<a href="#">數碼</a>
</li>
</ul>
</div>
<div class="jd-col2">
<div class="jd-col2-hd">
<a href="#" class="arr-l"></a>
<a href="#" class="arr-r"></a>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li>
<a href="#">
<img src="images/banner.jpg">
</a>
</li>
</ul>
</div>
<div class="jd-col2-bd">
<div class="firstPic">
<img src="images/pic1.jpg">
</div>
<div>
<img src="images/pic2.jpg">
</div>
</div>
</div>
<div class="jd-col3">
<div class="user">
<div class="user-info">
Hi,歡迎來到京東!<br>
<a href="#">登入</a>
<a href="#">註冊</a>
<a href="#" class="info-img">
<img src="images/no_login.jpg">
</a>
</div>
<div class="user-profit">
<a href="#">新任福利</a>
<a href="#">PLUS會員</a>
</div>
</div>
<div class="news">
<div class="tab-hd">
<!--這樣寫超連結的時候不會跳到上面-->
<a href="javascript:;" class="cuxiao">促銷</a>
<a href="javascript:;">公告</a>
<a href="#" class="more1">更多</a>
<div class="line"></div>
</div>
<div class="tab-bd">
<ul>
<li><a href="#">蓄電池專場下單立減100元</a></li>
<li><a href="#">蓄電池專場下單立減100元</a></li>
<li><a href="#">蓄電池專場下單立減100元</a></li>
<li><a href="#">蓄電池專場下單立減100元</a></li>
</ul>
</div>
</div>
<div class="jd-service">
<ul>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>機票</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="ad">
<a href="#"></a>
</div>
</div>
<!--footer部分開始了-->
<div class="footer">
<!--多快好省-->
<div class="footer-service">
<div class="w footer-service-inner">
<ul class="clearfix">
<li>
<div class="service_unit">
<h5>多</h5>
<p>品類齊全,輕鬆購物</p>
</div>
</li>
<li>
<div class="service_unit">
<h5 class="kuai">快</h5>
<p>品類齊全,輕鬆購物</p>
</div>
</li>
<li>
<div class="service_unit">
<h5 class="hao">好</h5>
<p>品類齊全,輕鬆購物</p>
</div>
</li>
<li>
<div class="service_unit">
<h5 class="sheng">省</h5>
<p>品類齊全,輕鬆購物</p>
</div>
</li>
</ul>
</div>
</div>
<!--幫助模組-->
<div class="w help">
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯絡客服</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯絡客服</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯絡客服</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯絡客服</a></dd>
</dl>
<dl>
<dt>購物指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯絡客服</a></dd>
</dl>
<dl class="cover">
<dt>京東自營覆蓋區縣</dt>
<dd class="info">京東已向全國2661個區縣提供自營配送服務,支援貨到付款、POS機刷卡和售後上門服務。
</dd>
<dd class="more"><a href="#">檢視詳情 > </a></dd>
</dl>
</div>
<!--版權模組-->
<div class="w copyright">
<div class="links">
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">關於我們</a>
<span>|</span>
<a href="#">English</a>
<span>|</span>
<a href="#">Site</a>
<span>|</span>
<a href="#">Media & IR</a>
<span>|</span>
</div>
<div class="c-info">
<p>京公網安備 11000002000088號|京ICP證070359號|網際網路藥品資訊服務資格證編號(京)-經營性-2014-0008|新出發京零 字第大120007號</p>
<p>網際網路出版許可證編號新出網證(京)字150號|出版物經營許可證|網路文化經營許可證京網文[2014]2148-348號|違法和不良資訊舉報電話:4006561155</p>
<p>Copyright © 2004 - 2017 京東JD.com 版權所有|消費者維權熱線:4006067733經營證照</p>
<p>京東旗下網站:京東支付|京東雲</p>
</div>
<div class="tupian">
<a href="#"></a>
<a href="#" class="kexin"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</div>
<!--footer部分結束了-->
</body>
</html>
*base.css
.w{
width: 1190px;
margin: auto;
}
.fr{
float: right;
}
.fl{
float: left;
}
li{
list-style: none;
}
ul,ol{
padding: 0;
margin: 0;
}
.style-red{
color: #f10215!important;
}
a{
text-decoration: none;
}
input,button{ /*為input去除padding,為button去除border*/
padding: 0;
border:0;
}
h5,dd,p{
margin: 0;
}
.clearfix:before,.clearfix:after {
content:"";
display: table; /* 這句話可以出發BFC BFC可以清除浮動,BFC我們後面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
@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;
}
/*頂部開始*/
.J_event{
background-color: #000;
}
.J_event a{
display: block; /*行內標籤如果想有固定的高就必須轉塊級標籤*/
height: 80px;
background: url("../images/top.jpg") no-repeat;
position: relative;
}
.J_event a i{
width: 20px;
height: 20px;
position: absolute;
top: 5px;
right: 0;
font-family: 'icomoon';
font-style: normal;
line-height: 20px;
color: #fff;
background:rgba(0,0,0,0.4);
}
/*頂部結束*/
/*快捷導航開始*/
.shortcut{
height: 30px;
line-height: 30px;
background-color: #E3E4E5;
border-bottom: 1px solid #DDDDDD;
color: #9D9D9D;
font-size: 12px;
}
.pos{
font-family: 'icomoon';
font-style: normal;
font-size: 14px;
color: #f10215;
}
.shortcut .fl li{
margin-left: 200px;
height: 30px;
overflow: hidden;
}
.shortcut a{
color: #9D9D9D;
font-size: 12px;
}
.shortcut a:hover{
color: #f10215;
}
.shortcut .fr 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'; /*這裡li標籤不好定位,所以直接在頁面元素上使用定位*/
font-style: normal;
font-size: 16px;
position: absolute;
top: -4px;
right: 0;
}
.erweima{
width: 60px;
height: 60px;
border: 1px solid #ccc;
padding: 3px;
position: absolute;
top: 30px;
right: -9px;
}
/*快捷導航結束*/
/*header部分開始*/
.header{
height: 140px;
}
.inner{
height: 140px;
position: relative;
}
.logo{
width: 190px;
height: 170px;
position: absolute;
top: -30px;
left: 0;
background-color: pink;
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: -2em;
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;
cursor: pointer;
outline: none;
float: left;
}
.search i{
font-family: 'icomoon';
font-style: normal;
color: #fff;
font-size: 16px;
}
.search em{
position: absolute;
top: 10px;
right: 65px;
width: 20px;
height: 16px;
cursor: pointer;
background:url("../images/sprite-search.png") no-repeat;
}
.search em:hover{
background-position: -30px 0;
}
.hotwords{
position: absolute;
top: 70px;
left: 320px;
float: left;
}
.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 i{
font-family: 'icomoon';
font-style: normal;
color: #f10215;
margin-right: 3px;
}
.myCar a{
font-size: 12px;
color: #f10215;
}
.myCar s{
text-decoration: none;
height: 16px;
line-height: 16px;
background-color: #f10215;
color: #fff;
font-size: 12px;
padding: 0 3px;
position: absolute;
top: 5px;
left: 140px;
border-radius: 7px;
}
.computer{
position: absolute;
right: 0;
bottom: 10px;
}
.navitems{
position: absolute;
left: 200px;
bottom: 0;
}
.navitems ul{
float: left;
}
.navitems ul li{
float: left;
margin-left: 30px;
}
.navitems li a{
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: 700;
color: #555A5F;
display: block;
}
.navitems li a:hover{
color: #f10215;
}
.navitems .spacer{ /*首先它有了原先的樣式,然後在基礎上加了定位*/
float: left; /*都加了浮動,所以這裡也要加浮動,否則會自動換行*/
margin-top: 15px;
margin-left: 20px; /*確保左邊距*/
margin-right: -10px; /*右邊距是三十,減去十*/
}
/*header部分結束*/
/*footer部分開始了*/
.footer{
height: 560px;
background-color: #EAEAEA;
}
.footer-service{
border-bottom: 1px solid #DEDEDE;
}
.footer-service-inner {
padding: 30px 0; /*由於浮動時不佔位置的,所以這裡加了padding之後,看起來像沒加一樣,所以要清楚浮動*/
}
.footer-service-inner li{
float: left;
width: 297px;
height: 42px;
}
.service_unit{
width: 225px;
height: 42px;
margin: 0 auto;
position: relative;
}
.service_unit h5{
width: 36px;
height: 42px;
position: absolute;
top: 0;
left: 0;
background: url("../images/ico_service.png") no-repeat;
text-indent: -2em;
overflow: hidden;
}
.service_unit p{
line-height: 42px;
margin-left: 45px;
font-size: 18px;
font-weight: 700;
}
.service_unit .kuai{ /*這裡只寫一個.kuai是無法實現的,權重不夠*/
background-position: 0 -44px;
}
.service_unit .hao{
background-position: 0 -86px;
}
.service_unit .sheng{
background-position: 0 -128px;
}
.help{
height: 180px;
padding-top: 20px;
}
.help dl{
float: left;
width: 195px;
}
.help dt{
font-size: 14px;
font-weight: 700;
color: #666;
height: 30px;
}
.help dd{
height: 22px;
}
.help dd a{
color: #727272;
font-size: 12px;
}
.help dd a:hover{
color: #f10215; /*這裡有問題:dl dt dd預設的樣式錯開了一點:dd的margin*/
}
.help .cover{
float: right;
width: 207px;
height: 150px;
background: url("../images/ico_footer.png") no-repeat;
}
.cover dt{
text-align: center;
}
.help .info{
width: 175px;
height: 50px;
font-size: 12px;
margin-top: 5px;
margin-left: 10px;
line-height: 18px;
color: #727272;
}
.more{
text-align: right;
padding-right: 10px;
}
.copyright{
border-top: 1px solid #ccc;
padding-top: 15px;
}
.links{
text-align: center;
}
.links a{
color: #727272;
font-size: 12px;
}
.links span{
font-size: 12px;
color: #D4CDCD;
margin: 0 6px;
}
.c-info{
font-size: 12px;
color: #9E9E9B;
text-align: center;
line-height: 20px;
maring-top: 10px;
}
.tupian{
text-align: center;
margin-top: 10px;
}
.tupian a{
width: 103px;
height: 32px;
display: inline-block;
background: url("../images/ico_footer.png") no-repeat 0 -151px;
}
.tupian .kexin{
background-position: -104px -151px;
}
/*footer部分結合了*/
*index.css
.jd{
position: relative;
}
.jd-inner{
height: 480px;
z-index: 999; /*只有定位的盒子才可以使用z-index*/
position: relative;
}
/*在這裡先插一腳,先把main中的大背景來實現了*/
.ad{
height: 480px;
background:url("../images/bg.png") no-repeat top center;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ad a{
display: block; /*後邊那個大背景是可以點選的所以直接將a填滿即可*/
height: 100%;
}
.jd-col1{
width: 190px;
height: 465px;
background-color: #6E6568;
float: left;
padding-top: 15px;
}
.jd-col1 li{
padding-left: 10px;
height: 28px;
line-height: 28px;
}
.jd-col1 li:hover{
background-color: #999395;
}
.jd-col1 li a{
color: #fff;
font-size: 14px;
}
.jd-col1 li span{
color: #fff;
font-size: 12px;
}
.jd-col2{
width: 790px;
height: 480px;
float: left;
margin-left: 10px;
}
.jd-col2-hd{ /*注意通欄和版心的位置關係,注意ol清除margin,否則對不齊*/
height: 340px;
margin-bottom: 10px;
position: relative;
}
.arr-l,.arr-r{
position: absolute;
top: 50%;
maring-top:-30;
width: 30px;
height: 60px;
background: rgba(0,0,0,0.3);
font-family: 'icomoon';
font-style: normal;
font-size: 25px;
color: #fff;
line-height: 60px;
}
.arr-l{
left: 0;
}
.arr-r{
right: 0;
}
.jd-col2-hd ol{
position: absolute;
bottom: 20px;
left: 50%; /*通過這樣來實現居中*/
margin-left: -90px;
width: 180px;
height: 20px;
background: rgba(255,255,255,0.3);
border-radius: 10px;
}
.jd-col2-hd ol li{
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 6px;
float: left;
margin: 4px 5px;
cursor: pointer;
}
.jd-col2-hd .current{
background-color: #f10215;
}
.jd-col2-bd div{
width: 390px;
height: 130px;
float: left;
}
.jd-col2-bd div img{
width:100%;
}
.firstPic{
margin-right: 10px;
}
.jd-col3{
width: 190px;
height: 480px;
float: right;
}
.jd-col3 a{
font-size: 12px;
color:#747474;
}
.user{
height: 95px;
padding: 20px 15px 0;
background-color: pink;
}
.user-info{
height: 40px;
padding-left: 54px;
font-size: 12px;
color: #747474;
line-height: 22px;
position: relative;
}
.user-info a:hover{
color: #f10215;
}
.info-img{
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%; /*只這樣設定時不夠的,圖片位置會偏,還需要下邊的填充*/
overflow: hidden;
}
.info-img img{
width: 100%;
height: auto;
}
.user-profit{
margin-top: 14px;
}
.user-profit a{
width: 70px;
height: 20px;
border: 2px solid #f10215;
display: inline-block;
font-size: 12px;
color: #f10215;
text-align: center;
line-height: 20px;
margin-right: 4px;
}
.user-profit a:hover{
background-color: #f10215;
color: #fff;
}
.news{
height: 149px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px 15px 0;
}
.tab-hd{
border-bottom: 1px solid #ccc;
padding: 3px 0;
position: relative;
}
.tab-hd a{
margin: 0 4px;
}
.cuxiao{
border-right: 1px solid #ccc;
padding-right: 10px;
}
.tab-hd .more1{ /*原始碼寫的是.new樣式加不上,改成了.tab-hd樣式成功了*/
position: absolute;
top: 6px;
right: 0;
}
.line{
width: 28px;
height: 2px;
background-color: #f10215;
position: absolute;
bottom: -1px;
left: 0;
}
.tab-bd{
margin-top: 10px;
}
.tab-bd li{
height: 23px;
line-height: 23px;
}
.jd-service{
height: 209px;
width: 190px;
overflow: hidden; /*border加了右、下邊框,通過高度的設定組合,實現底邊框的隱藏*/
}
.jd-service ul{
width: 195px;
}
.jd-service li{
width: 47px;
height: 69px;
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.jd-service li a{
width: 100%;
height: 100%;
display: block;
}
.jd-service i{
display: block;
width: 24px;
height: 24px;
margin: 15px auto 8px;
background: url("../images/[email protected]") no-repeat;
}
.jd-service p{
text-align: center;
}