只用1個div，你能用CSS繪制：正3、4、5、6、7、8邊形嗎？

你一個div，你能用CSS繪制一個正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形嗎？

今天我們來玩一個有趣的CSS實驗，想象下，只用一個div，你能用CSS繪制一個正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形嗎？今天筆者帶著大家一起動手實踐下這個有趣的聯系，由于正多邊形用到不少三角函數計算，為了方便計算，這里正多邊形統一設定為100px，為啥只做到正八邊形？因為就一個div最多只能做到正八邊形。

正三角形

正三角形不需要用到偽元素，只需要設定div本身的邊框寬度即可產生，先來看一下正三角形的邊長與中線，若邊長為100px，則中線四舍五入就是87px ( 100 x sin(60) = 87 )。

因此我們要將div的長寬都設為0，接著把底部border的寬度設為87px，左右的border寬度設為50px (顏色設為透明transparent )，就可以做出一個漂亮的三角形。

width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095;

正方形

正方形應該是最簡單的，只要設定長寬設定為同樣數值就可以了，不過其實還有另外兩種方法，第一種你可以把長寬設為0，把上下左右的border設為50px也可以，第二種則是高度設為0，寬度設為100px，然后某個邊寬也設為100，都是可以的。

.a{
width:100px;
height:100px;
background:#c00;
}
.b{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:#095;
}
.c{
width:100px;
height:0;
border-width:0 0 100px;
border-style:solid;
border-color:#069;
}

正五邊形

正五邊形就需要進入基本的三角函數領域了，其實知道了原理還是蠻簡單的。讓我們先把正五邊形分解，用原本的div作為上方的三角形，然后用一個偽元素制作下方的梯形，因為正五邊形每邊的夾角為108度，所以可以藉由三角函數計算出上方三角形的高度為59px ( 100 x cos(54) )，寬度為192px ( 100 x sin(54) x 2 )，下方梯形的高度為95px ( 100 x sin(72) )，長邊的寬度跟上面的三角形一樣都是192px。

了解原理之后，就可以利用偽元素來搭配制作啰！

.a{
 position:relative;
 width:0;
 height:0;
 border-width:0 81px 59px;
 border-style:solid;
 border-color:transparent transparent #069;
}
.a:before{
 position:absolute;
 content:"";
 top:59px;
 left:-81px;
 width:100px;
 height:0;
 background:none;
 border-width:95px 31px 0;
 border-style:solid; 
 border-color:#069 transparent transparent;
 }

正六邊形

正六邊形的每個夾角是120度，如果以純CSS的方向來看的話，就是把正五邊形上面的三角形改變一下，就可以做出正六邊形，也就是變成上下兩個梯形的組合而已，梯形的長邊為200px ( 100 x cos(60) x 2 + 100 )，梯形的高度為87px ( 100 x sin(60) )。

所以只要把正五邊形的CSS稍作修改就可以做出正六邊形了。

.a{
 position:relative;
 width:100px;
 height:0;
 border-width:0 50px 87px;
 border-style:solid;
 border-color:transparent transparent #f80;
}
.a:before{
 position:absolute;
 content:"";
 top:87px;
 left:-50px;
 width:100px;
 height:0;
 background:none;
 border-width:87px 50px 0;
 border-style:solid; 
 border-color:#f80 transparent transparent;
 }

正七邊形

正七邊形開始就必須再使用after 這個偽元素了，因為正七邊形必須要拆解為三個區塊，分別是用原本的div 作為上面的三角形，一個偽元素作為中間的梯形，然后另一個偽元素作為底部的梯形，正七邊形的夾角比較特殊不是整數，而是128又4/7 度，大概取到小數第二位是128.57，所以計算起來結果就如下圖所示，重點就是必須要清楚地知道長寬是多少。

有了長寬之后，就開始用CSS來寫啰！

.a{
 position:relative;
 width:0;
 height:0;
 border-width:0 90px 43px;
 border-style:solid;
 border-color:transparent transparent #09c;
}
.a:before{
 position:absolute;
 content:"";
 top:140px;
 left:-112px;
 width:100px;
 height:0;
 border-width:78px 62px 0;
 border-style:solid; 
 border-color:#09c transparent transparent;
 }
 .a:after{
 position:absolute;
 content:"";
 top:43px;
 left:-112px;
 width:180px;
 height:0;
 border-width:0 22px 97px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #09c;
 }

