web大作業(yè)說明書

1、Web 大作業(yè)說明書涂貴蘭學號： 20 專業(yè)： 計科職教一web 大作業(yè)首頁地址：平時作業(yè)地址：二大作業(yè)在本地虛擬機上的文件夾結(jié)構(gòu)：服務器文檔根目錄 d:wwwg r w zIndex.htmmyfamily.htmlpmyschool.htmI m g imagesM u s i c sMyLove.html三 大作業(yè)功能介紹功能說明：首頁，進入首頁，導航欄使用一張加了模糊效果的圖片，大小 為1.1200*480，首頁上寫了大標題 personalpage，導航欄在標題的下面，導航點擊后會出現(xiàn)一個圓角的邊框，其他沒什么變化banner 是一個大圖，而且寬度設置的是百分百，會隨著瀏覽器自由拉伸

2、。Banner 下面就是有一個寬 400 的側(cè)邊欄，側(cè)邊就是介紹個人資料，就介紹了一些基本資料，和夢想，寫了我喜歡什么職業(yè)是什么，讓進我網(wǎng)頁的人知道一些基本情況，都是由一張圖片配一段文字的格式。和側(cè)邊欄并排的的是一個歡迎板塊，歡迎板塊是一種禮貌性的歡迎詞，是由一張大圖和一段文字組成的，這個版塊之后也是一個圖文版塊，一張圖下面一段文字， 一共有三個一模一樣的并排顯示。在下面就是頁腳，黑色的背景色，白色的字體，頁腳主要是說明這個網(wǎng)頁的制作人是我，不得。整個網(wǎng)頁以白色為背景，以簡潔大方為主，也沒有給圖片添加任何邊框，是因為我覺得這樣看起來更美觀，更有范。整個網(wǎng)頁的圖片都做了透明效果，就是當鼠標移到圖

3、片上的時候就是呈現(xiàn)完全不透明狀態(tài)，沒有移上去就是半透明狀態(tài)。家人頁，這一頁和首頁的基本樣式是差不多的，只不過是在布局上發(fā)生了2.一些變化，首頁的右側(cè)邊欄移到了左邊，大圖移到了右邊，這個塊下面還是三個一模一樣的圖文板塊并排，在下面就是一模一樣的頁腳，這個頁主要介紹的是家人，左側(cè)邊欄是我家人的詳細介紹，介紹的都是我重要的家人，右邊則是一張全家福，介紹的也是跟家有關(guān)內(nèi)容，下面三個小圖板塊寫的是一些心靈雞湯整個網(wǎng)頁都是英語和中文雙語，英語全部來自翻譯，只為提高一點檔次！學校頁，學校頁和前面兩個網(wǎng)頁也差不多，導航欄除了圖片不一樣以3.外，其他都是一樣的，有一個和導航欄一樣寬的圖片版面，是專門介紹重慶師范

4、大學的，重慶師范大學的圖片上面加入了重師官網(wǎng)的，點擊圖片就能進入重師官網(wǎng)。接下來就是幾張我高中的，并沒有詳細的介紹，在接下來又是和前面兩頁一樣，三個小的圖文模塊并排，分別介紹了重師的馬鞭草，睡蓮，和泛月橋，在圖片上頁分別加了。馬鞭草加的是介紹馬鞭草的介紹網(wǎng)頁，睡蓮也是介紹睡蓮的。在下面就是頁腳了。整個網(wǎng)頁的圖片也是加了透明效果，和首頁一樣。愛情頁，這一頁就和前兩頁不一樣了，這一頁我沒有設置導航欄，只設置4.了一個返回按鈕，這一頁主要是我和我男朋友的為主，當鼠標移到圖片上時，會變成另一張圖片，點擊一下，又會變成不同的圖片，九宮格排列，也是用的：hover 等屬性。優(yōu)點：排版簡潔大方，頁面美上去大

