小测试心得体会

这次测试是对之前几节课的内容的一个检测，对前几节课掌握的最好的就是对一个网页大体分布的地方的代码会打，分好了大体布局之后的一些小的局部的地方的代码就不会了。像“首页”“留言板”这几个地方的导航功能就不太会了，是课下问了同学才弄出来的，但其实也并没有弄明白，只是模糊的打出了一套代码。网页开发算是我觉得最有趣的一门代码语言课了，像之前的java，c因为并不能实际的显示出来并没有觉得有多喜欢。这次测试显示了对于之前的课程只掌握了其中的一部分并没有实际掌握，该学的一定要学好，多加拓展，争取下次测试的时候可以自己独立完成，而不是自己完成的半吊子，还要去依靠别人完成一整套代码。

@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
}
#box{
	/*background-color:#F00;*/
	width:950px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
#head{
	background-color:#66F;
	height:255px;
}

#caidan{
	background-color:#FFC;
	height:30px;
}
#caidan ul{
	list-style:none;/*去掉点*/
	float:left;
	height:30px;	
	width:450px;
}
#caidan li{
	line-height:30px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	margin-left:20px;/*li距离左边那个li的距离*/
}
#caidan a{
	color:#0F0;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
}

#caidan a:hover{/*当鼠标滑过超链接标签时的样式*/
	color:#F60;
}

#left{
	/*background-color:#33C;*/
	height:700px;
	width:300px;
	float:left;/*可以使div横向排排坐*/
}
.guanyuwo{
	height:40px;
	width:290px;
	line-height:40px;/*设置垂直居中，值要和height的值一样*/
	font-size:16px;
	font-weight:bolder;/*加粗，h5本来就是标题，已经加粗过了，不加也可以*/
	border-bottom:#963 solid 2px;
}

#zuozhe img{
	text-align:center;
	border:1px solid #999;/*加边solid实线*/
	padding:8px;/*边与图片有个空白，类似相框*/
	border-radius:10px;/*圆角，值越大，角越园*/
	margin-top:5px;
	margin-left:20px;
}
	
#zuozhe span{
	text-align:center;
	margin:10px;/*一圈的距离*/
	display:block;/*改成盒子元素，可以识别盒子元素的一些属性：margin、border\padding*/ 
	
	font-size:18px;/*字号*/
	padding-top:5px;/*内容距离边的距离-上面的*/
}
#zuozhe p{
	font-family:"微软雅黑";
	font-size:14px;
	color:#FCF;
	line-height:35px;/*行高*/
	text-indent:2em;/*首行缩进2字符，em单位随着字的大小占2个字符空*/
}

#right{
	background-color:#F3F;
	height:700px;
	width:650px;
	float:right;/*可以使div横向排排坐*/
}

#wei{
	background-color:#328048;
	height:80px;
	clear:both;/*清空其他的div的float的影响*/
}

 

转载于:https://my.oschina.net/u/4091363/blog/3035318