Web前端最全《从案例中学习JavaScript》之实现网页版阅读器(1),2024年最新前端性能优化面试题怎么答

最后

除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

Paste_Image.png

接下来,引入上下两端的样式图片。

其实,手机的顶部和底部就是两张图片:

Paste_Image.png

我们先把顶部图片引入进来,在引入图片之前,先画两个div来盛放图片。

然后,通过背景图的方式把图片贴进来。

.phone .phone_top {

background: url(phone_top.png);

height:42px;

}

.phone .phone-bottom {

background: url(phone_bottom.png);

position: absolute;

height: 42px;

width: 100%;

bottom: 0;

}

Paste_Image.png

这样一来,一个手机的大概模子就出来了,接下来,我们把屏幕区域加上去。

.phone .container{

overflow-x: hidden;

overflow-y: auto;

width:90%;

background:#ccc;

height:456px;

font-size:14px;

text-align:left;

background:#dcf3dc;

font-family:微软雅黑;

color:#555;

line-height:28px;

padding:16px;

text-indent: 2em;

padding: 16px 16px 0px 16px;

}

Paste_Image.png

OK,现在可以把父容器的背景色给去掉了。

background: #66CC00; //去掉

Paste_Image.png

为了把手机模型做得更像一点,我们手动给它加一个按钮,额,就手动画一个吧。

.back {

width: 30px;

height: 30px;

position: absolute;

left: 50%;

margin-left: -15px;

border: 2px solid #c7bcbc;

top: 4px;

border-radius: 50%;

}

Paste_Image.png

虽然span是行内元素,但是因为我们给它设置了 position: absolute , 所以宽度和高度依然是起作用的。

我也是在写这个案例的时候无意中发现的,我以前一直以为需要手动给行内元素升级为块级元素才行。

这样,我们的页面布局差不多久完成啦。

#####2. 文字部分设计与美化

接下来,我们给阅读器模拟一些数据。

刀剑神域

在一群好奇心旺盛的高手花了整整一个月测量后,发现最底层区域的直径大约有十公里,足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层,其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原,甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座,阶梯还都位于充斥怪物的危险迷宫区域之中,因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层,上下层各都市的「转移门」便会连结起来,人们也就可以自由来去两个楼层之间。

经过两年的时间,这个巨大城堡就这样被逐渐地往上攻略,目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线,好不容易缩短了长度。同时,似乎有只冰冷的手掌,抚摸过我胸口深处。

横线——那称为HP条的蓝色条状物,可以看出我的生命残值。虽然它还有八成左右的残值,但不能把事情看得太过于乐观。因为相对来说,我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前,我就先往后跳开一大步,以保持与敌人之间的距离。

「呼……」

硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气,但在另一边,也就是躺在真实世界里的真正身体,现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗,心跳也加速到破表了吧。

这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象,减少的也只是数值化的生命值,但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看,这场战斗真是相当不公平。因为,眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外,还有着蜥蜴头与尾巴的半人半兽怪物,不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次,都可以由系统无限重生的数字文件档案集合体。

不对。 目前,操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式,用以不断提升自己的应对能力。但这些学习档案,在该个体消灭后便会重置,而且不会反馈到下次出现在这个区域的同种个体上。

Paste_Image.png

滚动条的样式不太美观,我们将其美化一下

/** 滚动条样式美化 */

::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}

