前述:
首先通过学长学姐推荐的视频和文档进行学习,对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=" 请输入内容" ;>
//关闭搜索记录,搜索框大小,搜索框原本文字
<button type="submit"style="background-color:#5500ff ;width:50px; border: 0; height:50px ;" >搜索</button>
//按钮大小,颜色,边框
</form>
页面考核总结:
在代码上的问题:
(1)代码的格式比较乱,没有按照那种格式来。
(2)实现的效果都是静态的,动态的效果比较少
(3)有的图片还是格式不对,显示的不太完全,有的因为盒子格式一样觉得没事,可是图片的格式有问题,导致有的图片显示重复。
(4)有些地方设置的不太严谨
收获:
学习了前端的一些基础知识,也会做一些简单的页面,对前端的功能做出来一定了解,但是还有很多需要进步的地方,不过也确实在这个路上走啦一段时间弯路,也多亏啦学长学姐的帮助才实现了这个页面,虽然做的不是非常好,,但是也还算比较满意的。这段时间的学习状态还是挺不错的,所以还是希望自己能和这次一样,有自己的努力和学长学姐的帮助,自己也能更快的进步,去更快的学习知识。