養(yǎng)殖企業(yè)網(wǎng)站模板新冠疫情最新情況最新消息
下面的代碼沒有考慮響應(yīng)式的效果，如果考慮的話還需要一些代碼進(jìn)行處理。
【注】當(dāng)時(shí)寫的時(shí)候僅考慮了 webkit 內(nèi)核的瀏覽器，如果是 IE 或者其他瀏覽器，請?jiān)黾宇~外的 CSS 樣式進(jìn)行控制。
<!DOCTYPE html>
<html>
<head><style>body, html {height: 100%;padding: 0;margin: 0;overflow: hidden;}.container {height: 100%;overflow-y: scroll;}/* 僅適用于Webkit瀏覽器（Chrome和Safari等） */::-webkit-scrollbar {width: 0.3em; /* 設(shè)置滾動(dòng)條寬度 */}::-webkit-scrollbar-track {background-color: transparent; /* 設(shè)置滾動(dòng)條軌道背景色 */}::-webkit-scrollbar-thumb {background-color: rgb(74, 144, 250); /* 設(shè)置滾動(dòng)條滑塊顏色 */border-radius: 4px; /* 設(shè)置滾動(dòng)條滑塊圓角 */}.image {height: 90vh; /* 沒有使用 100vh，主要是讓用戶直觀的看到下面還有一張圖 */background-size: cover;background-repeat: no-repeat;}/* 設(shè)置第一個(gè)圖片地址 */.image:nth-child(1) {background-image: url('test.jpg');}/* 設(shè)置第二個(gè)圖片地址 */.image:nth-child(2) {background-image: url('test.jpg');}</style>
</head>
<body>
<div class="container"><a href="https://www.baidu.com"><div class="image"></div></a><a href="http://www.qq.com"><div class="image"></div></a>
</div>
</body>
</html>顯示效果如下：
個(gè)人博客：Roc’s Blog