紹

最近寫小程序，但是小程序的接口得通過https的形式訪問，所以用nginx轉發了一下。想到Google搜索引擎會提高https網站的權重，索性把我的網站改造成同時支持http和https了。看效果

http形式訪問

https形式訪問

我是用LET’S ENCRYPT來生成證書的，這個應該是用的最多的一個工具，也很方便。

我直接參考了官方文檔上關于在CentOS 7上用nginx來讓網站支持https的教程
https://certbot.eff.org/lets-encrypt/centosrhel7-nginx

1.下載

sudo yum install certbot python2-certbot-nginx

2.執行命令
默認修改/usr/local/nginx/conf目錄下的nginx.conf文件

certbot --nginx -d www.erlie.cc

如果不在這個目錄可以用–nginx-server-root這個參數來指定

certbot --nginx --nginx-server-root=/yourpath -d www.erlie.cc	

如果要為多個域名生成的話

-d 域名1 -d 域名2

或者每次指定一個，執行多次
過程中會有2個選項1和2

如果選 1，則通過 HTTP 和 HTTPS 都可以訪問。
如果選 2，則所有通過 HTTP 來的請求，都會被 301 重定向到 HTTPS

中途中可能會遇到各種環境問題，Google解決即可。

我說一個我遇到的坑，我原來編譯的時候沒有選擇SSL module，所以我得重新編譯一下，編譯完成之后我是用如下命令重啟的

nginx -s reload

結果https訪問一直有問題，后來我才意識到。sbin目錄下重新生成的nginx得重啟才能生效。
nginx -s reload只是熱部署配置文件，二進制文件nginx并不生效

此時http://www.erlie.cc和https://www.erlie.cc就都可以訪問了

nginx.conf配置

server {
	listen       80;
	server_name  www.erlie.cc;

	#charset koi8-r;

	access_log  /usr/local/nginx/logs/access.log combined;

	location=/ {
		root   /product/new-blog-fe/dist/view;
		index  index.html;
	}


	location ~ .*\.html$ {
		root   /product/new-blog-fe/dist/view;
		index  index.html;
	}


	location / {
		proxy_pass  http://127.0.0.1:8080/;
   }
   

   location ~ .*\.(gif|jpeg|png|bmp|swf|flv|ico)$ {
		root   /product/new-blog-fe;
		if (-f $request_filename) {
		  expires 1d;
		  break;
	   }
   }

   location ~ .*\.(js|css)?$ {
		root   /product/new-blog-fe;
		if (-f $request_filename) {
		  expires 1d;
		  break;
	   }
   }


	#error_page  404              /404.html;

	# redirect server error pages to the static page /50x.html
	#
	error_page   500 502 503 504  /50x.html;
	location=/50x.html {
		root   html;
	}

	listen 443 ssl; # managed by Certbot
	ssl_certificate /etc/letsencrypt/live/www.erlie.cc/fullchain.pem; # managed by Certbot
	ssl_certificate_key /etc/letsencrypt/live/www.erlie.cc/privkey.pem; # managed by Certbot
	include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
	ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657

最后面的5行就是前面的命令自動幫你生成的，非常方便，都不用自己配置。
可以看到我把接口的請求都轉發到本地http://127.0.0.1:8080/，你應該猜到了這是一個Spring Boot項目

前端怎么寫？

為了讓前端在訪客通過http方式訪問的時候調用http接口。通過https訪問的時候調用https接口，我是這樣做的

nb.js

var conf={
    serverHot : window.location.origin
};
var _nb={
    request: function (param) {
        var _this=this;
        $.ajax({
            type       : param.method || 'get',
            url        : param.url || '',
            dataType   : param.type || 'json',
            data       : param.data || '',
            xhrFields  : {withCredentials: true},
            crossDomain: true,
            contentType: param.contentType || 'application/x-www-form-urlencoded;charset=UTF-8',
            success: function (res) {
            	typeof param.success==='function' && param.success(res.data, res.msg);
            },
            error: function (err) {
            	typeof param.error==='function' && param.error(err.statusText);
            }

        })
    },
    // 獲取服務器地址
    getServerUrl : function(path) {
        return conf.serverHot + path;
    }
}

module.exports=_nb;
123456789101112131415161718192021222324252627282930

window.location.origin為拿到https://www.erlie.cc類似這樣的請求地址，可以在瀏覽器自己試一下

user-service.js請求用戶相關的接口

var _nb=require('util/nb.js');

var _user={
    // 用戶登錄
    login : function(userInfo, resolve, reject){
        _nb.request({
            url     : _nb.getServerUrl('/user/login'),
            data    : userInfo,
            method  : 'POST',
            success : resolve,
            error   : reject
        });
    }
}
module.exports=_user;
123456789101112131415

userInfo為請求參數
resolve為調用成功后執行的函數
reject為調用失敗后執行的函數

自動續期

Let’s Encrypt 的證書90天就過期了，所以，你還要設置上自動化的更新腳本，最容易的莫過于使用 crontab 了。使用 crontab -e 命令加入如下的定時作業（每個月都強制更新一下）輸入

0 0 * * * certbot renew

鑒于很多人問我要付費專欄pdf版本，因為專欄不能在電腦閱讀，索性直接開源了，希望能幫助到各位小伙伴

免費領取

免費領取

免費領取

重要的事情說三遍。點擊我的頭像私信專欄即可

、什么是CSS3

如何學習

SEO搜索引擎優化

0. CSS是什么
0. Cascading Sheet層疊級聯樣式表，表現，網頁美化
1. CSS發展史：CSS1.0 CSS2.0 DIV + CSS HTML和CSS結構分離 CSS 2.1 CSS3.0
1. CSS怎么用
2. CSS選擇器
3. 美化網頁
4. 盒子模型
5. 浮動
6. 定位
7. 網頁動畫（菜鳥教程）

二、快速入門

規范：在<style></style>中寫CSS代碼

CSS的注釋是/**/

選擇器 {

聲明1;

聲明2；

}

在CSS文件里不用寫<style>標簽

CSS的優勢：

0. 內容和表現分離
1. 網頁結構表現統一可以復用
2. 樣式十分豐富
3. 建議使用獨立于html的css文件
4. 利用SEO，容易被搜索引擎搜索

三、CSS的三種導入方式

0. 行內樣式，在標簽元素中編寫一個style屬性，編寫樣式即可
1. <h1 style="color:red">我是標題</h1>有多個屬性用;分開
2. 內部樣式
3. 在<style></style>中的
4. 外部樣式
5. 寫在外部CSS文件的
6. 優先級：就近原則，誰里這個元素最近
7. 拓展：外部樣式兩種寫法
8. 鏈接式：屬于HTML的
9. 在head中<link rel="stylesheet" href="path">
10. 好處就是結構和樣式一起渲染出來
11. 導入式：屬于CSS2.1
12. <style>
    @import url("path");
    </style>
13. 缺點就是先渲染結構，在渲染樣式

四、選擇器

作用：選擇頁面上的某一個或者某一類元素

1.基本選擇器

0. 標簽選擇器
1. 標簽 {
   key:value;
   }
   標簽1，標簽2，.... {
   
   }
2. 類選擇器 class
3. <style>
   .類的名稱 {
   
   }
   </style>
   好處是可以多個標簽復用類，選擇所有class屬性一致的標簽，可以有多個用空格隔開
4. id選擇器
5. <style>
   #id名稱 {
   
   }
   </style>
   id必須保證全局唯一，一個id只能一個標簽使用
