table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）
項(xiàng)目七 項(xiàng)目實(shí)踐：TABLE+CSS制作《互聯(lián)世紀(jì)網(wǎng)》
實(shí)踐目標(biāo)
1、 熟悉CSS屬性
2、 熟練運(yùn)用CSS屬性控制網(wǎng)頁樣式
3、 熟悉網(wǎng)頁制作流程
項(xiàng)目簡介：
通過上一章節(jié)的學(xué)習(xí)，我們了解了CSS樣式能更加方便、有效地控制網(wǎng)頁結(jié)構(gòu)和布局網(wǎng)頁元素，大大提高網(wǎng)頁的排版效率，也方便后期的管理和維護(hù)。接下來將通過互聯(lián)世紀(jì)網(wǎng)的制作來體會和加強(qiáng)對同學(xué)對于CSS的理解和運(yùn)用。在本項(xiàng)目中我們將運(yùn)用TABLE+CSS對網(wǎng)頁進(jìn)行布局，和美化網(wǎng)頁。項(xiàng)目效果如下圖：
任務(wù)一：項(xiàng)目解析
任務(wù)描述：
在前面的兩個章節(jié)中，我們學(xué)習(xí)了CSS的基本語法和一些常用的基本屬性，在本章的項(xiàng)目實(shí)踐中，我們會把這些知識進(jìn)行綜合利用，使用table+CSS進(jìn)行互聯(lián)世紀(jì)網(wǎng)的頁面布局，讓大家對CSS的優(yōu)點(diǎn)有更深刻的體會。
在本項(xiàng)目中，通過分析效果圖，我們可以把互聯(lián)世紀(jì)網(wǎng)分為五大部分：頭部、主體1、主體2、主體3、底部版權(quán)。
其中頭部包括互聯(lián)世紀(jì)網(wǎng)的圖片logo，本站首頁、關(guān)于我們和會員服務(wù)。
主體1是一行兩列的表格，分為左右兩部分，左邊是一大段文字，右邊是2014。
主體2是特惠方案，一行三列的表格，每個單元格內(nèi)采用ul、li的標(biāo)簽。
主體3采用了4行2列的表格，前三行，左邊是標(biāo)題，右邊是文字描述。最后一部分內(nèi)容合并兩個單元格。
底部版權(quán)包括兩部分，hr標(biāo)簽的一條細(xì)線，第二部分實(shí)際上就是一個一行一列的表格，里面放置了兩段文字聲明網(wǎng)頁的版權(quán)信息。
在接下來的任務(wù)中我們將分別按照這個布局規(guī)劃將互聯(lián)世紀(jì)網(wǎng)逐步制作出來。
任務(wù)二：互聯(lián)世紀(jì)網(wǎng)頭部制作
任務(wù)要求：
1、 制作出互聯(lián)世紀(jì)網(wǎng)頭部，包括：logo，右邊的三個文字鏈接。
2、 每個文字鏈接前面有圖片小圖標(biāo)。
3、 布局整潔大方，配色協(xié)調(diào)美觀。
實(shí)踐目標(biāo)：
1、 掌握table網(wǎng)頁布局。
2、 能綜合運(yùn)用table+CSS常用屬性制作簡單的網(wǎng)頁。
參考步驟：
1、 插入一行兩列的表格，左邊放logo，右邊放三個文字鏈接。
2、 在每個文字鏈接前面插入小圖標(biāo)。
HTML 源代碼：
CSS代碼：
效果預(yù)覽：
任務(wù)三：互聯(lián)世紀(jì)網(wǎng)主體部分-1制作
任務(wù)要求：
1、 左右文字區(qū)域添加不同樣式。
2、 文字下方為高為30像素的灰色區(qū)域。
3、 布局整潔大方，配色協(xié)調(diào)美觀。
實(shí)踐目標(biāo)：
1、 掌握table網(wǎng)頁布局。
2、 能綜合運(yùn)用table+CSS常用屬性制作簡單的網(wǎng)頁。
參考步驟：
1、 新建一個兩行兩列的表格，第一行的左邊放文字內(nèi)容，右邊放2014。
2、 為不同的文字添加不同的樣式。
3、 合并表格第二行，添加樣式為gray。
4、 在頭部為樣式添加屬性和值。
HTML 源代碼：
CSS代碼：
效果預(yù)覽：
任務(wù)四：互聯(lián)世紀(jì)網(wǎng)主體-2制作
任務(wù)要求：
1、 每種套餐的邊框?yàn)榧?xì)雙線。
2、 每種套餐內(nèi)的價格列表用ul、li來定義。
3、 布局整潔大方，配色協(xié)調(diào)美觀。
實(shí)踐目標(biāo)：
1、 掌握table網(wǎng)頁布局。
2、 能綜合運(yùn)用table+CSS常用屬性制作簡單的網(wǎng)頁。
參考步驟：
1、 新建一行三列的表格。
2、 在每個單元格內(nèi)插入圖片的標(biāo)題，居中。
3、 每個單元格內(nèi)插入ul、li標(biāo)簽，列表屬性為小圖片。
4、 用p標(biāo)簽插入馬上申請的小圖片，添加樣式為right。
HTML 源代碼：
CSS代碼：
效果預(yù)覽：
任務(wù)五：互聯(lián)世紀(jì)網(wǎng)主體-3制作
任務(wù)要求：
1、 左邊區(qū)域?yàn)槿齻€小標(biāo)題，邊框?yàn)樘摼€。
2、 右邊區(qū)域?yàn)閷?yīng)的文字描述。
3、 布局整潔大方，配色協(xié)調(diào)美觀。
實(shí)踐目標(biāo)：
1、 掌握table網(wǎng)頁布局。
2、 能綜合運(yùn)用table+CSS常用屬性制作簡單的網(wǎng)頁。
參考步驟：
1、 插入四行兩列的表格。
2、 前三行，左邊添加標(biāo)題在span標(biāo)簽內(nèi)部，為標(biāo)題添加名為btbj的類型選擇符。第二列單元格內(nèi)在p標(biāo)記內(nèi)添加文字。
3、 第四行用ul、li的標(biāo)簽添加內(nèi)容列表。
HTML 源代碼：
CSS代碼：
效果預(yù)覽：
任務(wù)六：互聯(lián)世紀(jì)網(wǎng)底部版權(quán)制作
任務(wù)要求：
1、 版權(quán)上方有一條細(xì)線。
2、 版權(quán)塊以灰色的背景顯示，文字居中。
3、 布局整潔大方，配色協(xié)調(diào)美觀。
實(shí)踐目標(biāo)：
1、 掌握table網(wǎng)頁布局。
2、 能綜合運(yùn)用table+CSS常用屬性制作簡單的網(wǎng)頁。
參考步驟：
1、 用hr標(biāo)簽添加一條細(xì)線。
2、 版權(quán)內(nèi)容添加一行一列的表格，背景設(shè)為灰色，添加文字。
HTML 源代碼：
CSS代碼：
效果預(yù)覽：
項(xiàng)目總結(jié)：
本項(xiàng)目綜合運(yùn)用了多方面的知識和技能設(shè)計(jì)來制作網(wǎng)站的主頁。詳細(xì)介紹了該網(wǎng)頁的主體布局和局部布局的設(shè)計(jì)過程。運(yùn)用TABLE+CSS布局網(wǎng)頁，該網(wǎng)頁中應(yīng)用了CSS中常見的屬性：字體、顏色及背景、文本、邊框、列表等屬性。最終展示出這些網(wǎng)頁元素的綜合運(yùn)用效果。通過該項(xiàng)目的制作，鞏固table的基礎(chǔ)知識，為接下來的CSS+DIV布局打下良好的基礎(chǔ)。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高考士官学校是否招武警
- 下一篇： button设置disabled属性不生