自己重構一個非常簡單的網頁
阿新 • • 發佈：2021-01-19
技術標籤：小專案經驗
剛剛學完HTML\CSS\以及JS之後看到網上有一個漁樂科技的官網比較簡潔而且好看就去聯絡重構了一下他的主頁。積累了一些知識
介面重構方面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" 整體的佈局分為了頂部欄（
- 頂部欄是比較容易，一個簡單的佈局
- 之後的圖片展示欄選擇了使用ul和li標籤來進行圖片的儲存，方便管理和之後的新增
- 文章展示區域有三部分採用flex將他們等分，而且在第一個欄中，將任榮橫向的用flex等分。
- 底部欄將左邊有右邊設定兩個div分割，用flex4/6分割
當然我們其實可以不規定大小和等分，而是利用每個中間的元素就擠壓使外部div發生大小的改變，這樣的網站更加的靈活而且佈局遇到改變，修改起來也比較方便
邏輯實現
<script>
setInterval(function () {
let arr = document.querySelectorAll('.change_img');//選擇選擇器
for (let i = 0; i < arr.length; i++) {
if (arr[i].classList.contains("active")) {
arr[i].classList.remove("active");
i = (i + 1) % arr.length;
arr[i].classList.add('active');
break;
}
}
}, 2000);
window.onscroll = function () {
//為了保證相容性，這裡取兩個值，哪個有值取哪一個
//scrollTop就是觸發滾輪事件時滾輪的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let width = document.body.clientWidth;
let header = document.getElementsByTagName('header');
scrollTop = parseInt(scrollTop);
console.log(parseInt(width*3/4));
console.log(scrollTop);
if(scrollTop > parseInt(width*3/4)){
console.log(header);
header[0].classList.add('white');
}
else{
header[0].classList.remove('white');
}
}
</script>
- 圖片的輪播我們使用一個
setInterval()h函式來實現，將它2秒一次重新整理，重新整理時通過控制給圖片新增類名來修改圖片的樣式，從而實現圖片的輪播
- 第二個樣式是頂部導航欄在滑動到text部分的時候由透明變為白色。
- 首先我們的header要具有
z-index: 1;屬性，置於文件流的0層（置頂） - 之後我們繫結滾輪滑動的監聽事件
window.onscroll = function () var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;獲取導航欄滾動的距離let width = document.body.clientWidth;獲取body的實際高度。- 根據除錯可以看到，當走過body的實際高度的3/4的時候應該改變，我們還是通過新增類名改變選擇器來改變樣式。
這樣我們就粗略的完成了主頁的繪製了