前端三剑客是怎样解决页面问题的（持续更新）-阿南达文事网

前端三剑客是怎样解决页面问题的（持续更新）

前言

时隔几个月，终于再次登录了CSDN啊，这几个月除了每天当个混子就是看世界杯（希望格子军团可以继续往前冲啊！）
闲言少叙，这篇文章是用于初级阶段的页面开发梳理（上一次写页面还是在大一下刚开学，现在大二上已经快结束了😭），我们将文章框架分为四部分：

给页面分区
给分好的区域中填入标签
给页面锦上添花（边框、广告、好玩的小东西、固定的侧边栏等）
使用DOM、BOM完成特定功能

1.给页面分区

我这里没有使用H5新给出的标签，只是用原本的DIV+CSS布局，见谅见谅。
我喜欢将给页面分区这件事用递归方法描述出来：

public void div(page){if(page不能再分)return ;使用flex布局将整个页面大致的排版出来;使用margin、height、weight等将分区调整位置;for(每个分区：该page的全部分区){div(每个分区);}
}

上面这个方法的意思其实就是先把整个页面用flex布局分区，再将每个区进行flex布局，直到没有页面再能分区。
我们上面出来现了很多名词，我们需要依次解答

a.什么是div标签

就是一种块级元素，独占一行，可设置宽高（提一嘴，行内元素不能设置宽高，但不意味着人家不能设置padding、border、margin，因为盒子模型是所有元素都有的）

b.什么是盒子模型

margin：该盒子与其它盒子的间隔

margin: Apx —该盒子四周与其它盒子的间隔都是Apx
margin: Apx Bpx —该盒子与其它盒子，上下都间隔Apx，左右间隔Bpx
margin: Apx Bpx Cpx —上间隔Apx，下间隔Cpx，左右各Bpx
margin: Apx Bpx Cpx Dpx —上A，右B，下C，左D
也可直接去规定上下左右的间隔margin-top,margin-left…

border：该盒子的边框
边框拥有三种常用属性：border-style,border-width,border-color
这里就不展开说了，因为我们现在要做的是布局

padding：content区和border的间隔，通过和margin差不多的赋值方式给padding赋值

content：height和width其实指的就是content区域的长和宽

c.什么是flex布局？

我们知道标准流就是块级元素独占一行，行内元素们都可以待在一行上，然后元素按照这个规则在页面内一行一行至上而下排列。
flex布局是打破了标准流常规的规则的，它允许父盒子设置主轴、副轴的方向，子元素在父盒子内的排列顺序，不再是从左到右，至上而下，最重要的是在父盒子中这样排列的子元素不脱离标准文档流。
我们看下面这个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局</title><style>.box1{display: flex;/* 主轴 */flex-direction: row;/* 主轴元素起始位置 */justify-content: flex-start;/* 副轴元素起始位置 */align-items: flex-start;width: 600px;height: 600px;background-color: aqua;}.box2{width: 200px;height: 200px;background-color: palegoldenrod;}.box3{width: 200px;height: 200px;background-color: palevioletred;}</style>
</head>
<body><div class="box1"><div class="box2"></div><div class="box3"></div></div>
</body>
</html>

我们可以看到原本应该竖直排列的两个div（.box2和.box3）却横向排列的，这是因为我们将.box1设置成为了flex弹性盒子，然后设置了主轴方向为横向，并且规定元素从左向右排列，在第一行排列完了之后，就从上到下排列。
好了，我们的例子说完了，下面我们来介绍flex弹性盒子的属性：

display:flex —将父盒子变为弹性盒子
flex-direction:row/column —将主轴设为横向或竖直
justify-content:flex-start/flex-end/center —全体元素在主轴上不动/全体元素在主轴上向左移动到父元素尾巴/全体元素在主轴上移动到主轴中间
align-items:flex-start/flex-end/center —全体元素在副轴方向上不动/全体元素在副轴方向上移动到父元素尾巴/全体元素在副轴方向上移动到副轴中央
flex:1/2/3/…/n —该元素用在子元素上，表示该元素在父盒子中的所占比重
flex-wrap:nowrap/wrap —在一行中占满的元素不分行，挤挤/分行