::-webkit-scrollbar-button{background-color:#e5e5e5;}

::-webkit-scrollbar-track{background:#999;}

::-webkit-scrollbar-track-piece{background:#ccc}

::-webkit-scrollbar-thumb{background:#666;}

::-webkit-scrollbar-corner{background:#82AFFF;}

::-webkit-scrollbar-resizer{background:#FF0BEE;}

scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}

scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}

scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

Paste_Image.png

这样就好看多了。

标题部分有一点突兀,我们给出四条美化的建议:

1. 标题居左对齐

2. 底部画一条线,与小说正文分开,并且空开一些。

3. 字体颜色稍微淡一些,不要太黑

4. 字间稍微距大一些

于是

.phone .container h4 {

text-indent: 0;

margin-bottom: 1em;

color:#736357;

border-bottom:1px solid #736357;

letter-spacing: 2px;

}

Paste_Image.png

这样好看一些了吧,当然,每个人审美观不同啦,你也可以调成自己喜欢的样式。

Paste_Image.png

段落之间和文字间距都太小了,我们也调一下,不要那么小气嘛,哈哈。

.phone .container p {

margin-bottom: 15px;

letter-spacing: 2px;

}

Paste_Image.png

恩,好多了。

#####3. 引入向上的箭头图标

我们准备了一张半透明的箭头图标,现在将其引入。

刀剑神域

在一群好奇心旺盛的高手花了整整一个月测量后,发现最底层区域的直径大约有十公里,足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层,其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原,甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座,阶梯还都位于充斥怪物的危险迷宫区域之中,因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层,上下层各都市的「转移门」便会连结起来,人们也就可以自由来去两个楼层之间。

经过两年的时间,这个巨大城堡就这样被逐渐地往上攻略,目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人,充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖,浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线,好不容易缩短了长度。同时,似乎有只冰冷的手掌,抚摸过我胸口深处。

横线——那称为HP条的蓝色条状物,可以看出我的生命残值。虽然它还有八成左右的残值,但不能把事情看得太过于乐观。因为相对来说,我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前,我就先往后跳开一大步,以保持与敌人之间的距离。

「呼……」

硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气,但在另一边,也就是躺在真实世界里的真正身体,现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗,心跳也加速到破表了吧。

这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象,减少的也只是数值化的生命值,但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看,这场战斗真是相当不公平。因为,眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外,还有着蜥蜴头与尾巴的半人半兽怪物,不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次,都可以由系统无限重生的数字文件档案集合体。

不对。 目前,操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式,用以不断提升自己的应对能力。但这些学习档案,在该个体消灭后便会重置,而且不会反馈到下次出现在这个区域的同种个体上。

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dim n As Integer, Lines As Integer, i As Integer, w As Integer, a As Boolean Private Sub Command1_Click() Command6.Visible = False a = Not a '变量开关,再次打开文件时进行判断 If a = True Then no1: Dim infile As String '打开通用对话框,获取文件名称 CommonDialog1.InitDir = "" CommonDialog1.Filter = "文本文件(*.txt)|*.txt|所有文件(*.*)|*.*" CommonDialog1.FilterIndex = 1 CommonDialog1.ShowOpen infile = CommonDialog1.FileName Dim txt() As String, Lines As Integer Lines = 0 ' 文件行数总计 Open infile For Input As #1 'infile 变量存放的是文本文件的名字 While Not EOF(1) ReDim Preserve txt(Lines + 1) '开辟空间以存放一行内容 Lines = Lines + 1 Line Input #1, txt(Lines) '读入一行并放入数组 Wend w = Lines Close #1 '关闭文件 Label1(1) = txt(1) Label1(1).Top = Command1.Height Label1(1).Left = 0 Label1(1).Width = Form1.Width '载label控件数组并读入文本 For n = 2 To Lines Load Label1(n) 'Form1.width = Label1(n).width Label1(n).Left = 0 Label1(n).AutoSize = True Label1(n).WordWrap = True Label1(n).Width = Form1.Width Label1(n).Caption = txt(n) Label1(n).Visible = True Label1(n).Top = Label1(n - 1).Height + Label1(n - 1).Top Label1(n).Left = Label1(1).Left Next Else Call Command6_Click a = Not a GoTo no1 End If End Sub Private Sub Command2_Click() '减少interval Timer1.Interval = Timer1.Interval - 25 End Sub Private Sub Command3_Click() '增interval Timer1.Interval = Timer1.Interval + 30 End Sub Private Sub Command4_Click() '打开“字体”对话框 CommonDialog1.Flags = cdlCFBoth Or cdlCFEffects On Error GoTo errhandler CommonDialog1.ShowFont '设置label1控件数组内容的属性 For i = 1 To w Label1(i).FontName = CommonDialog1.FontName Label1(i).FontBold = CommonDialog1.FontBold Label1(i).FontItalic = CommonDialog1.FontItalic Label1(i).FontSize = CommonDialog1.FontSize Label1(i).FontStrikethru = CommonDialog1.FontStrikethru Label1(i).FontUnderline = CommonDialog1.FontUnderline Label1(i).ForeColor = CommonDialog1.Color Label1(i).AutoSize = True Label1(i).WordWrap = True '根据label1控件数组的大小进行重新排列 For n = 2 To w Label1(n).Top = Label1(n - 1).Top + Label1(n - 1).Height Next Next errhandler: Exit Sub End Sub Private Sub Command5_Click() End End Sub Private Sub Command6_Click() Command6.Visible = False '再次打开文件时卸载label1控件数组 For n = 2 To w Unload Label1(n) Next End Sub Private Sub Command7_Click() '从头显示文件内容 Label1(1).Top = Command1.Height For i = 2 To w Label1(i).Top = Label1(i - 1).Top + Label1(i - 1).Height Next End Sub Private Sub Form_Load() Timer1.Interval = 300 End Sub Private Sub Label1_Click(Index As Integer) '控制滚屏,及命令按钮的隐现 Timer1.Enabled = Not Timer1.Enabled Command1.Visible = Not Timer1.Enabled Command2.Visible = Not Timer1.Enabled Command3.Visible = Not Timer1.Enabled Command4.Visible = Not Timer1.Enabled Command5.Visible = Not Timer1.Enabled Command7.Visible = Not Timer1.Enabled End Sub Private Sub Timer1_Timer() For i = 1 To w Label1(i).Top = Label1(i).Top - 90 Next '到达文件尾自动停止滚屏并显示命令按钮 If Label1(w).Top + Label1(w).Height < Form1.Height - 400 Then Timer1.Enabled = False Command1.Visible = True Command2.Visible = True Command3.Visible = True Command4.Visible = True Command5.Visible = True Command7.Visible = True MsgBox "文章已经到头" End If End Sub 做vb
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值