6. 優先級：id > class > 標簽

2.高級選擇器

0. 層次選擇器
0. 后代選擇器：后代選擇器用于選取某元素的后代元素
1. 父元素 后代元素 {
   
   }
2. 子選擇器：子元素選擇器（Child selectors）只能選擇作為某元素直接/一級子元素的元素
3. body>p {
   
   }
4. 相鄰兄弟選擇器：相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素
5. div+p
   {
   background-color:yellow;
   }
6. 通用選擇器：選取所有指定元素之后的相鄰兄弟元素
7. div~p
   {
   background-color:yellow;
   }

3.結構偽類選擇器

偽類：就是有一些條件

1.選擇第一個子元素

ul li:first-child {

}

2.選擇最后一個子元素

ul li:last-child {

}

3.選擇當前元素的父級元素的子元素的第一個，且是p，在本例中。這個是按照類型進行選擇

p:nth-child(1) {

}

4.選中父元素下的p元素的第二個，這個是按照順序選擇

p:nth-of-type(1) {

}

4.屬性選擇器

屬性選擇器的格式
1.屬性名：存在id屬性的元素 a[id]{

}
2.屬性名=屬性值：a[id=first]{

}
注意：=是絕對等于   *=是包含這個元素
3.a中href中以http開頭的 a[href^=http]{

}
注意：可以使用正則表達式

五、美化網頁

1.為什么要美化

0. 有效的傳遞界面信息
1. 美化網頁吸引用戶
2. 凸顯頁面的主題
3. 提高用戶的體驗

span標簽：重點要突出的字使用span標簽括起來

2.字體樣式

1.字體    font-family:字體1, 字體2,...;
2.字體大小  font-size:20px;
3.字體粗細  font-wigth:bold或者使用數字最大是900;
4.字體的顏色 color:顏色;
5.字體風格  font-style:italic;
綜合寫法：
font:字體粗細, 字體大小/字體行高, 字體, 字體顏色, 字體的;

3.文本樣式

