前端学习+页面考核

前述:

      首先通过学长学姐推荐的视频和文档进行学习，对html和css有一定的了解然后就开始啦网页的制作，由于时间紧,需要边学习边进行页面的制作，看视频虽然好理解，但是看文档是根据自己的进度去学习和理解，学长还是推荐看文档去学习，可以快速的理解和接受知识，以便进行对知识的输出，并开始制作页面。

前端知识总结：

首先就是考核时问的问题：id和class的区别

class的范围比id更大，id表示唯一标识的，就像我们个人的身份证一样，是唯一的在一个页面中只能被调用一次。而class的范围就比较广泛了，class是类标签，在一个界面中可以调用多次。可以被重复使用。
使用的语法不一样：id选择符在css中的使用方式，如用div来举例:(比如分别有div id="a"…和div class="b"…两个div盒子）id:#a{}  class:.b{}

引用超链接如何去除下划线和底色：

a{
				text-decoration:none;
				  color: inherit;//可以直接变成其他颜色
			}

背景图片怎么实现：

 background-image: url('小组logo.png');//照片一定要和html文件在一个目录里面
 background-size: 100px,80px;//背景图片的大小
 background-repeat: no-repeat;//背景图片不重复
background-color: rgba(255,255,255,0.9);//第四个数为清晰度

相对定位和绝对定位以及固定定位：

position:relative;//相对定位
position: absolute;//绝对定位
position: fixed;//固定定位

他们之间的区别：

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。

相对定位与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。

固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。

文字在盒子内怎么水平居中和上下居中：

text-align:center;//水平居中
line-height:盒子的高;//上下居中

鼠标悬浮时，特效:

 a:hover{
			  background-color: #dddddd;//背景颜色变为白色
			 color: #5500FF;//字体颜色变为蓝色
			 transition: all 2s; //转换时间两秒
			  }

搜索框：

<form method="get" action="http://www.baidu.com/s">
			<input  autocomplete="off" name="wd"type="text" style="width:200px; height:45px" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入内容" ;>
//关闭搜索记录，搜索框大小，搜索框原本文字
			<button type="submit"style="background-color:#5500ff ;width:50px; border: 0; height:50px ;" >搜索</button>
//按钮大小，颜色，边框
			</form>

页面考核总结：

在代码上的问题：

（1）代码的格式比较乱，没有按照那种格式来。

（2）实现的效果都是静态的，动态的效果比较少

（3）有的图片还是格式不对，显示的不太完全，有的因为盒子格式一样觉得没事，可是图片的格式有问题，导致有的图片显示重复。

（4）有些地方设置的不太严谨

收获:

学习了前端的一些基础知识，也会做一些简单的页面，对前端的功能做出来一定了解，但是还有很多需要进步的地方，不过也确实在这个路上走啦一段时间弯路，也多亏啦学长学姐的帮助才实现了这个页面，虽然做的不是非常好，，但是也还算比较满意的。这段时间的学习状态还是挺不错的，所以还是希望自己能和这次一样，有自己的努力和学长学姐的帮助，自己也能更快的进步，去更快的学习知识。