版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
HTML網(wǎng)頁制作1：HTML簡介2：HTML常用標簽介紹3：表單布局4：表格布局5：框架布局6：CSS樣式表7：使用Dreamweaver制作網(wǎng)頁HTML簡介HTML：HyperTextMarkupLanguage超文本標簽語言HTML：網(wǎng)頁的“源碼”瀏覽器：“解釋和執(zhí)行”HTML源碼的工具
HTML文檔的基本結構HTML文檔的結構<html><head><title>我的第一個網(wǎng)頁
</title></head><body>HelloWorld!</body></html>HTML網(wǎng)頁<head>頭部部分<body>主體部分<html>…</html>標簽標記HTML文檔的開始和結束網(wǎng)頁標題網(wǎng)頁內容，可以是文本、圖像等這部分包括標題和其他說明信息，包括在<head>…</head>
標簽內這部分包含文本、圖像和鏈接，它包括在<body>…</body>
標簽內
網(wǎng)頁的摘要信息網(wǎng)頁摘要信息利于瀏覽器解析和搜索引擎搜索：使用<title>標簽<head>
<title>搜狐-中國最大的門戶網(wǎng)站</title></head><head>
<metaname="keywords"content="淘寶,網(wǎng)上購物,在線交易,交易市場"/>
<metaname="description"content="淘寶網(wǎng)-亞洲最大、最安全的網(wǎng)上交易平臺，提供各類服飾、美容、家居、數(shù)碼、……"/></head><head>
<metahttp-equiv="Content-Type"content="text/html;
charset=gb2312"/></head>使用<meta>標簽（1）描述文檔類型和字符編碼（2）描述搜索關鍵字和描述提供搜索關鍵字和內容描述信息，方便搜索引擎的搜索
HTML頁面中的塊和行HTML標簽分類（方便后續(xù)的布局設計）：塊級標簽：顯示為“塊”狀，前后隔一行
行級標簽：按行逐一顯示分類好處：方便后續(xù)的布局設計塊級：塊內包含多行行級：包括文字、圖片等
塊級標簽根據(jù)使用場合，塊級標簽又細分為：基本塊級標簽常用于布局的塊級標簽
標題標簽……<body>
<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5>
<h6>六級標題</h6></body>……h(huán)1最大h6最小前后隔行<h1>標題</h1>……<h6>標題</h6>
基本塊級標簽—段落段落標簽
……<body><h1>北京歡迎你</h1>
<p>北京歡迎你，有夢想誰都了不起！</p><p>有勇氣就會有奇跡。</p></body>……前后換行，類似教材中的段落<p>……</p>
基本塊級標簽—水平線水平線標簽
……<body><h1>北京歡迎你</h1><hr/><p>北京歡迎你，有夢想誰都了不起！</p><p>有勇氣就會有奇跡。</p></body>……橫線用于內容分割單個標簽的閉合形式<hr/>
常用于布局的塊級標簽—有序列表有序列表標簽
……<body><h3>注冊步驟：</h3><ol><li>填寫信息</li><li>收電子郵件</li><li>注冊成功</li></ol></body>……有序列表<ol><li>列表項1</li>……</ol>
常用于布局的塊級標簽—無序列表無序列表標簽
<body><h3>新人上路指南</h3><ul>
<li>如何激活會員名？</li><li>如何注冊貴美會員？</li><li>注冊時密碼設置有什么要求？</li><li>貴美認證</li></ul></body>無序列表<ul><li>列表項1</li>……</ul>
常用于布局的塊級標簽—描述標簽定義描述標簽
……<body><dl><dt>咖啡</dt><dd>一種黑色的熱飲料，原料據(jù)說是咖啡豆，非洲盛產這類原料。</dd><dd>可以提神，刺激神經。</dd><dl></body>……這種效果可以和無序列表互相替代，因dt是塊狀元素，所以常用于圖文混編的布局場合<dl><dt>標題</dt><dd>描述1</dd>……</dl>
常用于布局的塊級標簽—描述標簽……<body><dl>
<dt>圖片的HTML代碼（后續(xù)講解）……<dt><dd>商品名稱：燦坤蒸氣電熨斗</dd><dd>商品價格：388元</dd><dd>商品簡介：金鋼低血超硬超順滑,140ml透明大水箱設計</dd></dl></body>……用定義描述標簽實現(xiàn)圖文混編的效果文字有一定的縮進
常用于布局的塊級標簽—表格表格<table><tr>
<td>百度</td><td>新浪</td></tr>
……</table>
<table>--表格<tr>--行<td>--列（單元格）
常用于布局的塊級標簽—表單表單
一般和table使用：<form><table><tr><td>...</td>
<td>...</td>
</tr>.....</table></form><form>……</form>
常用于布局的塊級標簽—div層分區(qū)標簽<div>div標簽可內嵌到<p>等標簽內，作為普通塊狀元素使用一般當作結構化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來使用……<divstyle="width:400px;height:300px;background:#9FF"><p>……</p><h3>新人上路</h3><ul>……</ul>div其實就是一個......</div>……
小結請說出實際開發(fā)常用的4種塊狀結構是什么？1、div-ul(ol)-li：常用于分類導航或菜單等2、div-dl-dt-dd：常用于圖文混編的場合3、table-tr-td：常用于圖文布局或顯示數(shù)據(jù)4、form-table-tr-td：常用于布局表單
行級標簽—圖像標簽圖像標簽
……<imgsrc="images/drink.jpg"alt="精品熱賣：高清晰，30寸等離子電視"title="精品熱賣：高清晰，30寸等離子電視"/>……為了不同瀏覽器之間的兼容，推薦使用title屬性
，確保能顯示提示文字<imgsrc="圖片地址"alt="提示文字"title="提示文字"/>
行級標簽—范圍標簽范圍標簽<span>：顯示某行內的獨特樣式……<p>商品價格:僅售<spanstyle="color:red;font-size:70px;">10</span>元</p>……<span>文本等行級內容</span>設置紅色、大號字突出顯示
行級標簽—換行標簽換行標簽<br/>
……<p>
北京歡迎你，有夢想誰都了不起！<br/>
有勇氣就會有奇跡。<br/>
北京歡迎你，為你開天辟地<br/>
流動中的魅力充滿朝氣。<br/>
北京歡迎你，在太陽下分享呼吸<br/>
在黃土地刷新成績。<br/>
北京歡迎你，像音樂感動你<br/>
讓我們都加油去超越自己。<br/></p>……和<p>的區(qū)別：前后不換行
為什么需要W3C標準W3C：WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟W3C的職能：負責制定和維護web行業(yè)標準W3C標準包括：列的標準：HTML內容方面：XHTML樣式美化方面：CSS結構文檔訪問方面：OM頁面交互方面：ECMAScript……
制定統(tǒng)一的web標準W3CNetscape的圖標
W3C提倡的Web結構不規(guī)范的示例<fontsize="7">一級主題</Font><br/>一級主題闡述文字<br/><Br/><fontsize="5">二級主題</font><br/>二級主題相關文字<P>項目列表1<p>項目列表2<p>項目列表3存在問題：1、內容和表現(xiàn)沒分離，后期很難維護和修改2、HTML代碼不能表示頁面的內容語義，不利于搜索引擎搜索
W3C提倡的Web結構規(guī)范的示例<h1>一級主題1</h1><p>一級主題闡述文字</p><h2>二級主題</h2><p>二級主題闡述文字</p><ul><li>項目列表1</li><li>項目列表2</li><li>項目列表3</li></ul>W3C提倡的Web結構：1、內容（結構）和表現(xiàn)（樣式）分離2、HTML內容結構要求語義化
XHTML1.0基本規(guī)范<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>……</head>……body部分內容……</html>標簽名和屬性名稱必須小寫
HTML標簽必須關閉屬性值必須用引號括起來標簽必須正確嵌套必須添加文檔類型聲明1、聲明必須位于文檔的最前面2、三種級別：Strict（嚴格類型）、Trasitional（過度類型）、Frameset（框架類型）
練習1需求說明：實現(xiàn)簡單的商品購買頁
練習2注意HTML結構的語義化，遵守XHTML1.0基本規(guī)范需求說明：實現(xiàn)商品促銷頁
超鏈接超鏈接---實現(xiàn)頁面間的導航鏈接文本或圖像鏈接地址（目標）
超鏈接
……<ahref="span.html"target="_blank">燦坤蒸氣電熨斗</a>……鏈接在新窗口中打開<ahref="鏈接地址"target="目標窗口位置">鏈接熱點文本或圖像</a>
鏈接路徑……<ahref="../web1.htm">上級目錄</a><ahref="../../web2.htm">上上級目錄</a>……相對地址：相對于當前目錄的地址，常用
絕對地址：指向目標地址的完整描述，少用
上級目錄：../上上級目錄：../../<ahref="/memAdmin/login/login.htm">登錄</a><ahref="">搜狐</a><ahref="login/login.htm">登錄</a>
超鏈接的三類應用場合……<ahref="register/register.html">[免費注冊]</a><ahref="login/login.htm">[登錄]</a>……頁面間鏈接錨鏈接功能性鏈接常用于網(wǎng)站導航相對路徑
超鏈接的三類應用場合實現(xiàn)錨鏈接1、定義標記（錨）：<aname="標記名">目標位置</a>2、設置鏈接到標記位置：<ahref="#標記名">當前位置</a>……<ahref="#star">[明星專區(qū)]</a>……
<aname=“star”>明顯專區(qū)內容</a>……定義標記設置鏈接到標記位置A.頁面內的錨鏈接適用于頁面內容較多，超過一屏的場合
超鏈接的三類應用場合實現(xiàn)錨鏈接……標記所在頁….<ahref="#star">[明星專區(qū)]</a>……B.頁面間的錨鏈接……鏈接頁….明星體驗：<ahref="anchor.html#star">明星專區(qū)</a>……
超鏈接的三類應用場合功能性鏈接郵箱、QQ鏈接等
……<ahref="mailto:guimeiWebMater@">站長信箱</a>……
注釋……<!--<li>被注釋掉的行將不顯示</li>--><li>正常顯示行1</li><li>正常顯示行2</li>……<!--注釋內容-->用于增加代碼的可讀性，不顯示注釋
特殊符號特殊符號空格：
大于(>)：>小于(<）:<引號（”）："版權號：©……COPYRIGHT©
2003-2010 <ahref=“index.htm”>北京市貴美商城有限公司
……1、因為<、>等符號在HTML中已使用，所以必須用其他符號來代替2、都以分號結束（；）
表單的應用表單的典型應用用戶登錄/注冊收集用戶反饋信息提供搜索工具
常見的表單元素單行文本框(text)單選按鈕(radio)復選框(checkbox)下拉列表(select)重置按鈕(reset)提交按鈕(submit)密碼框(password)文本域(textarea)
表單基本語法<formaction="表單提交地址"method="提交方法">…文本框、按鈕等表單元素…
</form>指定提交后，由服務器上哪個處理程序處理指定向服務器提交的方法：一般為post或get方法,post方法比較安全……<formaction="login.jsp"method="post"><p>用戶名：<inputname="username"type="text"size="20"maxlength="10"/></p><p>密
碼：<inputname="pwd"type="password"size="20"/></p><p><inputname="btn"
type="submit"value="提交"/> <inputname="reset"type="reset"value="重填"/></p></form>……表單輸入元素：input表單提交地址和方法的設置
<inputname="表單元素名稱"type="類型"value="值"size="顯示寬度"maxlength="對大長度"checked="是否選中"/>表單元素基本格式指定元素的類型，可為text、radio、submit等控件的名稱控件的初始值控件的初始寬度控件中輸入的最多字符個數(shù)控件是否被選中checked
表單各元素語法文本框
密碼框按鈕單選按鈕<input
name="名稱"
type="text"value="初值"
size="數(shù)字“/><input
name="名稱"
type="password"
value="初值"
size="數(shù)字“/><input
name="名稱"
type="按鈕類型"
value="按鈕文字"
src="圖片按鈕的圖片url/>普通按鈕：button提交按鈕：submit重置（清空）按鈕：reset圖片按鈕：image<inputname=“組名"
type="radio"value=
"…"checked="…"/
>
表單各元素語法
復選框
文件域列表框多行文本框<inputname="…"
type="checkbox"value="…"
checked=
"…"/><inputname="…"
type="file"/><select
name="指定列表名稱"
size="行數(shù)“/>
<option
value="選項值"
selected="selected">…</option>
…
…</select><textareaname="..."cols="列寬"rows="行寬“/>文本內容</textarea>
表單的高級用法
隱藏域方便服務器端“記住”客戶端的信息、但又不希望客戶看到的數(shù)據(jù)
......<inputtype="hidden"name="userid"value="666"/>……隱藏的客戶代號信息：666，但客戶端頁面不顯示隱藏域：既方便服務器端“記住”客戶端的數(shù)據(jù)，又避免因顯示瀏覽者不關心的數(shù)據(jù)導致用戶反感<input
name="…."
type="hidden"value="…"/>
只讀和禁用屬性readonly：希望某個框內的內容只允許用戶看，不能修改disabled：因沒達到使用的條件，限制用戶使用表單的高級用法
<p><textareaname="content"cols="60"rows="8"readonly="readonly">歡迎閱讀服務條款協(xié)議，貴美的權利和義務......</textarea>同意以上協(xié)議<inputname="agree"type="checkbox"/><inputname="btn"type="submit"value="注冊"disabled="disabled"/><p/>1、用戶不能修改協(xié)議2、勾選“同意以上協(xié)議”，才允許點擊“注冊”按鈕
練習——簡易求職表“協(xié)議”只讀，“提交”按鈕禁用用隱藏域提交求職者姓名“zhangsan”
需求說明：使用表單制作簡易求職表
表格的應用表格應用場合論壇中應用表格購物網(wǎng)站應用表格門戶網(wǎng)站應用表格
基本語法<table><tr><td>第1個單元格的內容</td><td>第2個單元格的內容</td> ......</tr><tr><td>第1個單元格的內容</td><td>第2個單元格的內容</td> ......</tr></table><table>...</table>定義表格<tr>…</tr>
定義行
<td>…</td>
定義列
跨行、跨列……<tablewidth="200"border="1"><tr><tdcolspan="3">學生成績</td></tr><tr><tdrowspan="2">張三</td><td>語文</td><td>98</td></tr><tr><td>數(shù)學</td><td>95</td></tr>
....代碼同上兩行....</table>……rowspan
跨2行colspan
跨3列
表格高級應用如何實現(xiàn)年終數(shù)據(jù)報表？表格標題<caption>頁腳<tfoot>表頭<th>表格數(shù)據(jù)的分組標簽<thead>、<tbody>、<tfoot>配合使用，對報表數(shù)據(jù)進行邏輯分組
表格高級應用……<tablewidth="100%"><caption>年終數(shù)據(jù)報表</caption><thead
style="background:#0FF"><tr><th>月份</th><th>收入（RMB）</th></tr>
</thead><tbody
style="background:#9CC"><tr><td>1月</td><td>100</td></tr><tr><td>2月</td><td>80</td></tr><!--省略3-6月的類似HTML代碼-->
</tbody><tfoot
style="background:#FF0"><tr><td>平均月收入</td><td>196.67</td></tr><tr><td>總計</td><td>1180</td></tr>
</tfoot></table>……<thead>標簽對應報表的頁眉
<tbody>對應報表的數(shù)據(jù)主體
<tfooter>對應報表的頁腳
表格布局表格布局的應用場合圖文布局，數(shù)據(jù)規(guī)則整齊表單布局，同樣要求數(shù)據(jù)規(guī)則整齊
圖文布局的實現(xiàn)實現(xiàn)步驟
圖文布局的實現(xiàn)實現(xiàn)步驟……<tableborder="1px"><tr><tdcolspan="2"><imgsrc=“…"alt="公告欄"/></td></tr><tr><tdrowspan="4"><imgsrc=“…"alt="公告左側圖"/></td><td>大學要求老師開網(wǎng)店</td></tr><tr><td>安全錘網(wǎng)上大熱銷</td></tr>……</tr></table>……整個是5行2列的表格,實際布局時border=“0”隱藏邊框公告欄：跨2列圖片：跨4行
練習：貴美商品分類需求說明根據(jù)提供的素材實現(xiàn)
表單布局應用實際頁面中的登錄表單布局實際應用，需要幾行幾列的表格布局？
表單布局應用<formmethod="post"action="login_success.htm"><table><tr><td><imgsrc="images/title_login_2.png"alt="alt"/></td><tdcolspan="2"> </td></tr><tr><td></td><td>會員名:</td><td><inputname=“sname”…（可包含….）</td>…代碼同“會員名”…<tdcolspan="2"><inputtype="image"…src=“…"/></td></tr> </table></form>整體布局：4行3列的表格圖片后的內容跨2列，內容用“空格”填充圖片按鈕跨2列
小結使用表格進行布局對顯示數(shù)據(jù)有什么要求？實現(xiàn)思路是什么？使用場合：數(shù)據(jù)顯示要求較為規(guī)整，符合表格布局的特點布局的實現(xiàn)思路：需要幾行幾列的表格？哪些單元格有跨行或跨列？編寫表格代碼實現(xiàn)
嵌套布局如何用表格實現(xiàn)下圖布局？對于復雜的頁面，如使用表格則必須采用多層嵌套
嵌套布局嵌套表格布局的缺點：代碼量大層次結構也相對復雜不利于Goole等搜索引擎搜索查找數(shù)據(jù)表格布局僅適用于：規(guī)則的數(shù)據(jù)顯示表單頁面表格布局不適合不規(guī)則的復雜頁面，這種場合需使用DIV+CSS布局（后續(xù)學習）
框架的應用頁面的一個固定部分顯示LOGO或公司信息在另一個固定部分顯示導航部分詳細內容在此處顯示詳細內容，頁面中此部分是變化的產品宣傳技術論壇客戶服務
框架的用途框架的兩類用途：1、顯示多窗口頁面---使用<frameset>框架集2、頁面復用—使用<iframe/>內嵌框架復用站內頁面：head和foot部分復用站外內容：引用Google搜索引擎、顯示sohu新聞等
框架的組成文件1：top.html文件2：left.html文件3：right.html多個頁面文件組成主文件：index.html
框架基本結構創(chuàng)建框架網(wǎng)頁的步驟：創(chuàng)建各子窗口對應的HTML文件創(chuàng)建整個框架頁面文件，引用子窗口文件<framesetcols="25%,50%,*"rows="50%,*"border="5">
<framesrc="the_first.html">
……</frameset>框架頁面的基本語法邊框尺寸大小將窗口分割成左中右3個部分,可選將窗口分割成上下2個部分,可選引用各窗口要顯示的網(wǎng)頁文件
框架基本結構縱向分割窗口……<framesetbordercolor="red"rows="25%,50%,*"border="5"><frame
src="subframe/the_first.html"name="top"/><framesrc="subframe/the_second.html"name="middle"/><framesrc="subframe/the_third.html"name="bottom"/></frameset><noframes><body>如瀏覽器不支持框架，才顯示body內的內容</body></noframes>……注意：1、框架和body不能共存2、為了兼容性，可以使用<noframes>標簽窗口邊框的寬度將窗口分割成上中下3部分推薦：將窗口子文件放在單獨的文件中用于區(qū)分
框架基本結構橫向分割窗口……<framesetcols="200,*,200"border="5"bordercolor="#FF0000"><framename="leftFrame"src="subframe/the_first.html"/><framename="mainFrame"src="subframe/the_second.html"/><framename="rightFrame"src="subframe/the_third.html"/></frameset>……橫向分為3個窗口
框架多窗口實現(xiàn)典型的2行2列結構<frameset
rows="20%,*"frameborder="0"><framesrc="subframe/top.html"name="topframe"scrolling="no"
noresize="noresize"/><frameset
cols="20%,*"><framesrc="subframe/left.html"name="leftframe"scrolling="no"noresize="noresize"/><framesrc="subframe/right.html"name="rightframe"/></frameset></frameset>scrolling屬性：是否顯示滾動條如何實現(xiàn)？2行2列的窗口劃分
窗口間的關聯(lián)如何實現(xiàn)左列導航，在右面顯示相關頁面？使用<a>標簽的target目標窗口屬性
窗口間的關聯(lián)實現(xiàn)窗口間關聯(lián)的步驟1、設置窗口名（框架主頁）2、設置<a>的target屬性（窗口子頁面）……<framesetrows="20%,*"frameborder="0">......
<framesrc="subframe/right.html"name="rightFrame">......</frameset>……設置右窗口名為：rightFrame……<ahref="buy.html"target="rightFrame">……設置鏈接在右窗口中打開
窗口間的關聯(lián)target的其他用法在新窗口中顯示：_blank在自身窗口中顯示：_self在上級窗口顯示：_top在父窗口顯示：_parent
內嵌框架<frameset>需要使用多個文件，目錄結構復雜內嵌較為靈活，可以在網(wǎng)頁的任何位置使用可以作為模板，在本網(wǎng)站的多個頁面復用整個頁面只有局部窗口引用sohu的內容
內嵌框架基本語法……<body>
<iframe
src="引用頁面地址"name="框架標識名"
frameborder="邊框"scrolling="no"/><body>……和<frameset>不同，放在<body>標簽內指明引用的網(wǎng)頁文件
內嵌框架屬性如何設置在內嵌窗口顯示……<ahref="subframe/the_third.html"target="mainFrame">
下邊顯示第三頁</a>……<iframename="mainFrame"width="800px"height="150px"scrolling="yes"noresize="noresize"src="subframe/the_second.html"/> ……在內嵌窗口mainFrame顯示鏈接內容設置窗口名如何實現(xiàn)？
練習1——用框架分割多個窗口需求說明：根據(jù)提供的子窗口頁面素材
練習2——<iframe>實現(xiàn)頁面復用需求說明：根據(jù)提供的素材實現(xiàn)
為什么使用CSS樣式表樣式表能實現(xiàn)內容與樣式的分離，方便團隊開發(fā)cssgarden/程序員寫代碼美工做樣式內容與樣式和諧統(tǒng)一的完整網(wǎng)頁
為什么使用樣式表樣式復用、方便網(wǎng)站的后期維護同一網(wǎng)站共用同一樣式，確保網(wǎng)站統(tǒng)一的風格
頁面的精確控制，實現(xiàn)精美、復雜頁面
CSS的用途1、外觀美化2、布局、定位
CSS基本語法<head><styletype="text/css">
選擇器（即修飾對象）{
對象的屬性1:屬性值1;
對象的屬性2:屬性值2;}</style></head><style>標簽聲明標簽內為CSS多條樣式規(guī)則1.多個屬性間用分號分隔2.用冒號聲明對應屬性值
li{color:red;font-size:30px;font-family:隸書;}選擇器樣式規(guī)則
選擇器的分類標簽選擇器<styletype="text/css">li{color:red;font-size:28px;font-family:隸書;}</style>……<div> <ul> <li>家用電器</li>…… </ul></div>標簽選擇器：用于修飾同類HTML標簽的共性風格
選擇器的分類<styletype="text/css">.blue{color:blue;}
……</style>……<ul> <liclass="blue">家用電器</li> <li>各類書籍</li> <liclass="blue">手機數(shù)碼</li> <li>日用百貨</li></ul>……如果希望部分li標簽采用其他樣式，怎么辦？類選擇器(class)定義樣式，注意類名有點號應用類樣式，其他元素也可以使用
選擇器的分類<style>#menu{width:200px;background:#ccc;font:bold14px宋體;}</style>……<divid="menu"><ul><li>家用電器</li>……</ul></div>ID選擇器
如果希望控制某個DIV塊樣式，并且要求塊元素唯一，怎么辦？
文本屬性行距、對齊等：line-height（行高）text-align（對齊）letter-spacing（字符間距）text-decoration（文本修飾）white-space（空白處理）字符間距：5px文本修飾：帶下劃線空白處理：不斷行字體、字號：font（縮寫形式）font-weight（粗細）font-size（大小）font-family（字體）
字體：宋體顏色：紅色字號：12px對齊：左對齊
文本屬性<styletylie="text/css">li{
font:12px宋體;text-align:left;line-height:28px;}.title{
letter-spacing:5px;white-space:nowrap;text-decoration:underline;}.bigFont{font-size:16px;color:red;
}</style>所有<li>的默認樣式：字體、字號：宋體，12px對齊方式：左對齊行高：28px首行標題樣式：字符間距：5px空白處理：不換行文本修飾：帶下滑線大字體樣式：字號：16px顏色：紅色font字體樣式的縮寫形式
背景屬性背景屬性：background
（縮寫形式）background-color（背景色）background-image（背景圖）background-repeat（背景圖重復方式）background-position（位置坐標、偏移量）四類平鋪效果
背景屬性div{background:url(images/bg.jpg)no-repeat;background-position:-70px-60px}背景出現(xiàn)的水平和垂直位置坐標，實現(xiàn)各種拍偏移效果設置背景圖片、不重復平鋪各種偏移效果
背景屬性的經典應用圖標截取--背景偏移量技術利用background-position的坐標偏移量，從同一張背景圖中截取菜單圖標
背景屬性的經典應用div{width:80px;background:url(images/icon.gif)no-repeat;…}.help{background-position:-80px0px;}.login{width:40px;background-position:0px-20px;…;}</style></head><body>
<div>購
物
車</div><p> </p><divclass="help">幫助中心</div><divclass="login">登錄</div>所有IDV標簽設置為同一背景圖、等寬分別設置各圖標的坐標偏移量
背景屬性的經典應用1.設置三個標簽（如div）的背景為同一圖片背景2.考慮“購物車”、“幫助中心”圖標的坐標偏移量是多少？3.考慮“登錄”圖標的坐偏移量是多少？YXO(0,0)
列表屬性列表（li）常用屬性list-style（列表風格）屬性值方式語法實現(xiàn)示例none無風格list-style:none;刷牙洗臉disc實心圓（<ul>默認類型）list-style:disc;●刷牙●洗臉circle空心圓list-style:circle;○刷牙○洗臉square實心正方形list-style:square;■刷牙■洗臉decimal數(shù)字（<ol>默認類型）list-style:decimal1.刷牙2.洗臉list-style屬性規(guī)定的列表風格
列表屬性列表屬性的典型應用：導航菜單<style>li{width:150px;color:red;font:28px隸書;
list-style:none;
float:left;}</style>……<ul><li>購物車</li>……</ul>設置列表為none去掉圓點所有html標簽都有的float浮動屬性，此處用于橫向排列
如何控制CSS樣式盒模型網(wǎng)頁中的所有元素可以看作一個一個的“盒子”元素內容填充（也稱內邊距）邊框邊界（也稱外邊距）
如何控制CSS樣式樣式控制思路盒內樣式修飾盒子位置布局盒內樣式：設置網(wǎng)頁元素的顏色、字體等外觀盒子位置布局：確定盒子所在的位置、和其他網(wǎng)頁元素的關系
為什么需要盒子屬性盒子模型是網(wǎng)頁布局的基礎盒子屬性是盒子模型的關鍵屬性盒子模型平面圖盒子模型三維立體圖：注意背景色在背景圖的下一層
什么是盒子屬性盒子屬性：margin（外邊距/邊界）border（邊框）padding（內邊距/填充
）各屬性又分為四個方向margin-right右邊界margin-left左邊界margin-top上邊界margin-bottom下邊界marginborderpadding
margin外邊距可統(tǒng)一設置或四邊分開設置margin屬性marginmargin-topmargin-rightmargin-bottommargin-leftmargin-right右邊界margin-left左邊界margin-top上邊界margin-bottom下邊界margin：1px，2px，3px，4px;margin：1px，2px;margin：0pxauto;margin-left:1px;分別代表什么含義？
border邊框border屬性border-colorborder-widthborder-styleborder-topborder-rightborder-bottomborder-leftborderborder-left…修飾屬性四個方向縮寫形式border每個邊都有style、color、with屬性，四個邊可以一次設置，也可以分別設置border-style:none;border:1pxsolidred;border-right:5pxdottedblue;分別代表什么含義？
使用border屬性修飾表單<styletype="text/css">.textBorder{border-width:1px;border-style:solid;}</style></head><body><formaction=""method="post"><p>名字：<inputname="fname"type="text"class="textBorder"/></p><p>密碼：<inputname="pass"type="password"class="textBorder"size="21"></p>細邊框的樣式
padding內邊距padding屬性paddingpadding-toppadding-rightpadding-bottompadding-leftpadding-left:5px;padding:5px10px20px40pxpadding:5px10px分別代表什么含義？四個邊可以一次設置，也可以分別設置padding
元素的寬高及實際占位元素的實際占位（實際寬、高）盒子高度=height屬性+上下填充高度+上下邊框高度盒子寬度=width屬性+左右填充寬度+左右邊框寬度height:40pxborder-width-top:20pxmargin-top:10px右圖圖片的實際的高度是多少？padding-top:5px
使用盒子屬性布局元素上外邊距30px下填充40px左右外邊距：水平居中左填充80px5px寬的邊框如何實現(xiàn)如下貴美logo圖片的布局？圖片背景色：#ff7300頁面背景色：#ccc
使用盒子屬性布局元素<styletype="text/css">
body
{
margin:0px;padding:0px;
background:#ccc;
}
#logo
{
width:380px;
border:5pxsolid#666;
padding:10px20px40px80px;
background:#ff7300;
margin:30pxauto;//水平居中}</style><body>
<divid="logo"><imgsrc="images/logo.jpg"alt="logo"/>
</div></body>
設置頁面內容（body）的背景和居中效果
“貴美商城”logo圖片的布局
首先組織HTML結構，再寫CSS進行布局或美化
使用盒子屬性實現(xiàn)DIV+CSS布局如何實現(xiàn)注冊頁面的布局？
main：主體部分footer：底部部分header：頂部
使用盒子屬性實現(xiàn)DIV+CSS布局實現(xiàn)步驟1、分析頁面的分塊結構，形成HTML組織結構為了控制整個頁面的居中，添加一個大容器：container
main：主體部分footer：底部部分header：頂部
使用盒子屬性實現(xiàn)DIV+CSS布局實現(xiàn)步驟2、編寫每個DIV塊的CSS控制定位#containe:980px、居中#header：136px;、背景色#ccc#main：400px;、背景色#fff#footer：100px;、背景色#ccc
為什么需要float浮動屬性如何解決中間兩塊布局無法同行顯示的問題？如何實現(xiàn)為希望的布局？
什么是float浮動屬性脫離常規(guī)文檔流而表現(xiàn)為向右或向左浮動默認的常規(guī)文檔流：頁面內容從上到下，從左到右排列。DIV塊換行顯示向右浮動，脫離常規(guī)文檔流
什么是float浮動屬性浮動的三大顯著特征1.DIV塊元素失去“塊狀”換行顯示特征，變?yōu)樾袃仍?/p>
什么是float浮動屬性浮動的三大顯著特征2.緊貼上一個浮動元素（同方向）或父級元素的邊框，如寬度不夠將換行顯示
什么是float浮動屬性浮動的三大顯著特征3.占據(jù)行內元素的空間，導致行內元素圍繞顯示
為什么需要clear區(qū)隔屬性第3個DIV塊隨窗口大小決定是否換行，如希望“強制”換行怎么辦？如何實現(xiàn)第3塊換行顯示？
什么是clear清除屬性clear作用如果前一個元素存在左浮動或右浮動，則換行以區(qū)隔只對塊級元素有效clear屬性的取值rightleftboth
none
超鏈接樣式的特點超鏈接樣式的特殊性文本或圖像加上鏈接，將失去原樣式而繼承鏈接的樣式加鏈接后，圖片/文本樣式的變化超鏈接樣式的四種狀態(tài)未訪問狀態(tài)（a:link）已訪問狀態(tài)（a:visited）鼠標移上狀態(tài)（a
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年甘肅會展中心有限責任公司招聘筆試參考題庫含答案解析
- 2025版智慧城市運營項目融資協(xié)議合同范本3篇
- 2025年度個人小戶型房產買賣及裝修改造合同4篇
- 2025年個人森林撫育與更新承包合同4篇
- 2025年全球及中國醫(yī)用協(xié)作機器人行業(yè)頭部企業(yè)市場占有率及排名調研報告
- 2025-2030全球鄰氯苯腈（氯化法）行業(yè)調研及趨勢分析報告
- 2025-2030全球觸控燈行業(yè)調研及趨勢分析報告
- 2025版拖拉機銷售與保險服務合同范本6篇
- 2025年度房產租賃合同（含租金調整及違約責任）3篇
- 2025年度個人設備租賃貸款合同范本7篇
- 2024年全國職業(yè)院校技能大賽高職組（研學旅行賽項）考試題庫（含答案）
- 2025年溫州市城發(fā)集團招聘筆試參考題庫含答案解析
- 2025年中小學春節(jié)安全教育主題班會課件
- 2025版高考物理復習知識清單
- 計量經濟學練習題
- 除數(shù)是兩位數(shù)的除法練習題(84道)
- 2025年度安全檢查計劃
- 2024年度工作總結與計劃標準版本（2篇）
- 全球半導體測試探針行業(yè)市場研究報告2024
- 反走私課件完整版本
- 2024年注冊計量師-一級注冊計量師考試近5年真題附答案
評論
0/150
提交評論