《網(wǎng)頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-05

上傳人：1*** IP屬地：廣東上傳時間：2025-03-19 格式：PPT 頁數(shù)：68 大?。?.06MB 積分：15 舉報 版權申訴

《網(wǎng)頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-05_第2頁

《網(wǎng)頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-05_第3頁

《網(wǎng)頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-05_第4頁

《網(wǎng)頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-05_第5頁

已閱讀5頁，還剩63頁未讀，繼續(xù)免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第五章CSS基礎12CSS初步CSS的概念CSS，通常稱之為層疊樣式表。樣式，就是指網(wǎng)頁中的內(nèi)容（文字、圖片）該以什么樣子（大小、顏色、背景、插入位置）顯示出來。層疊是指當CSS定義的樣式發(fā)生了沖突，將依據(jù)層次的先后順序來處理網(wǎng)頁中的內(nèi)容。HTML既能顯示網(wǎng)頁內(nèi)容，又能控制網(wǎng)頁樣式；而CSS就是讓網(wǎng)頁的樣式獨立出來，以方便批量處理我們上面提到的樣式變更問題?，F(xiàn)在CSS已經(jīng)廣泛應用于各種網(wǎng)頁的制作當中，在CSS的配合下，HTML如虎添翼，發(fā)揮出了更大的作用。

