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

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

今天我們來玩一個(gè)有趣的CSS實(shí)驗(yàn)，想象下，只用一個(gè)div，你能用CSS繪制一個(gè)正三角形、正方形、正五邊形、正六邊形、正七邊形、正八邊形嗎？今天筆者帶著大家一起動(dòng)手實(shí)踐下這個(gè)有趣的聯(lián)系，由于正多邊形用到不少三角函數(shù)計(jì)算，為了方便計(jì)算，這里正多邊形統(tǒng)一設(shè)定為100px，為啥只做到正八邊形？因?yàn)榫鸵粋€(gè)div最多只能做到正八邊形。

正三角形

正三角形不需要用到偽元素，只需要設(shè)定div本身的邊框?qū)挾燃纯僧a(chǎn)生，先來看一下正三角形的邊長與中線，若邊長為100px，則中線四舍五入就是87px ( 100 x sin(60) = 87 )。

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

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

正方形

正方形應(yīng)該是最簡單的，只要設(shè)定長寬設(shè)定為同樣數(shù)值就可以了，不過其實(shí)還有另外兩種方法，第一種你可以把長寬設(shè)為0，把上下左右的border設(shè)為50px也可以，第二種則是高度設(shè)為0，寬度設(shè)為100px，然后某個(gè)邊寬也設(shè)為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;
}

正五邊形

正五邊形就需要進(jìn)入基本的三角函數(shù)領(lǐng)域了，其實(shí)知道了原理還是蠻簡單的。讓我們先把正五邊形分解，用原本的div作為上方的三角形，然后用一個(gè)偽元素制作下方的梯形，因?yàn)檎暹呅蚊窟叺膴A角為108度，所以可以藉由三角函數(shù)計(jì)算出上方三角形的高度為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;
 }

正六邊形

正六邊形的每個(gè)夾角是120度，如果以純CSS的方向來看的話，就是把正五邊形上面的三角形改變一下，就可以做出正六邊形，也就是變成上下兩個(gè)梯形的組合而已，梯形的長邊為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 這個(gè)偽元素了，因?yàn)檎哌呅伪仨氁鸾鉃槿齻€(gè)區(qū)塊，分別是用原本的div 作為上面的三角形，一個(gè)偽元素作為中間的梯形，然后另一個(gè)偽元素作為底部的梯形，正七邊形的夾角比較特殊不是整數(shù)，而是128又4/7 度，大概取到小數(shù)第二位是128.57，所以計(jì)算起來結(jié)果就如下圖所示，重點(diǎn)就是必須要清楚地知道長寬是多少。

有了長寬之后，就開始用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;
 }

正八邊形

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

同樣的了解原理，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;
 }

加點(diǎn)料：動(dòng)起來！

以上就是純粹利用CSS做出來的單一div的正多邊形變換，是不是很好玩，一個(gè)div能做出來這么多形狀，是不是很過癮，不過癮的話，我們加點(diǎn)料來點(diǎn)動(dòng)畫，其實(shí)加上動(dòng)畫效果，就可以做出像下面范例這個(gè)樣子的變換動(dòng)畫啰！不過下面的范例筆者再最外層另外用一個(gè)div進(jìn)行包裹，避免因?yàn)榇笮〉淖儞Q造成銜接處的不自然，大家可以參考看看喔！

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>

小節(jié)

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

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

這里我們提供了一個(gè)更簡單的方式，這個(gè)有橫向滾動(dòng)條的div的滾動(dòng)條會(huì)一直停留在頁面下方，就像下面這樣

直接上代碼

<!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>

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

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

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

原來我們都是曾經(jīng)的十體星人。

<tbody>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

<td>他原本是天宮的天蓬元帥，因?yàn)檎{(diào)皮搗蛋而被貶下凡間，被封為豬八戒。他雖然愚笨貪吃，但勇敢善戰(zhàn)，是取經(jīng)路上的重要力量。</td>

</tr>

<tr>

<td>他原本是天宮的卷簾大將，因?yàn)橐淮卧┌副毁H下凡間，被封為沙僧。他沉默寡言，但忠誠堅(jiān)定，擅長操控神通風(fēng)沙，也是取經(jīng)路上的重要成員。</td>

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

<td>她是一個(gè)妖怪，形象通常是美麗的女子。她常常以迷人的外表吸引唐僧，試圖阻止他們?nèi)〗?jīng)。然而，最終她被唐僧師徒所打敗。</td>

</tr>

<tr>

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

</tr>

<tr>

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

<td>他是一個(gè)名叫菩提祖師的道士，發(fā)現(xiàn)了孫悟空的潛力并收他為徒。他教導(dǎo)孫悟空法術(shù)和武藝，幫助他成為了眾神之王。</td>

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

<td>他是中國著名的導(dǎo)演和編劇。他的作品以獨(dú)特的藝術(shù)風(fēng)格和深入的人物描寫而聞名，多次獲得國內(nèi)外的獎(jiǎng)項(xiàng)和認(rèn)可。他執(zhí)導(dǎo)的電影包括《紅高粱》、《活著》和《英雄》等。</td>

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

