免費(fèi)配套視頻教程免費(fèi)配套視頻教程

教程配套源碼資源教程配套源碼資源" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 前端入門教程---從0開始通過一個(gè)商城實(shí)例手把手教你學(xué)習(xí)PC端和移動(dòng)端頁面開發(fā)

前端入門教程---從0開始通過一個(gè)商城實(shí)例手把手教你學(xué)習(xí)PC端和移動(dòng)端頁面開發(fā)

時(shí)間:2023-07-26 23:42:01 | 來源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2023-07-26 23:42:01 來源:網(wǎng)站運(yùn)營(yíng)

前端入門教程---從0開始通過一個(gè)商城實(shí)例手把手教你學(xué)習(xí)PC端和移動(dòng)端頁面開發(fā)第4章CSS文本樣式:

本教程案例在線演示

有路網(wǎng)PC端 有路網(wǎng)移動(dòng)端

免費(fèi)配套視頻教程

免費(fèi)配套視頻教程

教程配套源碼資源

教程配套源碼資源




字體樣式

屬性名 含義 舉例 font-family 設(shè)置字體類型 font-family:"隸書";

font-size 設(shè)置字體大小 font-size:12px;

font-style 設(shè)置字體風(fēng)格 font-style:italic;

font-weight 設(shè)置字體的粗細(xì) font-weight:bold;

font 設(shè)置所有字體屬性 font:italic bold 36px "宋體";

font-family屬性

.p1{ font-family: "隸書";}.p2{font-family: "黑體"; }.p3{ font-family: "Arial Black"; }?





font-size屬性

單位:px(像素)

.p1{font-size: 10; }?.p2{font-size: 20px;}?.p3{font-size: 30px;}?





font-style屬性

normal、italic和oblique




字體的粗細(xì)

font-weight屬性

normal 默認(rèn)值,定義標(biāo)準(zhǔn)的字體。

bold 粗體字體。










font屬性

字體屬性的順序:字體風(fēng)格→字體粗細(xì)→字體大小→字體類型

p span{font:oblique bold 12px "楷體";}





文本樣式文本屬性

屬性 含義 舉例 color 設(shè)置文本顏色 color:#00C;

text-align 設(shè)置元素水平對(duì)齊方式 text-align:right;

text-indent 設(shè)置首行文本的縮進(jìn) text-indent:20px;

line-height 設(shè)置文本的行高 line-height:25px;

text-decoration 設(shè)置文本的裝飾 text-decoration:underline;

文本顏色

color屬性 十六進(jìn)制方法表示顏色

color:#FFFFFF;?color:#000000;?color:FF0000;?color:#A983D8;?color:#95F141;?color:#339966;--- color:#396;?color:#EEFF66;--- color:#EF6;6位顏色值相鄰數(shù)字兩兩相同時(shí),可兩兩縮寫為1位




水平對(duì)齊方式

text-align屬性

值 說明

left 把文本排列到左邊。

right 把文本排列到右邊

center 把文本排列到中間

首行縮進(jìn)

text-indent:px

行高

line-height:px

文本裝飾

text-decoration屬性

值 說明

none 默認(rèn)值,定義的標(biāo)準(zhǔn)文本。

underline 設(shè)置文本的下劃線。

overline 設(shè)置文本的上劃線。

line-through 設(shè)置文本的刪除線。







垂直對(duì)齊方式

vertical-align屬性:middle、top、bottom

實(shí)踐-制作總裁致辭頁面