正八邊形

正八邊形其實就是把正七邊形上面的三角形變成梯形，然后中間的梯形變成矩形就搞定了，正八邊形的夾角為135 度，計算出來的各個區域長寬如下圖。

同樣的了解原理，CSS做起來就簡單多啰！

.a{
 position:relative;
 width:100px;
 height:0;
 border-width:0 71px 71px;
 border-style:solid;
 border-color:transparent transparent #f69;
}
.a:before{
 position:absolute;
 content:"";
 top:171px;
 left:-71px;
 width:100px;
 height:0;
 border-width:71px 71px 0;
 border-style:solid; 
 border-color: #f69 transparent transparent;
 }
 .a:after{
 position:absolute;
 content:"";
 top:71px;
 left:-71px;
 width:242px;
 height:0;
 border-width:0 0 100px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #f69;
 }

加點料：動起來！

以上就是純粹利用CSS做出來的單一div的正多邊形變換，是不是很好玩，一個div能做出來這么多形狀，是不是很過癮，不過癮的話，我們加點料來點動畫，其實加上動畫效果，就可以做出像下面范例這個樣子的變換動畫啰！不過下面的范例筆者再最外層另外用一個div進行包裹，避免因為大小的變換造成銜接處的不自然，大家可以參考看看喔！

css部分

 body{
 margin:100px;
 }
 .s{
 position:absolute;
 -webkit-animation:s 5s infinite linear alternate;
 }
 .a{
 position:relative;
 width:0;
 height:0;
 border-width:0 50px 87px ;
 border-style:solid;
 border-color:transparent transparent #095;
 -webkit-animation:a 5s infinite linear alternate;
 }
 .a:before,.a:after{
 position:absolute;
 content:"";
 border-width:0;
 border-style:solid;
 }
 .a:before{
 -webkit-animation:ab 5s infinite linear alternate;
 }
 .a:after{
 -webkit-animation:af 5s infinite linear alternate;
 }
 @-webkit-keyframes a{
 0%,5%{
 width:0;
 height:0;
 border-width:0 50px 87px ;
 border-color:transparent transparent #095;
 }
 23%{
 width:0;
 height:0;
 border-width:0 50px 0 ;
 border-color:transparent transparent #c00;
 }
 42%{
 width:0;
 height:0;
 border-width:0 81px 59px;
 border-color:transparent transparent #069;
 }
 61%{
 width:100px;
 height:0;
 border-width:0 50px 87px;
 border-color:transparent transparent #f80;
 }
 80%{
 width:0;
 height:0;
 border-width:0 90px 43px;
 border-color:transparent transparent #09c;
 }
 95%,100%{
 width:100px;
 height:0;
 border-width:0 71px 71px;
 border-color:transparent transparent #f69;
 }
 }
 @-webkit-keyframes ab{
 0%,5%{
 top:87px;
 left:-50px;
 width:100px;
 height:0;
 background:#095;
 border-width:0;
 border-color:#095 transparent transparent;
 }
 22.99%{
 top:0;
 left:-50px;
 width:100px;
 height:100px;
 background:#c00;
 border-width:0;
 border-color:#c00 transparent transparent;
 }
 23%{
 top:0;
 left:-50px;
 width:100px;
 height:0;
 background:none;
 border-width:100px 0 0;
 border-color:#c00 transparent transparent;
 }
 42%{
 top:59px;
 left:-81px;
 width:100px;
 height:0;
 background:none;
 border-width:95px 31px 0;
 border-color:#069 transparent transparent;
 }
 61%{
 top:87px;
 left:-50px;
 width:100px;
 height:0;
 border-width:87px 50px 0;
 border-color:#f80 transparent transparent;
 }
 80%{
 top:140px;
 left:-112px;
 width:100px;
 height:0;
 border-width:78px 62px 0;
 border-color:#09c transparent transparent;
 }
 95%,100%{
 top:171px;
 left:-71px;
 width:100px;
 height:0;
 border-width:71px 71px 0;
 border-color: #f69 transparent transparent;
 }
 }
 @-webkit-keyframes af{
 0%,61%{
 top:87px;
 left:-50px;
 width:200px;
 height:0;
 border-width:0;
 background:none;
 border-color:transparent transparent #f80;
 }
 80%{
 top:43px;
 left:-112px;
 width:180px;
 height:0;
 border-width:0 22px 99px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #09c;
 }
 95%,100%{
 top:71px;
 left:-71px;
 width:242px;
 height:0;
 border-width:0 0 100px;
 background:none;
 border-style:solid;
 border-color:transparent transparent #f69;
 }
 }
 @-webkit-keyframes s{
 0%,5%{
 -webkit-transform:translateX(0) translateY(0) scale(1);
 }
 23%{
 -webkit-transform:translateX(-15px) translateY(-10px) scale(.9);
 }
 42%{
 -webkit-transform:translateX(-50px) translateY(-20px) scale(.8);
 }
 61%{
 -webkit-transform:translateX(-70px) translateY(-25px) scale(.7);
 }
 80%{
 -webkit-transform:translateX(-80px) translateY(-25px) scale(.6);
 }
 95%,100%{
 -webkit-transform:translateX(-100px) translateY(-25px) scale(.5);
 }
 }

