第二次作业
2017-01-18 本文已影响0人
80d1bb67035f
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>
效果图截图
Paste_Image.png
<!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>
效果图截图
Paste_Image.png
学习心得体会
这次作业真是花费了我九牛二虎之力，编程题也是我自己不熟练，花了好几个小时终于做了出来，效果自己看来还算凑合，从做出来的那一刻起，我发现我渐渐的喜欢上了这门技术，它里面包含了许多可变性，有许多可以想象的空间，有许多可以自己发挥想象力创造出来的东西，我感觉真的挺有趣的，但是写代码时频繁出错内种滋味也是非常难受的，但我相信只要一直练习下去，错误也会逐渐被修改，网页也会越来越完善╮(‵′)╭。
百度云链接: http://pan.baidu.com/s/1skWU7Op
密码: w63c
