CSS基本知識及導(dǎo)航條制作實(shí)例_第1頁
CSS基本知識及導(dǎo)航條制作實(shí)例_第2頁
CSS基本知識及導(dǎo)航條制作實(shí)例_第3頁
CSS基本知識及導(dǎo)航條制作實(shí)例_第4頁
CSS基本知識及導(dǎo)航條制作實(shí)例_第5頁
已閱讀5頁，還剩55頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

HTML與CSS基本知識

橫向?qū)Ш綏l制作實(shí)例HTML的文件結(jié)構(gòu)<html>

<head>

<title>

……

</title>……

</head>

<body>……

</body></html>html頭部標(biāo)簽<title></title><metaname=”author”content=”…….”><metaname=”keyword”content=”…..”><metahttp-equiv=”expires”content=”mon,15sep2003”><metahttp-equiv=”refresh”content=”10”,url=…”><metahttp-equiv=”content-type”content=”text/html;charset=gb2312”>html主體部分標(biāo)簽<body></body>background=“……”text=#RRGGBBlink=#RRGGBBvlink=#RRGGBBalink=#RRGGBB<-text->text<script></script>

onload=“擴(kuò)展函數(shù)調(diào)用串”（與<script>一同使用）html字體標(biāo)簽<h1></h1><caption></caption><font></font>color=#RRGGBB<basefont></basefont>html字體樣式標(biāo)簽<i></i>斜體字<em></em>著重字<var></var>可變內(nèi)容<b></b>黑體字<strong></strong>加強(qiáng)字<tt></tt>緊湊字<code></code>緊湊字<kbd></kbd>顯示鍵名

<samp></samp>樣本字<u></u>下劃線<blink></blink>閃爍字 空格html段落標(biāo)簽<p></p>段落<address></address>地址區(qū)域<hr>水平分界線<center></center>向中間對齊<pre></pre>預(yù)設(shè)文字格式<blockquote></blockquote>區(qū)塊引用<br>回車html鏈接標(biāo)簽<a></a>

html圖像標(biāo)簽<img></img><map></map><area><area>html列表標(biāo)簽<ul></ul>無序列表<ol></ol>有序列表<li></li>每一行文字的起頭<dl></dl>陳述式排列<dt></dt>dl中顯示陳述的主題<dd></dd>dl中顯示陳述的內(nèi)容<dir></dir>清單（每行最多20字）<menu></menu>菜單html輸入表單標(biāo)簽<form><input></input><textarea></textarea><select><option></option></select></form>html表格標(biāo)簽<table><tr><th></th><td></td></tr></table>XHTML比HTML更嚴(yán)格一定要被正確地嵌套使用。一定要有正確的組織格式。標(biāo)簽名稱及屬性名一定要用小寫字母。所有的元素一定要關(guān)閉。屬性值必須要被引用和取值。用id屬性代替name屬性。自我檢查網(wǎng)站CSS布局的基本思想結(jié)構(gòu)化標(biāo)記：

所寫即所想，所想即所寫。CSS控制HTML頁面的方式2內(nèi)嵌方式1行內(nèi)方式3鏈接方式4導(dǎo)入方式行內(nèi)方式直接對HTML標(biāo)簽適用style=““<pstyle="color:#F00;background:#CCC;font-size:12px;"></p>內(nèi)嵌方式將CSS代碼寫在<head></head>之間，并且用<style></style>進(jìn)行聲明1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<htmlxmlns="/1999/xhtml">3<head>4<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>5<title>無標(biāo)題文檔</title>6<styletype="text/css">7<!--8#div1{width:64px;height:64px;float:left;}9#div1img{width:64px;height:64px;}10-->11</style>12</head>13<body>14<divid="div1"><img

src="/index/images/ico/2days.gif"/></div>15全國的CSS愛好者匯聚于此，如果不來，你就OUT嘍~我們的口號是：16“分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源”17如果您也愿意，就加入我們吧~18</body>19</html>鏈接方式是使用頻率最高，最實(shí)用的方式，只需要在<head></head>之間加上<linkhref="style.css"type="text/css"rel="stylesheet"/>3<head>4<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>5<title>無標(biāo)題文檔</title>6<linkhref="style.css"type="text/css"rel="stylesheet"/>7</head>8<body>9<divid="div1"><img