html部分

<div class="s">
 <div class="a"></div>
</div>

小節

今天的內容就到這里，我們的確用一個div，再結合三角函數的相關知識，一口氣繪制完了正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形，是不是很有趣呢。你不妨按照上述示例，親自動手試試哦。

為一個網頁程序員，頁面中有一個有橫向滾動條的DIV，如何把這個div的橫向滾動條的操作放到頁面橫向滾動條操作上，注意這個時候頁面本來是沒有橫向滾動條操作的，這個時候一般要不拖動頁面右側滾動條到DIV有橫向滾動條的地方，要不就剩下操作麻煩了，哈哈，當然還有Shift+鼠標滾輪可以滾動橫向滾動條；那個麻煩就像這個樣子，看下面

這里我們提供了一個更簡單的方式，這個有橫向滾動條的div的滾動條會一直停留在頁面下方，就像下面這樣

直接上代碼

<!DOCTYPE html>

<head>

<title>Scrollable DIV with Table</title>

<style>

/* Styles for the body and html */

body, html {

margin: 0;

padding: 0;

height: 100%;

width: 100%;

}

/* Styles for the div */

.scrollable-div {

width: calc(100% - 30px);

margin: 0 auto;

height: calc(100% - 60px);

overflow-x: auto;

overflow-y: hidden;

}

/* Styles for the table */

.wide-table {

width: 150%;

border-collapse: collapse;

}

.wide-table td, .wide-table th {

border: 1px solid black;

padding: 8px;

text-align: left;

}

/* Styles for fixed scrollbar */

.fixed-scrollbar {

width: calc(100% - 30px);

height: 20px;

position: fixed;

bottom: 0;

left: 50%;

transform: translateX(-50%);

overflow-x: scroll;

z-index: 1000;

}

.fixed-scrollbar .scroll-content {

width: 150%;

height: 100%;

}

</style>

</head>

<body>

在《三體》中，三體世界的恒星系統有三個太陽，這對于三體人來說是一種巨大的挑戰。而后羿射日的傳說中，后羿是一個神話人物，他使用神弓射下九個太陽，留下了一個太陽來照亮人間，射下九個，留下一個，9+1=10，這不就是妥妥的十體星系，有10個恒星的星系，就是我們現在的太陽系，以前的十體星系。

有沒有可能在《三體》中的三體星系和（十體星系）太陽系的后羿射日的傳說之間有某種直接的聯系，雖然后羿射日是中國古代神話中的故事，而三體世界是劉慈欣創作的虛構世界。

在《三體》中，人類面臨的問題是三個太陽的引力和惡劣的環境條件，而不是光粒打擊。光粒打擊是觀察者使用的一種毀滅性武器，它利用光子的特性進行攻擊，后羿射日和光粒打擊都涉及到對太陽的打擊，有那么點相同，有那么點意思了，遠距離打擊。

原來我們都是曾經的十體星人。

<tbody>

<tr>

<td>簡介，來介紹一下西游記中的人物</td>

</tr>

<tr>

<td>他是一位猴子精vr168,com后來成為了至高無上的齊天大圣。他勇猛無比，擁有變化身法和七十二變等神通，是唐僧取經路上的護法和得力助手。</td>

