复盘制作第一个网页的过程

 

 

 

从最后效果来说自己还是比较满意的，但是有点不好意思的的是前期学习进度太慢，导致做适配做了好多天，有点耽误整体进度。

 

---

 

 一、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.突破chrome对移动端字体为12px的显示：-webkit-text-size-adjust ，-webkit-text-size-adjust: 100%可以禁止字体变化

3.伪元素：实现选择器的某些特殊效果，一般在css中使用冒号进行选择器选择。最常见的如before/after分别为在p段落之前/后插入新内容。

4.页面滚动条：::-webkit-scrollbar

 

5. 鼠标悬停到a标签时用a:hover

6.清除多个浮动使用 clear:both  常用伪元素after　　

body {　　　　　　　　　　　　　　　　　　　　　　//将body 和li ul h p div的边框全设为0 避免后续重叠　　
    margin: 0;
    font: 12px/180% "微软雅黑","宋体";
}

html, body {
    -webkit-text-size-adjust: none;
    background: #f7f7f7;
}

div, p, ul, li,h1,h2 {
    padding: 0;
    margin: 0;
}

html::-webkit-scrollbar {
    width: 4px;  
    height: 8px;
    background-color: #F5F5F5;
}

html::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #E2E2E2;
}

html::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #333;
}

li {
    list-style-type: none;
}

ol, ul {
    list-style: none;
}

input {
    vertical-align: middle;　　　　//垂直队列　　　　 align-队列
    font-size: 100%;
}

img {
    vertical-align: top;
    border: 0;
}

em, i {
    font-style: normal;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

 

 

 

 

 

 

 

三、简单的js使用

使用js获取当前年份并显示：<script>document.write(new Date().getFullYear() > 2020 ? new Date().getFullYear() : "现在");</script>

解决不刷新布局混乱：window.onresize = function () {location.reload();};   //页面大小更改自动刷新