網(wǎng)頁設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第1頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第2頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第3頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第4頁
網(wǎng)頁設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第5頁
已閱讀5頁，還剩34頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第3章使用列表與表格布局3.1添加列表3.2添加表格了解列表與表格的特點(diǎn)掌握列表與表格的相關(guān)標(biāo)簽掌握列表與表格的使用引言在一個(gè)網(wǎng)頁中經(jīng)常能看到列表與表格的應(yīng)用，網(wǎng)頁中漂亮的導(dǎo)航、整齊規(guī)范的文章標(biāo)題列表和圖片列表等都是利用列表實(shí)現(xiàn)的。列表是指容器里面裝載著結(jié)構(gòu)、樣式一致的文字或圖表的一種形式。列表可分為有序列表、無序列表和自定義列表3種類型，它最大的特點(diǎn)就是整齊、規(guī)范、有序。表格是由行和列組成的結(jié)構(gòu)化數(shù)據(jù)集（表格數(shù)據(jù)），用于呈現(xiàn)數(shù)據(jù)或統(tǒng)計(jì)信息，可以讓數(shù)據(jù)的顯示變得十分規(guī)整有條理，可讀性好。列表與表格的應(yīng)用可以使圖片和文字變得整潔有序，數(shù)據(jù)也變得“有模有樣”，整個(gè)網(wǎng)頁更加規(guī)整。本章將重點(diǎn)學(xué)習(xí)列表與表格的制作，走進(jìn)一個(gè)“整齊有序”的世界。3.1添加列表有序列表案例—新聞列表自定義列表無序列表3.1添加列表3.1.1有序列表有序列表（ordered-list）是有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列。<ol><li>列表項(xiàng)目1</li><li>列表項(xiàng)目2</li>

......</ol>語法格式有序列表使用<ol>標(biāo)簽定義，包含一個(gè)或多個(gè)<li>列表項(xiàng)目，其語法格式如下。<ol>有序列表標(biāo)簽常用屬性的具體說明如表所示。標(biāo)簽屬性屬性說明type定義列表中使用的標(biāo)記類型，屬性值有1（默認(rèn)值）、A、a、I、istart定義有序列表的起始值，屬性值為數(shù)值，表示自第N個(gè)數(shù)開始reversed定義列表順序?yàn)榻敌?.1添加列表3.1.1有序列表3.1添加列表3.1.1有序列表利用有序列表將詩句降序排列顯示。演示說明<body><!--有序列表將詩句從第10個(gè)小寫羅馬數(shù)字開始，降序排列--><oltype="i"start="10"reversed><li>空山新雨后，天氣晚來秋。</li><li>明月松間照，清泉石上流。</li><li>竹喧歸浣女，蓮動(dòng)下漁舟。</li><li>隨意春芳歇，王孫自可留。</li></ol></body>代碼

例3.1運(yùn)行效果3.1添加列表3.1.2無序列表無序列表（unordered-listt）各個(gè)列表項(xiàng)之間沒有順序級別之分，是并列的。<ul><li>列表項(xiàng)目1</li><li>列表項(xiàng)目2</li>

......</ul>語法格式無序列表使用<ul>標(biāo)簽定義，包含一個(gè)或多個(gè)<li>列表項(xiàng)目，其語法格式如下。<ul>無序列表標(biāo)簽通常使用type屬性修改其顯示效果type屬性屬性取值顯示效果disc（默認(rèn)值）實(shí)心小黑圓點(diǎn)circle空心小圓點(diǎn)square實(shí)心小黑方塊3.1添加列表3.1.2無序列表3.1添加列表3.1.2無序列表利用無序列表列舉本章學(xué)習(xí)目標(biāo)。演示說明<body><!--設(shè)置無序列表的項(xiàng)目列表標(biāo)記為實(shí)心小黑方塊--><ultype="square"><p>本章學(xué)習(xí)目標(biāo)</p><li>認(rèn)識(shí)和了解列表與表格的用法</li><li>掌握利用列表制作彩色導(dǎo)航欄</li><li>掌握利用表格語義化制作成績表</li><li>掌握制作簡單個(gè)人簡歷表</li></ul></body>代碼