d.你这说了一堆到底怎么分区捏？？？

为此啊，我录了一个视频，是专门来讲解我是如何分区的，可是吧，我也是个初学者，如果我的理解呢不太成熟，也请多多包含！😶‍🌫️
链接：（暂未录制，抱歉）

2.往分区里面填充东西

填充东西，我们该填充什么呢？当然是填充：

a.标题

<h1>~<h6>这六个标签中依次代表的1到6级标题，块级元素

b.段落

<p>标签用于包裹住一段话、一句话，块级元素

c.logo等

<span>标签无意义，用于包裹logo等一些小玩意，行内元素

d.超链接

<a>标签可链接到外部页面。也可链接到内部某个元素，具体是href这个属性在发挥作用（补充一下src和href的区别：src地址里的东西需要加载到本页面里，href无需加载进来，只需要链接起来，需要的时候去拿即可），行内元素

e.照片，视频，音乐

<img>、<video>、<music>用src属性将照片视频音乐加载进页面，行内元素

f.内嵌页面

g.套餐系列1–表格

<table>标签里面包裹着<th><tr>，这里面再包裹<td>

h.套餐系列2–表单

<form>里面包裹着若干个input，input是行内元素，type属性有text、password、button等值。

i.套餐系列3–列表

<ul>是无序列表，<ol>是有序列表，<ll>是自定义列表。里面包裹着<li>

3.做样式

做样式最主要用到的就是css，其中我挑出几个我觉得很常用的

a.字体属性

字体属性{font-family:'微软雅黑';font-size:36px;font-width:400;line-height:50px;
}

总结起来就是：诶，你先说，字写嘛样的(font-family)?多大啊(font-size)?多粗啊(font-width)?然后捏，介一个字算上留白你想占多高？(line-height)，行，瞧好吧您！

b.文本属性

文本属性{color:skyblue;text-align:center;text-decoration:underline;text-shadow:1px 1px 3px black;
}

书接上文：嚯，客官，您介字我可一个个的都给您写好了啊，这下您看看，位置需要调调吗（text-align）?，那您这色儿(color)，我用什么颜色给您再临摹出来？，得嘞，那您看您有的话需要做标记干嘛的吗？(text-decoration)，行，介额外给您艺术一下，弄点阴影出来(text-shadow)

c.盒子背景

盒子背景{background-color:pink;background-image:url("../imgs/aniya.png");background-repeat:no-repeat;background-size:100px 100px;background-position:0px 0px;
}

再接：客官，您的话都给您弄好了，这个背景我看白色有些单调，您看您是不是要什么背景颜色呢？(background-color)，诶，我看您英姿飒爽的，要不贴张照片上去，说把，您照片在哪，我去拿（background-img），行，我建议您就不要贴不满就一直贴了（background-repeat），贴一张得了，就这张是吧，成，您要多大的（background-size），得嘞，贴哪啊(ground-position)，成，您说是哪就是哪

d.边框

边框{border-style:solid;border-width:2px;border-color:yellowgreen;
}

再再接：哎呀，这副字，高端大气上档次，行吧，把他裱起来！我想想用嘛裱啊(border-style)，得，就用它了,然后宽度弄这么宽就行(border-width)，颜色吧，就来这个吧(border-color)

e.其它常用样式1–盒子阴影

box-shadow:x偏移量 y偏移量模糊程度阴影颜色

f.其它常用样式2–转换

二维动画{transform:scale(2,0.5),rotate(45deg),tranlate(50%,0);//为了缓冲转换transition:height .3s linear,width 1s,linear;
}三维动画(Z轴垂直纸面向外){transform:rotateX(45deg),rotateY(45deg),rotateZ(45deg),translateZ(10%);perspective:300px;
}

g.其它常用样式3–动画

//定义动画
@keyframes ani1{from{background-color:blue;}to{background-color:pink;}
}
@keyframe ani2{25%{background-color:red;}50%{background-color:green;}100%{background-color:orange;}
}.box1:hover{animation:ani1 3s linear;
}