5、氣，沒有太多浮夸的東西缺點：雖然看起美觀，但是沒有很多高級功能，只是一些簡單的透明效果。四 界面效果圖說明第一頁;第二頁;第三頁：第四頁：五 代碼模塊說明Index 文件功能說明：進入首頁，導航欄使用一張加了模糊效果的圖片，大小 為 1200*480，首頁上寫了大標題 personalpage，導航欄在標題的下面，導航點擊后會出現(xiàn)一個圓角的邊框，其他沒什么變化。banner 是一個大圖，而且寬度設置的是百分百，會隨著瀏覽器自由拉伸。Banner 下面就是有一個寬 400 的側(cè)邊欄，側(cè)邊就是介紹個人資料，就介紹了一些基本資料，和夢想，寫了我喜歡什么職業(yè)是什么，讓進我網(wǎng)頁的人知道一些基本情況，都是

6、由一張圖片配一段文字的格式。和側(cè)邊欄并排的的是一個歡迎板塊，歡迎板塊是一種禮貌性的歡迎詞，是由一張大圖和一段文字組成的，這個版塊之后也是一個圖文版塊，一張圖下面一段文字， 一共有三個一模一樣的并排顯示。在下面就是頁腳，黑色的背景色，白色的字體，頁腳主要是說明這個網(wǎng)頁的制作人是我，不得。整個網(wǎng)頁以白色為背景，以簡潔大方為主，也沒有給圖片添加任何邊框，是因為我覺得這樣看起來更美觀，更有范。整個網(wǎng)頁的圖片都做了透明效果，就是當鼠標移到圖片上的時候就是呈現(xiàn)完全不透明狀態(tài)，沒有移上去就是半透明狀態(tài)。Myfamily 文件說明：這一頁和首頁的基本樣式是差不多的，只不過是在布局上發(fā)生了一些變化，首頁的右側(cè)邊

7、欄移到了左邊，大圖移到了右邊，這個塊下面還是三個一模一樣的圖文板塊并排，在下面就是一模一樣的頁腳，這個頁主要介紹的是家人，左側(cè)邊欄是我家人的詳細介紹，介紹的都是我重要的家人， 右邊則是一張全家福，介紹的也是跟家有關(guān)內(nèi)容，下面三個小圖板塊寫的是一些心靈雞湯，整個網(wǎng)頁都是英語和中文雙語，英語全部來自翻譯，只為提高一點檔次！Myschool 文件功能說明：學校頁和前面兩個網(wǎng)頁也差不多，導航欄除了圖片不一樣以外，其他都是一樣的，有一個和導航欄一樣寬的圖片版面，是專門介紹重慶師范大學的，重慶師范大學的圖片上面加入了重師官網(wǎng)的，點擊圖片就能進入重師官網(wǎng)。接下來就是幾張我高中的，并沒有詳細的介紹，在接下來又

8、是和前面兩頁一樣，三個小的圖文模塊并排，分別介紹了重師的馬鞭草，睡蓮，和泛月橋，在圖片上頁分別加了。馬鞭草加的是介紹馬鞭草的介紹網(wǎng)頁，睡蓮也是介紹睡蓮的。在下面就是頁腳了。整個網(wǎng)頁的圖片也是加了透明效果，和首頁一樣。Mylove 文件功能介紹：這一頁就和前兩頁不一樣了，這一頁我沒有設置導航欄，只設置了一個返回按鈕，這一頁主要是我和我男朋友的為主，當鼠標移到圖片上時，會變成另一張圖片，點擊一下，又會變成不同的圖片，九宮格排列，也是用的：hover 等屬性。優(yōu)點：排版簡潔大方，頁面美上去大氣，沒有太多浮夸的東西缺點：雖然看起美觀，但是沒有很多高級功能，只是一些簡單的透明效果。六 代碼粘貼： Ind

9、ex 文件代碼粘貼：涂貴蘭的個人網(wǎng)頁/*/*為 body設 置 樣 式 沒 特 別 設 置 樣 式 的 都 將 應 用 這 個 樣 式*/*/bodyfont-family: Arimo, sans-serif;font-size: 11pt;line-height: 1.75em;color: #4c4c4c;background: #141414;margin:0px;/*設置背景色和 maigin 為 0，說沒和和瀏覽器沒有空隙*/*/*為 圖 片 設 置 透 明 效 果 ，是 在 網(wǎng) 上 學 的*/*/img/*為圖片設置*/opacity:0.4;filter:alpha(opaci

