前端
我叫王不见
这个作者很懒,什么都没留下…
展开
-
【前端】通过点击左右按钮,实现图片的转换
通过点击左右的按钮实现图片框的图片转换效果图:代码实现:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业3-图片切换</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> <style t.原创 2022-02-20 19:30:59 · 3741 阅读 · 1 评论 -
【前端】百度页面的的代码实现 2.0(起点闭关计划)
效果图:具体代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>百度</title> <style type="text/css"> #btn-set{ background-color:#6e6ef2; color:#ffff; border-radius: 5px; border: a原创 2022-02-20 19:26:34 · 508 阅读 · 0 评论 -
【前端】css入门精讲(转自起点IT笔记)
CSS的发展历程从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS 网页的美容师CSS的出现,拯救了混乱的HTML,当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。CSS的最大贡献就是: 让 HTML 从样式中解脱原创 2022-02-20 19:23:26 · 132 阅读 · 0 评论 -
【前端】登录界面,鼠标移开或者点击之后对输入框的内容进行自动的验证(起点闭关计划)
效果图:代码实现:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="util.js" type="text/javascript" > </script> </head> <body> <div > <span.原创 2022-02-20 19:17:39 · 714 阅读 · 0 评论 -
【前端】利用css实现不清除数字的计算器(起点闭关计划)
实现一个计算器,让计算器在计算的时候能够对前面的数字进行显示效果图:代码实现:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算器</title> <script type="text/javascript"> // 初始状态,记得每次按等号要还原 var t1 = 0, t2 = 0, flag .原创 2022-02-20 19:13:53 · 108 阅读 · 0 评论 -
【前端】java script经典案例 (起点闭关计划)
1、通过下拉框的转换实现基本的文本的转换代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="作业4样式.css"/> </head> <body> <script t..原创 2022-02-20 19:10:08 · 665 阅读 · 0 评论 -
【前端】JAVASCRIPT案例 闰年平年的判断(起点闭关计划)
通过输入一个年份,判断是闰年还是平年的页面实现。效果图:页面代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="作业2.css"/> </head> <body> <..原创 2022-02-19 13:53:38 · 219 阅读 · 0 评论 -
【前端】HTML和CSS案例 计算器页面效果(起点闭关计划)
关于原创 2022-02-19 13:47:46 · 462 阅读 · 0 评论 -
【前端】java script 字符串检索(起点闭关计划)
简单检索输入字符串和原字符串的内容,判断原字符串是否包含输入的字符串。控制台输出包含的个数。代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>目标字符串:<input type="text" id="dstString"...原创 2022-02-17 09:45:13 · 191 阅读 · 0 评论 -
【前端】css圆角边框属性讲解(起点闭关计划)
在css中,我们能够进行相关边框的属性设置,因此我们的边框不再仅仅局限与直角。圆角的应用很多,常见的百度搜索(可以去看我的百度页面代码的实现那篇文章)就是圆角。一般我们垂直半径都是省略的默认和水平半径一样。border-radius: 左上角 右上角 右下角 左下角这里的顺序是从左上开始的顺时针,不需要特殊去记,多用用就知道了。常见到的使用<style> div { width:200px; height:200px; border:1...原创 2022-02-17 09:35:16 · 376 阅读 · 0 评论 -
【前端】盒子padding、margin、border精讲(起点闭关计划)
首先对于padding、margin、border有一个简单地认识。这里我们把盒子进行一个比喻:一个有着泡泡安全纸包围着的快递。margin:是一个盒子最外面的东西,我们可以把它理解成是快递最外面的安全纸,它是有厚度的,因此两个盒子之间的距离,就是由两个盒子的最外层的margin决定的。主要作用于盒子与盒子之间的距离。border:是一个盒子的边框,边框的厚度将会影响内部的储存空间,毕竟盒子越厚的话,内部储存空间就会越来越少。padding:这个盒子属性是最接近内容的属性。我们可以把它理解为原创 2022-02-17 09:27:28 · 121 阅读 · 0 评论 -
【前端】百度翻译的代码实现(起点闭关计划)
效果图 :代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/fanyi.css"/> </head> <body> <div class="box"> ...原创 2022-02-16 20:09:02 · 428 阅读 · 0 评论 -
【前端】百度页面的代码实现(起点闭关计划)
效果图关键代码:圆角边框的实现border-radius: 10px 0px 0px 10px;四个位子依次是,左上,右上,右下,左下,具体的数值可以根据百度源代码来实现。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ ..原创 2022-02-16 20:05:09 · 1321 阅读 · 0 评论 -
【HTML】入门到精通(起点闭关计划)
开发工具HTML使用的开发工具比较多,常用的有记事本,DW,HBuilder,VSCode,webStorm,sublime 。标签我在学习HTML 的时候还是主要局限于学校,应付考试,因此会从比较简单地学生角度来进行相关的介绍,不是很难,但是要记住。标题标签 h1~h6语法:头标签 内容 尾标签效果这里可以去类比word里面的标题。段落标签 <p>语法:<p>内容</p>效果:段落和标题标签都会自动的.原创 2022-02-16 19:45:26 · 6873 阅读 · 1 评论