[譯]HTML&CSS Lesson7: 設置背景和漸變色

時間  2019-11-09
標籤 html&css html css lesson7 lesson 設置 背景 漸變 欄目 CSS 简体版
原文   原文鏈接

背景對網站的設計有重大的影響。它有利於創建網站的總體感受，設置分組，分配優先級，對網站的可用性也有至關大的影響。css

在CSS中，元素的背景能夠是一個純色，一張圖，一個漸變色或者它們的組合。在咱們決定如何實現背景以前，咱們要考慮到背景是爲了網站的總體佈局服務的。html

在這節課中，咱們將會學習如何在元素上實現各種背景色，包括漸變色。同時咱們也會接觸到一些CSS3的背景屬性。前端

添加背景色

給元素添加背景的最便捷方式就是使用background屬性或background-color添加一個純色背景。background屬性能夠接受顏色和圖片爲值，但background-color只接受色值。這些屬性都是有效的，因此你能夠根據本身的偏好還有實際場景選擇：css3

div {
background-color: #b2b2b2;
}

添加背景色時，有好幾種值供咱們使用。和其餘顏色屬性同樣，咱們能夠從關鍵字值，十六進制值以及RGB,RGBa,HSL和HSLa值中選擇。咱們最經常使用的仍是十六進制值，不過有時咱們會須要RGBa或者HSLa設置透明的背景。web

透明背景segmentfault

由於不是全部瀏覽器都兼容RGBa和HSLa，因此推薦在使用它們的時候設置一個備用色。Internet Explorer 8 就是不兼容RGBa和HSLa的瀏覽器之一。當瀏覽器（如Internet Explorer 8）遇到不能識別的值時就會忽略它。瀏覽器

若是擔憂IE8的兼容問題，那麼有一個很是簡單的方法添加一個備用色。咱們能夠利用CSS的從上到下層疊的關係，設置兩個background-color屬性。第一個background-color屬性使用「安全的」背景色，例如十六進制值；第二個background-color使用RGBa或者HSLa值。這樣瀏覽器若是能夠識別RGBa或HSLa值，就會正確渲染它；若是沒法識別，就會渲染它上面的十六進制的色值。安全

div {
  background-color: #b2b2b2;
  background-color: rgba(0, 0, 0, .3);
}

添加背景圖

除了能夠爲圖像添加背景色以外，咱們也能夠爲其添加背景圖。背景圖的添加方法與背景色的添加方法相似，不過增長了一些額外的屬性。與添加背景色相似，咱們能夠用background屬性設置縮略值，也可使用background-image屬性直接設置值。但無論你使用什麼屬性，圖片資源必須放置在url()函數中。app

url()函數的值是背景圖的路徑，與建立超連接路徑類似。咱們要注意一下文件目錄，確保引用的圖片路徑準確，路徑放置在括號和雙引號之間。函數

div {
  background-image: url("alert.png");
}

若是咱們添加背景圖時只使用url()值可能會出現一些不合須要的狀況。默認狀況下，圖片會從左上角開始重複填充元素背景直到填滿元素的背景。所幸咱們可使用background-repeat和background-position屬性控制元素如何填充，是否重複。

背景圖重複填充

默認狀況下背景圖會橫向和縱向同時重複填充元素的背景，除非有特別聲明。background-repeat屬性能夠用以控制圖片是否重複填充，以及重複填充的方向。

div {
  background-image: url("alert.png");
  background-repeat: no-repeat;
}

background-repeat 接受四個值：repeat, repeat-x, repeat-y 和 no-repeat。repeat是默認值，表示圖片會同時在橫向和縱向重複填充元素背景。

repeat-x表示背景圖橫向重複填充元素背景，而repeat-y表示背景圖縱向重複填充元素背景。no-repeat是告訴瀏覽器背景圖只出現一次就夠了，不須要重複填充。

背景定位

默認狀況下，背景圖位於元素的左上角，但咱們能夠經過background-position屬性精準的控制背景圖相對於該角落的位置。

div {
  background-image: url("alert.png");
  background-position: 20px 10px;
  background-repeat: no-repeat;
}

