第二次作業
1.簡答作業
1什么是CSS語法？
<div> style=" "></div>寫在標簽的style屬性 行間樣式表
井號id名{樣式} 寫在頁面內部，專門的style標簽間 內部樣式表<link bref="index .css"rel="stylesheet"/>寫在單獨的css里面通過link引入當前頁面 外部樣式表
2列舉常見的CSS選擇器
*(通用符選擇器)#(id選擇器).(內選擇器)(包含選擇器)(群組選擇器)(類型選擇器)
3background屬性如何簡寫？
{width： height： border： solid：}
4文本的屬性有哪些？請寫出font的復合式寫法？
像素字體大小字體名稱字體樣式是否正常顯示font-weight font-style font-size font-family
5text-indent有什么作用？
首行縮進
6超鏈接a標簽的作用有哪些？
鏈接的話：可以直接跳轉到被鏈接的另一個資源上 壓縮包的話：直接下載 新窗口打開 當前窗口打開
7a標簽默然樣式是什么？
a{text-decoration:none;}
8什么是盒模型？盒模型包括什么？
把一個元素看成盒子的橫切面 包括 border padding counter等
9padding和margin的區別？
padding為內填充 margin為外邊距
10什么是margin疊加？什么是margin傳遞？
margin疊加相鄰兩個元素的上下margin疊加在一起。margin傳遞子元素的上下margin會傳遞給父級
11列舉幾種常見的語義化標簽？
section板塊部分 header頁面頭部或者板塊頭部 header頁面底部或者section底部 nav導航 article用來在頁面中表示一套結構完整的且獨立的內容部分 aside元素標簽可以包含與當前頁面或主要內容相關的引用，側邊欄，廣告，nav元素組及其他的類似的有別與主要內容的部分 h1-h6標題 p段落 ul 無序列表 ol有序列表 dl定義列表 li ul或ol的列表項 dt定義列表的項目 dd對dt擴展的描述擴展 time時間 img圖片 em強調一個詞或者一個段落 strong強調一個詞或者一個段落
12常見的塊元素和內嵌元素有哪些？簡要說一下他們的區別？
塊元素section header header nav article aside h1-h6 p ul ol dl dt dd 內嵌元素em strong a="herf"塊元素：1獨占一行2支持所有的樣式3不設置寬度的時候寬度撐滿整行 內嵌元素：1可以在一行顯示2不支持寬高隊上下的maegin和padding等樣式支持也有問題3寬度內容由撐開4代碼換行會被解析
2.編程作業
1利用border寫一個圖形效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.box{width:0px;
height:0px;
border:100px solid #f00;
border-bottom-color: #fff;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2寫一個新聞小列表，要求用背景圖自定義列表符號樣式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
box{width: 511px; margin:22px auto;border:1px solid #000000;}
div1{width:511px;height:117;}
div3{padding-top :10px; padding-left:23px; line-height:51px; fout:24px "宋體";color:#404646}
div4{padding-top :61px;padding-left:23px;line-height:43px;fout:20px "宋體";color:#404646}
div5{padding-top :104px; ;padding-left:23px;line-height:26px;fout:14px "宋體";color:#9b9b9b; text-indent:2em;}
div2{padding: 29px 250px 5px 22px;line-height:37px;fout:18px "宋體";color:#404646;border-top: #000 1px dashed;}
</style>
</head>
<body>
<div id="box">
<div id="div1">
<div id=div3>動態新聞</div>
<div id=div4>掌握一門技術的重要性</div>
<div id=div5>掌握一門技術是未來生存的一塊敲門磚，掌握一門技術是未來生存的一塊敲門磚，掌握一門技術是未來生存的一塊敲門磚</div>
<div>
<div id="div2">走進民企觀摩學習與民企面對面走進民企觀摩學習與民企面對面走進民企觀摩學習與民企面對面走進民企觀摩學習與民企面對面</div>
</div>
</body>
</html>
[作業]
\
[改過的作業]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>{margin:0px;
padding:0px;}
#div1{width:557px;
height:343px;
border:1px solid #000;
padding-left:23px;
}
#div2{width:513px;
height:170px;
border-bottom:dashed #000;}
h3{font-size:25px #404646;line-height:52px;font-weight:bolder;}
h4{font-size:20px #404646;line-height:22px;font-weight:bolder;}
p{font-size:15px #9b9b9b;line-height:18px;text-indent:2em;}
#div3{width:513px;
height:160px;}
li{list-style:none;font-size:18px #404646;line-height:34px;font-weight:bolder;}
a{text-decoration:none;color:#404646;background: url(jmp5/1.jpg.gif) no-repeat left center;padding:17px;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<h3>動態新聞</h3>
<h4>掌握一門技術的重要性</h4>
<p>掌握一門技術是未來生存的一塊敲門，磚掌握一門技術是未來生存的一塊敲門磚，掌握一門技術是未來生存的一塊敲門磚</p>
</div>
<ul id="div3">
<li><a href="###">走進民企觀摩學習與民企面對</a></li>
<li><a href="###">走進民企觀摩學習與民企面對</a></li>
<li><a href="###">走進民企觀摩學習與民企面對</a></li>
<li><a href="###">走進民企觀摩學習與民企面對</a></li>
</ul>
</div>
</body>
</html>