10、ty=40);/*opacity 的值為 0.0（完全透明）到 1.0 完全不透明 */img:hover/*當鼠標停留在圖片上的時候就完全不透明了 */opacity:1.0;filter:alpha(opacity=100);/*當鼠標停留在圖片上的時候就完全不透明了*/h1,h2/* 為這幾個設置相同的屬性*/text-transform: uppercase;font-weight: bold;/*讓字母大寫，粗體*/*/主 要 設 置 的 是banner的 圖 片/*Header*/*/#header/* ID 選擇器 header */position: relative;padd

11、ing: 5em 0em;text-align: center;background-color:#0b2e56;background-image: url(images/banner3.jpg);width:100%;height:480px;background-size:cover;/*生成相對，相對于其正常位置進行，外邊距上下為 5，左右為0，文本居中，背景顏色，背景圖片，寬度和高度,最后一個是把圖片撐至無限大*/*/主 要 設 置 的 是 中 間 塊 的 背 景 顏 色/*main*/*/#mainposition: relative;background: #fff;/*主要設置的

12、是中間塊的背景顏色*/*/Featured設置的頁腳上面板塊的背景顏色/*/*/#featuredposition: relative;background: #f2f2f2;padding: 6em 0em;/*設置的頁腳上面哪個版塊的背景顏色和*/*/Copyright對頁腳文字的相關(guān)樣式設計/*/*/#copyrightpadding: 3em 0em;position: relative;padding: 3em 0em;letter-spacing: 1px;font-family: 華文仿宋;font-size:15px;text-align: center;color: #FFF

13、;/*設置頁腳相對，內(nèi)邊距上下為 3em，左右為 0em，文本居中顯示，字母間距 1 個像素，顏色為白色*/* Box Model */*, *:before, *:after -moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;/*是讓所有的元素都使用 border-box ，并且包括 偽類 before, after 。并不是特殊的定義它們倆。before,after 默認的

14、display 是 inline， 但難免有人會把它變成 block 來用，這時候統(tǒng)一 box-sizing會好操作一些。*/*/Container讓內(nèi) 容 板 塊 寬 都 是/*1200px*/*/.container width: 1200px;margin-left: auto;margin-right: auto;/*設置寬度為 1200px，左邊距和右邊距自動*/* Modifiers */.row */* 類選擇器 row 下的子元素應用樣式*/padding: 50px 0 0 50px;float: left;-moz-box-sizing: border-box;-webki

15、t-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;/*設置內(nèi)邊距頂右底左分別為 50 0 0，左浮動，讓兩個邊框并排顯50示。-moz 代表 firefox 瀏覽器私有屬性-ms 代表 IE 瀏覽器私有屬性-webkit 代表chrome、safari 私有屬性*/.row:after content: ;display: block;clear: both;height: 0;/* 這個 row 的 CSS 使用了：after 這個偽對象，它

16、將在應用 row 的元素的結(jié)尾添加 content 中的內(nèi)容。在這里添加了一個，并且把它的 display 設置成block；高度設為 0；clear 設為 both，意思是清除周圍的浮動；visibility 設為隱藏。這樣就達到了撐開容器的目的。 */*/Logo主 要 設 置 的 是 寫 在banner上 面 的 字 的 樣 式/*/*/#logo/*id 選擇器 logo*/margin-bottom: 3em;/*設置下邊距*/#logo h1color: #FFF;/*設置字體顏色*/#logo h1 a/* 為出現(xiàn)在logo 的后面 h1 后面的后代元素a 設置樣式，也就是 ba

17、nner上面的 personalpage */display: block;letter-spacing: 1px;text-decoration: none;text-transform: uppercase;font-size: 5em;font-weight: 900;color: #fff;/*設置以塊顯示，字母間距，不給文字裝飾，控制字母大寫，字號，字寬，字體顏色*/#logo span/* 為id 選擇器和span 設置規(guī)則,也就是大標題下的designbytuguilan */display: block;padding-top: 1em;letter-spacing: 1px;

18、text-transform: uppercase;font-size: 1.2em;color: #CCC;/*設置以塊顯示，上邊距，字母間距，控制字母大小寫，字號，字體顏色*/*/Nav主要是設置導航的相關(guān)樣式/*/*/#navulli/*nav 元素下的子元素 ul 第子元素 li*/display: inline-block;/* 行內(nèi)塊元素 */#nav ul li a,#nav ul li span/*子元素選擇器和多類選擇器*/display: block;padding: 1em 1.5em;letter-spacing: 1px;text-decoration: none;t

