web前端
tingyu_
这个作者很懒,什么都没留下…
展开
-
PC端网页布局——世纪佳缘(四)注册登录
效果如下:页面解析:在这个注册框中呢,可以分为三个部分 1.标题 2.输入框 3.注册/登录重点自然是在注册框了,在注册框中,我们可以看到, 1.每一行的左边的文字是靠右侧的 2.两次用到单选框,其中在婚姻状况里,有默认选项 3.生日和所在地区是两个不同类型的输入框大家可能会遇到的一些问题:1、背景图偏移,由于背景图较大,所以会出现X轴和Y轴的滚动条,当在body中添加溢...原创 2020-08-02 15:06:46 · 7228 阅读 · 0 评论 -
web前端——loading效果
效果如下:8个小圆点一直的这样转动8个小点的生成方式:将8个小圆点分别放在2个盒子上,一个黑子放4个,分别放在4个角上,然后第2 个盒子旋转45度,将两个盒子重叠到一起,就可以生成这个8个小圆点了。具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev.原创 2020-07-29 15:30:35 · 1046 阅读 · 0 评论 -
web前端——transform变形 旋转角度正负的判断
在使用CSS的transform的变形效果的时候,总是被这个角度的正负搞的头大,特意写出来,和大家分享首先,我们要学会怎么看 假设需要围绕x轴做旋转,那么我们将x轴的正向指向我们自己,然后再看顺时针和逆时针,顺时针为正的角度,逆时针为父的角度。注意,坐标轴是这样的:注意Y轴是朝下的,Z轴是垂直屏幕向外的!...原创 2020-07-29 15:24:02 · 1263 阅读 · 0 评论 -
前端——旋转的3D立方体
来搭建立方体吧~~先将6个面做出来:六个面的立方体,只需要在ul中包裹六个li就可以了<body> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li>原创 2020-07-28 18:59:20 · 644 阅读 · 0 评论 -
去除a标签之间存在的烦人的空隙
在平常写代码的时候呢,我们总是很习惯的按照书写代码的规范来编写代码(这句话说的,原谅我),但是还是会出现让人怎么也找不到哪里错了的问题来,今天解决如何去除a标签之间存在的默认间隙的问题:有四种方法:(1)。a标签的父级元素设置font-size:0,然后再a标签中设置回来(一定要在a标签中设置,否则不会显示)(2)。将a标签写在一行(3)。给a标签加浮动(4)。给a标签的父标签加字间距letter-spacing:-999px; 在a标签中加:letter-spacing:0...原创 2020-07-27 23:57:55 · 1909 阅读 · 0 评论 -
PC端网页布局——世纪佳缘(三)头部
来看头部,做好的效果图如下:接下来就进入主题吧~~先来分析一下:有两张图片,一个填写账号密码和登录按钮的登录框,其他登录方式,(因为海外登录方式与前面纯图标的不太一样,这里又是只做了个大致的样式,所以就把海外用户登录与忘记密码做在了一个大div块中,大家可以按照自己的想法自行修改)很明显,除了图片,后面的内容做在了一个大块中,其中每一个小块又可以使用div来做,而div是块标签,要想一行显示,就需要使用浮动了初步做好长这样:去掉灰色(body的颜色)和粉色(头部颜色)之后原创 2020-07-27 23:50:47 · 658 阅读 · 0 评论 -
PC端网页布局——世纪佳缘(二)页面初搭建
咱们首先来搭建一下整体的大结构:效果如下:每一块呢,都是使用div块做的,并不难理解除了头部之外,每一块都是外面一个大的div,里面再包一个小的div,也就是所谓的通栏和版心(由于个人问题,版心设置了两个宽度的,大家可以根据个人需求来设计)HTML代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi原创 2020-07-27 22:36:48 · 918 阅读 · 0 评论 -
前端JavaScript——打砖块小游戏
游戏效果图所示:打砖块小游戏实现的步骤:1.搭建整体的三个盒子: 最外面的大盒子,游戏屏幕盒子,游戏信息盒子2.右侧信息的初始化(搭建好结构,以及样式)3.游戏屏幕盒子中 未加JavaScript效果时的初始样子(砖块,小球,挡板)4.给砖块设置随机颜色以及砖块的位置5.键盘上的左右键控制挡板的左右移动6.小球的运动效果:小球遇到挡板、盒子边沿、砖块的反弹效果7.小球的运动过程中游戏信息的实时显示。一、首先搭建游戏初始样子(未加JavaScript的样子)...原创 2020-07-21 23:56:20 · 2606 阅读 · 0 评论 -
前端——使用JQuery 实现点击加入购物车(二)
实现效果:1.当鼠标放到购物车上时,购物车向左移动,并展示购物车中的商品2.点击删除,可以在购物车中删除这个商品项3.点击加,购物车中该商品数量增加14.点击减,购物车中该商品数量减少1,并且当减到1的时候,提示不能再减一、鼠标的移入与移出:在鼠标未移入的时候,页面效果是这样的:在页面的右侧主要有两块:1.购物车图标2.鼠标移入购物车图标后,右侧部分左滑,显示购物车中的 商品,也就是下图这个样子:在这里首先解释CSS部分,理解之后,JQuery部分就好理解了。..原创 2020-07-20 23:47:23 · 4486 阅读 · 0 评论 -
前端JavaScript——原生JavaScript轮播图实现(更多信息请看JQuery版本了解)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播菜单</title> <style>/*改变标签的默认样式*/ *{padding: 0px;margin: 0px;list-style: none;}/*轮播图块的大小样式(定位和overflow看不明白的可以参考JQuery版本的轮播图)*/ div{margi.原创 2020-07-15 22:28:47 · 161 阅读 · 0 评论 -
前端开发——使用JQuery实现轮播图效果
效果图如下:实现的效果有:1、图片的轮播显示,2、鼠标放到图片上,停止轮播,离开图片,继续轮播,3、相应的数字方块,直接跳转到数字对应的图片上。页面结构代码如下:第一张图片在最后再次放置的问题:这个问题呢,我在网上查了资料,但是其中意思一直没有理解,小伙伴们有什么好的见解,欢迎评论区留言。<body> <div class="play" id="play"> <ol> ..原创 2020-07-15 22:11:54 · 3522 阅读 · 0 评论 -
前端——使用JQuery 实现点击加入购物车(一)
在本篇文章中,主要实现的功能的是:点击 加入购物车 实现效果:点击屏幕上的加入购物车按钮,右侧购物车上面的数字增加1首先,先上图:一、上图中左侧数据来源: 这个HTML页面中的数据是写在JSON文件中的,,然后使用JQuery的ajax异步加载,将JSON数据解析出来。JSON文件中的数据如下:【注】上面这些数据是单独写在JSON文件里面的,(不要直接将全部数据复制到页面上哦)二、...原创 2020-07-13 21:43:26 · 7189 阅读 · 0 评论 -
前端JavaScript——给页面上用代码添加一个标签,并在标签中写入文本内容(节点操作方法)
效果:如下图面两个图所示具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script..原创 2020-07-08 22:36:59 · 7779 阅读 · 0 评论 -
前端JavaScript——解决getElementsByClassName在低版本IE浏览器不支持的问题
使用函数封装的方法解决getElementsByClassName在低版本IE浏览器不支持的问题在这里呢,支持从父节点开始查起,(可以不用从document查起)在这个函数的两个参数中呢,parent代表的是父节点,classStr代表的是需要查询的class属性的值,里面放的是一个字符串具体步骤如下:1.找到parent节点下的所有元素节点,这里用通配符*来代替2,声明一个用来记录符合条件的元素节点的数组3,如果符合条件呢就将这个节点添加到这个数组中4,最后,将装有符合条件的.原创 2020-07-08 21:59:52 · 318 阅读 · 0 评论 -
前端JavaScript——秒表实现
秒表实现这一部分主要是通过JavaScript代码来实现的,在这里重点说JavaScript图长这样:页面结构样式代码如下:HTML:<body> <div id="div1"> <div id="count"> <span id="id_H">00</span><span>:</span> <span id="id_M"&.原创 2020-07-03 10:28:50 · 2035 阅读 · 1 评论