計(jì)算機(jī)小白的第一個(gè)小作品（HTML4+CSS3）
? 本文是作者看教學(xué)視頻后學(xué)習(xí)制作的第一個(gè)網(wǎng)站（0基礎(chǔ)，本科不是it專(zhuān)業(yè)）这揣。本文目的是記錄學(xué)習(xí)的一些內(nèi)容涝开，方便復(fù)習(xí)總結(jié)。
制作過(guò)程
先放上成品圖,由于還沒(méi)有學(xué)習(xí)怎么生產(chǎn)鏈接护赊，只能放上靜圖：
（里面是有動(dòng)畫(huà)的惠遏，可以360°連續(xù)旋轉(zhuǎn)，10s一周）
步驟：
1骏啰、輸入“节吮！”，出現(xiàn)提示后按“tab”判耕，就會(huì)自動(dòng)編輯出格式透绩。第二行l(wèi)anguage可以調(diào)語(yǔ)言，系統(tǒng)默認(rèn)為“en”壁熄，就是英語(yǔ)帚豪。要改為中文只需要吧其改為“zh”。
2草丧、首先在需要建立一個(gè)區(qū)域志鞍，在body下面建立一個(gè)“div id=八卦”。然后需要對(duì)這個(gè)區(qū)域進(jìn)行命令方仿，在head里面建立style固棚，style的解釋是：The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user. 意思就是說(shuō)style元素允許作者在文檔中嵌入樣式信息统翩。接著在style里面建立對(duì)“八卦”的修飾，這時(shí)候用#八卦{}此洲，代表的就是[id=八卦]厂汗，#就是id的符號(hào)。然后必須對(duì)八卦進(jìn)行修飾了呜师，輸入基本的h與w后娶桦，會(huì)得到一個(gè)矩形。這時(shí)候必須輸入border-radius：50%汁汗，這時(shí)候正方形就會(huì)變成圓形衷畦，長(zhǎng)方形會(huì)變成橢圓。這里那些基本的參數(shù)我就直接上圖知牌，最重要的一點(diǎn)是記得做border祈争，也就是邊界，不然很難看出你的內(nèi)容在哪角寸，特別是對(duì)新手菩混，border是很重要的。
3扁藕、現(xiàn)在我們有個(gè)圓形了沮峡，首先要把它分為兩邊，一邊黑一邊白亿柑。八卦的黑白分割線(xiàn)是“S”型的邢疙，很難一下子畫(huà)出來(lái)，因此先用一條直線(xiàn)將其平均分割望薄。在八卦的div里面在新創(chuàng)建兩個(gè)div疟游，然后在style里面修飾。直接上圖
>是包含的意思式矫，指的是這個(gè)子div是指“八卦”這個(gè)div里面的。要注意position的問(wèn)題役耕。這時(shí)候邊框還不重合采转，這是因?yàn)橄到y(tǒng)內(nèi)置的問(wèn)題，這時(shí)候在style創(chuàng)建一個(gè)*{ box-sizing: border-box}指令（*的意思是所有）瞬痘，這時(shí)候border就會(huì)重合故慈。
4、接下來(lái)給兩個(gè)半圓填色框全，很簡(jiǎn)單的指令察绷，在兩個(gè)子div分別輸入background-color，一個(gè)黑一個(gè)白津辩，然后再把超過(guò)圓圈的部分隱藏起來(lái)拆撼，在#八股出輸入overflow：hidden容劳。再把所有的border刪除，然后調(diào)一下背景顏色闸度，在style中輸入body{}竭贩，然后輸入背景顏色。我選定的是淺白色#eee莺禁。這時(shí)候八卦還差兩個(gè)突出的黑白半圓形留量，很簡(jiǎn)單，在建立兩個(gè)div哟冬，并移動(dòng)到相應(yīng)的位置即可楼熄。最后再加上兩個(gè)圓形，步驟基本相似浩峡。直接上代碼圖：
5可岂、這時(shí)候八卦已經(jīng)基本的成型，但是他在左上角红符，我們需要把他移動(dòng)到中間青柄。這時(shí)候需要?jiǎng)?chuàng)建一個(gè)wrapper把它包裝起來(lái)。在body段预侯，創(chuàng)建div id=“八卦-wrapper”致开，然后在style里面對(duì)其進(jìn)行修飾。記得消除系統(tǒng)自帶的內(nèi)邊距與外邊距萎馅，在*里面輸入? margin: 0px双戳； padding: 0px。然后再在下面加入文字糜芳，這需要在body段繼續(xù)創(chuàng)建一個(gè)div飒货，包含在“八卦-wrapper”里面，但與“八卦”平行峭竣。記得在“八卦-wrapper”里面設(shè)置排列順序塘辅，輸入flex-flow: column;字體就會(huì)在圖形下面。具體如圖皆撩。
6扣墩、這時(shí)候已經(jīng)基本成型了，但是還差幾個(gè)點(diǎn)扛吞。首先沒(méi)有立體感呻惕，這很好解決，只要在style中的“#八卦”陣輸入box-shadow：滥比，然后再google中搜索box-shadow generator亚脆，調(diào)到你喜歡的樣式，直接copy就行了盲泛，在這里我用的是:?0px 0px 5px 5px rgba(0,0,0,0.75); 其次他的字體距圖案太近了濒持，這也很好解決键耕。只要在那個(gè)文字的div給他加個(gè)id=“八卦-文字”，然后在style中的新建#八卦-文字{}弥喉，在里面輸入 margin-top: 1em;即可郁竟。這時(shí)候的圖如下：
7、到這時(shí)就差最后加動(dòng)畫(huà)了由境。在style的“#八卦”里面加入animation：x 10s linear infinite棚亩。x是指令，還需要繼續(xù)命令虏杰。因此在style里面輸入@keyframes x{}讥蟆，具體如圖：
至此，就已經(jīng)完成了所有的代碼纺阔，附上總的代碼圖