19、ext-transform: uppercase;font-weight: 200;font-size: 1em;outline: 0;color: rgba(255,255,255,.7);/* 設置以塊顯示，內(nèi)邊距，字母間距，不給字體添加裝飾，控制字母大小寫，字體寬度，字號，邊框，顏色 */#nav ul li a:hover/*子元素選擇器，此規(guī)則應用于 nav 下的子元素 ul 的子元素 li 的 a 元素，鼠標指針位于上方*/color: #FFF;/* 設置字體顏色 */#nav li.active a/*多類選擇器，為多個元素設置相同的屬性主要是設置導航的圓角邊框*/backgr

20、ound: none;border-radius: 40px;border: 2px solid;border-color: rgba(255,255,255,.8);color: #FFF;/*設置背景，圓角邊框，邊框大小，實線，邊框顏色，字體顏色*/src=musics/ 張 靚 穎-燕 歸 巢 .mp3autostart= “ true ”id 選擇器 header -!- ID 選擇器 logo 的樣式 -!-personalpageDesign by tuguilanID 選擇器 nav 樣式 -!-Homepageafamilymymy family-aschoolmymy sch

21、ool-my loveid 選擇器 main 的樣式 -!-類選擇器 container 的樣式類選擇器 row 的樣式- !-skel-cell-important!-etomypersonal page!歡迎來到涂貴蘭 的個人主頁My name is Tu Guilan. I am 20 years old. I am nowstudying at Chongqing Normal University.My major is computer. My hometown isNanchuan, mountain is a Buddha, Buddha is a mountain, the

22、beautiful JinfoMountain nanchuan! Famous scenic spot gold Foshan is located in Nanchuan, therein spring can admire the beauty of flowers, summer summer, watch the leaves fall,e everyone to play!我叫涂貴蘭，今年 20 歲了，現(xiàn)在就讀于重慶師范大學，專業(yè)是計算機。家鄉(xiāng)是南川，山即是佛，佛即是山，美麗南川金佛山！著名景區(qū)金佛山就坐落于南川，那兒春天可以賞花，夏天可以避暑，秋天看落葉，冬天可以滑雪，一年四季，

23、歡迎大家去玩！!- 定義一個文檔的章節(jié)( 可以擁有自己的和)。-!- 定義一個文檔的章節(jié)( 可以擁有自己的和)-about me類選擇器 style 的樣式 -!-personal Information 個人資料一Name ： Tanny （涂貴蘭） Age：1995.10.20Emai文本應用了 text 樣式 -!-了posted 樣式My hobbyI like sports, roller skating ismy favorite. I like wearing roller skates speeding on the road. It not only exercise the

24、my body, also pleasing to my mood!我喜歡運動，我最愛的就是輪滑，我喜歡穿著輪滑鞋在馬路上飛馳。夢想 my dreamMy dream is to do a graphic夢想是designer, because I like the design, I want to own ideas can a thing out.做一名平面設計師，因為我喜歡設計，我希望把自己的想法可以用一種東西表現(xiàn)出來。id 選擇器 featured 的樣式 Love is just a threadOnce I thought love meant flowers, gifts an

25、d sweetkisses. But from this experience, I understand that love is just a thread in the quilt ofour life. Love is inside, making life strong and warm.我曾經(jīng)認為愛情就是鮮花、和的。但是從那一刻起，我明白了，愛情就像是生活中被子里的一根線。愛情就在里面，使生活變得堅固而溫暖。Thc happy doorBeing unhappy is like an infectious disease. It causespeople to shrink awa

26、y from the sufferer. He soon finds himself alone, miserable andembittered. There is, however, a cure so simple as to seem, at first glance, ridiculous;if you dont feel happy, pretend to be!不就像傳染病，它使得人們都躲避不的人。不的人很快就會發(fā)現(xiàn)自己處于孤獨，悲慘，痛苦的境地。然而，有一種簡單得看似荒謬的治病良方：如果你不，就假裝你很！display:inline; class=4u!-Industry si

27、gnificance!- 第三個文本的小標題 -src=images/pic02.jpgalt= /!-Labor vanquishes all - not inconstant, spasmodic, orill-directed labor, but faithful, unremitting, daily effort toward a well-directedpurpose. Just as truly as eternal vigilance is the price of liberty, so is eternal industrythe price of noble and

