第一次作业
1.简答作业
1 分别说出什么是HTML,XHTML,HTML5
HTML:超文本标记语言(与浏览器打交道)
标记:标签:<html>开头 </html>结束
XHTML:可扩展超文本标记语言
HTML5:包括HTML CSS和Javascript在内的一套技术组合
2 写出HTML的语法:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
</body>
</html>
3 HTML中的注释和CSS中的注释
/* */
4 CSS中的引入方式有哪些?说出他们的区别和语法
(1)使用HTML标签的STYLE属性(2)将样式代码写在页面<STYLE>...</STYLE>(3)使用LINK标签,引用外部CSS文件。
5 背景图片有哪些子属性?
颜色,大小,是否平铺(repeat),位置(position),锁定(fixed),不锁定
6 border有哪些子属性,其中border-style的属性值有哪些?
颜色 上(top)下(bottom)左(left)右(right) 点划线(dotted) 实线(solid) 虚线(dashed) border-right-width border-right-style border-right-color
7 什么是CSS?
层叠样式表
8 你知道CSS属性有哪些?
字体 颜色和背景属性 文本属性
9 什么是W3C标准?
结构标准语言 表现标准语言 行为标准
10 常见的浏览器有哪几种?五大浏览器内核分别是什么?、
IE SAFARI OPERA CHROME IE内核 Firefox内核 Safair内核 CHrome内核Opera内核
2.编程作业
百度产品更多侧边栏的实现:
要求: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>无标题文档</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>