例3.2運(yùn)行效果3.1添加列表3.1.3自定義列表自定義列表（definition-list）常用于對術(shù)語或名詞進(jìn)行解釋和描述，列表項(xiàng)的前面沒有任何項(xiàng)目符號。<dl><dt>名詞1</dt><dd>名詞1描述一</dd><dd>名詞1描述二</dd>語法格式自定義列表使用<dl>標(biāo)簽定義，列表中并列嵌套<dt>標(biāo)簽和<dd>標(biāo)簽，<dt>標(biāo)簽用于定義名詞，<dd>標(biāo)簽用于定義名詞的解釋和描述。一對<dt></dt>里可以對應(yīng)多對<dd></dd>，即一個(gè)名詞可有多個(gè)解釋和描述。自定義列表的語法格式如下。

<dt>名詞2</dt><dd>名詞2描述一</dd><dd>名詞2描述二</dd></dl>3.1添加列表3.1.3自定義列表利用自定義列表定義HTML、CSS和JavaScript這三個(gè)名詞，并對其進(jìn)行解釋和描述。演示說明<body><!--<dl>標(biāo)簽定義自定義列表--><dl><!--在<dt>標(biāo)簽里定義名詞-->

<dt>HTML超文本標(biāo)記語言</dt><!--在<dd>標(biāo)簽里對名詞進(jìn)行解釋和描述-->

<dd>超文本：頁面內(nèi)可以包含圖片，鏈接，甚至音樂，程序等非文字元素。</dd>

<dd>標(biāo)記：與之相對是的編譯型語言，標(biāo)記型語音無需編譯，直接可以被解析展示。</dd>

<!--此處省略雷同代碼--></dl></body>代碼

例3.3運(yùn)行效果3.1添加列表3.1.4案例—新聞列表本實(shí)例是制作一個(gè)新聞列表，主要由<div>塊元素、<ol>有序列表、<ul>無序列表和<img>圖像標(biāo)簽構(gòu)成。新聞列表的頁面結(jié)構(gòu)簡圖如圖所示。3.1添加列表3.1.4案例—新聞列表代碼實(shí)現(xiàn)<body><!--父容器#news里包含三個(gè)子元素塊ol、div、ul--><divid="news"><olclass="nav">

<!--在有序列表的每個(gè)列表項(xiàng)目li里嵌套超鏈接標(biāo)簽，并為第一個(gè)<a>添加類名，在CSS中設(shè)置特定樣式--><li><aclass="present"href="/"target="_blank">頭條</a></li><!--此處省略雷同代碼--></ol><divclass="image">

<!--在div塊元素中嵌入一張圖片，并設(shè)置寬高--><imgsrc="../image/teacher.png"alt=""width="525"height="300"></div><ul>

<!--為有序列表中的每個(gè)列表項(xiàng)目li里加入新聞文本--><!--此處省略雷同代碼--></ul></div></body>主體代碼

例3.43.1添加列表3.1.4案例—新聞列表代碼實(shí)現(xiàn)在上述主體代碼中，利用有序列表在頭部制作一個(gè)簡單的新聞導(dǎo)航條，點(diǎn)擊導(dǎo)航條可跳轉(zhuǎn)到百度新聞搜索網(wǎng)頁。塊元素里嵌入一張圖片，用于修飾網(wǎng)頁內(nèi)容，并合理設(shè)置適應(yīng)于頁面結(jié)構(gòu)的寬高。而<ul>無序列表用于添加新聞文本，通過這3個(gè)塊元素來實(shí)現(xiàn)整個(gè)頁面結(jié)構(gòu)。3.1添加列表3.1.4案例—新聞列表代碼實(shí)現(xiàn)<style>

/*為父容器整個(gè)新聞塊設(shè)置寬高，清除浮動(dòng)帶來的影響*/#news{width:560px;height:800px;}.nav{width:520px;height:30px;

list-style:none;/*取消列表項(xiàng)目標(biāo)記*/}ol>li{width:130px;height:30px;

float:left;/*<ol>中的列表項(xiàng)目li左浮動(dòng)*/}

CSS代碼

例3.4