1. 顏色   color
2. 文本對齊方式   text-slign:center;
3. 首行縮進 text-indent:2em;//1em代表一個字符
4. 行高   line-height:200px;行高和塊的高度一致，就可以上下居中
5. 下劃線  text-decoration: underline;
6. 中劃線  text-decoration: line-through;
7. 上劃線  text-decoration: overline;
8. 超鏈接偽類    
    a{
        默認顏色
    }
    a:hover {
        鼠標觸及的顏色
    }
    a:active {
        鼠標點擊未釋放的顏色
    }
9. 文本陰影 text-shadow:顏色 水平偏移 垂直偏移 模糊半徑;

4.列表樣式

<style>
    li {
        list-style:nonoe;  //列表去掉點
    }
</style>

5.背景圖像應用及漸變

背景圖片

background-image:url("path");
默認是平鋪的
background-repeat: ;
background-position:x y;
綜合寫法：
background:背景顏色 url("") x方向位置 y方向位置 平鋪 

背景顏色漸變

六、盒子模型

1.什么是盒子

• margin：外邊距
• padding：內邊距
• border：邊框
• 注意：body默認會有一個外邊距

2.邊框

0. 邊框的粗細
1. 邊框的顏色
2. 邊框的樣式

<style>
    form{
     border: 1px red solid;   
    }
</style>

3.外邊距

綜合寫法：
margin:上 下 左 右;
外邊距的妙用：居中元素
margin:0 auto;居中 前提：外面的元素是個塊元素，塊元素有固定的寬度 

內邊距一樣

盒子的計算方式，你這個元素到底多大?

元素的大小=margin +border + 內容的寬度

4.圓角邊框

border-radius: 左上 右上 右下 左下;

5.陰影

box-shadow:陰影樣子, x偏移量, y偏移量, 模糊半徑, 陰影顏色;

七、浮動

1.標準文檔流

自上而下的排布

行內元素可以被包含在塊級元素中，反之不可以

2.display

0. block轉換成塊元素
1. inline-block行內快元素，保持塊元素的性質，但是可以內聯，在一行
2. inline行內元素
3. none不顯示元素

3.浮動

1.浮動：會使元素向左或向右移動，其周圍的元素也會重新排列。

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文本流將環繞在它左邊：

2.相鄰的浮動元素：如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

3.清除浮動：元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側不能出現浮動元素。這樣既有浮動的效果，也有塊元素的效果

clear:right;右側不允許有浮動
clear:left;左側不允許有浮動
clear:both;兩側都不允許有浮動

float:right;右浮動
float:left;左浮動

4.父級元素邊框塌陷

浮動后，元素不在父級元素里

解決方案：

0. 增加父級元素的高度
1. 在浮動元素后增加一個空的div標簽，清除浮動
2. overflow，解決溢出問題，在父級元素中增加一個overflow屬性‘
3. 在父類添加一個偽類，:after
4. #father：after {
   content: '';
   diaplay: block;
   clear: both;
   }

5.對比

• display
• 方向不可控制
• float
• 浮動起來，會脫離文檔標準流，所以要解決父級元素邊框塌陷問題

八、定位

1.相對定位

相對于自己原來的位置，進行偏移

position: relative;
top: -20px;
botom: 20px;
left: 20px;
right: 20px;

相對定位的話，他原來的位置會被保留，不會脫離標準文檔流

2.絕對定位

0. 父級元素沒有定位的前提下，相對于瀏覽器定位
1. 父級元素有定位時，相對與父級元素

position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;

絕對定位后，他不在文檔標準流，原來的位置不保留

3.固定定位

position: fixed;
top: 10px;
bottom: 10px;
left: 20 px;
right: 20px;

相對于瀏覽器的位置，固定不動

4.z-index

就是把圖層置頂、置地

opacity:0.5;設置透明度

filter:alpha(opacity=0.5);

九、動畫

什么是CSS3動畫

• 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
• 您可以改變任意多的樣式任意多的次數。
• 請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同于 0% 和 100%。
• 0% 是動畫的開始，100% 是動畫的完成。
• 示例：
• @keyframes myfirst
  {
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  100% {background: green;}
  }
  
  @-webkit-keyframes myfirst /* Safari 與 Chrome */
  {
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  100% {background: green;}
  }

1.創建動畫

@keyframes規則是創建動畫，規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式

示例：

@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

2.把動畫綁定到一個選擇器上

使用@keyframes創建動畫，把他綁定到一個選擇器上，否則動畫不會有效果，指定至少把這兩個CSS3的動畫屬性綁定向一個選擇器：
1.規定動畫名稱
2.規定動畫的時長  不指定時長，動畫無效，因為默認的時長為0

示例：

把myfirst動畫綁定到div元素上，動畫時長5秒
div {
    animation: myfirst 5s;
}

3.CSS3動畫的屬性

十、過度

1.過度

CSS3中，我們為了添加某種效果可以從一種樣式轉變到另一個的時候