background-position屬性要求輸入兩個值：橫向偏移量(第一個值)和縱向偏移量(第二個值)。若是隻輸入了一個具體值，那麼這個值將應用於橫向偏移，縱向偏移量會默認爲50%。

由於咱們是相對於左上角設置背景圖偏移，因此長度值與該角息息相關。

咱們可使用關鍵字值top，right，bottom，left和center，或者以像素、百分比等長度單位設置background-position值。

關鍵字值和百分比很是類似。例如關鍵字值left top對應百分比值0 0，表示背景圖位於元素的左上角。而關鍵字值right bottom對應百分比值100% 100%，表示背景圖位於元素的右下角。

clipboard.png

使用像素值也很是的常見，由於像素值能夠精確的控制背景圖顯示的位置。

背景圖簡寫值

background-color， background-image，background-position和background-repeat屬性能夠揉成一個背景屬性值。這些值的順序有多種，不過最經常使用的順序是background-color，background-image，background-position最後爲background-repeat

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;
}

背景圖示例

接下來的例子中，咱們將使用background屬性，設置一個包含background-color，background-image，background-position和background-repeat值的簡寫值。

能夠注意到例子中background-position屬性有一個相對值和一個絕對值，第一個值20px設置的是橫向偏移量，表示背景圖在元素內向右偏移20像素。第二個值50%是一個縱向偏移量，表示背景圖在元素內縱向居中

notice-success選擇器中也設置了一些其餘的樣式以進一步美化警報消息的樣式。

HTML

<div class="notice-success">
  Woo hoo! Congratulations, you did it!
</div>

CSS

.notice-success {
  background: #67b11c url("tick.png") 20px 50% no-repeat;
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px 15px 50px;
}

clipboard.png

練習

回到咱們的「樣式討論會」網站，讓咱們爲其添加一些背景色。在此期間，咱們將修改一些樣式以保持樣式和內容清晰美觀。

  • 首先咱們在現有的color和font屬性下爲<body>元素增長一個藍色背景。修改後樣式以下所示：