ol>li>a{

text-decoration:none;/*取消超鏈接標(biāo)簽文本修飾下劃線*/font-size:18px;/*超鏈接標(biāo)簽中的文本設(shè)置字體大小*/color:#aaa;}ol>li>.present{

color:#6495ef;/*為<ol>中當(dāng)前瀏覽的導(dǎo)航條設(shè)置顏色*/}ul>li{

line-height:35px;/*為<ul>中的項(xiàng)目列表li設(shè)置行高*/}</style>3.1添加列表3.1.4案例—新聞列表代碼實(shí)現(xiàn)在上述CSS代碼中，首先為父容器整個(gè)新聞塊設(shè)置寬高，清除浮動(dòng)帶來的影響，接著使用list-style屬性取消有序列表項(xiàng)目標(biāo)記，再為有序列表<ol>中的列表項(xiàng)目<li>設(shè)置向左浮動(dòng)，關(guān)于元素浮動(dòng)在第4章第2節(jié)內(nèi)容中有詳細(xì)講解。然后為有序列表中的超鏈接取消下劃線，并設(shè)置文本字體大小與顏色，且為特定的第一個(gè)超鏈接，即當(dāng)前瀏覽的導(dǎo)航條設(shè)置顏色，最后為無序列表<ul>中的項(xiàng)目列表<li>設(shè)置行高。本節(jié)小結(jié)本節(jié)內(nèi)容講解了有序列表、無序列表和自定義列表的使用，并利用列表制作新聞列表頁面，對其進(jìn)行網(wǎng)頁布局，讓整個(gè)網(wǎng)頁顯得更規(guī)整。通過本節(jié)的學(xué)習(xí)，希望讀者可以了解這3種列表的使用以及它們之間的區(qū)別。3.2添加表格表格基本標(biāo)簽案例—個(gè)人簡歷表合并行與列語義化標(biāo)簽單元格邊距與間距表格其他屬性3.2添加表格3.2.1表格基本標(biāo)簽<table>標(biāo)簽用于定義一個(gè)表格，<tr>標(biāo)簽用于定義表格中的行，可以有一行或多行，嵌套在<table>標(biāo)簽中，<td>標(biāo)簽用于定義表格中的單元格（列），一行里可以有一個(gè)或多個(gè)單元格（列），嵌套在<tr>標(biāo)簽中。<table><tr><td>單元格內(nèi)容1</td><td>單元格內(nèi)容2</td>......</tr>......</table>語法格式一個(gè)最基本的表格由<table>、<tr>和<td>這3個(gè)標(biāo)簽構(gòu)成，其語法格式如下。3.2添加表格3.2.1表格基本標(biāo)簽除了<table>、<tr>和<td>這3個(gè)主要標(biāo)簽之外，表格的基本標(biāo)簽有<caption>、<th>等。<caption>標(biāo)簽用于定義表格的標(biāo)題，標(biāo)簽必須緊隨<table>標(biāo)簽之后，每個(gè)表格只能定義一個(gè)標(biāo)題，通常這個(gè)標(biāo)題會(huì)被居中于表格之上。<th>標(biāo)簽用于定義表格內(nèi)的表頭單元格，在<tr>標(biāo)簽內(nèi)部使用。<th>和<td>是兩種類型的單元格，<th>是表頭單元格，里面包含表頭信息，元素內(nèi)部的文本通常為居中的粗體文本。<td>是標(biāo)準(zhǔn)單元格，里面包含數(shù)據(jù)，元素內(nèi)部的文本通常為左對齊的普通文本。為了更深地對表格進(jìn)行語義化，使網(wǎng)頁內(nèi)容更好地被搜索引擎理解，在使用表格進(jìn)行布局時(shí)，HTML中引入了<thead>、<tbody>和<tfoot>這3個(gè)語義化標(biāo)簽，將表格劃分為頭部、主體和頁腳3部分。用這3個(gè)部分來定義網(wǎng)頁中不同的內(nèi)容，讓表格語義更加良好，結(jié)構(gòu)更加清晰，代碼更加有邏輯性，也更具有可讀性和可維護(hù)性。概述標(biāo)簽說明<thead>用于定義表格的頭部，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息<tbody>用于定義表格的主體。位于<thead></thead>標(biāo)簽之后，一般包含網(wǎng)頁中除頭部和底部以外的其他內(nèi)容<tfoot>用于定義表格的頁腳。位于<tbody></tbody>標(biāo)簽之后，一般包含網(wǎng)頁底部的企業(yè)信息等3.2添加表格3.2.2語義化標(biāo)簽<body><table>

<!--定義表格的標(biāo)題-->

<caption>班級成績表</caption>

<!--定義表格的表頭--><thead>

<!--定義表格內(nèi)的行--><tr><!--定義表格內(nèi)的表頭單元格--><th>序號</th><!--此處省略雷同代碼-->

</tr></thead><!--定義表格的主體--><tbody><trclass="odd"><td>1</td>演示說明3.2添加表格3.2.2語義化標(biāo)簽主體代碼

例3.5利用表格標(biāo)簽和語義化標(biāo)簽制作一個(gè)班級成績表。<td>李華</td><td>124</td><!--此處省略雷同代碼-->

</tr><!--此處省略雷同代碼-->

</tbody>

