品優購專案學習總結（一）

這個圖示就是主頁面上面的小圖示，與頁面的title一起顯示的。

圖示的引用

href：值為圖示的路徑

注意：圖示最好要放在專案的根目錄下，防止出錯

這個鏈結可以把切的圖（png、jpg等）轉化成圖示（ico）

字型圖示應用非常廣泛，它比較便捷、輕巧。不像載入需要請求伺服器，字型圖示減輕了瀏覽器和伺服器的負擔。

定義字型圖示

@font-face {

font-family: 'icomoon';

/* 定義字型一定要寫對路徑！！！！ */

src: url('../fonts/icomoon.eot?7kkyc2');

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-weight: normal;

font-style: normal;

直接使用，設定字型的樣式就是設定圖示的樣式

.shortcut li i {

font-family: 'icomoon';

font-size: 13px;

line-height: 10px;

a中有文字但是不顯示：是為了告訴瀏覽器這裡是什麼內容

結構

樣式

/* logo */

.header .logo {

position: absolute;

top: 27px;

left: 0;

width: 175px;

height: 56px;

.header .logo h1 {

text-indent: -9999px;

.logo a {

display: block;

width: 175px;

height: 56px;

background: url(../image/logo.png) no-repeat;

浮動的元素：是在內邊距裡面排序的

定位的元素：比浮動的權重高

在布局中，給寬度要慎重，當內容不一致時，不設定高度，使用padding撐開。

width的預設值：auto。當不給寬度給padding時，盒子裡的內容會被擠進去，但是盒子本身不會變

一般多給的是高度，似實際情況而定。

品優購專案 登入頁面

效果圖 html部分 掃瞄登陸 賬戶登陸 公共場所不建議自動登入，以免賬號丟失 自動登入 忘記密碼?登入立即註冊 css部分 header logo login main login main w loginfrom a from from1 spa from2 anno loginfrom inp...

品優購電梯導航案例

案例分析 當我們滾動到 今日推薦 模組，就讓電梯導航顯示出來 點選電梯導航頁面可以滾動到相應內容區域 核心演算法 因為電梯導航模組和內容區模組一一對應的 當我們點選電梯導航某個小模組，就可以拿到當前小模組的索引號 就可以把animate要移動的距離求出來 當前索引號內容區模組它的offset top...

學習品優購總結 十 搜尋解決方案 Solr二

將使用者輸入的關鍵字在標題中以紅色的字型顯示出來，就是搜尋中常用的高亮顯示.後端 private map searchlist map searchmap map.put rows page.getcontent return map 注 1.h.gethighlights 是集合的原因 可能有多個...