css課堂起筆記基礎(chǔ)依賴前10章HTML與CSS前臺(tái)前端頁(yè)面設(shè)計(jì)

1、20140826=基礎(chǔ)依賴（前 10 章）：HTML 與 CSS 前臺(tái)(前端)頁(yè)面設(shè)計(jì)/開(kāi)發(fā)：html+css+javascript(java述性的語(yǔ)言”)為什么叫前臺(tái)？語(yǔ)言，直譯為“java 描只需要客戶端的瀏覽器就可以運(yùn)行。阻擋了 java（）的運(yùn)行 。前臺(tái)的代碼/程序：一定是可以正?？截愊聛?lái)的。）網(wǎng)頁(yè)設(shè)計(jì)/開(kāi)發(fā)：程序開(kāi)發(fā)語(yǔ)言 (不是最主流)+（后端（：）數(shù)據(jù)庫(kù) sqlServer2005/2008為什么叫？這些開(kāi)發(fā)出來(lái)的程序必須裝載在“服務(wù)器”中才能夠運(yùn)行。的程序：因?yàn)樵诜?wù)器中，所以很難盜取。+(是目前開(kāi)發(fā)最受歡迎的搭檔)jQuery 非常流行，簡(jiǎn)單高效的語(yǔ)言風(fēng)格也基本與 java/c

2、/C+/javascript 相同。VB.netJava=著眼點(diǎn)：應(yīng)用（第 11 章）AjavaJavascript(jQuery)+html+CSS循環(huán)語(yǔ)句更象 C+/Cfor(i=0;i=j+5;i+;); ; ;更象 C+/C for(i=0;i=j+5;i+;); ; ;If 語(yǔ)句中國(guó)教育和科研計(jì)算機(jī)網(wǎng)Baidu 搜索：選項(xiàng)卡（也稱“”）的切換效果Firefox-full-latest156.火狐-.exe）-.hk（蘋果：挪威 Opera現(xiàn)在版：31.0=HTML網(wǎng)頁(yè)（代碼）大體的組成：第一部分：文檔類型（無(wú)法使用）（無(wú)法使用）Edu：自建：自建：HTML5 標(biāo)準(zhǔn)第一行是這樣的：HT

3、ML4.01是長(zhǎng)期使用的一種HTML 標(biāo)準(zhǔn)，將逐漸被建議不用或作廢，同時(shí)所取代-將某些不好的增加了一些新的。XHTML 1.0曾經(jīng)是HTML4.01 的升級(jí)版，但是后來(lái)國(guó)際 web 標(biāo)準(zhǔn)xhtml 并不好。是一個(gè)過(guò)渡標(biāo)準(zhǔn)/過(guò)渡產(chǎn)品。們發(fā)現(xiàn)，HTML5 是世界的標(biāo)準(zhǔn)，但是所做出來(lái)的 HTML5 的網(wǎng)頁(yè)必須要有：支持 HTML5 的瀏覽器才可以正確瀏覽。IE6.0白宮/ 中國(guó)HTML5（通過(guò)別人）第二部分：P45HTML 實(shí)體(意為：某些特殊的字符要在網(wǎng)頁(yè)中呈現(xiàn)，的特別表示法。)必須使用設(shè)計(jì)的網(wǎng)頁(yè)頭部-主體部分新浪博客：把上面的代碼放到博客中去。&開(kāi)頭分號(hào)結(jié)尾 設(shè)計(jì)的網(wǎng)頁(yè)頭部主體部分“”SEO-/

4、谷歌 搜索引擎優(yōu)化src=”source/.js”= 20140828Macromedia Dreamweaver8/阿 多 比 公 司 adobeCS5/CS6 PS CS6DreamweaverCS1/CS2/CS3/CS4/瀏覽器：（先不考慮 IE6.0，IE9.0 以上兼容性來(lái)講基本同firefox）受歡迎：開(kāi)源火狐 Firefox 31.0（免費(fèi)）。Firefox-full-latest156.exe基本上取代Discuz!荔香站在大學(xué)期間開(kāi)發(fā)的ered by discuz!X3建站會(huì)不會(huì)一個(gè)？1GB-精簡(jiǎn)幾 MB設(shè)置：從首頁(yè)開(kāi)始 6 層首頁(yè)/子頁(yè)面/技術(shù)含量：首頁(yè)最高OEE（只有英

