从最后效果来说自己还是比较满意的，但是有点不好意思的的是前期学习进度太慢，导致做适配做了好多天，有点耽误整体进度。
一、html部分
1.head部分
给网页设置logo：<link rel="shortcut icon" href="images/log/diannao120logo.png" type="image/x-icon">
声明文档类型和字符集：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
适配最新版本的IE：<meta http-equiv="X-UA-Compatible" content="IE=edge" />
解决手机端缩放字体出现异常：
<meta name="viewport" content="width=device-width" initial-scale="1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.body部分
采用wrapper-->main-->specific content的盒子布局，底部footer和main是并列。
以此来便于设置wrapper的背景，以及最终页面呈现的布局效果。例如适配某宽度下主界面的position可直接设置main的百分比margin。
在specific content前加头部修饰的话可以直接另起新的盒子，实现页面的三段式布局，便于对true head，content，footer分别设置。
对于specific content中相同样式的元素，直接起同样的盒子名，后续统一修改样式。用ul夹lii实现竖向布局。
对于底部footer的布局，一般包含footer-top的内容以及最后的copyright，而为了解决让父元素包含浮动着的子元素，可以使用clearfix。
由于copyright常需在一行显示，即用span来显示（div为块级元素，span为行内元素）
（赏心悦目的布局）
二.css部分
1.开头也要声明字体编码为 @charset "utf-8";
2.
三、简单的js使用
使用js获取当前年份并显示：<script>document.write(new Date().getFullYear() > 2020 ? new Date().getFullYear() : "现在");</script>
解决不刷新布局混乱：window.onresize = function () {location.reload();}; //页面大小更改自动刷新
标签：specific,网页,footer,适配,布局,content,main,制作,复盘 From： https://www.cnblogs.com/wuzhiyou/p/16601003.html