Web端英语短语学习网页（HTML,CSS,JS综合运用）

尽量让界面简洁（马尔斯绿为主题颜色），将视线专注于短语。

操作更方便，除了点击翻页，鼠标覆盖在翻译按钮上显示翻译外，按下←→键、空格或者↓键也可以翻页、显示翻译（之所以增加↓键显示翻译，是因为操作更方便，一只手就能操作所有功能，方便背诵，快速浏览）。

 按下空格或者↓键显示翻译

用ul来装填短语，因为没有调用数据库，所以只能复制粘贴短语

div盒子装英语，p标签里面装中文翻译

<ul><li class="look"><div>Nothing has altered and the deadline still stands.</div><p>什么也没有更改，最后期限依然有效。</p></li><li><div>The driver lost control when a tire burst.</div><p>一只轮胎爆裂时司机失去了控制。</p></li><li><div>Obviously we ask all our customers to dispose of litter responsibly. </div><p>显然，我们要求所有的顾客负责任地处理垃圾。</p></li><li><div>250 people were killed in the blast.</div><p>250人在这次大爆炸中丧生。</p></li><li><div> Martha would consume nearly a pound of cheese per day.</div><p>玛莎那时每天吃将近一磅奶酪。</p></li><li><div>In a severe gale the ship split in two.</div><p>在一次强劲的大风中那艘船断成了两半。</p></li><li><div>A trickle of spit collected at the corner of her mouth.</div><p>一小股口水积聚在了她的嘴角。</p></li><li><div>He always spilled the drinks.</div><p>他总是不小心把饮料给洒了。</p></li><li><div>He had slipped on an icy pavement.</div><p>他在结冰的人行道上滑倒了。</p></li><li><div>She slid the door open.</div><p>她把门滑开了。</p></li><li><div>The bacteria are harmless to humans. </div><p>这些细菌对人无害。</p></li></ul>

 头部标题（只是为了和下部翻译做一个对称，整体看着不失衡）

    <span>英语短句学习</span>

最下面的翻译板块：

 <div class="translate">译</div>

对应的CSS装饰：