5、文版）：于）（是指前臺(tái)程序及網(wǎng)頁(yè)，不能Offline Explorer Entrise 6.3服務(wù)器托管公司：租用服務(wù)器空間PS藝術(shù)設(shè)計(jì)程序+SQLserver開(kāi)發(fā)+數(shù)據(jù)庫(kù)HTML 5也是采用 html5，又可以很好兼容 IE6P 19firefox 的偷取別人的第 7 章：超#abc#代表空錨的名稱為 abc超就是一種特殊的“錨”a 代表超anchor 錨在某些內(nèi)容外面套上一組：比如要實(shí)現(xiàn)滾動(dòng)效果，需要套上。屬性FastStone具.exeCapture7.7單文件版綠色版 強(qiáng)大的截圖工HTML/javascript/css插件 firebugPx 像素點(diǎn)P45 特殊字符某些字符在網(wǎng)頁(yè)代碼中

6、本身就有，如果要顯示它，則必須將它采用“特殊字符”來(lái)表示。比如小于號(hào)和大于號(hào)，在網(wǎng)頁(yè)中不能直接打否則很可能會(huì)被瀏覽器認(rèn)為是“不予顯示。但遺憾的是。P45”法)(符號(hào)實(shí)體表示方法) (符號(hào)實(shí)體表示方法)(數(shù)字實(shí)體表示方的博客發(fā)博客文章：請(qǐng)分析以下代碼的功能： 無(wú)標(biāo)題文檔 預(yù)解釋Html 代碼中的再多的空格，實(shí)際瀏覽的效果“只保留一個(gè)空格”。代碼中的所有回車產(chǎn)生的空行效果，瀏覽器一概忽略。Editplus 源代碼編輯器ultraedit 源代碼編輯器的效這是果。的測(cè)試頁(yè)面，專門測(cè)試選項(xiàng)卡的切換如何實(shí)現(xiàn)。= 20140902：spanaimg行內(nèi)塊：divpul 和 lipremarquee定位和浮

7、動(dòng)外鏈?zhǔn)?CSS 樣式表大部分都是成雙成對(duì)出現(xiàn)的，有開(kāi)始，有結(jié)尾。比如：.只有開(kāi)始，省略結(jié)尾（但是一般要用 /結(jié)尾），比少數(shù)如：一般不這樣寫（雖然這樣寫也合法）：“模仿”S“er 蜘蛛程序”-宏“硅谷” 回地圖創(chuàng)立。公司：htt htt httkeywords關(guān)鍵字description描述.hk/.my/.sg/這一行是了一個(gè)“外鏈?zhǔn)綐邮奖恚ㄍ怄準(zhǔn)?CSS）”樣式表起什么作用？作用是：對(duì)網(wǎng)頁(yè)中的各個(gè)元素進(jìn)行定位/布局/美化。這一行是：預(yù)先載入了一個(gè) javascript 程序（通常也稱為：java程序），以備后用。如何猜測(cè)這些 javascript 程序起什么作用？又比如：是預(yù)先載入了edu

8、_2011.js這個(gè)程序。試著找到edu_2011.js 并打開(kāi)它（就用 dreamweaver 打開(kāi)），發(fā)現(xiàn)這個(gè)js 程序中只是定義了兩個(gè)函數(shù)：一個(gè)函數(shù)名為 showdate()另外一個(gè)函數(shù)名為 showsel()。這兩個(gè)函數(shù)都不帶任何參數(shù)，是一對(duì)空括號(hào)，注意括號(hào)中不要輸入空格。這兩個(gè)函數(shù)只是定義了，但是沒(méi)有執(zhí)行，要執(zhí)行它們，必須要“調(diào)用”。怎樣調(diào)用呢？很簡(jiǎn)單，只要在需要的地方，再寫一個(gè).就可以調(diào)用。 showdate();=，這組經(jīng)常會(huì)用到，用它來(lái)實(shí)現(xiàn)一個(gè)“矩形框”。給這個(gè) div 框取了一個(gè) class 名稱（也稱為“類的名稱”）為top_bg960px;93px;FastStone具.