<td>他是中國古代歷史上重要的政治家和軍事家，三國時(shí)期吳國的創(chuàng)始人和開國皇帝。他以智慧和穩(wěn)重的領(lǐng)導(dǎo)才能著稱，對中國歷史產(chǎn)生了重要影響。他的事跡也被寫入了《三國演義》中。</td>

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

<td>她是一個(gè)妖怪，形象通常是美麗的女子。她常常以迷人的外表吸引唐僧，試圖阻止他們?nèi)〗?jīng)。然而，最終她被唐僧師徒所打敗。</td>

</tr>

<tr>

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

</tr>

<tr>

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

<td>他是一個(gè)名叫菩提祖師的道士，發(fā)現(xiàn)了孫悟空的潛力并收他為徒vr168。com他教導(dǎo)孫悟空法術(shù)和武藝，幫助他成為了眾神之王。</td>

</tr>

<tr>

</tr>

<tr>

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

</tr>

<tr>

</tr>

<tr>

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

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

在無垠宇宙中，十體星系靜靜懸浮，其恒星與行星構(gòu)成了一個(gè)錯(cuò)綜復(fù)雜的星際舞臺(tái)。

在穩(wěn)定運(yùn)行的十體星系中，藍(lán)星作為其中一顆行星，因?yàn)槲恢脛倓偰敲辞桑磺卸际乔珊希谶@顆叫藍(lán)星的行星上每天都升起一個(gè)太陽，東升西落，周而復(fù)始，只是每天的太陽都不同，都不是同一個(gè)太陽而已，所以該行星演化出了生命，正孕育著初級(jí)的生命和文明。

然而，一天，十個(gè)太陽突然同時(shí)升起，這對地球帶來了前所未有的災(zāi)難。

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

一切都是巧合，觀察者的飛船在這個(gè)時(shí)候意外的進(jìn)入十體星系。

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

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

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

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

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

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

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

然而，就在這片混亂和苦難之中，一顆行星意外地獲得了幸運(yùn)的機(jī)緣。它就是地球，曾經(jīng)默默存在于太陽系的邊緣，如今因?yàn)榫艂€(gè)太陽的滅亡而得以嶄露頭角。

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

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

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

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

let fixedScrollbar = createFixedScrollbar(); // 創(chuàng)建固定滾動(dòng)條并默認(rèn)隱藏

// 檢查滾動(dòng)條是否應(yīng)該顯示

function checkScroll() {

const rect = scrollableDiv.getBoundingClientRect();

const scrollbarHeight = getScrollbarHeight(scrollableDiv);

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

// 當(dāng)div的滾動(dòng)條不可見時(shí)

hideFixedScrollbar();

} else {

// 當(dāng)div的滾動(dòng)條完全或部分可見時(shí)

showFixedScrollbar();

}

// 創(chuàng)建固定滾動(dòng)條

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的滾動(dòng)位置

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

scrollableDiv.scrollLeft = scrollbar.scrollLeft;

});

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

scrollbar.scrollLeft = scrollableDiv.scrollLeft;

});

scrollbar.style.visibility = "hidden"; // 默認(rèn)隱藏

return scrollbar;

}

// 顯示滾動(dòng)條

function showFixedScrollbar() {

fixedScrollbar.style.visibility = "visible";

}

// 隱藏滾動(dòng)條

function hideFixedScrollbar() {

fixedScrollbar.style.visibility = "hidden";

}

// 獲取滾動(dòng)條的高度

function getScrollbarHeight(el) {

return el.offsetHeight - el.clientHeight;

}

// 監(jiān)聽頁面滾動(dòng)

window.addEventListener('scroll', checkScroll);

//---------------------給div增加鼠標(biāo)拖動(dòng)功能，限制在橫向和垂直滾動(dòng)條范圍內(nèi)

let isDragging = false;

let hasMoved = false;

let startX, startY;

let scrollLeftStart, scrollTopStart;

const DRAG_THRESHOLD = 10; // 設(shè)置為您希望的閾值

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;

// 如果移動(dòng)的距離超過閾值

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>

基本思路就是創(chuàng)建一個(gè)只有橫向滾動(dòng)條的div2，當(dāng)表格所在的div1的橫向滾動(dòng)條可見時(shí)，頁面底部不顯示固定的橫向滾動(dòng)條div2，而當(dāng)不可見時(shí)，顯示固定的橫向滾動(dòng)條div2，這個(gè)兩個(gè)滾動(dòng)條保持同步。

果圖：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML+CSS3橫向?qū)Ш綑?lt;/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

在線咨詢

上一篇：輕松實(shí)現(xiàn)HTML表格拖拽和排序，實(shí)現(xiàn)復(fù)雜交互式數(shù)據(jù)表變得更簡單
下一篇：如何在WordPress文章或頁面中加入Tab標(biāo)簽頁

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

正三角形

正方形

正五邊形

正六邊形

正七邊形

正八邊形

加點(diǎn)料：動(dòng)起來！

小節(jié)

您的項(xiàng)目需求