SMTC：純CSS 星星打分評價

時間  2019-11-09
標籤 smtc css 星星 打分 評價 欄目 CSS 简体版
原文   原文鏈接

星星打分評價的頁面功能，需求上常常會碰到。
網上搜一下，Js + CSS，純 CSS 的版本也很是多。
以爲搜到的都不理想，下意識以爲應該能有更好的實現
本身動手嘗試一下，果真能更好用
因此開篇文章，分享一下 ^_^css

先來 HTML 代碼感覺下

<!-- 星星後面不須要文本的版本 -->
<!-- 不須要 label，不須要 label.for，不須要 input.id -->
<div class="star">
    <input type="radio" name="rdStar" value="" checked="checked"/>
    <input type="radio" name="rdStar" value="1"/>
    <input type="radio" name="rdStar" value="2"/>
    <input type="radio" name="rdStar" value="3"/>
    <input type="radio" name="rdStar" value="4"/>
    <input type="radio" name="rdStar" value="5"/>
</div>
<!-- 星星後面跟文本的版本 -->
<!-- 只須要 label，不須要 label.for，不須要 input.id -->
<div class="star">
    <input type="radio" name="rdStarLabel" checked="checked"/><label>請打分</label>
    <input type="radio" name="rdStarLabel" value="1"/><label>一星</label>
    <input type="radio" name="rdStarLabel" value="2"/><label>二星</label>
    <input type="radio" name="rdStarLabel" value="3"/><label>三星</label>
    <input type="radio" name="rdStarLabel" value="4"/><label>四星</label>
    <input type="radio" name="rdStarLabel" value="5"/><label>五星</label>
</div>

只討論現代瀏覽器，非現代瀏覽器請出門左轉

須要的 CSS 基礎

整體沒有用到很複雜或者罕見的 CSS 語法，對本身 CSS 水平有自信的能夠跳過這一節html

  • A ~ B MDN 文檔：組合器和選擇器組
    通用兄弟選擇器：匹配B元素，知足條件：B是A以後的兄弟節點中的任意一個（AB有相同的父節點，B在A以後，但不必定是緊挨着A）
  • A + B MDN 文檔：組合器和選擇器組
    相鄰兄弟選擇器：匹配B元素，知足條件：B是A的下一個兄弟節點（AB有相同的父結點，而且B緊跟在A的後面）
  • E:hover MDN 文檔：:hover()
    鼠標懸停在元素上時提供的樣式
  • E:checked MDN 文檔：:checked()
    處於選中狀態的元素的樣式，單選框<input type="radio" />，複選框<input type="checkbox" />，下拉選擇select中的option
  • E:not(X) MDN 文檔：:not()
    匹配不符合參數選擇器X描述的元素
  • Data Uri MDN 文檔：Data URLs
    容許嵌入小文件（一般用來嵌入小圖片，但不僅是圖片哦）

準備星星資源

爲了 WYCIWYG，我沒有用獨立圖片，經過 Data Uri 是嵌入小圖片web