2.如何工作

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

要實現這一點，必須規定兩項內容：

• 指定要添加效果的CSS屬性
• 指定效果的持續時間。

示例：

div {
transition: width 2s;
}

3.多項改變

div {
transition: width 2s, height 2s transfrom 2s;
}

4.過度屬性

十一、CSS32D轉換

1.轉換

CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。

2.如何工作

轉換的效果是讓某個元素改變形狀，大小和位置。

3.2D轉換

1.translate(): translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。

示例：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()：在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

示例：

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()：該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數

示例:

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標準語法 */

4.skew(): 包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。

• skewX(<angle>);表示只在X軸(水平方向)傾斜。
• skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

示例：

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

4.3D轉換

1.rotateX()：圍繞其在一個給定度數X軸旋轉的元素。

示例：

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}

2.rotateY()：圍繞其在一個給定度數Y軸旋轉的元素。

示例：

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

3.轉換屬性

十二、彈性盒子

1.flex是什么

• flex是彈性布局，是一種非常流行的web頁面快速布局解決方案
• flex可以實現子元素在父元素中自動伸縮，特別適合移動端布局

2.flex術語

• 項目必須沿著主軸排列，所以布局的時候，第一件事就是確定好主軸
• 起始線與結束線，就是主軸的起點和終點，也就是兩端
• 交叉軸，依賴于主軸存在，不能單獨存在，垂直于主軸

3.容器屬性

4.項目屬性

5.創建flex容器和flex項目

• 給一個元素添加display: flex; 創建flex塊級容器，內部的子元素自動成為flex項目
• 或者給一個元素添加display: inline-flex; 創建flex行內容器， 內部子元素自動成為flex項目

6.設置容器主軸方向與多行容器

1.創建容器屬性

1.flex-direction屬性值

2.flex-wrap屬性值

3.flex-flow屬性值

flex-flow: 主軸方向 多行容器

2.容器中項目對齊方式

1.主軸項目對齊方式 justify-content屬性

主軸上要有剩余空間對齊才有效

2.交叉軸上的項目對齊方式align-items

注意

• 單行容器中，交叉軸上只有一個項目，所有剩余空間不需要在項目間分配
• 因此沒有像主軸對齊的三個屬性：space-between，spcae-around，space-evenly

3.多行容器的項目對齊方式

屬性：align-content

注意：多行容器中，交叉軸上可能會有多個項目，剩余空間在項目之間分配才有意義

多行容器也只是只有一個主軸和一個交叉軸，只是在主軸上放不下了換行形成的

3.單個項目對齊方式

1.設置單個項目在交叉軸上的對齊方式

屬性：align-self

• 如果項目設置了高度，則stretch值無效
• baseline：除非全部 項目與基線對齊，否則效果與起始線對齊是相同的

4.單個項目的排列順序

1.屬性order

用來調整每個項目在主軸上排列順序

屬性值為0，默認值按書寫順序顯式，屬性值為值越大越靠后顯示

5.單個項目的放大/縮小因子

1.設置項目在主軸 上的放大因子

flex-grow屬性

• 在主軸上存在剩余空間是，flex-grow才有效
• 該屬性的值，成為放大因子
• 常見屬性
• 0 默認值，不放大，保持原值
• n 放大因子，正整數

2.設置項目在主軸上的縮小因子

flex-shrink屬性

• 在主軸上空間容納不下所有項目時，flex-shrink才有意義
• 該屬性的值名稱為最小因子，
• 1 默認值，允許縮小適應主軸空間變化
• 0 不縮小，保持原始大小
• n縮小因子，正整數

3.設置項目在主軸上的計算計準尺寸

flex-basis屬性

• 再分配多余空間之前，項目暫居的主軸空間
• 瀏覽器根據這個屬性，計算主軸是否有多余空間
• 該屬性會覆蓋項目原始大小
• 該屬性會被項目最小高度/最小寬度值覆蓋
• auto 默認值項目原始大小
• px像素
• %百分比

優先級：項目大小<flex-basis<min-width/height

網站添加了https證書后，當http方式訪問網站時就會報404錯誤，所以需要做http到https的強制跳轉設置.
---------------一、采用nginx的rewrite方法---------------------
下面是將所有的http請求通過rewrite重寫到https上。
例如將所有的www.nihao.com域名的http訪問強制跳轉到https。
下面配置均可以實現：

server {
    listen 80;
    server_name www.nihao.com;
    index index.html index.php index.htm;

    access_log  /usr/local/nginx/logs/8080-access.log main;
    error_log  /usr/local/nginx/logs/8080-error.log;
    
    #重點在此
    if ($host ~* "^nihao.com$") {
    rewrite ^/(.*)$ https://www.nihao.com/ permanent;
    }

    location ~ / {
        root  html;
        index index.html index.php index.htm;
    }
}