【前端入门篇】仿扇贝首页

前言

小白玩家入门文章，意在记录本人学习过程当中遇到的各类问题，欢迎各路大神指点。

第一次切页面选择的网站是扇贝单词的首页，很喜欢这种简洁清爽的页面风格。页面在PC端预览效果还算过得去，因为没作适配，定位也存在不少问题，致使页面缩放或在移动端打开会惨不忍睹了。

学习目的：

1. 了解页面HTML结构
2. 语义化命名
3. 盒子模型
4. CSS属性
5. JS皮毛

• GitHub代码：github.com/StevenYoung…

• GitHub预览（手机慎点！！！）： stevenyoung21.github.io/qt_lesson/s…

使用工具及语言

1.  Vscode
2. Chrome
3. Page Ruler （Chrome拓展程序）：方便测量页面各类尺寸。
   
4. Html+css+js

HTML结构

本次页面我将其分为两个部分，头部的导航栏（nav__bar）和主体内容（container），具体的命名细节以下图：

页面效果如图：

CSS属性

除了常规的样式外，有三点值得记录一下

1.用border画三角图形

效果如图：

width: 0px;    border-top: 10px solid transparent;    border-right: 10px solid #DDD; border-bottom: 10px solid transparent; border-left: 10px solid transparent;复制代码

2.border画分割线：

效果如图：

下拉框用ul li制做，8个li有内容，另两个li用于画分割线。

li 设置了cursor: pointer；可是鼠标移动到第5个和第8个li 的时候不该该出现pointer，因此在这两个li中设置cursor: default；能够解决。

下拉框这还有一个问题，当鼠标移动到li上时，每一个li的字体颜色白，背景变为主题绿，可是两个分割线也属于li，当鼠标移动时分割线也会出现变色。我解决这个问题的方法比较low，用li:nth-child(1):hover 分别取了八次，跳除第5和第8这两个li。

3.input框样式设计

初始效果如图：

点击输入时变换效果：

将输入框分红三部分，外面一个大盒子（input__btn），里面左边一个输入框（input），右侧一个搜索图标（search__img）。用外层大盒子input__btn来控制位置和显示的样式，再把内部input输入框的样式所有干掉。点击输入框变换样式时，外层大盒子背景变白，宽度增长，内层输入框背景变白，宽度增长，字体颜色变黑。再使用transition: all 0.5s;将变换过程变得柔和。这里还要涉及一点JS的使用。

JS皮毛

接上部分输入框，本次页面只有输入框这里用到了一小段js代码，效果如图：

第一点，触发样式变化是当鼠标按下去未松开时（onmousedown），当鼠标移出（onmouseout）输入框样式恢复。顺便再列举一下关于鼠标的各种事件：

1. onclick ：用户点击完触发事件
2. ondblclick ：双击触发事件
3. onmousedown： 当鼠标按下时（未松开状态）
4. onmouseup： 松开鼠标时触发
5. onmouseout： 当鼠标从某个元素移开
6. onmousemove： 当鼠标移动

第二点，一开始获取元素我用的是getElementByName，发现功能实现不了，查了一下文档，getElementByName返回的是数组，getElementById返回的是一个元素。

第三点，用.style.cssText修改样式。

js代码以下：

function changeInputStyle(){var inputBtnStyle = document.getElementById('input__btn');inputBtnStyle.style.cssText = "width:180px;background-color:white;";var inputStyle = document.getElementById('input');inputStyle.style.cssText = "width:150px;background-color:white;color:#666;";}function initailStyle(){    var inputBtnStyle = document.getElementById('input__btn');    inputBtnStyle.style.cssText = "width:97px;background-color:#209E85;";        var inputStyle = document.getElementById('input');    inputStyle.style.cssText = "width:71px;background-color::#209E85;color:white;";} 复制代码

总结

第一次写前端页面和技术类文章，一晃扇贝也陪我走过了三年，一路上花开花落，起起跌跌... 记录一下，准备踏上新的一轮征途。

起初只想大概的把页面结构搭建一下，后面出于强迫症的性格做祟，就把页面各个细节扣了一遍。本次编程最大的收过就是搭建html页面的结构和语义化命名，固然，我这个语义化只是相对本身以前的abc命名方式而言语义了，之后仍是要多积累一些编程词汇。看着想要的样式都能一点点实现出来，仍是蛮有成就感的。

长路漫漫，犹可期许，黑夜仍在继续，夜空中最亮的星，请指引我前行。