自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(14)
  • 收藏
  • 关注

原创 用数组的三种方法渲染页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.

2020-07-09 18:28:45 3845

原创 tab栏目自定义的js代码

var that;class Tab { constructor(id) { // 获取元素 that = this; this.main = document.querySelector(id); this.add = this.main.querySelector('.tabadd'); // li的父元素 this.ul = this.main.querySelector('.fisrstnav.

2020-07-08 10:24:34 175

原创 focus轮播图(带自动功能的轮播图)

解释:.arrow-l是指左右点击的按钮focus指的是轮播图的框focusWidth是指轮播图大小(移动距离)无缝轮播图的要素在于需要创建一张额外的图(与第一张一致)到ul的最后面,等轮到最后一张图时,快速切回第一张图相关公式:移动的距离left为索引*轮播图框的宽因为要实现圆圈与轮播图的互动(点击同一个索引,会有同索引的图),所以要有一个自定义属性index来关联num是用来查看点了几次,并用来控制点击左右按钮后跳到什么距离(类似于index)circle用来控制在点击左右按钮后,圈圈同步

2020-07-03 00:15:39 651

原创 鼠标移动上去之后元素向外移动,移出后元素回走效果

鼠标移动上去效果如下源代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { pos

2020-07-02 11:44:29 416

原创 函数封装实现页面动作功能

// 用途:在页面上实现来回移动的盒子 // obj:要移动的对象元素 // target:目标位置 // callback:回调函数,跑完之后做什么操作 function move(obj, target, callback) { // 先清除,以免产生过多的定时器 clearInterval(obj.timer) obj.timer = setInter...

2020-07-02 01:16:21 150

原创 京东商品移动放大镜效果

效果图:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .big { position: rel

2020-07-01 00:31:38 202

原创 移动端通用common.less样式

html { font-size: 50px;}@media screen and (min-width: 320px) { html { font-size: 21.33333333px; }}@media screen and (min-width: 360px) { html { font-size: 24px; }}@media screen and (min-width: 375px) { html { font-size: 25px;

2020-06-13 15:09:58 679

原创 移动端通用样式

html { font-family: "Helvetica Neue", Helvetica, sans-serif; /*谷歌浏览器字体最小字体12px*/ -webkit-text-size-adjust: 100%; /*100%/none 关闭字体大小自动调整功能*/ /*a标签及拥有 :active伪类的元素有默认的高亮框*/ -webk...

2020-06-07 09:35:14 579

原创 用css动画结合3d转换来做旋转木马

效果预览代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style> body { perspective: 1200px; } section { position: relative;

2020-06-04 18:50:41 257

原创 鼠标移动到导航栏上实现底面翻转成正面的实现组件

鼠标移动前效果鼠标移动后效果实现代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style> /* 首先需要一个大盒子,因为是绕着大盒子转动的,里面两个a标签重叠 */ /* 其次在背面的a标签需要往x轴移动-90度。这样就形成一个立体的十字效.

2020-06-04 17:14:11 229

原创 用css动画效果做小熊奔跑

代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #ccc; } div { position: absolute;

2020-06-03 16:59:12 2487 3

原创 CSS3动画实现地图热点效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style> @keyframes suo { 0% {} 70% { width: 40px; height: 40px;

2020-06-02 21:37:03 878 1

原创 行内元素、行内块、块元素的特点

块级元素(代表div)特点:宽度默认与父级相同独占一行可设置宽高,margin padding注:p标签、h、dt等文字类标签内最好不要放块级元素行内元素(代表 span a)特点不能设置宽高一行内显示默认宽度是内容宽度padding值只左右下有效,margin值只左右有效可以看到这里设置span的margin,只左右有效可以看到这里设置padding,但是只左右下有效结论:行内元素最好只设置左右padding跟margin 以免造成元素属性混乱行内元素内最好不放块级

2020-05-24 10:45:22 3433

原创 Python面向对象-类的各种方法与代码演示

class Price: '''这是一个类''' count = 0 #这是一个类属性 可以用类名.属性,也可以用实例名.属性来使用 def __init__(self,name):#类的构造函数,默认__init__ ,参数第一个必须用self #类的构造函数用于类创建实例的过程。也定义了实例属性 self.name ...

2020-05-07 11:04:47 426

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除