01
專業(yè)領(lǐng)域包括成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都商城網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā), 與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同,創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念,并將策略和執(zhí)行緊密結(jié)合,為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。
打開軟件
可以使用Dreamweaver或Visual studio軟件,比如打開VS軟件,如下圖所示:
02
創(chuàng)建一個DIV
然后在body主體中創(chuàng)建一個div名為【a】, div class="a"DIV/div,如下圖所示:
03
設(shè)置屬性
然后設(shè)置div的屬性,比如高度、寬度和顏色等等,如下圖所示:
04
背景漸變色
然后設(shè)置背景漸變色,代碼如下圖:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));
其中:linear-gradient()是用來創(chuàng)建線性漸變的語句。
05
預(yù)覽效果
點擊預(yù)覽圖標(biāo),在瀏覽器中的顯示效果圖如下所示:
1、新建一個html文件,命名為test.html。
2、在test.html文件內(nèi),使用font標(biāo)簽創(chuàng)建三行文字,分別用不同的方法給font字體設(shè)置顏色。
3、在test.html文件內(nèi),直接在font標(biāo)簽上,通過color屬性來設(shè)置字體的顏色。例如,設(shè)置font字體的顏色為紅色。
4、在test.html文件內(nèi),設(shè)置font標(biāo)簽的class屬性為myclass,主要用于下面通過該class來設(shè)置css樣式。
5、在test.html文件內(nèi),設(shè)置font標(biāo)簽的id屬性為myid,主要用于下面通過該id來設(shè)置css樣式。
6、在css標(biāo)簽中,設(shè)置類名為myclass的樣式,例如,設(shè)置color屬性為藍(lán)色(blue);設(shè)置id為myid的樣式,例如,設(shè)置color屬性為粉紅色(pink)。
7、在瀏覽器打開test.html文件,查看實現(xiàn)的效果。
線性漸變 - 從上到下(默認(rèn)情況下)
#grad {background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標(biāo)準(zhǔn)的語法 */
}
從左到右的線性漸變:
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 標(biāo)準(zhǔn)的語法 */
有兩種樣式,一種是線性漸變,一種是徑向漸變
線性漸變:background:linear-gradient(0deg,red,orange);0deg意思是漸變角度為0°
徑向漸變:background:linear-gradient(circle,red 0%,orange);circle的意思是徑向漸變的形狀是圓形,eclipse是橢圓形(默認(rèn)) 0%表示調(diào)整徑向漸變顏色節(jié)點不均勻分布.