1.什么是css语法?
- CSS 语法由选择器、属性和值组成。选择器通常是你希望定义的 HTML 元素或标签,属性是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明。
2.列举常见的css选择器?
- Id选择器;
- 类选择器 ;
- HTML元素选择器;
- 通配符选择器;
3.background属性如何简写?
- background-color repead position attachment 、、、
4.文本的属性有哪些?请写出font的复合式写法?
- 加粗 倾斜 大小 行高 字体
- font:bold italic size/line-height family
5.text-indent有什么作用?
- 首行缩进
6.超链接a标签的作用有哪些?
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
7.a标签默然样式是什么?
<a href="#"></a>
8.什么是盒模型?盒模型包括什么?\
- 在网页中:内容、填充、边框、边界
- 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
9.padding和margin的区别?
- padding表示内填充,显示元素的背景,而margin表示外填充,其边框之外不显示元素的背景。
10.什么是margin叠加?什么是margin传递?
- 相邻2个元素的margin是叠加在一起,谁的margin值大就用谁的。
- 子元素的上下margin会传递父级margin。
11.列举几种常见的语义化标签?
- <table></table> < p >< /p > <td></td>
12.常见的块元素和内嵌元素有哪些?简要说一下它们的区别?
- 块元素:<div></div> <table></table>
- 内嵌元素:<span> </span> <input>
区别:块元素需要占据整个一行的位置,但是内敛元素只需要占据自己本身内容的大小而占据相应的空间,不一定占据整行,则其他内容不需要重新换一行显示。
编程作业
<!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:513px;
height:350px;
border:1px solid black;
padding:0 22px;
}
#title {
width:108px;
height:43px;
margin:0px 404px 0px 2px;
font:bold 23px/43px "宋体"; color:#3f5062;
}
#body1 {
width:228px;
height:55px;
margin:1px 284px 0px 2px;
font:bold 20px/54px "宋体"; color:#3f5062;
}
#body2 {
width:461px;
height:80px;
margin:0px 51px 28px 2px;
font:14px/26px "宋体";
color:#9b9b9b;
text-indent:2em;
border-bottom:1px dashed black;
}
#body3 {
width:270px;
background-image:url(img/zhexiaotu.jpg);
background-repeat:repeat-y;
background-position:left center;
font:bold 17px/37px "宋体";
text-indent:18px
}
#body4 {
width:270px;
background-image:url(img/zhexiaotu.jpg);
background-repeat:repeat-y;
background-position:left center;
font:bold 17px/37px "宋体";
text-indent:18px
}
#body5 {
width:270px;
background-image:url(img/zhexiaotu.jpg);
background-repeat:repeat-y;
background-position:left center;
font:bold 17px/37px "宋体";
text-indent:18px
}
#body6 {
width:270px;
background-image:url(img/zhexiaotu.jpg);
background-repeat:repeat-y;
background-position:left center;
font:bold 17px/37px "宋体";
text-indent:18px
}
</style>
</head>
<body>
<div id="box">
<div id="title">动态新闻</div>
<div id="body1">掌握一门技术的重要性</div>
<div id="body2">掌握一门技术是未来生存的一块敲门砖,掌握一门技术是未来生存的一块敲门砖,掌握一门技术是未来生存的一块敲门砖</div>
<div id="body3">走进民企观摩学习与民企面对面</div>
<div id="body4">走进民企观摩学习与民企面对面</div>
<div id="body5">走进民企观摩学习与民企面对面</div>
<div id="body6">走进民企观摩学习与民企面对面</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>
#div1 {
width:0px;
height:0px;
border:100px solid red;
border-bottom:100px solid white;
margin:400px auto;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果图截图
学习心得体会
这次作业真是花费了我九牛二虎之力,编程题也是我自己不熟练,花了好几个小时终于做了出来,效果自己看来还算凑合,从做出来的那一刻起,我发现我渐渐的喜欢上了这门技术,它里面包含了许多可变性,有许多可以想象的空间,有许多可以自己发挥想象力创造出来的东西,我感觉真的挺有趣的,但是写代码时频繁出错内种滋味也是非常难受的,但我相信只要一直练习下去,错误也会逐渐被修改,网页也会越来越完善╮(‵′)╭。
百度云链接: http://pan.baidu.com/s/1skWU7Op
密码: w63c