《Web前端開發(fā)技術》課件-1-3 項目CSS修飾-盒子屬性

江西臥龍公司靜態(tài)首頁CSS修飾——盒子屬性

引入橫向布局縱向布局解決辦法：要么不用P標簽，改變元素類型；要么浮動起來P標簽是塊元素，獨占一整行

目錄盒子屬性解讀練習項目訓練1：江西臥龍項目堆色塊2項目訓練2：江西臥龍項目頭部的制作項目訓練3：江西臥龍項目導航條的制作練習一、盒子屬性1、盒子屬性任務說明：任務實施1、DIV內容：高寬300px；邊框為1px；背景灰色1、盒子屬性任務說明：任務實施2、padding內容：Padding上下左右各50px50問題：控制臺上內容區(qū)域的高寬各撐大了100px？？高寬300px高寬402px解決：若要保留盒子的寬高300px，要各減100px1、padding屬性任務說明：任務實施2、margin內容：margin上下左右各50px50高寬300px*{margin:0px;padding:0;}取消默認邊距2、padding屬性任務實施Padding:1個參數(shù)代表上下左右Padding:2個參數(shù)代表上下左右Padding:3個參數(shù)代表上左右下Padding:4個參數(shù)代表上右下左padding:50px復合寫法，代表上下左右填充值； padding-top:50px; padding-right:50px; padding-bottom:50px; padding-left:50px;Margin:20pxauto;2、margin屬性注意事項Margin疊加

當給兩個盒子同時添加上下外邊距的時候，就會出現(xiàn)疊加的問題Margin傳遞margin傳遞的問題只會出現(xiàn)在嵌套的結構中，且只有margin-top會有傳遞的問題，其他三個方向是沒有傳遞問題的解決方法：只給一個盒子加margin邊距，另一個不加！左右是不會疊加解決方法：1、用padding-top（加給誰？）2、父級加overflow:hidden;3、父級display:inline-block;（內聯(lián)塊）4、父級浮動float:left;練習——布局1、大盒子wrap（背景色為紅色）

里面裝了個小的盒子main（背景色為白色）2、白色的盒子里，有文字：1個標題h2,1個段落p標簽形成代碼（html部分）：練習——測量練習——加基礎CSS（寬高背景）父級盒子 width:551px; /*height:137px;*//*高度自適應*/ 背景色：紅色 子級盒子 width:528px; height:66px; 背景色：白色練習——加CSS邊距、填充子級盒子

padding:23px10px3px0; margin:8px9px37px4px;練習——CSS文字屬性標題h2：字號14px，行高，字體顏色：段落P：字號12px，行高，字體顏色：，首行縮進2個字符練習<h3class="t"><ahref="#"target="_blank">HTML<em><ins></em>標簽,<em>ins</em>的英文全稱是??_百度知道</a></h3>Span節(jié)點標簽項目CSS修飾——堆色塊2堆色塊訓練2100px59px463px254px292px250px82px堆色塊訓練2——頭部制作分析：1、大盒子id=header（高100，寬1000）

里面裝了2個小的盒子class=logoclass=search2、logo盒子里放了個h1,h1里放了個超鏈接；search里放表單，表單放文本輸入框與提交按鈕形成代碼（html部分）：堆色塊訓練2——頭部制作分析：1、大盒子id=header（高100，寬1000）

里面裝了2個小的盒子class=logoclass=search2、logo盒子里放了個h1,h1里放了個超鏈接；search里放表單，表單放文本輸入框與提交按鈕形成代碼（CSS部分）：/*頁面開始*/#wrapper{width:1000px;margin:0pxauto;}#header{width:1000px;height:100px;/*background:#999;*/overflow:hidden;}#header.logo{height:21px;width:243px;float:left;margin-top:37px;margin-left:23px;}#headerh1{height:21px;width:243px;background:url("../images/logo.jpg")no-repeat;}#headerh1a{display:block;height:21px;width:243px;text-indent:-999px;}

#header.search{height:26px;width:225px;float:right;border:1pxsolid#e5e5e5;margin-top:37px;margin-right:23px;/*background:url("../images/search.jpg")no-repeat;*/}#header.search.search_text{width:187px;/*201px-14px*/height:26px;border:none;outline:none;background:#f0f0f0;float:left;/*S與左邊距離*/padding-left:14px;font-size:10px;color:#858585;}#header.search.search_sub{width:24px;height:26px;float:right;border:none;outline:none;background:url("../images/search-sub.jpg")no-repeat;}堆色塊訓練2——內容新聞區(qū)制作分析：1、大盒子id=main里面裝了2個小的盒子class=newsclass=img-list2、news盒子里放了3個div形成代碼（html部分）：堆色塊訓練2——內容新聞區(qū)制作——測量分析：1、news-left：堆色塊訓練2——內容新聞區(qū)制作——測量分析：1、news-center：堆色塊訓練2——內容新聞區(qū)制作