<!--定義表格的頁腳--><tfoot><!--為表格頁腳內(nèi)的行設(shè)置背景顏色--><trbgcolor="#ccc"><!--在表格的頁腳內(nèi)合并6個(gè)單元格--><tdcolspan="6">語文、數(shù)學(xué)和英文三科分?jǐn)?shù)均為150分</td></tr>

</tfoot></table></body><style>

/*設(shè)置整個(gè)表格*/table{width:520px;/*設(shè)置寬度和高度*/height:320px;text-align:center;/*文本居中*/

border:1pxsolid#cccccc;/*設(shè)置表格邊框大小、樣式和顏色*/

border-collapse:collapse;/*合并邊框*/}td,th{

border:1pxsolid#cccccc;/*為單元格添加邊框*/}

演示說明3.2添加表格3.2.2語義化標(biāo)簽CSS代碼

例3.5利用表格標(biāo)簽和語義化標(biāo)簽制作一個(gè)班級成績表。/*設(shè)置表頭*/th{height:40px;background-color:#0099cc;color:white;}/*設(shè)置單數(shù)行*/.odd{

/*設(shè)置指定的背景顏色*/background-color:#C0C0C0;}/*設(shè)置雙數(shù)行*/.even{background-color:#FFFFE0;}</style>利用表格標(biāo)簽和語義化標(biāo)簽制作一個(gè)班級成績表，運(yùn)行效果如圖所示。演示說明3.2添加表格3.2.2語義化標(biāo)簽利用表格標(biāo)簽和語義化標(biāo)簽制作一個(gè)班級成績表，表格標(biāo)簽定義表格的基本結(jié)構(gòu)，語義化標(biāo)簽本身不會(huì)改變表格的內(nèi)容與結(jié)構(gòu)，而在表格中添加語義化標(biāo)簽的目的是使表格結(jié)構(gòu)更清晰易懂。使用CSS屬性為表格添加邊框以及合并邊框，為單數(shù)行和雙數(shù)行表格分別設(shè)置不同的背景顏色以進(jìn)行區(qū)分，設(shè)計(jì)表格樣式，使其更美觀。演示說明3.2添加表格3.2.2語義化標(biāo)簽在制作一個(gè)表格時(shí)，有時(shí)需要對表格的單元格進(jìn)行合并行或列的操作，把兩個(gè)或多個(gè)相鄰單元格合并成一個(gè)單元格，這就需要使用到rowspan屬性和colspan屬性。標(biāo)簽語法格式說明rowspan<tdrowspan="數(shù)值">規(guī)定單元格可橫跨的行數(shù)，即合并表格的列。colspan屬性通常使用在<td>和<th>標(biāo)簽中，其屬性值為數(shù)值，這個(gè)數(shù)值代表所要合并的單元格行數(shù)colspan<tdcolspan="數(shù)值">規(guī)定單元格可橫跨的列數(shù)，即合并表格的行。colspan屬性通常使用在<td>和<th>標(biāo)簽中，其屬性值為數(shù)值，這個(gè)數(shù)值代表所要合并的單元格列數(shù)3.2添加表格3.2.3合并行與列在制作一個(gè)表格時(shí)，有時(shí)需要設(shè)計(jì)表格的單元格內(nèi)容與單元格邊框之間的空白間距，以及單元格與單元格邊框之間的空白間距，使表格更美觀，這就需要使用到cellpadding屬性和cellspacing屬性。3.2添加表格3.2.4單元格邊距與間距1.cellpadding屬性cellpadding屬性規(guī)定單元邊沿與其內(nèi)容之間的空白，即控制單元格的邊距。cellpadding屬性通常使用在<table>標(biāo)簽中，其屬性值為數(shù)值，常用單位是像素（px），這個(gè)數(shù)值代表單元格內(nèi)容與單元格邊框之間的空白間距，即內(nèi)邊距，默認(rèn)值為1px。cellpadding屬性的語法格式如下所示。<tablecellpadding="pixels">3.2添加表格3.2.4單元格邊距與間距2.cellspacing屬性值得注意的是，請勿將cellpadding屬性與cellspacing屬性相混淆，注意分清它們的用途。從實(shí)用角度出發(fā)，最好不要規(guī)定cellpadding屬性，而是使用CSS來添加內(nèi)邊距。<tablecellspacing="pixels">cellspacing屬性規(guī)定單元格之間的空間，即控制單元格的間距。cellspacing屬性通常使用在<table>標(biāo)簽中，其屬性值為數(shù)值，常用單位是像素（px），這個(gè)數(shù)值代表單元格與單元格邊框之間的空白間距，即外邊距，默認(rèn)值為2px。cellspacing屬性的語法格式如下所示。3.2添加表格3.2.4單元格邊距與間距在表格<table>標(biāo)簽中，設(shè)置cellspacing的值為0，表示單元格與單元格邊框之間的空白間距為0，即表格變?yōu)閱尉€框，但不推薦使用。在實(shí)際開發(fā)中，通常使用CSS中的border-collapse屬性來決定表格的邊框是分開還是合并，它的屬性值有separate（默認(rèn)值）和collapse。當(dāng)屬性值為separate時(shí)，在分隔模式下，相鄰的單元格都擁有獨(dú)立的邊框；當(dāng)屬性值為collapse時(shí)，在合并模式下，相鄰單元格共享邊框。border-collapse屬性合并邊框的代碼如下。table{border-collapse:collapse;}3.2添加表格3.2.5表格其他屬性HTML為表格提供了一系列的屬性用于控制表格的樣式，例如border屬性、bordercolor屬性、align屬性、width屬性、bgcolor屬性、background屬性等。屬性說明border表示是否設(shè)置邊框，可以取值為1和0，1代表有邊框，0代表沒有邊框（通常省略不寫）bordercolor用于設(shè)置邊框顏色。在<table>標(biāo)簽中，需配合border屬性使用，可對表格的整體邊框進(jìn)行顏色的設(shè)置align設(shè)置單元格內(nèi)容的水平對齊方式。在<tr>和<td>標(biāo)簽中，align屬性默認(rèn)值為左對齊（left），在<th>標(biāo)簽中，align屬性默認(rèn)值為居中對齊（center）。而在<table>標(biāo)簽中，align屬性用于設(shè)置表格在網(wǎng)頁中的水平對齊方式。valign設(shè)置單元格內(nèi)容的垂直對齊方式，默認(rèn)值為居中對齊（center）width設(shè)置單元格的寬度，當(dāng)一列單元格中有不同width屬性值時(shí)，取最大值作為這一列的寬度3.2添加表格3.2.5表格其他屬性續(xù)表屬性說明bgcolor規(guī)定表格的背景顏色。在HTML4.01中，表格的bgcolor屬性已廢棄，HTML5已不支持表格的bgcolor屬性，但在瀏覽器中仍能識(shí)別出來。當(dāng)需要設(shè)置表格背景顏色時(shí)，一般在CSS樣式中設(shè)置background設(shè)置表格的背景圖片，屬性值為一個(gè)有效的圖片地址，不推薦使用。在實(shí)際開發(fā)中，通常使用CSS屬性設(shè)置表格的背景圖片border屬性不會(huì)控制邊框的樣式，若需要設(shè)置邊框樣式，通常使用CSS樣式設(shè)計(jì)表格邊框，即通過border屬性的連寫設(shè)置邊框。CSS樣式設(shè)計(jì)邊框的示例代碼如下。table{border:1pxsolid#aaa;}3.2添加表格3.2.6案例—個(gè)人簡歷表本實(shí)例是使用HTML表格標(biāo)簽制作一份個(gè)人簡歷表。該頁面主要由表格的基本標(biāo)簽<table>標(biāo)簽、<tr>標(biāo)簽、<td>標(biāo)簽以及<caption>標(biāo)簽構(gòu)成，個(gè)人簡歷表格頁面結(jié)構(gòu)簡圖如圖所示。3.2添加表格3.2.6案例—個(gè)人簡歷表代碼實(shí)現(xiàn)<body><table><caption>個(gè)人簡歷</caption>

<tr>

<!--為指定的單元格設(shè)置class名稱--><tdclass="stuff">姓名</td><td></td>

<!--此處省略雷同代碼-->

<!--設(shè)置單元格所跨的列數(shù)和行數(shù)，即合并單元格的行與列，并設(shè)置寬度--><tdcolspan="2"rowspan="3"width="136">照片</td></tr><!--此處省略雷同代碼--><!--為這一行的單元格增加高度--><trheight="90"><tdclass="stuff">個(gè)人特長與愛好</td><tdcolspan="7"></td></tr>

<!--此處省略雷同代碼--></table></body>主體代碼

例3.63.2添加表格3.2.6案例—個(gè)人簡歷表代碼實(shí)現(xiàn)<style>

/*為整個(gè)表格和單元格設(shè)置邊框?qū)挾?、框線樣式和邊框顏色*/table,td{

border:1pxsolid#aaa;}table{width:702px;/*設(shè)置表格寬度*/

border-collapse:collapse;/*為表格

溫馨提示

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

最新文檔

評論

0/150

提交評論