</tr>

<tr>

<td>他是一個出家人，被天上的佛祖派遣去西天取經。他非常虔誠，具有偉大的智慧和慈悲心，是四位主要取經人物中的領導者。</td>

</tr>

<tr>

<td>他原本是天宮的天蓬元帥，因為調皮搗蛋而被貶下凡間，被封為豬八戒。他雖然愚笨貪吃，但勇敢善戰，是取經路上的重要力量。</td>

</tr>

<tr>

<td>他原本是天宮的卷簾大將，因為一次冤案被貶下凡間，被封為沙僧。他沉默寡言，但忠誠堅定，擅長操控神通風沙，也是取經路上的重要成員。</td>

</tr>

<tr>

<td>他原本是龍宮的九龍之一，被貶下凡間化為白龍馬。他聰明機智，能夠變化形態，是唐僧取經的坐騎和忠實伙伴。</td>

</tr>

<tr>

<td>她是佛教菩薩，具有慈悲和智慧。觀音菩薩獲得佛祖的指示，派遣唐僧師徒去西天取經，同時給予他們保護和幫助。</td>

</tr>

<tr>

<td colspan="3">各種各樣的妖怪和妖魔。他們來自山川河流、洞府山洞、猛獸禽鳥等地方。他們試圖阻止唐僧取經，但最終被唐僧師徒所打敗。</td>

</tr>

<tr>

<td>他是佛教的創始人，被視為眾生的救世主。如來佛祖給予了唐僧師徒保護和指引，使他們成功地完成了取經之旅。</td>

</tr>

<tr>

<td colspan="3">八位神仙，分別是鐘離權、藍采和vr168,com何仙姑、鐵拐李、張果老、韓湘子、曹國舅和呂洞賓。他們各自具有特殊的神通和能力，在唐僧取經的過程中給予了他們幫助和指導。</td>

</tr>

<tr>

<td>他是唐朝的開國皇帝，也是唐僧的主要保護者和支持者。他派遣唐僧師徒去西天取經，并給予他們官方身份和護送。</td>

</tr>

<tr>

<td>她是一個妖怪，形象通常是美麗的女子。她常常以迷人的外表吸引唐僧，試圖阻止他們取經。然而，最終她被唐僧師徒所打敗。</td>

</tr>

<tr>

<td>他是道教神仙，擁有強大的法術和神通。在《西游記》中，他被描繪為一位幫助唐僧師徒的重要角色，提供了神器和法術支持。</td>

</tr>

<tr>

<td>孫悟空的師傅</td>

<td>他是一個名叫菩提祖師的道士，發現了孫悟空的潛力并收他為徒。他教導孫悟空法術和武藝，幫助他成為了眾神之王。</td>

</tr>

<tr>

<td>他是天界的最高統治者，被描繪為至高無上的神明。他在《西游記》中起到了重要的角色，給予唐僧師徒任務和保護，并解決了一些問題和困難。</td>

</tr>

<tr>

<td>他是一位知名的華語流行歌手和演員。他的音樂作品以抒情和溫暖的風格著稱，深受廣大觀眾的喜愛。他也參演了一些電影和電視劇作品。</td>

</tr>

<tr>

<td>他是中國著名的導演和編劇。他的作品以獨特的藝術風格和深入的人物描寫而聞名，多次獲得國內外的獎項和認可。他執導的電影包括《紅高粱》、《活著》和《英雄》等。</td>

</tr>

<tr>

<td>她是中國流行樂壇的天后級歌手，被譽為“天后”、“歌后”。她的音樂作品風格多樣，既有抒情的民謠，也有搖滾和流行的曲風。她的歌聲獨特而富有感染力。</td>

</tr>

<tr>

<td>他是香港著名的流行歌手和演員。他的音樂作品風格多樣，涵蓋了流行、搖滾、民謠等多種音樂類型。他的歌曲以深情款款的演唱風格和文字的深度而受到廣大聽眾的喜愛。</td>

</tr>

<tr>

<td>他是中國古代著名的詩人，被譽為“詩仙”。他的詩作多樣且充滿激情，常常表達對自然、人生和自由的熱愛。他的作品在中國文學史上占據重要地位，對后世詩人產生了深遠的影響。</td>

