前言
小白玩家入门文章,意在记录本人学习过程中遇到的各种问题,欢迎各路大神指点。
第一次切页面选择的网站是扇贝单词的首页,很喜欢这种简洁清爽的页面风格。页面在PC端预览效果还算过得去,由于没做适配,定位也存在很多问题,导致页面缩放或在移动端打开会惨不忍睹了。
学习目的:
- 了解页面HTML结构
- 语义化命名
- 盒子模型
- CSS属性
- JS皮毛
- GitHub代码:github.com/StevenYoung…
- GitHub预览(手机慎点!!!): stevenyoung21.github.io/qt_lesson/s…
使用工具及语言
- Vscode
- Chrome
- Page Ruler (Chrome拓展程序):方便测量页面各种尺寸。
- 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)输入框样式恢复。顺便再列举一下关于鼠标的各类事件:
- onclick :用户点击完触发事件
- ondblclick :双击触发事件
- onmousedown: 当鼠标按下时(未松开状态)
- onmouseup: 松开鼠标时触发
- onmouseout: 当鼠标从某个元素移开
- 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命名方式而言语义了,以后还是要多积累一些编程词汇。看着想要的样式都能一点点实现出来,还是蛮有成就感的。
长路漫漫,犹可期许,黑夜仍在继续,夜空中最亮的星,请指引我前行。