<!DOCTYPE html><html lang="en">?<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="css/common.css" rel="stylesheet" type="text/css" /></head>?<body> <h1>總裁致辭</h1> <h3>來源:來自東部數(shù)據(jù)</h3> <hr/> <p><img src="image/icon.jpg" alt="總裁致辭" width="176" height="108" /> 9月16日下午,東部控股副總裁、東部數(shù)據(jù)教育公司總裁張家林老師相繼來到浙江外國(guó)語學(xué)院和杭州學(xué)院, 分別向兩個(gè)高校的學(xué)子們分享了<strong>“懷揣夢(mèng)想 創(chuàng)造未來—服務(wù)外包人才的成長(zhǎng)之路”</strong>以及<strong>“互聯(lián)網(wǎng)+時(shí)代IT人才的成長(zhǎng)之路”</strong>的主題演講。 </p> <p>演講開始,張家林總裁指出隨著“互聯(lián)網(wǎng)+”時(shí)代的來臨,信息技術(shù)進(jìn)一步推動(dòng)服務(wù)外包需求變革, 以<strong>大數(shù)據(jù)、物聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)、云計(jì)算</strong>為代表的新一代信息技術(shù)正在加速與傳統(tǒng)產(chǎn)業(yè)融合發(fā)展, 基于信息化、互聯(lián)化的新興商業(yè)模式正在重新構(gòu)建。 接下來,張家林總裁提出IT及服務(wù)外包產(chǎn)業(yè)具有知識(shí)性、專業(yè)性、實(shí)踐性的特點(diǎn),決定了該產(chǎn)業(yè)必然是智力型、應(yīng)用型人才云集之地; 產(chǎn)業(yè)國(guó)際化亟需兼?zhèn)浼夹g(shù)和語言能力并能夠跨文化溝通的人才。 近年國(guó)內(nèi)畢業(yè)生數(shù)量持續(xù)快速增長(zhǎng),面臨著就業(yè)愈加困難的窘迫,同時(shí)企業(yè)和高校也陷入了人才需求和人才輸出的“囚徒困境”中。 面對(duì)嚴(yán)峻的就業(yè)現(xiàn)實(shí),張家林總裁著重給出了對(duì)大學(xué)生的建議:“不斷提升自己的軟技能和硬技能,做好職業(yè)生涯規(guī)劃,從現(xiàn)在開始職涯歷程的起點(diǎn); 聚焦IT方向,打好基礎(chǔ),積累相應(yīng)的工作經(jīng)驗(yàn),為就業(yè)做好充分準(zhǔn)備。” </p></body>?</html>

偽類

偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)。由于狀態(tài)是動(dòng)態(tài)變化的,所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí),它可能得到一個(gè)偽類的樣式;當(dāng)狀態(tài)改變時(shí),它又會(huì)失去這個(gè)樣式。

:hover

偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素。

語法:

標(biāo)簽名:偽類名{聲明;}?a:hover { color:#B46210; text-decoration:underline;?}

偽類應(yīng)用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> a { text-decoration: none; }? a:hover { text-decoration: underline; color: red; }? p:hover { font-size: 20px; font-weight: bold; } </style></head><body><a href="#">中華培訓(xùn)</a>?<p>產(chǎn)融教育</p></body></html>?

網(wǎng)頁背景顏色

background-color







列表樣式

去掉圓點(diǎn) list-style:none




Web字體

Font Awesome---提供可縮放矢量圖標(biāo)

官網(wǎng)地址:http://www.fontawesome.com.cn/







使用步驟

1.引入css

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">2.你可以通過設(shè)置CSS前綴fa和圖標(biāo)的具體名稱,來把Font Awesome 圖標(biāo)放在任意位置。

3.Font Awesome 被設(shè)計(jì)為用于行內(nèi)元素(我們喜歡用更簡(jiǎn)短的<i>標(biāo)簽,它的語義更加精準(zhǔn))。

4.如果您修改了圖標(biāo)容器的字體大小,圖標(biāo)大小會(huì)隨之改變。同樣也適用于顏色。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> <style> a{ font-size: 30px; color: red; text-decoration: none; } </style></head><body><p> <a href="#"><i class="fa fa-battery-2"></i>首頁</a> <a href="#"><i class="fa fa-camera-retro"></i>首頁</a></p></body></html>

關(guān)鍵詞:學(xué)習(xí),移動(dòng),把手,實(shí)例,教程,入門,通過,商城

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