• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
 






安然(o'~'o)

 
 

Powered by 博客园
博客园 | 首页 | 新随笔 | 联系 | 订阅 订阅 | 管理

2018年12月27日

JS实现省市联动效果
摘要: 实现的效果为:当选择一个省的时候,会自动出现该省下的市级 效果图如下: 阅读全文
posted @ 2018-12-27 20:30 安然(o'~'o) 阅读(213) 评论(0) 推荐(0)
 

2018年12月24日

使用数组封装图片实现轮播图
摘要: 下列实例是将轮播图所需要的图片封装在一个数组里,通过遍历实现图片的循环播放,并通过setInterval函数控制时间间隔。 HTML布局如下: CSS布局如下: JS代码如下: 阅读全文
posted @ 2018-12-24 22:50 安然(o'~'o) 阅读(729) 评论(0) 推荐(0)
 

2018年12月14日

JS实现小图放大轮播效果
摘要: JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: 其中div为图片轮播区域,li用于放置小图 步骤二:CSS布局 通过定位使小图显示在下方,此时轮播区域显示的为第一张图片 步 阅读全文
posted @ 2018-12-14 21:40 安然(o'~'o) 阅读(4216) 评论(0) 推荐(0)
 
JS实现图片放大镜
摘要: 将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。需要实现的效果如下: 基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部 阅读全文
posted @ 2018-12-14 21:04 安然(o'~'o) 阅读(3685) 评论(1) 推荐(0)
 

2018年12月9日

Bootstrap网格
摘要: 首先了解一下,什么是网格? 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效的使用HTML和CSS的方法。 Bootstrap包含了一个响应式的、移动设 阅读全文
posted @ 2018-12-09 21:25 安然(o'~'o) 阅读(144) 评论(0) 推荐(0)
 
JavaScript基本概念
摘要: 一、JavaScript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: ECMAScript,由ECMA-262定义,提供核心语言功能 文档对象模型(DOM),提供访问和操作网页内容的方法和接口 浏览器对象模型(BOM),提供与浏览器交互的方法和接口 二、标识符 所谓标识符,就是指 阅读全文
posted @ 2018-12-09 20:45 安然(o'~'o) 阅读(214) 评论(0) 推荐(0)
 

2018年12月2日

前端面试经典题目(HTML+CSS)二
摘要: 1、浏览器页面由哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层 分别是:HTML、CSS、JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。 2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些 阅读全文
posted @ 2018-12-02 20:56 安然(o'~'o) 阅读(228) 评论(0) 推荐(0)
 

2018年11月29日

CSS实现太极图(1个div实现)
摘要: 使用一个div实现太极图的步骤如下: HTML部分: 第一步,结合border实现左黑右白的正方形,加上圆角、阴影。代码如下; 效果如下: 第二步,通过伪类,实现一个一个白色的圆形,定位好位置。同时,利用box-shadow:0 200px 0 #000;实现同样大小的圆,放好。 先后实现的效果如下 阅读全文
posted @ 2018-11-29 22:24 安然(o'~'o) 阅读(3642) 评论(0) 推荐(1)
 
CSS实现太极图(3个div实现)
摘要: 使用三个div实现太极图的步骤如下: HTML部分 第一步,画一个宽高为300px的圆,并为其加上阴影(为了看起来有立体感) /*animation:rotation 2.5s linear infinite; -webkit-animation:rotation 2.5s linear infin 阅读全文
posted @ 2018-11-29 21:55 安然(o'~'o) 阅读(3404) 评论(0) 推荐(1)
 

2018年11月26日

纯CSS实现3D照片墙
摘要: HTML部分: CSS部分: 效果如下(倒影的实现方法已在CSS部分用蓝色标记出来): 阅读全文
posted @ 2018-11-26 22:00 安然(o'~'o) 阅读(3451) 评论(1) 推荐(1)
 
下一页