h.其它常用样式–子绝父相或边栏的fixed固定

子绝父相的意义在于保持本来的页面结构不会被改变并且子元素还可以以父元素为参照物进行位置移动（父相的作用）。
display:fixed可用于边上的广告，固定的搜索栏等

4.实现某些功能

当完成以上三步的时候，页面基本上已经能看了，就是可能有的功能未实现，只是把它的位置和样式在前三步做完了。所以我们要在这一步把它的功能给实现了，比如你在秒杀场景的位置放了一个倒计时器，但是你并没有实现倒计时的效果，所以我们这里需要实现倒计时的效果。
我们在这里先介绍简单的DOM和BOM来做页面，并不涉及前后端交互的技术

(A)DOM是什么

说白话就是一棵树，每个节点就是元素，某个子节点的父节点就是这个子元素的父元素。我们这里要说的DOM不是介绍这棵树，而是操作这棵树，也就是操作这个页面中的所有元素（比如你这个页面中有一个div元素，我们就可以操作这个div元素）

(a)DOM得到元素

(1)选择页面中的元素

<script>//对于<button class = "btn" id = "btn">let btns = document.selectElementsByTagName('button');let btns = document.selectElementsByClassName('btn');let btn = document.selectElementById('btn');
</script>

选择之后就可以进行操作了，注意前两个操作方式取得的是一个数组，第三个得到的是一个元素（因为tag和class有很多，一个id只有一个元素）。

当然了，有人他有反骨啊，我不想从你页面里那，我想自己创造元素放到页面里，当然也可以：

(2)创造元素

<script>//创建一个li元素let li = document.createElement('li')
</script>

对你没看错，就是这个

(b)DOM操作元素

我们以li作为例子，操作元素常见的几个操作如下：

//设置属性
li.setAttribute('style','width:100px;height:100px;');//个人习惯，我不喜欢用li.style，我喜欢用这个设置style//得到属性值
li.getAttribute('height');//复制节点（父子全部复制/只复制自己）
li.cloneNode(true/false);//⭐⭐接下来这些操作需要另一个例子来辅佐说明，故我们加入一个ul = document.selectElementByTagName('ul')[0];和p = document.selectElementByTagName('p')[0];//替代元素
li.replace(p);//追加子元素
ul.appendChild(li);//在某个元素前加入某个元素
insertBefore(p,li);//删除某个子元素
ul.removeChild(li);

(B)BOM是什么

BOM呀说白了就是给你介绍window这个对象的几个属性以及它的方法，这可是很有用的捏！

window这个对象拥有的属性以及方法

//⭐属性
window.screen、window.location、window.history、window.navigator
//⭐方法//弹窗
window.alert("你好！");//确定窗口
windowfire("你确定吗？");//输入窗口
window.prompt("你叫什么名字呀？");//每多少毫秒执行一次
let int = window.setInterval(function(){},1000);
//结束执行
window.clearIntervale(int);//经过多少毫秒后执行
let tim =window.setTimeout(function(){},1000);
//不让其执行
window.clearTimeout(tim);

(a)window.screen

height = window.screen.height;
width = window.screen.width;
Width = screen.availWidth;
Height = screen.availHeight;

(b)window.location

//该网站的地址
href = window.location.href;//该主机名(感觉会不会是分布式有用？)
hostname = window.location.hostname;//转到新页面
window.location.assign('newHref');

//回退
window.history.back()//前进
window.history.forward()

(d)window.navigator

//如果浏览器没打开cookie，就是true；否则是true
close = window.naviagtor.cookieEnabled;//product 属性返回浏览器引擎的产品名称
name = window.navigator.product;//剩下的略，这个会在实际开发中使用吧应该，到时候去查就行

没了没了兄弟们，以后想到啥再来补充！

结语

ok了兄弟们，先到这了，以后想到什么再来补充，欢迎大家也指出我的错误！

前端三剑客是怎样解决页面问题的（持续更新）