9、exeCapture7.7單文件版綠色版 強(qiáng)大的截圖工一個(gè)一個(gè)的 div 從上到下，從左到右，堆成一個(gè)龐大的豐富的網(wǎng)頁(yè)。內(nèi)容段落#A3B4CE#808080#E6EDF5網(wǎng)頁(yè)制作中級(jí)工/高級(jí)工動(dòng)手操作得來(lái)的東西很難忘記。=2014-9-5 周五 12-1 班：spanaimg行內(nèi)塊：divpul 和 liDW8 設(shè)計(jì)視圖的效果“的實(shí)際瀏覽效果。參考”，最終效果應(yīng)該看瀏覽器藝術(shù)設(shè)計(jì)多幅.jpg.gif(動(dòng)畫)-通常會(huì)用 javascript 程序?qū)崿F(xiàn).png切換的動(dòng)畫效果不要太大，最多幾MB，一般為 KB 級(jí)。將來(lái)會(huì)大量用到 div通俗講 div 是一個(gè)方框，用來(lái)容納其他的或者內(nèi)容。class=

10、top_bg 表示：為這個(gè) div 取了一個(gè)名字（以后稱為 class 名稱，也叫“類名”）框線默認(rèn)是“隱藏”的。流式的：流水一般撐高外鏈?zhǔn)?CSS大量用這種。不用“內(nèi)嵌式”。凡事一定要從最簡(jiǎn)單著手，先慢，慢多了才能快。width:960px;=20140912 周五 12 節(jié)dangdang亞馬遜天貓前端設(shè)計(jì)=HTML4.01/5+CSS+javascript(jQuery)dreamweaverCS4CS5500MB復(fù)旦大學(xué)的白宮（國(guó)外服務(wù)器上外國(guó)的）HTML 5盒子display:none; display:block;隱藏顯示中國(guó)教育和科研計(jì)算機(jī)網(wǎng) CERNET為什么要隱藏.，讓它不顯

11、示出來(lái)？不顯示它是因?yàn)椤吧嫌羞@些字，更漂亮”。但是在代碼中保留了 h1，是因?yàn)榈人阉饕嫱鶗?huì)將h1(主標(biāo)題)認(rèn)為是最重要的信息，保存在搜索數(shù)據(jù)庫(kù)中。網(wǎng)盤P30紙上得來(lái)終覺(jué)淺 站在巨人的肩膀上！最重要的標(biāo)題（一級(jí)標(biāo)題）CSSdiv 就是一個(gè)“通用的框”,每個(gè)元素都是一個(gè)“矩形框”，可以一個(gè)框中再套另一個(gè)框，層層嵌套。類名（就是它的一個(gè)名字），可以與其他的名字重復(fù)。添加 CSS：P51 例 5-3 05 行：外部樣式表文件（ 1 ） 拷 貝 ： （2）新建一個(gè) 1.css 文件，保存到 css 文件夾中。P55Html 中少動(dòng)為妙！背景調(diào)試法：加一個(gè)背景，不需要的時(shí)候再刪除或隱藏（注釋掉它）=1

12、1 章：=20140913 補(bǔ)周二 13網(wǎng)盤：共享慢多了才能快！2 班/1-4 節(jié)：沒(méi)有難度，沒(méi)有，沒(méi)有實(shí)用價(jià)值，卻大講特講！網(wǎng)頁(yè)制作“中級(jí)工”證！高度 height:auto;自動(dòng)，就是依靠其中的內(nèi)容把它撐高。P31 /前斜杠（也叫斜杠）后斜杠（也叫：| 豎杠反斜杠）試出來(lái)/猜得到猜來(lái)的！不是“學(xué)來(lái)的”“背誦來(lái)的”height:高度，身高。high 高的，高高的。margin: 0px auto;的正中間）用來(lái)使某一個(gè)元素左右居中（在屏幕“知其然，知其所以然！”！(第 11 章)第四章：Ttsup subq dfnde bdostrong云網(wǎng)盤搜索引擎（行動(dòng)）常用的網(wǎng)盤搜索白宮 采用了 ht

