版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
基于DIV+CSS技術(shù)介紹我的家鄉(xiāng)
--項(xiàng)目介紹01項(xiàng)目介紹項(xiàng)目的流程02項(xiàng)目的分析03目錄學(xué)到現(xiàn)在，我們會(huì)把一個(gè)網(wǎng)頁(yè)分成多個(gè)盒子，再分別為盒子設(shè)置各種樣式。接下來(lái)，我們來(lái)完成一個(gè)項(xiàng)目--介紹自己的家鄉(xiāng)。本項(xiàng)目是完成一個(gè)網(wǎng)頁(yè)，用于
介紹自己的家鄉(xiāng)。
要求：
1、以右邊的布局為基準(zhǔn)，至少
包含此頁(yè)面，可自己擴(kuò)展；
2、圖文并茂；
3、突出家鄉(xiāng)特色、讓更多的人
認(rèn)識(shí)你的家鄉(xiāng)。文字一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容文字一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容文字@版權(quán)***小組制作一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容1項(xiàng)目介紹2項(xiàng)目流程產(chǎn)品經(jīng)理1位UI設(shè)計(jì)人員2位開(kāi)發(fā)人員2-4位測(cè)試人員1-2位職責(zé)：項(xiàng)目的負(fù)責(zé)人。從業(yè)務(wù)出發(fā)分析需求，確定網(wǎng)頁(yè)主題畫(huà)出網(wǎng)頁(yè)原型和撰寫(xiě)需求文檔，主持需求評(píng)審會(huì)職責(zé)：設(shè)計(jì)網(wǎng)頁(yè)，把握網(wǎng)頁(yè)的整體美觀。1人設(shè)計(jì)，1人收集圖片、文字等素材職責(zé)：搭建網(wǎng)頁(yè)的技術(shù)架構(gòu)，并編程實(shí)現(xiàn)網(wǎng)頁(yè)職責(zé)：根據(jù)產(chǎn)品要求，對(duì)網(wǎng)頁(yè)效果進(jìn)行測(cè)試，把關(guān)質(zhì)量需求分析UI設(shè)計(jì)編程開(kāi)發(fā)整合測(cè)試第一：需求分析需求分析階段形成的成果是《產(chǎn)品需求文檔》，是整個(gè)項(xiàng)目的指揮棒。本項(xiàng)目的需求是展示自己的家鄉(xiāng)，功能比較單一。我們將重點(diǎn)放在畫(huà)原型，也就是把設(shè)計(jì)的想法通過(guò)工具呈現(xiàn)出來(lái)，即網(wǎng)頁(yè)的仿真效果，方便小組討論。這里選用在線原型設(shè)計(jì)網(wǎng)站“墨刀”（1）訪問(wèn)地址：
https://modao.cc/，安裝打開(kāi)后，使用起來(lái)很簡(jiǎn)單，（2）畫(huà)原型：考慮不同分辨率大小的屏幕顯示情況。這里先只考慮電腦屏幕，特點(diǎn)是水平可顯示更多內(nèi)容，字體較大，需高質(zhì)量的圖片。第二：UI設(shè)計(jì)UI設(shè)計(jì)階段形成的成果是UI設(shè)計(jì)圖。這里主要是排版布局、主題顏色、風(fēng)格。目前，我們?cè)O(shè)計(jì)能力有限，主要以尋找網(wǎng)絡(luò)素材為主。高清圖片網(wǎng)站：/
/zh//
//圖標(biāo)庫(kù)常用的免費(fèi)素材庫(kù)：/
//阿里巴巴素材庫(kù)，免費(fèi)注冊(cè)使用https://material.io/resources
//material
設(shè)計(jì)素材庫(kù)第三：編程開(kāi)發(fā)編程開(kāi)發(fā)階段形成的成果是可運(yùn)行的產(chǎn)品。這里我們選用DIV+CSS技術(shù)進(jìn)行編程。測(cè)試驗(yàn)收階段形成的成果是測(cè)試報(bào)告。對(duì)照《產(chǎn)品需求文檔》，測(cè)試流程主要包括：測(cè)試主流程是否通過(guò)功能測(cè)試記錄bug回歸測(cè)試本項(xiàng)目由于功能較單一，暫不進(jìn)行測(cè)試。第四：測(cè)試驗(yàn)收3項(xiàng)目分析1）把網(wǎng)頁(yè)劃分成3個(gè)div盒子，控制好盒子的高度、寬度，盡量使用百分比，比如寬度100%；2）設(shè)置盒子之間的上下外邊距、左右外邊距，可先加上邊框，注意要注意外邊距的合并現(xiàn)象；3）在頁(yè)頭加上背景圖；4）在頁(yè)尾加上文字。分工協(xié)作：1、確定介紹的家鄉(xiāng)2、找素材3、畫(huà)原型4、編程搭框架頁(yè)頭：div盒子內(nèi)容：1個(gè)div大盒子頁(yè)尾：1個(gè)div盒子內(nèi)容上半部分：1個(gè)div盒子每個(gè)圖文內(nèi)容又是一個(gè)子div盒子圖、文垂直方向排列內(nèi)容下半部分：1個(gè)div盒子每個(gè)圖文內(nèi)容又是一個(gè)子div盒子圖、文水平方向排列背景圖，文字在懸浮在的圖指定位置上文字固定在指定位置上文字一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容文字一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容文字@版權(quán)***小組制作一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容一段內(nèi)容
總結(jié)：郭春麗基于DIV+CSS技術(shù)介紹我的家鄉(xiāng)
--浮動(dòng)屬性01浮動(dòng)屬性代碼示例02目錄1浮動(dòng)屬性在標(biāo)準(zhǔn)流中，一般情況下一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，直到包含它的元素的邊界，在豎直方向和兄弟元素依次排列。為了使網(wǎng)頁(yè)的布局和結(jié)構(gòu)更加豐富、自由、合理，CSS樣式可以對(duì)元素設(shè)置浮動(dòng)屬性，使網(wǎng)頁(yè)元素脫離原有標(biāo)準(zhǔn)流，改變它的排列方式，使塊級(jí)元素在同一行中排列，讓網(wǎng)頁(yè)布局操作更加方便。元素的浮動(dòng)是通過(guò)float屬性來(lái)實(shí)現(xiàn)，浮動(dòng)的元素將會(huì)脫離原有文檔流的控制進(jìn)行移動(dòng)，移動(dòng)的方向根據(jù)float屬性值確定。float屬性值：none：默認(rèn)值，表示元素不浮動(dòng)；left：左浮動(dòng)，則元素的移動(dòng)目標(biāo)是網(wǎng)頁(yè)的左上角。具體運(yùn)動(dòng)軌跡是：浮動(dòng)元素從所在的行開(kāi)始，自右向左移動(dòng)，當(dāng)?shù)竭_(dá)本行的左側(cè)時(shí)，移至上一行繼續(xù)自右向左移動(dòng)，至到網(wǎng)頁(yè)的左上角（但該元素未必能達(dá)到左上角，還受制于其他元素的特性）。right：右浮動(dòng)，則元素的移動(dòng)目標(biāo)是網(wǎng)頁(yè)的右上角，它的運(yùn)動(dòng)軌跡為：浮動(dòng)元素從所在行開(kāi)始，從左往右移動(dòng)，當(dāng)?shù)竭_(dá)本行的右側(cè)時(shí)，移至上一行繼續(xù)自左向右移動(dòng)，至到網(wǎng)頁(yè)的右上角（但該元素未必能達(dá)到右上角，還受制于其他元素的特性）<div>float:right1234<body><div>float:left1234<body>ABCDACBfloat:leftDfloat:rightABDC2代碼示例通過(guò)幾段代碼來(lái)理解浮動(dòng)屬性：<html><head>
<title>float屬性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
}
#box2{
background-color:blue;
}
#box3{
background-color:green;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>3個(gè)盒子未設(shè)置float屬性，即默認(rèn)為none效果解釋?zhuān)捍a由上往下執(zhí)行，3個(gè)塊級(jí)元素，從上往下排列。<html><head>
<title>float屬性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
float:left;
}
#box2{
background-color:blue;
float:left;
}
#box3{
background-color:green;
float:left;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>3個(gè)盒子均設(shè)置float=left效果解釋?zhuān)捍a由上往下執(zhí)行，box1的代碼先被執(zhí)行，但由于box1已在網(wǎng)頁(yè)的左上角，所以它的位置未發(fā)生改變；；box2脫離原有文檔流的控制從所在行向左移動(dòng)，當(dāng)?shù)竭_(dá)本行的左側(cè)時(shí)，移至上一行繼續(xù)自右向左移動(dòng)，遇到box1就此停止。box3同box2一樣的原理。<html><head>
<title>float屬性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
float:right;
}
#box2{
background-color:blue;
float:right;
}
#box3{
background-color:green;
float:right;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>3個(gè)盒子均設(shè)置float=right效果解釋?zhuān)捍a由上往下執(zhí)行，box1的代碼先被執(zhí)行，它向右浮動(dòng)到網(wǎng)頁(yè)的右側(cè)；而box3的代碼最后被執(zhí)行，則顯示在它們的最左側(cè)。<html><head>
<title>float屬性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
float:left;
}
#box2{
background-color:blue;
width:250px;
height:150px;
}
#box3{
background-color:green;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>第1個(gè)盒子設(shè)置float=left，第2個(gè)盒子高和寬比第1個(gè)盒子大效果解釋?zhuān)篵ox1設(shè)置向左浮動(dòng)，但由于box1已在網(wǎng)頁(yè)的左上角，所以它的位置未發(fā)生改變；box2重新調(diào)整大小后，但未設(shè)置浮動(dòng)屬性，由于非浮動(dòng)元素會(huì)忽略它前面的浮動(dòng)元素，并取代其前面的浮動(dòng)元素的位置，則box2置于box1的下方顯示；box3未設(shè)置浮動(dòng)屬性，故緊挨著box2，并自上而下排列，則顯示在box2下方。<html><head>
<title>float屬性</title>
<style
type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:150px;
height:50px;
}
#box1{
background-color:red;
}
#box2{
background-color:blue;
float:left;
}
#box3{
background-color:green;
float:left;
}
</style></head><body>
<div
id="box1">box1</div>
<div
id="box2">box2</div>
<div
id="box3">box3</div></body>
</html>第2個(gè)、3個(gè)盒子設(shè)置float=left效果解釋?zhuān)篵ox1未設(shè)置浮動(dòng)屬性，所以它的位置不變；box2設(shè)置為左浮動(dòng)，而它的上一行box1為非浮動(dòng)元素，則box2不能移至上一行；box3設(shè)置為左浮動(dòng)，而它的上一行box2為浮動(dòng)元素，則box3可移至上一行，與box2同行顯示。
總結(jié)：郭春麗基于DIV+CSS技術(shù)介紹我的家鄉(xiāng)
--浮動(dòng)屬性的應(yīng)用場(chǎng)景01圖文環(huán)繞首字下沉02浮動(dòng)在項(xiàng)目中的應(yīng)用03目錄1圖文環(huán)繞效果：文字環(huán)繞圖片，無(wú)論怎么調(diào)整瀏覽器大小，文字始終環(huán)繞圖片。1圖文環(huán)繞<html>
<head>
<title>文字環(huán)繞-圖片居右</title>
<style>
img{
float:right;
/*文字環(huán)繞圖片*/
width:400px;
height:200px;
}
p{
color:#000000;
/*文字顏色*/
text-indent:2em;
letter-spacing:5;
}
p::first-letter{
/*首字放大*/
font-size:30px;
font-family:黑體;
}
</style>
</head>
<body>
<img
src="images/gz-3.png"border="0">
<p>廣州由秦漢起至明清2000多年間，一直是中國(guó)對(duì)外貿(mào)易的重要港口城市。是中國(guó)海上絲綢之路的起點(diǎn)。據(jù)《新唐書(shū)·地理志》記載，到唐朝時(shí)，這條海上“絲綢之路”稱(chēng)為“廣州通海夷道”，其航程從廣州起，經(jīng)南海、印度洋，直駛巴士拉港，到達(dá)東非赤道以南海岸，這是16世紀(jì)以前世界上最長(zhǎng)的遠(yuǎn)洋航線。到唐宋時(shí)期，廣州已發(fā)展成為世界著名的東方大港，并首設(shè)全國(guó)第一個(gè)管理外貿(mào)事務(wù)的機(jī)構(gòu)——市舶使；明清時(shí)期，廣州更是特殊開(kāi)放的口岸，在一段較長(zhǎng)的時(shí)間內(nèi)，曾是全國(guó)惟一的對(duì)外貿(mào)易港口城市。鴉片戰(zhàn)爭(zhēng)后，中國(guó)與英國(guó)簽訂《南京條約》，被迫開(kāi)放廣州、上海、寧波、福州、廈門(mén)五個(gè)通商口岸，廣州一口通商的局面從此結(jié)束.
</p>
</body>
</html>
可以不斷調(diào)整瀏覽器大小，會(huì)發(fā)現(xiàn)始終文字環(huán)繞圖片，圖片居右使用浮動(dòng)屬性，應(yīng)該將誰(shuí)設(shè)置為浮動(dòng)呢？<html>
<head>
<title>文字環(huán)繞-圖片居右</title>
<style>
img{
float:right;/*文字環(huán)繞圖片*/
width:400px;
height:200px;
}
p{
color:#000000;
/*文字顏色*/
text-indent:2em;
letter-spacing:5;
}
p::first-letter{
/*首字放大*/
font-size:30px;
font-family:黑體;
}
</style>
</head>
<body>
<img
src="images/gz-3.png"border="0">
<p>廣州由秦漢起至明清2000多年間，一直是中國(guó)對(duì)外貿(mào)易的重要港口城市。是中國(guó)海上絲綢之路的起點(diǎn)。據(jù)《新唐書(shū)·地理志》記載，到唐朝時(shí)，
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 生物材料表面工程與細(xì)胞相互作用調(diào)控
- 生物制劑失效的IBD肛瘺患者治療方案調(diào)整
- 生物制劑失應(yīng)答的炎癥性腸病影像學(xué)評(píng)估進(jìn)展
- 生物3D打印的血管化策略：解決大組織工程瓶頸
- 生活質(zhì)量終點(diǎn)在慢性病藥物失敗原因分析中的價(jià)值
- 同程旅游產(chǎn)品經(jīng)理面試題解析及答題技巧
- 生活方式干預(yù)對(duì)神經(jīng)退行性疾病進(jìn)展的影響
- 政府機(jī)關(guān)辦公室主任職責(zé)與面試題
- 醫(yī)院管理崗位醫(yī)生面試題集
- 排沙潛水泵項(xiàng)目可行性分析報(bào)告范文（總投資15000萬(wàn)元）
- 2025年下半年上海當(dāng)代藝術(shù)博物館公開(kāi)招聘工作人員（第二批）參考筆試試題及答案解析
- 2026國(guó)家糧食和物資儲(chǔ)備局垂直管理局事業(yè)單位招聘應(yīng)屆畢業(yè)生27人考試歷年真題匯編附答案解析
- 癌性疼痛的中醫(yī)治療
- 方格網(wǎng)計(jì)算土方表格
- 學(xué)校計(jì)算機(jī)機(jī)房設(shè)計(jì)方案
- 證券投資案例分析題及答案
- 煎藥室崗前培訓(xùn)PPT
- 家具制造企業(yè)安全檢查表優(yōu)質(zhì)資料
- 如家酒店新版
- GA 1016-2012槍支(彈藥)庫(kù)室風(fēng)險(xiǎn)等級(jí)劃分與安全防范要求
- 《電能質(zhì)量分析》課程教學(xué)大綱
評(píng)論
0/150
提交評(píng)論