.translate {position: fixed;bottom: 0;width: 100%;height: 50px;background-color: rgb(100, 140, 140);line-height: 50px;color: #f1f1f1;transition: all 0.5s;cursor: pointer;}

左右翻页板块

    <button class="left">👈</button><button class="right">👉</button>

对应的CSS装饰：

 .left {position: fixed;left: 50px;bottom: 50%;}.right {position: fixed;right: 50px;bottom: 50%;}

主要功能还是在script里面：（注释足够详细，但是代码质量应该比较堪忧）

<script>var lis = document.querySelectorAll('li');var btnL = document.querySelector('.left');var btnR = document.querySelector('.right');var translate = document.querySelector('.translate');var ps = document.querySelectorAll('p');var page = 0;var buttons = document.querySelectorAll('button');// 禁止选取文段document.addEventListener('contextmenu', function (e) {e.preventDefault();})// 禁止右键菜单document.addEventListener('selectstart', function (e) {e.preventDefault();})// 鼠标覆盖翻译板块，出现中文翻译，板块变色translate.onmouseover = function () {this.style.backgroundColor = 'rgb(0,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}}// 鼠标离开翻译板块，中文翻译消失，板块颜色复原translate.onmouseout = function () {this.style.backgroundColor = 'rgb(100,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}}// 鼠标覆盖/移开按钮改变背景色for (var i = 0; i < buttons.length; i++) {buttons[i].onmouseover = function () {this.style.backgroundColor = 'rgba(34, 34, 38, .05)';}buttons[i].onmouseout = function () {this.style.backgroundColor = 'rgba(34, 34, 38, 0)';}}// 点击左右按钮切换短语btnL.addEventListener('click', function (e) {if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})btnR.addEventListener('click', function (e) {if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})// 按下空格或下键显示翻译// 按下左右键切换短语，改变左右指示板块背景色document.addEventListener('keydown', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}translate.style.backgroundColor = 'rgb(0, 140, 140)';} else if (e.keyCode === 37) { // 左键判定btnL.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下左键改变颜色if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';} else if (e.keyCode === 39) { // 右键判定btnR.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下右键改变颜色if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';}})// 松开空格或下键关闭翻译（存在bug，先点击翻页后，再按下松开空格，会自动翻页）// 松开左右键改变左右指示板块背景色document.addEventListener('keyup', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}translate.style.backgroundColor = 'rgb(100, 140, 140)';} else if (e.keyCode === 37) {btnL.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开左键恢复颜色} else if (e.keyCode === 39) {btnR.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开右键恢复颜色}})</script>

源代码：（iconfont用起来流程太复杂了而且要分文件夹，左右指示用的emoji，所以整个网页可以直接复制粘贴完整运行。）

<!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>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {margin: 250px auto;/* padding: 0px 50px; */background-color: #f1f1f1;text-align: center;font-size: 28px;}p {display: inline-block;margin: 20px 300px;padding: 0px 15px;font-size: 18px;color: #f1f1f1;line-height: 28px;transition: all 0.5s;cursor: default;}button {display: inline-block;width: 50px;height: 50px;line-height: 28px;padding: 0 8px;margin: 0 10px 10px 0;color: #222226;font-size: 20px;border-radius: 2px;border: none;outline: none;cursor: pointer;}.left {position: fixed;left: 50px;bottom: 50%;}.right {position: fixed;right: 50px;bottom: 50%;}li {list-style-type: none;display: none;padding: 40px 0 0 0;height: 200px;}.look {display: block;}.translate {position: fixed;bottom: 0;width: 100%;height: 50px;background-color: rgb(100, 140, 140);line-height: 50px;color: #f1f1f1;transition: all 0.5s;cursor: pointer;}span {position: fixed;top: 0;left: 0;width: 100%;height: 50px;line-height: 50px;color: #333;}</style>
</head><body><span>英语短句学习</span><div class="translate">译</div><button class="left">👈</button><button class="right">👉</button><ul><li class="look"><div>Nothing has altered and the deadline still stands.</div><p>什么也没有更改，最后期限依然有效。</p></li><li><div>The driver lost control when a tire burst.</div><p>一只轮胎爆裂时司机失去了控制。</p></li><li><div>Obviously we ask all our customers to dispose of litter responsibly. </div><p>显然，我们要求所有的顾客负责任地处理垃圾。</p></li><li><div>250 people were killed in the blast.</div><p>250人在这次大爆炸中丧生。</p></li><li><div> Martha would consume nearly a pound of cheese per day.</div><p>玛莎那时每天吃将近一磅奶酪。</p></li><li><div>In a severe gale the ship split in two.</div><p>在一次强劲的大风中那艘船断成了两半。</p></li><li><div>A trickle of spit collected at the corner of her mouth.</div><p>一小股口水积聚在了她的嘴角。</p></li><li><div>He always spilled the drinks.</div><p>他总是不小心把饮料给洒了。</p></li><li><div>He had slipped on an icy pavement.</div><p>他在结冰的人行道上滑倒了。</p></li><li><div>She slid the door open.</div><p>她把门滑开了。</p></li><li><div>The bacteria are harmless to humans. </div><p>这些细菌对人无害。</p></li></ul><script>var lis = document.querySelectorAll('li');var btnL = document.querySelector('.left');var btnR = document.querySelector('.right');var translate = document.querySelector('.translate');var ps = document.querySelectorAll('p');var page = 0;var buttons = document.querySelectorAll('button');// 禁止选取文段document.addEventListener('contextmenu', function (e) {e.preventDefault();})// 禁止右键菜单document.addEventListener('selectstart', function (e) {e.preventDefault();})// 鼠标覆盖翻译板块，出现中文翻译，板块变色translate.onmouseover = function () {this.style.backgroundColor = 'rgb(0,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}}// 鼠标离开翻译板块，中文翻译消失，板块颜色复原translate.onmouseout = function () {this.style.backgroundColor = 'rgb(100,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}}// 鼠标覆盖/移开按钮改变背景色for (var i = 0; i < buttons.length; i++) {buttons[i].onmouseover = function () {this.style.backgroundColor = 'rgba(34, 34, 38, .05)';}buttons[i].onmouseout = function () {this.style.backgroundColor = 'rgba(34, 34, 38, 0)';}}// 点击左右按钮切换短语btnL.addEventListener('click', function (e) {if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})btnR.addEventListener('click', function (e) {if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})// 按下空格或下键显示翻译// 按下左右键切换短语，改变左右指示板块背景色document.addEventListener('keydown', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}translate.style.backgroundColor = 'rgb(0, 140, 140)';} else if (e.keyCode === 37) { // 左键判定btnL.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下左键改变颜色if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';} else if (e.keyCode === 39) { // 右键判定btnR.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下右键改变颜色if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';}})// 松开空格或下键关闭翻译（存在bug，先点击翻页后，再按下松开空格，会自动翻页）// 松开左右键改变左右指示板块背景色document.addEventListener('keyup', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}translate.style.backgroundColor = 'rgb(100, 140, 140)';} else if (e.keyCode === 37) {btnL.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开左键恢复颜色} else if (e.keyCode === 39) {btnR.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开右键恢复颜色}})</script></body></html>

但是目前有个bug就是先点击翻页再按下空格翻页，后面每次按空格弹起后就会自动翻页。有知道原因的可以指正。谢谢。

Web端英语短语学习网页（HTML,CSS,JS综合运用）

尽量让界面简洁（马尔斯绿为主题颜色），将视线专注于短语。

操作更方便，除了点击翻页，鼠标覆盖在翻译按钮上显示翻译外，按下←→键、空格或者↓键也可以翻页、显示翻译（之所以增加↓键显示翻译，是因为操作更方便，一只手就能操作所有功能，方便背诵，快速浏览）。

 按下空格或者↓键显示翻译

用ul来装填短语，因为没有调用数据库，所以只能复制粘贴短语

div盒子装英语，p标签里面装中文翻译

<ul><li class="look"><div>Nothing has altered and the deadline still stands.</div><p>什么也没有更改，最后期限依然有效。</p></li><li><div>The driver lost control when a tire burst.</div><p>一只轮胎爆裂时司机失去了控制。</p></li><li><div>Obviously we ask all our customers to dispose of litter responsibly. </div><p>显然，我们要求所有的顾客负责任地处理垃圾。</p></li><li><div>250 people were killed in the blast.</div><p>250人在这次大爆炸中丧生。</p></li><li><div> Martha would consume nearly a pound of cheese per day.</div><p>玛莎那时每天吃将近一磅奶酪。</p></li><li><div>In a severe gale the ship split in two.</div><p>在一次强劲的大风中那艘船断成了两半。</p></li><li><div>A trickle of spit collected at the corner of her mouth.</div><p>一小股口水积聚在了她的嘴角。</p></li><li><div>He always spilled the drinks.</div><p>他总是不小心把饮料给洒了。</p></li><li><div>He had slipped on an icy pavement.</div><p>他在结冰的人行道上滑倒了。</p></li><li><div>She slid the door open.</div><p>她把门滑开了。</p></li><li><div>The bacteria are harmless to humans. </div><p>这些细菌对人无害。</p></li></ul>

 头部标题（只是为了和下部翻译做一个对称，整体看着不失衡）

    <span>英语短句学习</span>

最下面的翻译板块：

 <div class="translate">译</div>

对应的CSS装饰：

.translate {position: fixed;bottom: 0;width: 100%;height: 50px;background-color: rgb(100, 140, 140);line-height: 50px;color: #f1f1f1;transition: all 0.5s;cursor: pointer;}

左右翻页板块

    <button class="left">👈</button><button class="right">👉</button>

对应的CSS装饰：

 .left {position: fixed;left: 50px;bottom: 50%;}.right {position: fixed;right: 50px;bottom: 50%;}

主要功能还是在script里面：（注释足够详细，但是代码质量应该比较堪忧）

<script>var lis = document.querySelectorAll('li');var btnL = document.querySelector('.left');var btnR = document.querySelector('.right');var translate = document.querySelector('.translate');var ps = document.querySelectorAll('p');var page = 0;var buttons = document.querySelectorAll('button');// 禁止选取文段document.addEventListener('contextmenu', function (e) {e.preventDefault();})// 禁止右键菜单document.addEventListener('selectstart', function (e) {e.preventDefault();})// 鼠标覆盖翻译板块，出现中文翻译，板块变色translate.onmouseover = function () {this.style.backgroundColor = 'rgb(0,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}}// 鼠标离开翻译板块，中文翻译消失，板块颜色复原translate.onmouseout = function () {this.style.backgroundColor = 'rgb(100,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}}// 鼠标覆盖/移开按钮改变背景色for (var i = 0; i < buttons.length; i++) {buttons[i].onmouseover = function () {this.style.backgroundColor = 'rgba(34, 34, 38, .05)';}buttons[i].onmouseout = function () {this.style.backgroundColor = 'rgba(34, 34, 38, 0)';}}// 点击左右按钮切换短语btnL.addEventListener('click', function (e) {if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})btnR.addEventListener('click', function (e) {if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})// 按下空格或下键显示翻译// 按下左右键切换短语，改变左右指示板块背景色document.addEventListener('keydown', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}translate.style.backgroundColor = 'rgb(0, 140, 140)';} else if (e.keyCode === 37) { // 左键判定btnL.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下左键改变颜色if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';} else if (e.keyCode === 39) { // 右键判定btnR.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下右键改变颜色if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';}})// 松开空格或下键关闭翻译（存在bug，先点击翻页后，再按下松开空格，会自动翻页）// 松开左右键改变左右指示板块背景色document.addEventListener('keyup', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}translate.style.backgroundColor = 'rgb(100, 140, 140)';} else if (e.keyCode === 37) {btnL.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开左键恢复颜色} else if (e.keyCode === 39) {btnR.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开右键恢复颜色}})</script>

源代码：（iconfont用起来流程太复杂了而且要分文件夹，左右指示用的emoji，所以整个网页可以直接复制粘贴完整运行。）

<!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>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {margin: 250px auto;/* padding: 0px 50px; */background-color: #f1f1f1;text-align: center;font-size: 28px;}p {display: inline-block;margin: 20px 300px;padding: 0px 15px;font-size: 18px;color: #f1f1f1;line-height: 28px;transition: all 0.5s;cursor: default;}button {display: inline-block;width: 50px;height: 50px;line-height: 28px;padding: 0 8px;margin: 0 10px 10px 0;color: #222226;font-size: 20px;border-radius: 2px;border: none;outline: none;cursor: pointer;}.left {position: fixed;left: 50px;bottom: 50%;}.right {position: fixed;right: 50px;bottom: 50%;}li {list-style-type: none;display: none;padding: 40px 0 0 0;height: 200px;}.look {display: block;}.translate {position: fixed;bottom: 0;width: 100%;height: 50px;background-color: rgb(100, 140, 140);line-height: 50px;color: #f1f1f1;transition: all 0.5s;cursor: pointer;}span {position: fixed;top: 0;left: 0;width: 100%;height: 50px;line-height: 50px;color: #333;}</style>
</head><body><span>英语短句学习</span><div class="translate">译</div><button class="left">👈</button><button class="right">👉</button><ul><li class="look"><div>Nothing has altered and the deadline still stands.</div><p>什么也没有更改，最后期限依然有效。</p></li><li><div>The driver lost control when a tire burst.</div><p>一只轮胎爆裂时司机失去了控制。</p></li><li><div>Obviously we ask all our customers to dispose of litter responsibly. </div><p>显然，我们要求所有的顾客负责任地处理垃圾。</p></li><li><div>250 people were killed in the blast.</div><p>250人在这次大爆炸中丧生。</p></li><li><div> Martha would consume nearly a pound of cheese per day.</div><p>玛莎那时每天吃将近一磅奶酪。</p></li><li><div>In a severe gale the ship split in two.</div><p>在一次强劲的大风中那艘船断成了两半。</p></li><li><div>A trickle of spit collected at the corner of her mouth.</div><p>一小股口水积聚在了她的嘴角。</p></li><li><div>He always spilled the drinks.</div><p>他总是不小心把饮料给洒了。</p></li><li><div>He had slipped on an icy pavement.</div><p>他在结冰的人行道上滑倒了。</p></li><li><div>She slid the door open.</div><p>她把门滑开了。</p></li><li><div>The bacteria are harmless to humans. </div><p>这些细菌对人无害。</p></li></ul><script>var lis = document.querySelectorAll('li');var btnL = document.querySelector('.left');var btnR = document.querySelector('.right');var translate = document.querySelector('.translate');var ps = document.querySelectorAll('p');var page = 0;var buttons = document.querySelectorAll('button');// 禁止选取文段document.addEventListener('contextmenu', function (e) {e.preventDefault();})// 禁止右键菜单document.addEventListener('selectstart', function (e) {e.preventDefault();})// 鼠标覆盖翻译板块，出现中文翻译，板块变色translate.onmouseover = function () {this.style.backgroundColor = 'rgb(0,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}}// 鼠标离开翻译板块，中文翻译消失，板块颜色复原translate.onmouseout = function () {this.style.backgroundColor = 'rgb(100,140,140)';for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}}// 鼠标覆盖/移开按钮改变背景色for (var i = 0; i < buttons.length; i++) {buttons[i].onmouseover = function () {this.style.backgroundColor = 'rgba(34, 34, 38, .05)';}buttons[i].onmouseout = function () {this.style.backgroundColor = 'rgba(34, 34, 38, 0)';}}// 点击左右按钮切换短语btnL.addEventListener('click', function (e) {if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})btnR.addEventListener('click', function (e) {if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';})// 按下空格或下键显示翻译// 按下左右键切换短语，改变左右指示板块背景色document.addEventListener('keydown', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = 'black';}translate.style.backgroundColor = 'rgb(0, 140, 140)';} else if (e.keyCode === 37) { // 左键判定btnL.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下左键改变颜色if (page > 0) {page--;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';} else if (e.keyCode === 39) { // 右键判定btnR.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下右键改变颜色if (page < lis.length - 1) {page++;}for (var i = 0; i < lis.length; i++) {lis[i].style.display = 'none';}lis[page].style.display = 'block';}})// 松开空格或下键关闭翻译（存在bug，先点击翻页后，再按下松开空格，会自动翻页）// 松开左右键改变左右指示板块背景色document.addEventListener('keyup', function (e) {if (e.keyCode === 40 || e.keyCode === 32) {for (var i = 0; i < ps.length; i++) {ps[i].style.color = '#f1f1f1';}translate.style.backgroundColor = 'rgb(100, 140, 140)';} else if (e.keyCode === 37) {btnL.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开左键恢复颜色} else if (e.keyCode === 39) {btnR.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开右键恢复颜色}})</script></body></html>

但是目前有个bug就是先点击翻页再按下空格翻页，后面每次按空格弹起后就会自动翻页。有知道原因的可以指正。谢谢。