.star input {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAYAAABxVAqfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjJFRDE5Qjg0NTYwMTFFOTk5QzM5RjY0NTY0MDc0MEUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjJFRDE5Qjk0NTYwMTFFOTk5QzM5RjY0NTY0MDc0MEUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMkVEMTlCNjQ1NjAxMUU5OTlDMzlGNjQ1NjQwNzQwRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMkVEMTlCNzQ1NjAxMUU5OTlDMzlGNjQ1NjQwNzQwRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtLQhvIAAAOnSURBVHja7FdbSBRRGHbKSizKzIzNagnSpBvkbmEPXSiK6Lb0EEJEkkUURNFD0IOvQdAVFgoRErqgQQ/RDYSEjKCLuz5EJElEkZRb2YpGaBe371/+ibPTnHXO3CRw4OPMnDlzvvnPOf/l01KpVM5/dYVisYPAIrvfazZJS9B0AZ+AQDwcHlKdY4zNHz7HbTGw0ReLYW0AzQehK8FWp7y2+IzheQaw3lOLYS2RdJu8+giUqFitavEpST8t/1pPLIa10/kUy673QNCq1SoWnxzm/WxgtS2LYRU95wNkXRBYACwD1gBzLcxH/hwHHgHtwCteiSRWYjCDGGTL0e7jvy3zMNj9Ap4BreQZRHwHN5t9jrgR2uPtwBMfSWux7Lc03ttcNPdVDofN6xhIT6f3WE+L4Xh8LJp7wAaPSA/HQqHo38Ml5mOQ09LfBLa6THoApHUZp9pYCDB5E7DDJdIakDb848dmFQjIae8vA7scku7EnjaacZgSa5pGB24cbn84IG0FKQWeHDOObCFzkkNrl9qN1XMcEk/Gqo23Q7zEhYNVZId4lQvE8+wQuxG/K5SIOYQGskxYD0zjtBnPMk5aleRK+gsl/TeAQ3CTBD9/JbfHj4bRXjNJq+ukhYAkgFSieSx0tQB7QfguS2mkcZK5SoWf8CoPkWvQqsVBbtuAahB2DLeZXGs9wA9QCbSFI18BuRXw2arFeWhmYrI3DrQVZbty4CUsTlkiHlWLo2pxpNXiJSb1XS1OBVZwgeibWoyCpBdts37A/FKLhSBOcj9Fqdt+qMULOilftNRf/FCLRSDuMXwX4XrcM7VYjwn2m2wDrVwPJwVHarGXB5CYew68Ztfpk+0hFw8FnBLLuMpcCVSaZMGIxvXzQx5A12JM/sLluH4EzXlBLZ4wU4vfgFK87HaJVN//TLVoyJ+6Whxg8i6HpFWsw9JqEfNFZadaVIskX+Zj8FubpHs4rKbVIuapyxpAmFxXi3QSF+KjTtVcTf6uq0V832ApcrE/62pxiH03aZF0E5q7olq0HLnYZWqEMb8VDP4pqMVGOyFTVIv9CsSdbqnFNsUkn3BLLTZL9nIWkG+yTQPsjo7V4lNjegSaOPj34/6oiWUtbqjFDiacAlzknFwlfH+Wf6Cag5BIXKFUCHAI1U9nObtVrUEtHud66wp9wv19wG5gAnCdCgQs/TYV4mLhkGRTi/p4mVr8jrETVYhdVYvGImBk1aLk791Si6VU/pjFgT8CDAD9y6CbITrTjwAAAABJRU5ErkJggg==');}

實際圖片：星星資源圖 寬 30 x 高 60，每一個樣子的圖片 30 x 30瀏覽器

注意如下細節要求：（配合CSS）
1 小圖片以列方式豎着依次保存
2 第一個是選中樣子，第2個是未選中樣子app

* WYCIWYG ：What You Copy Is What You Get

基本原理

Q：這個功能最重要最基礎的部分是什麼呢？
A：鼠標滑過，星星選中和取消字體

<style>
.star {
    font-size:30px;
}
.star input {
    display:block; /* 和 inline-block 的噁心留白說再見 */
    float:left; /* 多個星星排排坐，肩靠肩 */
    margin:0;padding:0; /* 重置 input 默認樣式 */
    width:1em;height:1em; /* em 單位 棒!棒!棒! */
    font:inherit; /* 有這個 em 單位才能棒起來 */
    background:center 0/cover no-repeat; /* 準備好背景樣式 */
    outline:0 none transparent; /* 再見! Chrome 的默認黃框框 */
    -webkit-appearance:none;-moz-appearance:none;appearance:none; /* 取消瀏覽器對 input 的默認渲染 */
}
.star input:hover ~ input {
    /*
    樣式 .star input 把全部 input 元素 背景圖 默認設爲了選中樣式
    當前 hover 的 input 元素以後的全部兄弟 input 元素，背景圖調整爲未選中樣式
    -----------------
    default | ★★★★★
    hover   |     ✪
    style   | ★★★☆☆
    ---------------------
    Final   | ★★★☆☆
    */
    background-position:center -1em;
}
/*
 請在這裏複製上面那段 data uri 的 CSS 哦，否則沒有小星星
 由於有樣式優先級，位置錯了也可能沒有小行星哦
*/
</style>
<div class="star">
    <input type="radio" name="rdStar" value="1"/>
    <input type="radio" name="rdStar" value="2"/>
    <input type="radio" name="rdStar" value="3"/>
    <input type="radio" name="rdStar" value="4"/>
    <input type="radio" name="rdStar" value="5"/>
</div>

鼠標滑過，星星變更一目瞭然url

走過路過動圖瞭解一下（更清楚的展現原理）
圖片描述spa

But：鼠標沒放上去的時候是全選中的星星？ [黑人問號???]
這部分只是基本原理，下面 實現詳解 解決全部問題3d

實現詳解

1 解決鼠標沒放上去的時候是全選中的星星code

在最前面增長一個 input ，表示爲 `0星`，這個 `0星` input 能夠隱藏不顯示
爲了演示，這個章節裏不隱藏 `0星` input

2 增長 星星對應文本

每一個 input 後面增長對應用 label 包起來的文本
input `float:left` label `float:right`

實現詳解

<style type="text/css">
.star {
    /* 基本原理 已有註釋 */
    display:inline-block;height:1em;line-height:1em;font-size:30px;
}
.star input {
    /* 基本原理 已有註釋 */
    display:block;float:left;margin:0;padding:0;width:1em;height:1em;font:inherit;background:center 0/cover no-repeat;outline:0 none transparent;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
.star input:first-child {
    /* 爲了演示效果，不隱藏，但恢復瀏覽器渲染 */
    -webkit-appearance:radio;
    -moz-appearance:radio;
    appearance:radio;
}

.star input:checked ~ input {
    /* Style [C]
    已選中的 input 元素以後的全部兄弟 input 元素，背景圖調整爲未選中樣式
    ---------------------
    default   | ★★★★★
    checked   |   ✪
    style [C] | ★★☆☆☆
    ---------------------
    Final     | ★★☆☆☆
    */
    background-position:center -1em;
}
.star:hover input:checked ~ input {
    /* Style [HC]
    鼠標懸浮在 star 元素上時，已選中的 input 元素以後的全部兄弟 input 元素，背景圖調整爲選中樣子
    主要做用，覆蓋上一條，將 input 元素 背景圖所有恢復到 選中樣子
    -----------------
    default    | ★★★★★
    checked    |   ✪
    style [C]  | ★★☆☆☆
    hover      |       ✪
    style [HC] | ★★★★★
    ---------------------
    Final      | ★★★★★
    */
    background-position:center 0;
}
.star:hover input:hover ~ input {
    /* Style [HH]
    基本原理 已有註釋
    -----------------
    default    | ★★★★★
    checked    |   ✪
    style [C]  | ★★☆☆☆
    hover      |       ✪
    style [HC] | ★★★★★
    style [HH] | ★★★★☆
    ---------------------
    Final      | ★★★★☆
    */
    background-position:center -1em;
}

/* label 部分參照上面 inpu 的樣式，試着本身理解 */
.star label {display:none;float:right;}
.star input:checked + label {display:block;}
.star:hover input:checked + label {display:none;}
.star:hover input:hover + label {display:block;}

/*
 請在這裏複製上面那段 data uri 的 CSS 哦，否則沒有小星星
 由於有樣式優先級，位置錯了也可能沒有小行星哦
*/
</style>
<div class="star">
    <input type="radio" name="rdStar" checked="checked"/>
    <input type="radio" name="rdStar" value="1"/>
    <input type="radio" name="rdStar" value="2"/>
    <input type="radio" name="rdStar" value="3"/>
    <input type="radio" name="rdStar" value="4"/>
    <input type="radio" name="rdStar" value="5"/>
</div>
<br />
<div class="star">
    <input type="radio" name="rdStarLabel" checked="checked"/><label>請打分</label>
    <input type="radio" name="rdStarLabel" value="1"/><label>一星</label>
    <input type="radio" name="rdStarLabel" value="2"/><label>二星</label>
    <input type="radio" name="rdStarLabel" value="3"/><label>三星</label>
    <input type="radio" name="rdStarLabel" value="4"/><label>四星</label>
    <input type="radio" name="rdStarLabel" value="5"/><label>五星</label>
</div>

More 6666 ~~~

更多選擇，更多歡樂　：)

1 只能選一次，選完以後不能從新選擇

/* pointer-events 請自行搜索瞭解 */
.star-once input:first-child:not(:checked) ~ input {background-position:center 0;pointer-events:none;}
.star-once input:not(:first-child):checked ~ input {background-position:center -1em;}

.star-once input:first-child:not(:checked) ~ label {display:none;}
.star-once input:not(:first-child):checked + label {display:block;}

2 已有默認選擇，鎖定只讀，不能更改，用來展現

/* pointer-events 請自行搜索瞭解 */
.star-lock {pointer-events:none;}

3 多種尺寸只要修改 star 上的字體大小

/*
  除了 star 其餘都是 em 單位，背景圖用了 cover
  自由縮放，輕鬆愉快哦
*/
.star {font-size:50px;}

圖片描述

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Star</title>
    <style type="text/css">

    .star {position:relative;display:inline-block;line-height:1em;}
    .star input {display:block;float:left;margin:0;padding:0;width:1em;height:1em;font:inherit;background:center 0/cover no-repeat;outline:0 none transparent;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    }
    .star label {display:none;float:right;margin-left:0.5em;}
    .star input:first-child {
        display:none;
        /* -webkit-appearance:radio;-moz-appearance:radio;appearance:radio; */
    }

    .star input:checked ~ input {background-position:center -1em;}
    .star:hover input:checked ~ input {background-position:center 0;}
    .star:hover input:hover ~ input {background-position:center -1em;}

    .star input:checked + label {display:block;}
    .star:hover input:checked + label {display:none;}
    .star:hover input:hover + label {display:block;}

    .star-once input:first-child:not(:checked) ~ input {background-position:center 0;pointer-events:none;}
    .star-once input:not(:first-child):checked ~ input {background-position:center -1em;}

    .star-once input:first-child:not(:checked) ~ label {display:none;}
    .star-once input:not(:first-child):checked + label {display:block;}

    .star-lock {pointer-events:none;}

    /*
     以上的 css 可寫入統同樣式表
     如下的樣式 可在用的地方分別處理，自定義 大小，星星圖片
     */
    .star {font-size:30px;}
    .star input {background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAYAAABxVAqfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjJFRDE5Qjg0NTYwMTFFOTk5QzM5RjY0NTY0MDc0MEUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjJFRDE5Qjk0NTYwMTFFOTk5QzM5RjY0NTY0MDc0MEUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMkVEMTlCNjQ1NjAxMUU5OTlDMzlGNjQ1NjQwNzQwRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMkVEMTlCNzQ1NjAxMUU5OTlDMzlGNjQ1NjQwNzQwRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtLQhvIAAAOnSURBVHja7FdbSBRRGHbKSizKzIzNagnSpBvkbmEPXSiK6Lb0EEJEkkUURNFD0IOvQdAVFgoRErqgQQ/RDYSEjKCLuz5EJElEkZRb2YpGaBe371/+ibPTnHXO3CRw4OPMnDlzvvnPOf/l01KpVM5/dYVisYPAIrvfazZJS9B0AZ+AQDwcHlKdY4zNHz7HbTGw0ReLYW0AzQehK8FWp7y2+IzheQaw3lOLYS2RdJu8+giUqFitavEpST8t/1pPLIa10/kUy673QNCq1SoWnxzm/WxgtS2LYRU95wNkXRBYACwD1gBzLcxH/hwHHgHtwCteiSRWYjCDGGTL0e7jvy3zMNj9Ap4BreQZRHwHN5t9jrgR2uPtwBMfSWux7Lc03ttcNPdVDofN6xhIT6f3WE+L4Xh8LJp7wAaPSA/HQqHo38Ml5mOQ09LfBLa6THoApHUZp9pYCDB5E7DDJdIakDb848dmFQjIae8vA7scku7EnjaacZgSa5pGB24cbn84IG0FKQWeHDOObCFzkkNrl9qN1XMcEk/Gqo23Q7zEhYNVZId4lQvE8+wQuxG/K5SIOYQGskxYD0zjtBnPMk5aleRK+gsl/TeAQ3CTBD9/JbfHj4bRXjNJq+ukhYAkgFSieSx0tQB7QfguS2mkcZK5SoWf8CoPkWvQqsVBbtuAahB2DLeZXGs9wA9QCbSFI18BuRXw2arFeWhmYrI3DrQVZbty4CUsTlkiHlWLo2pxpNXiJSb1XS1OBVZwgeibWoyCpBdts37A/FKLhSBOcj9Fqdt+qMULOilftNRf/FCLRSDuMXwX4XrcM7VYjwn2m2wDrVwPJwVHarGXB5CYew68Ztfpk+0hFw8FnBLLuMpcCVSaZMGIxvXzQx5A12JM/sLluH4EzXlBLZ4wU4vfgFK87HaJVN//TLVoyJ+6Whxg8i6HpFWsw9JqEfNFZadaVIskX+Zj8FubpHs4rKbVIuapyxpAmFxXi3QSF+KjTtVcTf6uq0V832ApcrE/62pxiH03aZF0E5q7olq0HLnYZWqEMb8VDP4pqMVGOyFTVIv9CsSdbqnFNsUkn3BLLTZL9nIWkG+yTQPsjo7V4lNjegSaOPj34/6oiWUtbqjFDiacAlzknFwlfH+Wf6Cag5BIXKFUCHAI1U9nObtVrUEtHud66wp9wv19wG5gAnCdCgQs/TYV4mLhkGRTi/p4mVr8jrETVYhdVYvGImBk1aLk791Si6VU/pjFgT8CDAD9y6CbITrTjwAAAABJRU5ErkJggg==');}
    </style>
</head>
<body>
star&ensp;
<div class="star">
    <input type="radio" name="rdStar" checked="checked"/><label>請打分</label>
    <input type="radio" name="rdStar" value="1"/><label>一星</label>
    <input type="radio" name="rdStar" value="2"/><label>二星</label>
    <input type="radio" name="rdStar" value="3"/><label>三星</label>
    <input type="radio" name="rdStar" value="4"/><label>四星</label>
    <input type="radio" name="rdStar" value="5"/><label>五星</label>
</div>
<br />
once&ensp;
<div class="star star-once">
    <input type="radio" name="rdStarOnce" checked="checked"/><label>請打分</label>
    <input type="radio" name="rdStarOnce" value="1"/><label>一星</label>
    <input type="radio" name="rdStarOnce" value="2"/><label>二星</label>
    <input type="radio" name="rdStarOnce" value="3"/><label>三星</label>
    <input type="radio" name="rdStarOnce" value="4"/><label>四星</label>
    <input type="radio" name="rdStarOnce" value="5"/><label>五星</label>
</div>
<br />
lock&ensp;
<div class="star star-lock">
    <input type="radio" name="rdStarLock"/><label>請打分</label>
    <input type="radio" name="rdStarLock" value="1"/><label>一星</label>
    <input type="radio" name="rdStarLock" value="2"/><label>二星</label>
    <input type="radio" name="rdStarLock" value="3" checked="checked"/><label>三星</label>
    <input type="radio" name="rdStarLock" value="4"/><label>四星</label>
    <input type="radio" name="rdStarLock" value="5"/><label>五星</label>
</div>
<br />
<div class="star">
    <input type="radio" name="rdStarX" checked="checked"/>
    <input type="radio" name="rdStarX" value="1"/>
    <input type="radio" name="rdStarX" value="2"/>
    <input type="radio" name="rdStarX" value="3"/>
    <input type="radio" name="rdStarX" value="4"/>
    <input type="radio" name="rdStarX" value="5"/>
</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程