body {
  background: #293f50;
  color: #888;
  font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
  • 如今咱們已爲<body>添加了藍色背景。雖然咱們還會爲網站添加一些不一樣的背景色，但藍色是其主色調。
  • 目前網站的每一個頁面都擁有了藍色背景，如今咱們須要調整一些區域的樣式以保證藍色背景下內容清晰可見。具體來講，咱們的 <header>和<footer>將保留藍色背景，導航模塊也是。
  • 在<header>和<footer>中咱們將連接的默認色設置爲白色，hover時的效果設置爲與標題一致的綠色。
  • 從<header>元素開始，咱們爲其添加一個class primary-header(除了現有的container和group)。別忘了將這個class添加到全部頁面的<header>元素中。
<header class="primary-header container group">
  ...
</header>
  • 使用<header>中的class primary-header和<footer>中的primary-footer，咱們就能爲其中的連接添加新的樣式。
  • 咱們選中擁有class primary-header 或 primary-footer的元素中的<a>元素，將它們的顏色設置爲白色；兩組選擇器用逗號隔開以共享樣式。再次咱們選中相同的<a>元素將它們hover時的顏色設置爲綠色。
.primary-header a,
.primary-footer a {
  color: #fff;
}
.primary-header a:hover,
.primary-footer a:hover {
  color: #648880;
}
  • 咱們將一些文本顏色設爲白色後，也須要將導航模塊的的文本顏色設置爲白色，它目前也是藍色背景。咱們在現有的hero選擇器中，添加color屬性爲白色。修改後代碼以下所示：
.hero {
  color: #fff;
  line-height: 44px;
  padding: 22px 80px 66px 80px;
  text-align: center;
}
  • 咱們須要清理導航模塊中的一些按鈕樣式。 咱們將這部分新的樣式添加到main.css文件下的按鈕模塊中的btn選擇器上。
  • 具體的來講咱們要將按鈕的文本顏色color設置爲白色。確保光標cursor始終是一個指針pointer,增大font-weight值，縮小letter-spacing，改變text-transform爲uppercase
  • 修改後樣式以下所示：
.btn {
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  letter-spacing: .5px;
  margin: 0;
  text-transform: uppercase;
}
  • 接下來咱們經過btn-alt選擇器整理一些備用按鈕的樣式。具體來講，咱們要確保按鈕的邊框爲白色；hover時的背景色爲白色，文本爲藍色。
.btn-alt {
  border: 1px solid #fff;
  padding: 10px 30px;
}
.btn-alt:hover {
  background: #fff;
  color: #648880;
}
  • 如今咱們對全部擁有藍色背景區域的樣式作了整理，接下來咱們爲白色背景的區域添加一些樣式。在main.css文件中的clearfix區塊下，劃分一個rows區塊，在這個新的區塊下添加選擇器row
  • 在row選擇器中，咱們爲其添加一個白色背景，一個最小寬min-width值960px(確保row元素的寬度老是大於container或grid元素)和一些縱向的padding。完成後代碼以下所示：
/*
  ========================================
  Rows
  ========================================
*/

.row {
  background: #fff;
  min-width: 960px;
  padding: 66px 0 44px 0;
}
  • class row就緒以後，咱們就能夠在主頁的導航中使用它了。目前，該區塊有一個class爲grid的<section>，包含了三個class爲teaser和col-1-3的<section>。
  • 咱們要爲這區塊添加一個白色背景，將全部元素包含在class爲row的元素中。
  • 因爲咱們想要將整個導航區塊放置在<section>元素中，咱們將新建一個class爲row的<section>元素去包裹現有的class爲grid的<section>
  • 用兩個<section>去包裹相同的內容下降了語義化，因此咱們將第二個<sectoin>，class爲grid的元素改成<div>元素，調整以後，這個元素就只剩下一個樣式，再也不具備語義。
  • 導航調整後新結構以下所示：
<section class="row">
  <div class="grid">

    <!-- Speakers -->
    
    <section class="teaser col-1-3">
      ...
    </section><!--
    
    Schedule
  
    --><section class="teaser col-1-3">
      ...
    </section><!--
    
    Venue
    
    --><section class="teaser col-1-3">
      ...
    </section>

  </div>
</section>

一點背景的改變就能夠影響網站的設計，簡直太神了。從主頁上看，咱們的樣式研討會網站已經很不錯了。
clipboard.png

設計漸變背景

漸變背景是CSS3引入的，幾乎全部的設計師和前端開發都爲此欣喜。雖然漸變背景不能做用於舊版瀏覽器，但全部最新的瀏覽器都支持它們。

CSS將漸變背景視爲背景圖。咱們能夠和設置普通的背景圖同樣，使用background和background-image屬性建立漸變背景。屬性值則依賴於咱們須要建立什麼樣的漸變背景，例如線性漸變或放射性漸變。

漸變背景添加供應商前綴

在第四課 盒子模型 中，咱們討論過將供應商前綴添加到新的CSS屬性或值，以便瀏覽器可以支持它們。漸變背景的屬性值就是要求添加供應商前綴的屬性值之一。幸運的是目前大部分瀏覽器都取消了對供應商前綴的需求。但爲了最大限度的支持漸變背景，仍是建議加上它。

咱們會在線性漸變中介紹不一樣種類的供應商前綴，但爲了簡便起見，放射性漸變中咱們不會再說起。

線性漸變

多年來，設計師和開發者們都是經過切圖來實現漸變背景。這個方法費時費力，並且極不靈活。幸運的是那些日子過去了，如今咱們能夠經過CSS來實現須要的線性漸變背景，若是某個顏色改變了，不須要再重作，從新切圖和上傳。如今咱們只須要改變CSS的值就能夠快速實現，完美。

div {
  background: #466368;
  background: -webkit-linear-gradient(#648880, #293f50);
  background:    -moz-linear-gradient(#648880, #293f50);
  background:         linear-gradient(#648880, #293f50);
}

clipboard.png

線性漸變背景經過在background或background-image屬性中用linear-gradient()函數來定義。linear-gradient()函數必須包含兩個色值，第一個值是起始的色值，第二個值是結束的色值。瀏覽器將會自動生成兩個色值之間的漸變色

在漸變背景定義以前，咱們須要添加一個默認的純色背景值，這個值做爲不支持漸變背景的瀏覽器的備用色。

改變線性漸變背景的方向

默認狀況下，線性漸變是由上至下漸變的，從第一個色值過分到第二個色值。但咱們能夠經過在色值前加關鍵字來改變方向。例如咱們但願從左到右漸變，咱們就能夠經過設置關鍵字值to right來定義。關鍵字值也能夠組合使用，若是咱們但願從左上角至右下角漸變，咱們就能夠經過設置關鍵字值to right bottom來定義。

div {
  background: #466368;
  background: linear-gradient(to right bottom, #648880, #293f50);
}

clipboard.png

若是咱們設置斜線漸變背景的元素不是一個方形元素，那麼就不是直接從一個角到另外一個角漸變。相對的，它會找到元素的中心，在直角放置錨點，而後再根據值定義的值來設置漸變方向。這些角被稱爲「虛角」，由於它們並非實際存在的。Eric Meyer 在他的文章 線性漸變關鍵字 對這部分語法作了很好的概述。

除了關鍵字，還可使用角度值。若是咱們想要向左上角漸變，角度值設置爲315deg。若是咱們想要向右下角漸變，那麼角度值設置爲135deg。咱們可使用0到360之間的任何角度值。

放射性漸變背景

雖然線性漸變能夠完美的實現從一個方向至另外一個方向的漸變，但不少時候也須要用到放射性漸變。

放射性漸變和線性漸變的使用方法一致，同時也共享許多相同的值。但咱們須要在屬性background和background-image中使用radial-gradient()函數而非linear-gradient()函數

div {
  background: #466368;
  background: radial-gradient(#648880, #293f50);
}

clipboard.png

放射性漸變是從裏到外漸變，因此radial-gradient()函數的第一個色值就是元素絕對中心的色值，第二個色值是元素外圍的色值。瀏覽器會自動渲染兩個色值間的部分。

放射性漸變和線性漸變的主要不一樣之一，就是放射性漸變動加複雜和多變，咱們能夠設置位置，大小，半徑等，咱們將會講一些基本的值，讀者能夠自行深刻探究 放射性漸變， 他們提供了比這裏列舉出的更增強大的功能。

CSS3 漸變背景生成器
手寫CSS3漸變背景多少會以爲有些困難，尤爲你是個新手的話。不過好在市面上出現了一些 CSS3 漸變背景生成器。每一個生成器都有所不一樣，有些提供了更多的功能選項。 若是你感興趣的話，我建議你研究研究，找找最合適本身的生成器

漸變色結點

漸變色最少是從一個色值過渡到另外一個色值；但有些時候，咱們但願設置多個色值以便瀏覽器渲染。咱們能夠在函數中添加色值節點來實現，每一個色值用逗號隔開。

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880, #293f50);
}

clipboard.png

默認狀況下，每一個色值間的間距都是相等的，以過分色相連。若是但願控制色值間的距離，能夠爲每一個色值結點定義一個位置屬性值。位置屬性值是一個長度值，須要在色值後申明。

div {
  background: #648880;
  background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}

clipboard.png

除非另有定義，不然第一個色值結點的位置是0%，最後一個色值節點的位置是100%

漸變背景範例

在原先的成功信息彈窗中，把老的背景圖換成線性漸變背景。

在這裏咱們將會用到兩次background屬性，第一個background屬性值使用純色值用於兼容不支持漸變背景的瀏覽器。第二個background屬性值使用linear-gradient()函數定義一個從上至下的綠色漸變背景。

HTML

<div class="notice-success">
  Woo hoo! Congratulations, you did it!
</div>

CSS

.notice-success {
  background: #67b11c;
  background: linear-gradient(#72c41f, #5c9e19);
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px;
}

clipboard.png

練習

漸變背景全都介紹完了，如今讓咱們在網站中使用它。

  • 咱們將在class row-alt中生成漸變背景，由於class row-alt和row用到了相同的min-width值，因此咱們將其寫在一塊兒
.row,
.row-alt {
  min-width: 960px;
}
  • 接下來咱們在row-alt選擇器中設置一些新樣式，這些新樣式包含一個從左到右的綠色過渡爲黃色的漸變背景。
  • 咱們在row-alt中使用background:linear-gradient()填充合適的屬性值，並加上供應商前綴；同時也添加一個純色背景值用於兼容不支持漸變背景的瀏覽器。
  • 最後咱們添加上縱向的padding值，代碼以下所示：
.row,
.row-alt{
  min-width: 960px;
}
.row {
  background: #fff;
  padding: 66px 0 44px 0;
}
.row-alt {
   background: #cbe2c1;
   background: -webkit-linear-gradient(to right, #a1d3b0, #f6f1d3);
   background: -moz-linear-gradient(to right, #a1d3b0, #f6f1d3);
   background: linear-gradient(to right, #a1d3b0, #f6f1d3);
   padding: 44px 0 22px 0;
 }
  • 寫好row-alt樣式以後，咱們將其應用到分頁裏。目前咱們全部的分頁都有一個含有class container的<section>元素。而這些<section>元素內都有一個包含頁面標題的<h1>元素。
  • 咱們須要像更新主頁的<section>元素同樣更新這些<section>元素。咱們爲每一個class爲container的<section>元素包裹一個 class爲row-alt的<section>元素，同時爲了更好的語義話，將原有的<section>元素替換爲<div>元素。
  • 更新後的頁面代碼以下所示：
<section class="row-alt">
  <div class="container">

    <h1>...</h1>

  </div>
</section>
  • 因爲咱們正在更新分頁，正好改一改它們的介紹信息和引導信息，使其更具吸引力。咱們在以前提到的<h1>元素內嵌入一個段落元素用以編寫介紹信息。以speakers.html頁面爲例，代碼以下所示：
<section class="row-alt">
  <div class="container">

    <h1>Speakers</h1>

    <p>We&#8217;re happy to welcome over twenty speakers to present on the industry&#8217;s latest technologies. Prepare for an inspiration extravaganza.</p>
  
  </div>
</section>
  • 除了添加段落元素外，咱們還能夠更改一些樣式。在現有的class爲container的<div>元素上再添加一個classlead,能夠在class爲row-alt的直接子元素中找到它。修改後代碼以下所示：
<section class="row-alt">
  <div class="lead container">
    
    ...

  </div>
</section>
  • 完成後，咱們將全部<div>元素中的文本設置居中對齊。同時也爲每一個<div>元素中的段落元素都增大font-size和line-height設置。
  • 咱們在main.css文件中的Typography區塊下劃分一個Leads區塊用以添加這部分樣式：
/*
  ========================================
  Leads
  ========================================
*/

.lead {
  text-align: center;
}
.lead p {
  font-size: 21px;
  line-height: 33px;
}
  • 如今咱們網站分頁的介紹信息上也渲染了以前設置好的漸變背景。查看下全部的分頁，確保它們都更新了內容、標題和段落。

clipboard.png

演示源代碼

這是練習的源代碼。在線預覽 或 點擊下載

同時設置多張背景圖

在很長一段時間內，一個元素只容許添加一張背景圖，這對頁面的設計增長了至關多的約束條件。幸運的是，在CSS3中，咱們可使用background或background-image屬性在一個元素中添加多個背景圖，這些背景圖值只須要用逗號隔開。

背景圖值的第一個值是渲染在最上面的背景圖，最後一個值是渲染在最下面的背景圖，這兩個值之間的任何背景圖都根據順序渲染。如下是在<div>元素上同時使用三張背景圖的示例：

div {
  background:  url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;
}

上面的代碼中咱們使用了簡寫值，同時將多個背景圖值串在一塊兒。這些簡寫值也能夠都用開隔開，分別寫在background-image，background-position,和background-repeat屬性中。

多背景圖示例

如今咱們再次回到成功信息彈窗模塊，將背景圖和線性漸變背景組合起來。

咱們須要將兩個值都寫在第二個background屬性上。 第一個值咱們選擇圖片，第二個值選擇線性漸變，兩個值之間用逗號隔開。

HTML

<div class="notice-success">
  Woo hoo! Congratulations, you did it!
</div>

CSS

.notice-success {
  background: #67b11c;
  background: url("tick.png") 20px 50% no-repeat, linear-gradient(#72c41f, #5c9e19);
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 15px 20px 15px 50px;
}

clipboard.png

探索新的背景屬性

除了漸變背景和多背景圖，CSS3還引入了三個新樣式屬性：background-size，background-clip和background-origin。

background-size屬性能讓咱們控制背景圖的大小，而background-clip和background-origin使咱們可以控制圖片哪裏須要被裁剪，須要在元素的哪一部分顯示（例如在邊框內顯示或者在內邊距內顯示)。

background-size

background-size容許咱們具體定義一張背景圖的大小，這個屬性接受一些不一樣類型的值，包括長度單位值和關鍵字值。

使用長度單位值時，咱們能夠定義一個寬度值和一個高度值，兩個值之間用空格隔開。第一個值設置圖片的寬度，第二個值設置圖片的高度。值得注意的是，使用百分比值的時候，這些值是根據元素的大小來渲染的，而非圖片的原大小。

所以，將background-size屬性值設置爲100%會使背景圖填充元素的寬，若是沒有填寫第二個值，那麼圖片的高度會自動根據高寬比設置。

關鍵字值auto表示自動根據圖片的大小比例設置背景圖。例如，咱們想要爲元素設置一個高度佔比爲75%的背景圖，寬度根據圖片比例展現，那麼咱們能夠將background-size值設置爲auto 75%

div {
  background: url("shay.jpg") 0 0 no-repeat;
  background-size: auto 75%;
  border: 2px dashed #9799a7;
  height: 240px;
  width: 200px;
}

clipboard.png

cover&contain

background-size除了能夠設置長度單位值之外，還能夠設置關鍵字值例如cover和contain

值cover會使圖片原有比例不變的狀況下，縮放至合適的大小填滿整個元素的背景，因此使用cover值常常會出現圖片溢出被裁剪的狀況。

值contain會使圖片原有比例不變的狀況下，大小調整到徹底包含在元素的高寬內。與cover值不一樣的是，contain所渲染的圖都是完整的，但常常不能佔滿整個元素的背景空間。

使用cover和contain值時可能致使圖片失真，好比當圖片被拉昇後高寬超過它們原有的大小時。因此在使用這兩個值時須要注意樣式是否知足需求。

background-clip & background-origin

background-clip設置圖片須要覆蓋的位置，background-origin設置background-position的起始位置。這兩個新屬性引入了三個共用的關鍵字值：border-box、padding-box和content-box

div {
  background: url("shay.jpg") 0 0 no-repeat;
  background-clip: padding-box;
  background-origin: border-box;
}

background-clip的默認值爲border-box，表示背景圖拓展至邊框區域。background-origin的默認值是padding-box，表示圖片的起始位置爲元素的內邊距

clipboard.png

border-box表示背景填充值至邊框區域

clipboard.png

padding-box表示背景在內邊距內填充

clipboard.png

content-box表示背景填充不包含內邊距和邊框區域

咱們第一次提到這三個值是盒子模型中box-sizing的屬性值，它們的意義並無發生改變，但不一樣屬性中產生做用有所不一樣。

總結

在頁面中添加背景和漸變可讓咱們把色彩放在設計的最前線。這些特性和功能也有助於咱們對內容進行分組，改進頁面的總體佈局。

重溫下這節課咱們所學的內容：

  • 怎麼樣爲元素添加背景色和背景圖
  • 怎麼實現CSS的線性漸變和放射性漸變
  • 怎麼樣在單一元素上設置多個背景圖
  • CSS3容許咱們設置背景圖的大小，顯示區域和原點。

添加背景色，漸變背景以及背景圖給予咱們很大的可能去提高網站的總體設計。接下來咱們會很快學習到怎麼樣在頁面中添加圖片(非背景圖)和其餘的媒體,以及怎麼建立語義化列表

文章來源

https://learn.shayhowe.com/ht...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程