優(yōu)點：制作管理網(wǎng)頁非常方便可以更加精細的控制網(wǎng)頁的樣式樣式豐富多彩樣式靈活多樣，可以根據(jù)不同的情況選用不同的定義方法。34CSS初步<html><head><title>CSS初體驗</title><styletype="text/css"><!–h3{color:#FF0000}h5{font-style:italic}-->/*以上是CSS的定義*/</style></head></body><h3>(紅色)行業(yè)資訊</h3><h5>（斜體）消息稱“谷歌殺手”Cui2010-09</body></html>

CSS初體驗<style>用來說明定義哪類語法的樣式，通常放在<head></head>之間Type屬性指定使用CSS語法來定義網(wǎng)頁內(nèi)容的樣式防止代碼泄露56文字設置尺度單位和排版尺度單位：相對類型、絕對類型相對類型：相對于一個參考基礎而設立的尺度單位px：像素Em：以目前自負的高度為單位絕對類型：與分辨率無關尺度單位說明in（英寸）不是國際標準單位，極少用。cm（厘米）國際標準單位，較少用。mm（毫米）國際標準單位，較少用。pt（點數(shù)）最基本的顯示單位，較少用。pc（印刷單位）應用在印刷行業(yè)中，1pc=12pt7文字設置尺度單位和排版段落的首行縮進：控制首行縮進{text-indent:30}<html> <head> <title>首行縮進</title><styletype="text/css"></style> </head><body> 8<h4>中小企業(yè)CRM軟件市場現(xiàn)狀分析</h4><pid="p1">從目前情況來看，中小企業(yè)CRM市場日趨成熟，大型企業(yè)的CRM市場已經(jīng)飽和。</p><pid="p2">而中小企業(yè)用戶的CRM市場才剛剛起步，中小企業(yè)軟件市場的CRM、銷售自動化、訂單管理領域有望在以后實現(xiàn)快速增長。</p><pid="p3">中小企業(yè)將掀起CRM應用熱潮。這個熱潮是個水到渠成的，是時機成熟的必然結果，諸多因素將共同驅(qū)使中小企業(yè)的CRM應用熱潮。</p> </body></html>910文字設置尺度單位和排版段落的首行縮進：控制首行凸出{text-indent:-30}<html><head><title>首行凸出</title><styletype="text/css"></style></head><body>11<h3>中小企業(yè)CRM軟件市場現(xiàn)狀分析</h3><pid="ma1">中小企業(yè)將掀起CRM應用熱潮。這個熱潮是個水到渠成的，是時機成熟的必然結果，諸多因素將共同驅(qū)使中小企業(yè)的CRM應用熱潮。</p><pid="ma2">中小企業(yè)將掀起CRM應用熱潮。這個熱潮是個水到渠成的，是時機成熟的必然結果，諸多因素將共同驅(qū)使中小企業(yè)的CRM應用熱潮。</p><pid="ma3">中小企業(yè)將掀起CRM應用熱潮。這個熱潮是個水到渠成的，是時機成熟的必然結果，諸多因素將共同驅(qū)使中小企業(yè)的CRM應用熱潮。</p></body></html>1213文字設置尺度單位和排版字符間距和段落行距：字符間距{letter-spacing:10}<html> <head> <title>字符間距</title> <styletype="text/css">  </style> </head>14 <body> <pid="sp1"><b>企業(yè)新聞</b></p> <pid="sp2">慶迅騰科技公司成立一周年</p> <pid="sp3">Android第二款木馬現(xiàn)身</p><pid="sp4">前員工曝ZyngaCEO軼事：寧可抄襲也不愿創(chuàng)新</p><pid="sp5">福布斯：馬云是中國的喬布斯</p> </body></html>1516文字設置尺度單位和排版字符間距和段落行距：段落行距{line-height:2}段落的水平位置{text-align:center}段落的垂直位置{vertical-align：top}<html> <head> <title>段落行距</title> <styletype="text/css">  </style> </head> <body><h3>集團新聞</h3><pid="h1">迅騰國際學員項目大賽在津勝利召開</p><pid="h2">津、京、滬三地連動全面啟動大學生幫扶計劃</p><pid="h3">邵榮強接受人民網(wǎng)專訪</p> </body></html>1718文字設置尺度單位和排版化學方程式和數(shù)學式：{vertical-align:sub;font-size:6}{vertical-align:super;font-size:6}<html><head><title>文字上、下標的顯示</title><styletype="text/css"></style></head><body>H<fontid="v1">2</font>+O<fontid="v1">2</font>=H<fontid="v1">2</font>O<br><br>a<fontid="v2">2</font>+b<fontid="v2">2</font>=c<fontid="v2">2</font></body></html>1920文字設置背景設置文字的字體設置：{font-family:timesnewroman}21文字設置背景設置文字的字體效果：{font-style:oblique}22文字設置背景設置文字的粗細控制：{font-weight:900}<html> <head><title>文字的粗細控制</title> <styletype="text/css"></style></head>23<body><b>這是html標記直接作用的粗體字</b><pid="w1">這是CSS控制的字體粗細</p><pid="w2">這是CSS控制的字體粗細</p><pid="w3">這是CSS控制的字體粗細</p><pid="w4">這是CSS控制的字體粗細</p><pid="w5">這是CSS控制的字體粗細</p> </body></html>2425文字設置背景設置文字的大小控制：{font-size:10px}<html> <head> <title>文字的大小控制</title> <styletype="text/css">  </style> </head>26 <body> <pid="s1">這是CSS控制的不同大小文字</p> <pid="s2">這是CSS控制的不同大小文字</p> <pid="s4">這是CSS控制的不同大小文字</p> <pid="s5">這是CSS控制的不同大小文字</p> <pid="s3">這是CSS控制的不同大小文字</p> <pid="s6">這是CSS控制的不同大小文字</p> <pid="s7">這是CSS控制的不同大小文字</p> <pid="s8">這是CSS控制的不同大小文字</p> <pid="s9">這是CSS控制的不同大小文字</p> <pid="s10">這是CSS控制的不同大小文字</p> </body></html>2728文字設置背景設置文字的加線效果：{text-decoration:overline}<html><head><title>文字的加線效果</title><styletype="text/css"></style></head>

29<body><h2>CSS對線可以有3種效果</h2><p><pid="t1">在下面</p><pid="t2">在中間面</p><pid="t3">在上面</p><h2>HTML對線只有2種效果</h2><u>在下面</u><p><s>在中間</s><p></body></html>3031文字設置背景設置英文字母的大小寫轉(zhuǎn)換：英文字母的大小寫轉(zhuǎn)換{text-transform:capitialize}<html><head><title>英文字母的大小寫轉(zhuǎn)換</title><styletype="text/css"> </style></head>

32<body>

每個英文單詞的開頭字母轉(zhuǎn)化為大寫<pid="tr1">hello!welcometoxtkj!</p>

所有英文單詞轉(zhuǎn)化為大寫<pid="tr2">hello!welcometoxtkj!</p>

所有英文單詞轉(zhuǎn)化為小寫<pid="tr3">HELLO!WELCOMETOXTKJ!</p></body></html>3334文字設置背景設置英文字母的大小寫轉(zhuǎn)換：小寫字母轉(zhuǎn)換為大寫{font-variant:small-caps}<html><head><title>小寫英文字母轉(zhuǎn)換為大寫</title><styletype="text/css"></style></head><body>hello!welcometoxtgj!小寫英文<br><br><p>hello!welcometoxtgj!小寫英文轉(zhuǎn)換為大寫</p></body></html>3536文字設置背景設置列表中的符號：圖像符號{list-style:url(001.jpg)inside}{list-style:url(001.jpg)outside}<html><head><title>圖像符號</title><styletype="text/css"></style></head><body><imgsrc="images/zngg.jpg"><ulid="in">37<li>濱海迅騰科技集團榮獲天津市“河東..<li>天津卡巴斯基企業(yè)版開放空間代理商..<li>迅騰科技公司成功代理卡巴斯基企業(yè)..</ul><p><ulid="out"><li>Linux之父訪談錄：設計內(nèi)核只..<li>什么是全球網(wǎng)絡的主色調(diào)？

<li>開發(fā)者看騰訊開放平臺：對分成、審批..</ul></body></html>3839文字設置背景設置列表中的符號：各種序列符號{list-style-type:lower-roman}{list-style-image:url(001.jpg)}{list-style-position:outside}<html><head><title>列表符號</title> <styletype="text/css"></style></head><body><imgsrc="images/zngg.jpg"><ulid="l1"><li>濱海迅騰科技集團榮獲天津市“河東..40<li>天津卡巴斯基企業(yè)版開放空間代理商..<li>迅騰科技公司成功代理卡巴斯基企業(yè)..</ul><ulid="l2"><li>Linux之父訪談錄：設計內(nèi)核只..<li>什么是全球網(wǎng)絡的主色調(diào)？

<li>開發(fā)者看騰訊開放平臺：對分成、審批..</ul><ulid="l3"><li>天津迅騰濱海科技公司入圍天津市政..<li>天津迅騰濱?？萍脊救雵旖蚴姓?.<li>消息稱“谷歌殺手”Cuil永久性..</ul></body></html>4142文字設置矩形模塊化模塊邊界的設置：{Margin-top:30;Margin-right:30;Margin-left:30;Margin-bottom:30}<html><head> <title>邊界的設置</title> <styletype="text/css"></style></head><body>

迅騰濱海科技有限公司

<p>

簡稱：迅騰科技，(英文：TianjinBinhaiXunTengTechnologyCo.,Ltd.)，是天津濱海迅騰科技集團旗下一家以軟件研發(fā)、軟件外包為主導的科技型企業(yè)。</p></body></html>4344文字設置矩形模塊化模塊邊框的設置：控制模塊的邊框?qū)挾葅border-top-width:10}{border-right-width:20}{border-bottom-width:15}{border-left-width:5}{border-width:5}<html><head><title>控制模塊邊框的寬度</title><styletype="text/css"></style></head><body><tableborder="1">45</tr><tr><tdheight="31"id="w1">中小企業(yè)CRM軟件市場現(xiàn)狀分析</td></tr><tr><tdheight="33"id="w2">現(xiàn)代化企業(yè)的經(jīng)營戰(zhàn)略</td></tr><tr><tdheight="37"id="w3">煙業(yè)提高核心競爭力的必備武器</td></tr><tr><tdheight="33"id="w4">客戶關系管理的保險企業(yè)營銷創(chuàng)新分析</td></tr><tr><tdheight="37"id="w5">進行CRM建設是零售企業(yè)產(chǎn)生..</td></tr></table></body></html>