</tr>

<tr>

<td>他是中國歷史上重要的政治家和軍事家，三國時期魏國的開國皇帝。他以聰明才智和軍事策略著稱，對中國歷史產生了巨大影響。他的事跡被寫入了《三國演義》這部古代長篇小說中。</td>

</tr>

<tr>

<td>他是中國古代歷史上著名的將領，三國時期蜀國的重要將領。他以忠誠勇敢和戰略才能而著稱，被譽為“龍的傳人”。他的事跡也被寫入了《三國演義》中。</td>

</tr>

<tr>

<td>他是中國古代歷史上重要的政治家和軍事家，三國時期吳國的創始人和開國皇帝。他以智慧和穩重的領導才能著稱，對中國歷史產生了重要影響。他的事跡也被寫入了《三國演義》中。</td>

</tr>

<tr>

<td colspan="4">這些人物在中國歷史和文學中扮演著重要的角色，他們的事跡和個性塑造了他們的形象，成為了后世的榜樣和學習對象。通過了解他們的故事，讀者可以更深入地了解中國的歷史和文化。</td>

</tr>

<tr>

<td>他是一位猴子精，后來成為了至高無上的齊天大圣。他勇猛無比，擁有變化身法和七十二變等神通，是唐僧取經路上的護法和得力助手。</td>

</tr>

<tr>

<td>他是一個出家人，被天上的佛祖派遣去西天取經。他非常虔誠，具有偉大的智慧和慈悲心，是四位主要取經人物中的領導者。</td>

</tr>

<tr>

<td>他原本是天宮的天蓬元帥，因為調皮搗蛋而被貶下凡間，被封為豬八戒。他雖然愚笨貪吃，但勇敢善戰，是取經路上的重要力量。</td>

</tr>

<tr>

<td>他原本是天宮的卷簾大將，因為一次冤案被貶下凡間，被封為沙僧。他沉默寡言，但忠誠堅定，擅長操控神通風沙，也是取經路上的重要成員。</td>

</tr>

<tr>

<td>他原本是龍宮的九龍之一，被貶下凡間化為白龍馬。他聰明機智，能夠變化形態，是唐僧取經的坐騎和忠實伙伴。</td>

</tr>

<tr>

<td>她是佛教菩薩，具有慈悲和智慧。觀音菩薩獲得佛祖的指示，派遣唐僧師徒去西天取經，同時給予他們保護和幫助。</td>

</tr>

<tr>

<td>各種各樣的妖怪和妖魔。他們來自山川河流、洞府山洞、猛獸禽鳥等地方。他們試圖阻止唐僧取經，但最終被唐僧師徒所打敗。</td>

</tr>

<tr>

<td>他是佛教的創始人，被視為眾生的救世主。如來佛祖給予了唐僧師徒保護和指引，使他們成功地完成了取經之旅。</td>

</tr>

<tr>

<td>八位神仙，分別是鐘離權、藍采和、何仙姑、鐵拐李、張果老、韓湘子、曹國舅和呂洞賓。他們各自具有特殊的神通和能力，在唐僧取經的過程中給予了他們幫助和指導。</td>

</tr>

<tr>

<td>他是唐朝的開國皇帝，也是唐僧的主要保護者和支持者。他派遣唐僧師徒去西天取經，并給予他們官方身份和護送。</td>

</tr>

<tr>

<td>她是一個妖怪，形象通常是美麗的女子。她常常以迷人的外表吸引唐僧，試圖阻止他們取經。然而，最終她被唐僧師徒所打敗。</td>

</tr>

<tr>

<td>他是道教神仙，擁有強大的法術和神通。在《西游記》中，他被描繪為一位幫助唐僧師徒的重要角色，提供了神器和法術支持。</td>

</tr>

<tr>

<td>孫悟空的師傅</td>

<td>他是一個名叫菩提祖師的道士，發現了孫悟空的潛力并收他為徒vr168。com他教導孫悟空法術和武藝，幫助他成為了眾神之王。</td>

</tr>

<tr>

</tr>

<tr>

<td>他是一位知名的華語流行歌手和演員vr168。com他的音樂作品以抒情和溫暖的風格著稱，深受廣大觀眾的喜愛。他也參演了一些電影和電視劇作品。</td>

