版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
基于DIV+CSS技術(shù)介紹我的家鄉(xiāng)
--項目介紹01項目介紹項目的流程02項目的分析03目錄學(xué)到現(xiàn)在，我們會把一個網(wǎng)頁分成多個盒子，再分別為盒子設(shè)置各種樣式。接下來，我們來完成一個項目--介紹自己的家鄉(xiāng)。本項目是完成一個網(wǎng)頁，用于
介紹自己的家鄉(xiāng)。
要求：
1、以右邊的布局為基準(zhǔn)，至少
包含此頁面，可自己擴(kuò)展；
2、圖文并茂；
3、突出家鄉(xiāng)特色、讓更多的人
認(rèn)識你的家鄉(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項目介紹2項目流程產(chǎn)品經(jīng)理1位UI設(shè)計人員2位開發(fā)人員2-4位測試人員1-2位職責(zé)：項目的負(fù)責(zé)人。從業(yè)務(wù)出發(fā)分析需求，確定網(wǎng)頁主題畫出網(wǎng)頁原型和撰寫需求文檔，主持需求評審會職責(zé)：設(shè)計網(wǎng)頁，把握網(wǎng)頁的整體美觀。1人設(shè)計，1人收集圖片、文字等素材職責(zé)：搭建網(wǎng)頁的技術(shù)架構(gòu)，并編程實現(xiàn)網(wǎng)頁職責(zé)：根據(jù)產(chǎn)品要求，對網(wǎng)頁效果進(jìn)行測試，把關(guān)質(zhì)量需求分析UI設(shè)計編程開發(fā)整合測試第一：需求分析需求分析階段形成的成果是《產(chǎn)品需求文檔》，是整個項目的指揮棒。本項目的需求是展示自己的家鄉(xiāng)，功能比較單一。我們將重點(diǎn)放在畫原型，也就是把設(shè)計的想法通過工具呈現(xiàn)出來，即網(wǎng)頁的仿真效果，方便小組討論。這里選用在線原型設(shè)計網(wǎng)站“墨刀”（1）訪問地址：
https://modao.cc/，安裝打開后，使用起來很簡單，（2）畫原型：考慮不同分辨率大小的屏幕顯示情況。這里先只考慮電腦屏幕，特點(diǎn)是水平可顯示更多內(nèi)容，字體較大，需高質(zhì)量的圖片。第二：UI設(shè)計UI設(shè)計階段形成的成果是UI設(shè)計圖。這里主要是排版布局、主題顏色、風(fēng)格。目前，我們設(shè)計能力有限，主要以尋找網(wǎng)絡(luò)素材為主。高清圖片網(wǎng)站：/
/zh//
//圖標(biāo)庫常用的免費(fèi)素材庫：/
//阿里巴巴素材庫，免費(fèi)注冊使用https://material.io/resources
//material
設(shè)計素材庫第三：編程開發(fā)編程開發(fā)階段形成的成果是可運(yùn)行的產(chǎn)品。這里我們選用DIV+CSS技術(shù)進(jìn)行編程。測試驗收階段形成的成果是測試報告。對照《產(chǎn)品需求文檔》，測試流程主要包括：測試主流程是否通過功能測試記錄bug回歸測試本項目由于功能較單一，暫不進(jìn)行測試。第四：測試驗收3項目分析1）把網(wǎng)頁劃分成3個div盒子，控制好盒子的高度、寬度，盡量使用百分比，比如寬度100%；2）設(shè)置盒子之間的上下外邊距、左右外邊距，可先加上邊框，注意要注意外邊距的合并現(xiàn)象；3）在頁頭加上背景圖；4）在頁尾加上文字。分工協(xié)作：1、確定介紹的家鄉(xiāng)2、找素材3、畫原型4、編程搭框架頁頭：div盒子內(nèi)容：1個div大盒子頁尾：1個div盒子內(nèi)容上半部分：1個div盒子每個圖文內(nèi)容又是一個子div盒子圖、文垂直方向排列內(nèi)容下半部分：1個div盒子每個圖文內(nèi)容又是一個子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)
--浮動屬性01浮動屬性代碼示例02目錄1浮動屬性在標(biāo)準(zhǔn)流中，一般情況下一個塊級元素在水平方向會自動伸展，直到包含它的元素的邊界，在豎直方向和兄弟元素依次排列。為了使網(wǎng)頁的布局和結(jié)構(gòu)更加豐富、自由、合理，CSS樣式可以對元素設(shè)置浮動屬性，使網(wǎng)頁元素脫離原有標(biāo)準(zhǔn)流，改變它的排列方式，使塊級元素在同一行中排列，讓網(wǎng)頁布局操作更加方便。元素的浮動是通過float屬性來實現(xiàn)，浮動的元素將會脫離原有文檔流的控制進(jìn)行移動，移動的方向根據(jù)float屬性值確定。float屬性值：none：默認(rèn)值，表示元素不浮動；left：左浮動，則元素的移動目標(biāo)是網(wǎng)頁的左上角。具體運(yùn)動軌跡是：浮動元素從所在的行開始，自右向左移動，當(dāng)?shù)竭_(dá)本行的左側(cè)時，移至上一行繼續(xù)自右向左移動，至到網(wǎng)頁的左上角（但該元素未必能達(dá)到左上角，還受制于其他元素的特性）。right：右浮動，則元素的移動目標(biāo)是網(wǎng)頁的右上角，它的運(yùn)動軌跡為：浮動元素從所在行開始，從左往右移動，當(dāng)?shù)竭_(dá)本行的右側(cè)時，移至上一行繼續(xù)自左向右移動，至到網(wǎng)頁的右上角（但該元素未必能達(dá)到右上角，還受制于其他元素的特性）<div>float:right1234<body><div>float:left1234<body>ABCDACBfloat:leftDfloat:rightABDC2代碼示例通過幾段代碼來理解浮動屬性：<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個盒子未設(shè)置float屬性，即默認(rèn)為none效果解釋：代碼由上往下執(zhí)行，3個塊級元素，從上往下排列。<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個盒子均設(shè)置float=left效果解釋：代碼由上往下執(zhí)行，box1的代碼先被執(zhí)行，但由于box1已在網(wǎng)頁的左上角，所以它的位置未發(fā)生改變；；box2脫離原有文檔流的控制從所在行向左移動，當(dāng)?shù)竭_(dá)本行的左側(cè)時，移至上一行繼續(xù)自右向左移動，遇到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個盒子均設(shè)置float=right效果解釋：代碼由上往下執(zhí)行，box1的代碼先被執(zhí)行，它向右浮動到網(wǎng)頁的右側(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個盒子設(shè)置float=left，第2個盒子高和寬比第1個盒子大效果解釋：box1設(shè)置向左浮動，但由于box1已在網(wǎng)頁的左上角，所以它的位置未發(fā)生改變；box2重新調(diào)整大小后，但未設(shè)置浮動屬性，由于非浮動元素會忽略它前面的浮動元素，并取代其前面的浮動元素的位置，則box2置于box1的下方顯示；box3未設(shè)置浮動屬性，故緊挨著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個、3個盒子設(shè)置float=left效果解釋：box1未設(shè)置浮動屬性，所以它的位置不變；box2設(shè)置為左浮動，而它的上一行box1為非浮動元素，則box2不能移至上一行；box3設(shè)置為左浮動，而它的上一行box2為浮動元素，則box3可移至上一行，與box2同行顯示。
總結(jié)：郭春麗基于DIV+CSS技術(shù)介紹我的家鄉(xiāng)
--浮動屬性的應(yīng)用場景01圖文環(huán)繞首字下沉02浮動在項目中的應(yīng)用03目錄1圖文環(huán)繞效果：文字環(huán)繞圖片，無論怎么調(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多年間，一直是中國對外貿(mào)易的重要港口城市。是中國海上絲綢之路的起點(diǎn)。據(jù)《新唐書·地理志》記載，到唐朝時，這條海上“絲綢之路”稱為“廣州通海夷道”，其航程從廣州起，經(jīng)南海、印度洋，直駛巴士拉港，到達(dá)東非赤道以南海岸，這是16世紀(jì)以前世界上最長的遠(yuǎn)洋航線。到唐宋時期，廣州已發(fā)展成為世界著名的東方大港，并首設(shè)全國第一個管理外貿(mào)事務(wù)的機(jī)構(gòu)——市舶使；明清時期，廣州更是特殊開放的口岸，在一段較長的時間內(nèi)，曾是全國惟一的對外貿(mào)易港口城市。鴉片戰(zhàn)爭后，中國與英國簽訂《南京條約》，被迫開放廣州、上海、寧波、福州、廈門五個通商口岸，廣州一口通商的局面從此結(jié)束.
</p>
</body>
</html>
可以不斷調(diào)整瀏覽器大小，會發(fā)現(xiàn)始終文字環(huán)繞圖片，圖片居右使用浮動屬性，應(yīng)該將誰設(shè)置為浮動呢？<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多年間，一直是中國對外貿(mào)易的重要港口城市。是中國海上絲綢之路的起點(diǎn)。據(jù)《新唐書·地理志》記載，到唐朝時，
溫馨提示
- 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 吉林省四平市伊通滿族自治縣第五中學(xué)2024-2025學(xué)年九年級下學(xué)期綜合測試數(shù)學(xué)試題（原卷版+解析版）
- 2023三年級數(shù)學(xué)下冊 三 乘法第2課時 列隊表演（一）教學(xué)實錄 北師大版
- 11《四通八達(dá)的交通》教學(xué)設(shè)計-2023-2024學(xué)年道德與法治三年級下冊統(tǒng)編版
- 智能家居行業(yè)的市場趨勢及產(chǎn)品創(chuàng)新研究
- 大數(shù)據(jù)驅(qū)動的數(shù)字化轉(zhuǎn)型實踐探索
- 三農(nóng)培訓(xùn)資料編寫手冊
- 本科畢業(yè)論文完整范文（滿足查重要求）汽車發(fā)動機(jī)潤滑系故障診斷與排除
- 本科畢業(yè)論文完整范文（滿足查重要求）快遞實名制下個人信息的法律保護(hù)
- 16《夏天里的成長》教學(xué)設(shè)計-2024-2025學(xué)年統(tǒng)編版語文六年級上冊
- 2024年五年級英語下冊 Unit 9 Hes kind to children第3課時教學(xué)實錄 湘少版
- 國家開放大學(xué)本科《商務(wù)英語4》一平臺機(jī)考真題及答案(第四套)
- 交通運(yùn)輸考試題及答案
- 氣體滅火鋼瓶標(biāo)準(zhǔn)檢測流程
- 2025年上半年青島平度市人民檢察院招考編外書記員易考易錯模擬試題（共500題）試卷后附參考答案-1
- 【牛客網(wǎng)】2024秋季校園招聘白皮書
- 老年上消化道出血急診診療專家共識2024解讀
- 主水管改造合同范例
- 《電工技術(shù)》課件-戴維南定理
- 力與運(yùn)動的關(guān)系（專題訓(xùn)練）【三大題型】（原卷版）-八年級物理下冊
- 《腎友保健知識》課件
- DB4205T70-2024 既有住宅加裝電梯技術(shù)規(guī)范
評論
0/150
提交評論