4647文字設置矩形模塊化模塊邊框的設置：控制模塊的邊框顏色{border-corlor:red}{border-left-corlor:red}<html><head><title>控制模塊邊框的顏色</title><styletype="text/css"></style></head><body><tableborder="1"cellpadding="0"cellspacing="0">48</tr><tr><tdheight="40"id="c1">助企業(yè)成功實施迅騰CRM</td></tr><tr><tdheight="40"id="c2">企業(yè)迅騰CRM項目持續(xù)發(fā)展的三要素</td></tr><tr><tdheight="40"id="c3">如何評估CRM系統(tǒng)效果？</td></tr><tr><tdheight="40"id="c4">客戶關系管理的保險企業(yè)營銷創(chuàng)新分析</td></tr><tr><tdheight="40"id="c5">進行CRM建設是零售企業(yè)產(chǎn)生..</td></tr></table></body></html>4950文字設置矩形模塊化模塊邊框的設置：控制模塊的邊框樣式{border-style:dotted}<html><head><title>控制模塊邊框的樣式</title><styletype="text/css"></style></head><body><tableborder="3"cellpadding="0"cellspacing="0"> <tr>51 <tdheight="40"id="c1">府資金支持項目名錄大全</td> </tr><tr><tdheight="40"id="c2">網(wǎng)站稅收優(yōu)惠概述</td></tr><tr><tdheight="40"id="c3">高新所得稅務問題關注</td></tr><tr><tdheight="40"id="c4">中國科技統(tǒng)計匯編</td></tr><tr><tdheight="40"id="c5">高新技術企業(yè)創(chuàng)新風險縱覽</td></tr></table></body></html>5253文字設置矩形模塊化模塊內(nèi)邊界的設置：{padding-top:30}{padding:30201020}<html> <head><title>模塊內(nèi)邊界的設置</title><styletype="text/css"></style></head> <body><tablewidth="239"height="251"border="1"cellspacing="0"><tr><tdwidth="196"id="p1">天津迅騰濱海科技有限公司</td>54</tr><tr><tdid="p2">天津迅騰濱?？萍加邢薰?lt;/td></tr><tr><tdid="p3">天津迅騰濱?？萍加邢薰?lt;/td></tr><tr><tdid="p4">天津迅騰濱?？萍加邢薰?lt;/td></tr><tr><tdid="p5">天津迅騰濱海科技有限公司</td></tr> </table> </body></html>5556背景設置背景顏色的設置紅色的文字：<html><head><title>設置文字的顏色</title><styletype="text/css"></style></head><body><font>

迅騰國際歡迎你！(紅色文字)</font></body></html>5758背景設置背景顏色的設置紅色的網(wǎng)頁背景，黃色的文字背景：{background-color:red}<html> <head> <title>文字的背景顏色</title> <styletype="text/css">  </style> </head> <body> <font>這是紅色的網(wǎng)頁背景，但文字背景是黃色的</font><br><br> <fontid=f>這是紅色的網(wǎng)頁背景，但文字是藍色，背景是黃色的</font> </body></html>5960背景設置背景圖片的設置網(wǎng)頁以及文字的圖片背景設置：{background-image:url(002.jpg)}<html><head><title>背景圖片的設置</title><styletype="text/css"></style> </head><body><font>天津迅騰濱?？萍加邢薰?lt;/font></body></html>6162背景設置背景圖片的設置背景圖片的并排設置：背景圖片的橫向平鋪{background-image:url(001.jpg);background-repeat:repeat-x}<html> <head> <title>背景圖片的橫向并排</title><styletype="text/css">

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

《網(wǎng)頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-05

文檔簡介

溫馨提示

最新文檔

評論

《網(wǎng)頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-05

文檔簡介

溫馨提示

最新文檔

評論

相關文檔