"我受夠這些難看的網頁了,我怎麼才能讓它變得好看點?"你說。 我答道:"看來你得學點CSS了" 學習這些東西只有一個原則,就是用你的腦袋想,用你的眼睛看,用的你手敲。很簡單,對吧? 這次我寫了兩個網頁 看代碼就用到了你的眼睛, 下麵是index.html的代碼 <html> <head> <titl ...
"我受夠這些難看的網頁了,我怎麼才能讓它變得好看點?"你說。
我答道:"看來你得學點CSS了"
學習這些東西只有一個原則,就是用你的腦袋想,用你的眼睛看,用的你手敲。很簡單,對吧?
這次我寫了兩個網頁
看代碼就用到了你的眼睛,
下麵是index.html的代碼
<html> <head> <title>Starbuzz Coffe</title> <!--CSS內部調用(就是在html文本中寫<style>標簽從而使用CSS)--> <style type = "text/css"> body{ background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding: 10px 10px 10px 10px; font-family: sans-serif; } </style> </head> <body> <h1>Starbuzz Coffe Menu</h1> <h2>House Blend, $1.49</h2> <p> A swooth, mild blend of coffees from Mexico, Bolivia and Guatemala. </p> <h2>Mocha Cafe Latte, $2.35</h2> <p> Espresso, steamed milk and chocolate syrup. </p> <h2>Cappuccino, $1.89</h2> <p> A mixture of esresso, steamed milk and foam. </p> <h2>Chai Tea, $1.85</h2> <p> A spicy drink made with black tea, spices, milk and honey. </p> </body> </html> <!-- body{ CSS作用的標簽 background-color: #d2b48c; 背景顏色,#d2b48c是RGB十六進位顏色代碼 margin-left: 20%; 左邊空出20%的頁面 margin-right: 20%; 右邊空出20%的頁面 border: 2px dotted black; 2px大小的虛線黑色邊框 padding: 10px 10px 10px 10px; 內邊距上下左右的邊距都是10px的大小 font-family: sans-serif; 字體 } 不要在CSS內嘗試寫html的註釋 -->
請記住
不要在CSS內嘗試寫html的註釋!!! 否則CSS會失效
這是網頁的一個頁面,稱為預設頁面,預設頁面的文件名一般是index.html或者是default.html它們的作用是當你只是通過功能變數名稱訪問到網站時,網站會展示給你預設網頁而不是隨便一個網頁(網站不只是由一個網頁組成)。比如訪問百度,百度就會向你展示一個“百度一下你就知道”的頁面。
我們現在是在自己的電腦上寫網頁,所以預設網頁並不起作用。
這是index.html在瀏覽器中的顯示
這是網頁在自己電腦里的路徑(這不是功能變數名稱)
把文件名,也就是index.html去掉,可以查看目錄下的索引
如: