第一次作業(yè)
1.簡(jiǎn)答作業(yè)
1 分別說出什么是HTML,XHTML,HTML5
HTML：超文本標(biāo)記語(yǔ)言(與瀏覽器打交道)
標(biāo)記：標(biāo)簽：<html>開頭 </html>結(jié)束
XHTML:可擴(kuò)展超文本標(biāo)記語(yǔ)言
HTML5：包括HTML CSS和Javascript在內(nèi)的一套技術(shù)組合
2 寫出HTML的語(yǔ)法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head><body>
</body>
</html>
3 HTML中的注釋和CSS中的注釋
/* */
4 CSS中的引入方式有哪些？說出他們的區(qū)別和語(yǔ)法
(1)使用HTML標(biāo)簽的STYLE屬性(2)將樣式代碼寫在頁(yè)面<STYLE>...</STYLE>(3)使用LINK標(biāo)簽，引用外部CSS文件。
5 背景圖片有哪些子屬性？
顏色，大小，是否平鋪(repeat)，位置(position)，鎖定(fixed)，不鎖定
6 border有哪些子屬性，其中border-style的屬性值有哪些？
顏色 上(top)下(bottom)左(left)右(right) 點(diǎn)劃線(dotted) 實(shí)線(solid) 虛線(dashed) border-right-width border-right-style border-right-color
7 什么是CSS？
層疊樣式表
8 你知道CSS屬性有哪些？
字體 顏色和背景屬性 文本屬性
9 什么是W3C標(biāo)準(zhǔn)？
結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言 行為標(biāo)準(zhǔn)
10 常見的瀏覽器有哪幾種？五大瀏覽器內(nèi)核分別是什么？、
IE SAFARI OPERA CHROME IE內(nèi)核 Firefox內(nèi)核 Safair內(nèi)核 CHrome內(nèi)核Opera內(nèi)核
2.編程作業(yè)
百度產(chǎn)品更多側(cè)邊欄的實(shí)現(xiàn)：
要求：ps切圖
圖片以背景圖的方式插入
<!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>無(wú)標(biāo)題文檔</title>
<style>
count-1{
width:134px;
height:1015px;
}
count-2{
width:132px;
height:79px;
border-bottom:2px solid #f0f0f0;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
background:url(test/1.jpg);
}
count-3{
width:132px;
height:152px;
border-bottom:2px solid #f0f0f0;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
background:url(test/2.jpg)
}
count-4{
width:132px;
height:152px;
border-bottom:2px solid #f0f0f0;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
background:url(test/3.jpg)
}
count-5{
width:132px;
height:152px;
border-bottom:2px solid #f0f0f0;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
background:url(test/4.jpg)
}
count-6{
width:132px;
height:152px;
border-bottom:2px solid #f0f0f0;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
background:url(test/5.jpg)
}
count-7{
width:132px;
height:152px;
border-bottom:2px solid #f0f0f0;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
background:url(test/6.jpg)
}
count-8{
width:132px;
height:152px;
border-bottom:2px solid #f0f0f0;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
background:url(test/7.jpg)
}
</style>
</head>
<body>
<div id="count-1">
<div id="count-2"></div>
<div id="count-3"></div>
<div id="count-4"></div>
<div id="count-5"></div>
<div id="count-6"></div>
<div id="count-7"></div>
<div id="count-8"></div>
</div>
</body>
</html>