28、enduring success.勞動征服一切。這里所指的勞動不是斷斷續(xù)續(xù)的，間歇性的或方向偏差的勞動，而是堅定的，不懈的，方向正確的勞動。正如要想擁有自由就要時刻保持警惕一樣，要想取得偉大的，持久的成功，就必須堅持不懈地努力。id 選擇器 copyright（）的樣式重慶師范大學計算機與信息科學學院 14 級計算機科學與技術(shù)（職教師資）涂貴蘭制作，所有。Myfamily 文件代碼粘貼：涂貴蘭的個人網(wǎng)頁/*/*為 body設 置 樣 式 沒 特 別 設 置 樣 式 的 都 將 應 用 這 個 樣 式*/*/bodyfont-family: Arimo, sans-serif;font-size

29、: 11pt;line-height: 1.75em;color: #4c4c4c;background: #141414;margin:0px;設置背景色和 maigin 為 0，說沒和和瀏覽器沒有空隙*/*/*/*為 圖 片 設 置 透 明 效 果 ，是 在 網(wǎng) 上 學 的*/*/img/*為圖片設置*/opacity:0.4;filter:alpha(opacity=40);/*opacity 的值為 0.0（完全透明）到 1.0 完全不透明 */img:hover/*當鼠標停留在圖片上的時候就完全不透明了 */opacity:1.0;filter:alpha(opacity=100);

30、/*當鼠標停留在圖片上的時候就完全不透明了 */h1,h2/* 為這幾個設置相同的屬性 */text-transform: uppercase;font-weight: bold;/*讓字母大寫，粗體*/*/主 要 設 置 的 是banner的 圖 片/*Header*/*/#header/* ID 選擇器 header */position: relative;padding: 5em 0em;text-align: center;background-color:#0b2e56;background-image: url(images/banner2.jpg);width:100%;hei

31、ght:480px;background-size:cover;/*生成相對，相對于其正常位置進行，外邊距上下為 5，左右為0，文本居中，背景顏色，背景圖片，寬度和高度,最后一個是把圖片撐至無限大*/*/主 要 設 置 的 是 中 間 塊 的 背 景 顏 色/*main*/*/#mainposition: relative;background: #fff;/*主要設置的是中間塊的背景顏色*/*/Featured設置的頁腳上面板塊的背景顏色/*/*/#featuredposition: relative;background: #f2f2f2;padding: 6em 0em;/*設置的頁腳上

32、面哪個版塊的背景顏色和*/*/Copyright對頁腳文字的相關(guān)樣式設計/*/*/#copyrightpadding: 3em 0em;position: relative;padding: 3em 0em;letter-spacing: 1px;font-family: 華文仿宋;font-size:15px;text-align: center;color: #FFF;/*設置頁腳相對，內(nèi)邊距上下為 3em，左右為 0em，文本居中顯示，字母間距 1 個像素，顏色為白色*/* Box Model */*, *:before, *:after -moz-box-sizing: border-

33、box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;/*是讓所有的元素都使用 border-box ，并且包括 偽類 before, after 。并不是特殊的定義它們倆。before,after 默認的display 是 inline， 但難免有人會把它變成 block 來用，這時候統(tǒng)一 box-sizing會好操作一些。*/*/Container讓內(nèi) 容 板 塊 寬 都 是/*1200px*/*/.container wi

34、dth: 1200px;margin-left: auto;margin-right: auto;/*設置寬度為 1200px，左邊距和右邊距自動*/* Modifiers */.row */* 類選擇器 row 下的子元素應用樣式*/padding: 50px 0 0 50px;float: left;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;/*設置內(nèi)邊距頂右底左分別為 50 0 050 ，左浮動，讓兩個邊框并排顯示。-moz 代表 firefox 瀏覽器私有屬性-ms 代表 IE 瀏覽器私有屬性-webkit 代表chrome、safari 私有屬性*/.row:after content: ;display: block;clear: both;height: 0;/* 這個 row 的 CSS 使用了：after 這個偽對象，它將在應用 row 的元素的結(jié)尾添加 content 中的內(nèi)容。在這里添加了一個，并且把它的 display 設置成block；高度設為