练习目标

CodePen

重点属性

padding & margin

这是我们最常看到的排版元素

padding 内距 : 控制区域内元素离 区域的距离
margin 外距 : 控制区域外边界距离 ，其他区域跟该区域的距离
善用两个属性就可以排出一个无形的空间提高页面美感

background

很多页面的图片会随着萤幕缩放，不过大多数都是用div 在只用background 属性 将图片设为背景， 如此图片就能随着div 的大小而伸缩，当然仍需做一些调整:

linear-gradient() : 渐层 ，这边我用来做阴影效果，把图片转暗一点
background-repeat: no repeat 因为有时候图片太小，会重複出现图片补足空白，当然这不好看。
background-position center top 这边我让图片调整为往上置中对齐，这样能让图片比较完整的呈现

功能

锚点

大家都知道 就是用 href='#id' 标籤对上id 就能做，但是会有一个状况，就是他是瞬间跳过去，这边有一个共用的程式码让图片用滑动的方式跳转，複製贴上 大功告成

Smooth scrolling when clicking an anchor link

// 毛点跳转动画$(document).on("click", 'a[href^="#"]', function(event) {  event.preventDefault();  $("html, body").animate(    {      scrollTop: $($.attr(this, "href")).offset().top    },    500  );});

底部TOP 按钮

这也算是 前端必修课题ScrollTopˇ的观念

我这边是参考W3C-scroll_to_top

我调整成当他滑动距离为萤幕装置的高度后，会出现Top按钮

window.onscroll = function() {  scrollFunction();};function scrollFunction() {  if (    document.body.scrollTop > document.body.clientHeight ||    document.documentElement.scrollTop > document.documentElement.clientHeight  ) {    document.getElementById("float").style.display = "block";  } else {    document.getElementById("float").style.display = "none";  }}