13、ml5網(wǎng)頁(yè)標(biāo)準(zhǔn)技術(shù)人民隱的“元素”：為什么要隱藏？值得研究！div 就是一個(gè)“可以存放各種各樣內(nèi)容”的“框”或“盒子”。盒子模型。這個(gè)盒子默認(rèn)情況下是“隱藏了邊框”的。掛上 CSS 文件?！氨尘罢{(diào)試法”-當(dāng)你不知道這個(gè)框長(zhǎng)得如何，多大大多高的情況下，你人為設(shè)置一個(gè)“背景顏色”，以便你能夠把握這個(gè)“框”的實(shí)際大小。1.css-這就是 CSS 樣式表文件（必須在網(wǎng)頁(yè)掛上鉤）。divbackground-color: #FF0000; height:93px;width:960px;CSS 樣式表P55 5.3 CSS 樣式選擇器class=top_bg 這就是某個(gè)元素的“class 名稱”#FF0

14、000 純紅#0000FF 純藍(lán)#CCFF00 純綠P31的作用：竟然可以用在制造一個(gè)“空白縫隙”（大小可以通過(guò) CSS 靈活調(diào)節(jié)）上。標(biāo)準(zhǔn)指法：bl10height:10px;p 元素竟然會(huì)自動(dòng)加上：上下邊距 16px其實(shí)，不僅 p 元素，任何元素都會(huì)被瀏覽器自動(dòng)加上一些上下左右的邊距。而且令人討厭的是，不同的瀏覽器往往加的邊距值不一樣。如果你要去掉這些該死的邊距：body,div,p margin:0; padding:0;P30 標(biāo)題以上這些標(biāo)題，關(guān)鍵不在于字體的大小，而在于它到底是幾級(jí)。因?yàn)樽值拇笮∈强梢噪S時(shí)用 CSS 來(lái)調(diào)節(jié)的，但是級(jí)別卻決定了它在“”等搜索引擎中的地位。= 2014

15、0915網(wǎng)盤共享：http:/P51css 文件如何寫？（最大）Wide: 寬的High:高的widthheight這個(gè) div 框默認(rèn)是“隱藏了邊框線，也沒(méi)有背景顏色”的，所以看不到。background-color: #FF0000;背景調(diào)試法。該死的邊距：外邊距 和 內(nèi)邊距=2014-9-16 周二 1-4CSS 模仿網(wǎng)頁(yè)的步驟：2第一步：用 firefox(FF 27.0-32.0)打開(kāi)要模仿的那個(gè)網(wǎng)頁(yè)：default.htm，并且打開(kāi)“查看元素”窗口。第二步：在桌面上新建一個(gè)文件夾，取名為當(dāng)天日期。你自己做的所有東西請(qǐng)全部放入該文件夾。第三步：?jiǎn)?dòng) dreamweaver(DW) C

16、S4/或者 DW 8，新建一個(gè)網(wǎng)頁(yè)，并且保存為 1.html（或者 1.htm）,DW 請(qǐng)切換到“拆分視圖”。把被模仿的那個(gè)網(wǎng)頁(yè)也用 DW 打開(kāi)。第四步：拷貝 default.html 中的以下行并且也將其粘貼到1.html 中/head之前。（以下行肯定是在/head之前）：第五步：利用 DW，新建一個(gè) CSS 文件，保存在 20140916文件夾中的 css 文件夾中，命名為 1.css第六步：將上述第四步中的紅色部分，改為：css/1.css提示：將來(lái)大部分難點(diǎn)集中在 1.css 的編輯處理上面。第 七 步 ： 開(kāi) 始 從 上 到 下 模 仿 網(wǎng) 頁(yè) 的 主 體 部 分網(wǎng)頁(yè)中所有的都是一

17、個(gè)一個(gè)的“矩形框”，框也可以叫“盒子”?！昂凶幽Ｐ汀眃iv 是一個(gè)“通用的框”。背景調(diào)試法。P55：樣式選擇器對(duì)某一個(gè)已經(jīng)取好 class名稱的 div( 比如class名稱為top_bg)，請(qǐng)采用以下方法操控它：集中了很多人智慧！站在巨人的肩膀！言必稱“CSS” “HTML5”言必稱“JQuery”臺(tái)燈式掃描：CSS 的注釋：/*div.top_bg*/的div.top_bgwidth:960px; height:93px;/*background-color:#F00;*/“語(yǔ)句”應(yīng)該這樣寫：屬性名：屬性值；要使某一個(gè)元素居中，請(qǐng)用：margin: 0px auto;外邊距：上 右 下 左

18、；= 2014-9-19 周五00Firefox 32.0Firebug 附加的一個(gè)組件，是第margin:4px 10px;開(kāi)發(fā)的。在 CSS 看來(lái)，每一個(gè)都是一個(gè)“矩形框”（盒子,默認(rèn)隱藏邊框線，默認(rèn)不帶背景?？梢浴氨尘罢{(diào)試法”讓明確地感覺(jué)個(gè)這個(gè)框長(zhǎng)得什么模樣），CSS 模型通常稱為“盒子模型”，學(xué)習(xí) CSS，需要對(duì)盒子模型有較深入的理解。anchor 錨超English內(nèi)邊距：padding: 20px(上)0(右)20px(下)720px(左)；= 20140922 周一 12外邊距：margin:1右 下上左；margin: 4px 10px省略下 省略左;以下三種寫法是一樣的：ma

19、rgin: 4px 10px 4px 10px; margin: 4px 10px;10px 4px;如果寫成這樣：margin: 4px；表示上右下左都是相同。margin:0；在 firebug 中，某一個(gè)元素（就是一個(gè)方框）的外邊距會(huì)用黃顏色顯示。該死的外邊距/內(nèi)邊距默認(rèn)情況瀏覽器會(huì)自動(dòng)給它加上“上/下外邊距”。 display:none;不顯示并且不占據(jù)位置。display:block;顯示某一個(gè)元素的內(nèi)邊距（padding,本意為“填充”），在 firebug中是以“紫顏色”來(lái)顯示的。就是指：該元素離它的“下屬”之間有一定的間隔/空隙（順序是：上右下左）。安裝好 firefox32.

20、0 及其組件 firebug2.0（工具菜單/附加組件）第十一章：P197：浮動(dòng)布局 float=20140923 周二.pdf安裝好 Firefox32.0 瀏覽器提供的組件 Firebug2.0：工具/附加組件安裝好第div.top_bg 這個(gè)框中：還嵌套了 3 個(gè)元素（每個(gè)元素都是一個(gè)框）把這被嵌套的 3 個(gè)元素稱為：div.top_bg 的子元素細(xì)節(jié)：P55 選擇器#；外邊距：某元素的外邊距，就是指該元素（注：任何一個(gè)元素都是一個(gè)“矩形框”）離它的父元素有一定的間隙，這個(gè)間隙就是此元素的“外邊距”。（在 firebug 中，選中某個(gè)元素，其外邊距 margin 區(qū)域會(huì)用“黃色”顯示出來(lái)

21、）標(biāo)準(zhǔn)寫法：margin:上 右 下 左；比如 margin: 4px 10px 4px 10px;其他寫法：比如 margin: 4px 10px；（省略：下 margin: 4px 10px 4px;（省略：左）左）省略了哪一個(gè)邊距，就是與它的“對(duì)家”是一樣的。margin: 0；某個(gè)元素如果沒(méi)有指定寬度值 width，那么這個(gè)元素就會(huì)自動(dòng)展開(kāi)到與它的“父親元素”一樣寬。至于高度則依靠它里面的內(nèi)容“撐高”。一個(gè)元素可以有三個(gè)名稱：1、 它本身的名。使用方法：比如：h12、class 名稱（中文翻譯為：類名稱） h1.date3、id 名稱（通常稱為：id 號(hào)，在整個(gè)網(wǎng)頁(yè)各個(gè) ID 號(hào)必須唯一） h1#bd1內(nèi)邊距：padding（填充）選中某一個(gè)元素后，該元素的內(nèi)邊距在 firebug 中會(huì)以“紫色”顯示出來(lái)。這個(gè)元素的內(nèi)邊距是什么意思呢？是指這個(gè)元素與它的“子元間有一定的空隙，這個(gè)空隙就是它的“內(nèi)邊距”。寫法上與外邊距的寫法相同，遵守“上右下左”順時(shí)針的寫法。text-decorationdecoration：修飾（專門指下劃線，中劃線，上劃線）underlineline-throuth overline盒模型結(jié)論一：沒(méi)有（就是沒(méi)有設(shè)