src="/index/images/ico/2days.gif"/></div>10全國的CSS愛好者匯聚于此，如果不來，你就OUT嘍~我們的口號是：11“分享自己的歡樂與痛苦，分享自己的經(jīng)驗(yàn)與心得，分享自己的資料與資源”12如果您也愿意，就加入我們吧~13</body></html>style.css的內(nèi)容1#div1{width:64px;height:64px;float:left;}2#div1img{width:64px;height:64px;}導(dǎo)入方式和鏈接方式比較相似，采用import方式導(dǎo)入CSS樣式表，在HTML初始化時，會被導(dǎo)入到HTML文件中，成為文件的一部分。四種樣式的優(yōu)先級低高行內(nèi)方式內(nèi)嵌方式鏈接方式導(dǎo)入方式CSS選擇器2ID選擇器1標(biāo)簽選擇器3類選擇器標(biāo)簽選擇器1p{2font-size:12px;3background:#900;4color:090;5}<pid="one">此處為p標(biāo)簽內(nèi)的文字</p>ID選擇器1#one{2font-size:12px;3background:#900;4color:090;5}<pid="one">此處為p標(biāo)簽內(nèi)的文字</p>類選擇器1<pclass="one">此處為p標(biāo)簽內(nèi)的文字</p>1.one{2font-size:12px;3background:#900;4color:090;5}盒子模型塊狀元素和內(nèi)聯(lián)元素塊狀元素(如p,div)內(nèi)聯(lián)元素（如a)是否允許其他元素同處一行NOYES寬度和高度是否起作用YESNO浮動float:left清除浮動清除浮動.clear{clear:both;}在HTML中加入：<divclass="clear"></div>CSS布局技術(shù)——導(dǎo)航條制作實(shí)訓(xùn)專題二導(dǎo)航條效果鼠標(biāo)移動上去背景變黑，并且字體顏色變成白色

DreamweaverCS3軟件界面【第一步】先做一個容器一個div作為容器，ID為“nav”，寬度為960px，高度為：35px，位于頁面水平正中，與瀏覽器頂部的距離是30px；關(guān)鍵標(biāo)簽divnav#nav<divid="nav"></div>

body,div{padding:0;margin:0;}#nav{width:960px;height:35px;

background:#CCC;/*為了便于查看區(qū)域范圍大小，故而加個背景色*/margin:0auto;/*水平居中*/margin-top:30px;/*頂部30px*/}HTML代碼CSS代碼【第二步】用無序列表放置內(nèi)容

導(dǎo)航條中的菜單項(xiàng)為“CSS學(xué)習(xí),學(xué)前準(zhǔn)備,入門教程,提高教程,布局教程,精彩應(yīng)用”。(目前有6個)ulli關(guān)鍵標(biāo)簽<divid="nav"><ul><li>CSS學(xué)習(xí)</li><li>學(xué)前準(zhǔn)備</li><li>入門教程</li><li>提高教程</li><li>布局教程</li><li>精彩應(yīng)用</li></ul></div>HTML代碼#navul{width:960px;height:35px;}CSS代碼效果用Float使<li>標(biāo)簽內(nèi)容橫向并排：#navul

li{float:left;}哪里不一樣？為什么？怎么解決？重置：

body,div,ul,li{padding:0;margin:0;}去掉默認(rèn)樣式：前面的大黑圓點(diǎn)，是FF給li

標(biāo)簽定義的默認(rèn)樣式，在li

標(biāo)簽的CSS屬性中加入

list-style:none;【第三步】使文字保持“車距”#navul

li{

width:100px;

float:left;list-style:none;

background:#900;}CSS代碼垂直居中

line-height:35px;水平居中

text-align:center;【第四步】增加鼠標(biāo)響應(yīng)效果

給上面的導(dǎo)航加上鏈接；鏈接文字大小修改為12px;

并且規(guī)定鏈接樣式，鼠標(biāo)移上去和拿開的效果導(dǎo)航加鏈接HTML代碼<divid="nav"><ul><li><ahref="#">CSS學(xué)習(xí)</a></li><li><ahref="#">學(xué)前準(zhǔn)備</a></li><li><ahref="#">入門教程下載</a></li><li><ahref="#">提高教程</a></li><li><ahref="#">布局基礎(chǔ)教程</a></li>

溫馨提示

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

最新文檔

評論

0/150

提交評論