</tr>

<tr>

</tr>

<tr>

<td>她是中國流行樂壇的天后級歌手，被譽為“天后”、“歌后”vr168。com她的音樂作品風格多樣，既有抒情的民謠，也有搖滾和流行的曲風。她的歌聲獨特而富有感染力。</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

在無垠宇宙中，十體星系靜靜懸浮，其恒星與行星構成了一個錯綜復雜的星際舞臺。

在穩定運行的十體星系中，藍星作為其中一顆行星，因為位置剛剛那么巧，一切都是巧合，在這顆叫藍星的行星上每天都升起一個太陽，東升西落，周而復始，只是每天的太陽都不同，都不是同一個太陽而已，所以該行星演化出了生命，正孕育著初級的生命和文明。

然而，一天，十個太陽突然同時升起，這對地球帶來了前所未有的災難。

這十個太陽同時升起的情景讓地球陷入混亂和恐慌之中。強烈的光照和極高的溫度給行星的生態系統和居民帶來了巨大的壓力。植被枯萎，水源干涸，動物群體大量死亡，生命的生存環境岌岌可危。

一切都是巧合，觀察者的飛船在這個時候意外的進入十體星系。

當觀察者的飛船穿越十體星系的邊界，進入十體星系時，船員們對這十個太陽也充滿好奇的心態，他們開始探索這個陌生的行星系統，他們在搜捕著生命的信息，他們細心觀察著十個太陽在太空中交織輝煌的景象，感嘆宇宙的壯麗和多樣性。

觀察者離開后，殘存的那個太陽成為了十體太陽系中唯一的光源，十體星系中有的行星陷入了黑暗之中，溫度劇烈下降，生態系統崩潰，生命消失，原本繁榮的行星逐漸變得荒涼和寒冷；有的離唯一的太陽更近了，成為了火的地獄。

一切都是巧合，隨著九個太陽的消失，在一段時間的爆炸和炙烤中后，地球重新陷入了單一太陽的光照下，東升西落，只是太陽再也不從正東方升起來了，人們什么也沒有發現；天空恢復了平靜，溫度逐漸回歸正常。地球的生態系統和生物多樣性開始逐漸恢復，幸存的人類也在廢墟中重建著家園。

觀察者無意中用光粒摧毀九個太陽的行動，為地球帶來了新的希望。這個殘酷的事件成為地球文明演化歷程中的一個轉折點，激發了人類對外部威脅和宇宙奧秘的探索欲望。

在這個過程中，在不可思議的巧合下，十體星系只剩下一個孤寂的太陽默默燃燒，投射出溫暖而柔和的光芒。曾經熊熊燃燒的九個太陽，如今化為無數塵埃的痕跡，無聲地漂浮在虛空之中。

這個意外的事件讓整個十體星系陷入短暫的混亂，原本每個行星的軌道被巨大的引力牽引著混亂而不穩定，如今變得穩定了。行星表面的溫度和氣候發生了巨大的變化，有些行星被推向了寒冷的邊緣，而另一些則被拖入了熾熱的火焰中。

十體星系的生態系統也經歷了瞬間的顛覆，曾經繁茂的森林和廣袤的海洋，如今面臨著空前的挑戰。生物種群受到巨大的壓力，適應環境的能力被嚴酷的試煉所考驗。許多物種無法適應新的溫度和輻射條件，面臨滅絕的威脅。

然而，就在這片混亂和苦難之中，一顆行星意外地獲得了幸運的機緣。它就是地球，曾經默默存在于太陽系的邊緣，如今因為九個太陽的滅亡而得以嶄露頭角。

地球的表面溫度逐漸平穩下來，氣候變得溫和而宜人。大氣中的輻射水平下降，讓生命得以在這片土地上茁壯成長。植物重新展開了綠意的叢生，森林和草原重新回歸了生機勃勃的狀態。動物們也在這個新的環境中重新繁衍，形成了多樣化的生態系統。

九個太陽被摧毀的故事在中華民族的神話傳說中被記錄了下來，后羿射日，后羿用奔跑，用弓箭射下了九個太陽，人類都在感謝后羿，拯救了大地。

在星際的遼闊空間中，文明的星光璀璨繼續閃耀。

