文章目錄
- 場景
- 前置準備
- 修改樣式
- 官方屬性修改樣式
- CSS修改樣式
- 按鈕的高度height和border-radius
- Logo和文字布局
場景
需要用到谷歌的第三方登錄，登錄按鈕有自己的樣式。根據官方文檔：概覽 | Authentication | Google for Developers，提供兩種第三方登錄的API：HTML版和JS版。它們都使用的是封裝好的按鈕。也就是說，目前不能自己放置一個圖片，點擊它跳轉第三方登錄，而是只能在原有官方按鈕的基礎上對它的樣式進行修改。
ps：訪問谷歌文檔需要科學上網。
前置準備
根據文檔，引入客戶端庫：
如果不想總是訪問谷歌的庫，可以進入此鏈接，把對應的代碼復制到本地，本地引入庫或上傳到CDN引入
<script src="https://accounts.google.com/gsi/client" async></script>
根據文檔的生成 HTML 代碼 | Authentication | Google for Developers自動生成谷歌第三方登錄的代碼（這里的data-client_id隨便在sandbox上搜的）：
<div id="g_id_onload"data-client_id="414565162824-iolb7mcqbt5j4v86evnnenajdim87vhc.apps.googleusercontent.com"data-context="signin"data-ux_mode="popup"data-login_uri="http://localhost:3003"data-auto_prompt="false">
</div><div class="g_id_signin"data-type="standard"data-shape="rectangular"data-theme="outline"data-text="signin_with"data-size="large"data-logo_alignment="left">
</div>
看看效果：
修改樣式
是很好的CSS選擇器優先級練習
假設我們的目標是這樣：
那么我們需要修改它的寬高、border-radius、logo和文字的位置或布局等。
官方屬性修改樣式
“使用 Google 帳號登錄”HTML API 參考文檔 | Authentication | Google for Developers
googleBtn是自己加的類，用來改css。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style></style><body><scriptsrc="https://accounts.google.com/gsi/client?hl=en"async></script><divid="g_id_onload"data-client_id="414565162824-iolb7mcqbt5j4v86evnnenajdim87vhc.apps.googleusercontent.com"data-context="signin"data-ux_mode="popup"data-login_uri="http://localhost:3003"data-auto_prompt="false"></div><divclass="g_id_signin googleBtn"data-type="standard"data-shape="pill"data-theme="outline"data-text="signin_with"data-size="large"data-logo_alignment="left"data-locale="en_GB"></div></body>
</html>
CSS修改樣式
接下來是CSS修改樣式。
按鈕代碼如下：
按鈕的高度height和border-radius
對應位置：
.googleBtn > div > div > div[role="button"] {height: 48px;border-radius: 99px;
}
注意要加屬性選擇器，不然可能選擇器優先級不夠。
Logo和文字布局
logo：
.googleBtn > div > div > div[role="button"] > div > div{/*可以修改logo的width、height、margin等*/
}
文字：
這里是第一個span：
.googleBtn > div > div > div[role="button"] > div:nth-child(2) > span {}
它們的布局：
這里是flex布局，設置了justify-content: space-between;。如果想改：
.googleBtn > div > div > div[role="button"] > div:nth-child(2) {}
】紅黑樹深度剖析--手撕紅黑樹!)