九個太陽被摧毀的故事在中華民族的神話傳說中被記錄了下來，后羿射日，后羿用奔跑，用弓箭射下了九個太陽，人類都在感謝后羿，拯救了大地。

在星際的遼闊空間中，文明的星光璀璨繼續閃耀。

const scrollableDiv = document.querySelector('.scrollable-div');

let fixedScrollbar = createFixedScrollbar(); // 創建固定滾動條并默認隱藏

// 檢查滾動條是否應該顯示

function checkScroll() {

const rect = scrollableDiv.getBoundingClientRect();

const scrollbarHeight = getScrollbarHeight(scrollableDiv);

if (rect.bottom - scrollbarHeight < window.innerHeight) {

// 當div的滾動條不可見時

hideFixedScrollbar();

} else {

// 當div的滾動條完全或部分可見時

showFixedScrollbar();

}

// 創建固定滾動條

function createFixedScrollbar() {

const scrollbar = document.createElement('div');

scrollbar.className = 'fixed-scrollbar';

const content = document.createElement('div');

content.className = 'scroll-content';

scrollbar.appendChild(content);

document.body.appendChild(scrollbar);

// 同步fixedScrollbar和scrollableDiv的滾動位置

scrollbar.addEventListener('scroll', function() {

scrollableDiv.scrollLeft = scrollbar.scrollLeft;

});

scrollableDiv.addEventListener('scroll', function() {

scrollbar.scrollLeft = scrollableDiv.scrollLeft;

});

scrollbar.style.visibility = "hidden"; // 默認隱藏

return scrollbar;

}

// 顯示滾動條

function showFixedScrollbar() {

fixedScrollbar.style.visibility = "visible";

}

// 隱藏滾動條

function hideFixedScrollbar() {

fixedScrollbar.style.visibility = "hidden";

}

// 獲取滾動條的高度

function getScrollbarHeight(el) {

return el.offsetHeight - el.clientHeight;

}

// 監聽頁面滾動

window.addEventListener('scroll', checkScroll);

//---------------------給div增加鼠標拖動功能，限制在橫向和垂直滾動條范圍內

let isDragging = false;

let hasMoved = false;

let startX, startY;

let scrollLeftStart, scrollTopStart;

const DRAG_THRESHOLD = 10; // 設置為您希望的閾值

scrollableDiv.addEventListener('mousedown', (e) => {

isDragging = true;

hasMoved = false;

startX = e.pageX;

startY = e.pageY;

scrollLeftStart = scrollableDiv.scrollLeft;

scrollTopStart = scrollableDiv.scrollTop;

});

window.addEventListener('mousemove', (e) => {

if (!isDragging) return;

const xDistance = e.pageX - startX;

const yDistance = e.pageY - startY;

// 如果移動的距離超過閾值

if (Math.abs(xDistance) > DRAG_THRESHOLD || Math.abs(yDistance) > DRAG_THRESHOLD) {

hasMoved = true;

}

if (hasMoved) {

scrollableDiv.scrollLeft = scrollLeftStart - xDistance;

scrollableDiv.scrollTop = scrollTopStart - yDistance;

e.preventDefault(); // 防止文本選擇

}

});

window.addEventListener('mouseup', () => {

isDragging = false;

});

</script>

</body>

</html>

基本思路就是創建一個只有橫向滾動條的div2，當表格所在的div1的橫向滾動條可見時，頁面底部不顯示固定的橫向滾動條div2，而當不可見時，顯示固定的橫向滾動條div2，這個兩個滾動條保持同步。

果圖：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML+CSS3橫向導航欄</title>
<link rel="stylesheet" href="index.css" media="screen" type="text/css" />
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>This is Panel One</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>this is panel two</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>this is panel three</p>
</div>
<div class="panel">
<h2>This is Panel four</h2>
<p>this is panel four</p>
</div>
</div>
</article>
</body>
</html>

index.css

在線咨詢

上一篇：輕松實現HTML表格拖拽和排序，實現復雜交互式數據表變得更簡單
下一篇：如何在WordPress文章或頁面中加入Tab標簽頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

只用1個div，你能用CSS繪制：正3、4、5、6、7、8邊形嗎？

正三角形

正方形

正五邊形

正六邊形

正七邊形

正八邊形

加點料：動起來！

小節

您的項目需求