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






安然(o'~'o)

 
 

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

11 2018 档案

 
CSS实现太极图(1个div实现)
摘要:使用一个div实现太极图的步骤如下: HTML部分: 第一步,结合border实现左黑右白的正方形,加上圆角、阴影。代码如下; 效果如下: 第二步,通过伪类,实现一个一个白色的圆形,定位好位置。同时,利用box-shadow:0 200px 0 #000;实现同样大小的圆,放好。 先后实现的效果如下 阅读全文
posted @ 2018-11-29 22:24 安然(o'~'o) 阅读(3657) 评论(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) 阅读(3418) 评论(0) 推荐(1)
纯CSS实现3D照片墙
摘要:HTML部分: CSS部分: 效果如下(倒影的实现方法已在CSS部分用蓝色标记出来): 阅读全文
posted @ 2018-11-26 22:00 安然(o'~'o) 阅读(3467) 评论(1) 推荐(1)
纯CSS实现立方体旋转
摘要:下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: CSS部分: 以上代码实现的效果如下: 阅读全文
posted @ 2018-11-26 21:44 安然(o'~'o) 阅读(2987) 评论(0) 推荐(0)
CSS 3动画
摘要:CSS 3在原来的基础上新增了变形和动画相关的属性,通过这些属性可以实现以前需要大段JavaScript才能实现的功能。css 3的变形功能可以对HTML元素执行位移、旋转、缩放、倾斜4种几何变换,借助于这几种几何变换,css 3提供了Transition动画。Transition动画可以控制HTM 阅读全文
posted @ 2018-11-26 21:25 安然(o'~'o) 阅读(215) 评论(0) 推荐(0)
CSS 2D转换
摘要:转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。 首先,CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数); }而2D转换的函数一共 阅读全文
posted @ 2018-11-26 21:03 安然(o'~'o) 阅读(190) 评论(0) 推荐(0)
前端面试经典题目合集(HTML+CSS)一
摘要:1、说说你对HTML语义化的理解? (1)什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 (2)为什么要语义化? 为了在没有css的情况下,页面也能呈现出很好的内容结构、代码结构;为了裸奔时好 阅读全文
posted @ 2018-11-22 20:32 安然(o'~'o) 阅读(647) 评论(0) 推荐(0)
弹性布局(flex)
摘要:一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。但在使用时,需要注意以下两点: 1、Webkit内核的浏览器,必须加上-webkit前缀 2、设为Flex布局以后,子元素的flo 阅读全文
posted @ 2018-11-18 21:42 安然(o'~'o) 阅读(444) 评论(0) 推荐(0)
Bootstrap简介
摘要:什么是Bootstrap? Bootstrap是一个用于快速开发web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap是2011年八月在CitHub上发布的开源产品。 为什么使用Bootstrap? 移动设备优先:自Bootstrap3起 阅读全文
posted @ 2018-11-10 22:13 安然(o'~'o) 阅读(235) 评论(0) 推荐(0)
CSS背景相关属性
摘要:CSS样式可以精确控制HTML元素的背景、边框的样式和外观,也可以精确控制边框的线型和形状。其中,背景相关属性可以用于控制背景色、背景图片等属性。在控制背景图片的同时还可以控制背景图片的排列方式。 常用的背景相关属性如下: background:设置对象的背景样式,是一个复合属性,可以用于同时设置背 阅读全文
posted @ 2018-11-10 21:52 安然(o'~'o) 阅读(981) 评论(0) 推荐(0)
使用JavaScript脚本控制媒体播放(顺序播放和随机播放)
摘要:在JavaScript脚本中获取<audio.../>元素对应的对象为HTMLAudioElement对象,<video.../>元素对应的对象为HTMLVideoElement对象。 HTMLAudioElement对象和HTMLVideoElement对象支持的方法有如下几个: play():播 阅读全文
posted @ 2018-11-09 18:14 安然(o'~'o) 阅读(3029) 评论(0) 推荐(0)
css常见布局方式
摘要:布局是CSS中一个重要部分,下面总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现)。 一、居中方式 水平居中 水平居中对于子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案是不同。 行 阅读全文
posted @ 2018-11-09 18:05 安然(o'~'o) 阅读(498) 评论(0) 推荐(0)
CSS盒模型
摘要:一、基本概念: 对于一个HTML元素而言,它会占据页面的一个矩形区域,这块区域就是该元素占据的“盒子”。 HTML元素占据的矩形区域由内容区(content)、内填充区(padding)、边框区(border)和外边距区(margin)组成。下图显示了HTML元素 的盒模型。 HTML元素的盒模型中 阅读全文
posted @ 2018-11-09 14:09 安然(o'~'o) 阅读(237) 评论(0) 推荐(0)
CSS3新增的伪类选择器
摘要:伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1、结构性伪类选择器 Selector:root:匹配文档的根元素。在HTML文档中,根元素永远是<html. 阅读全文
posted @ 2018-11-07 21:11 安然(o'~'o) 阅读(2519) 评论(0) 推荐(0)
CSS选择器
摘要:1、元素选择器 元素选择器是最简单的选择器,其语法如下: E{.....}/*E代表有效的HTML元素名,后面内容中的E都是代表元素名*/。 在定义css样式时,通常会使用通配符“*”来匹配HTML文档中的任意元素,不过,由于*会匹配所有的元素,这样会影响网页渲染的时间,因此很多人开始停止使用*通配 阅读全文
posted @ 2018-11-07 20:29 安然(o'~'o) 阅读(174) 评论(0) 推荐(0)
HTML 5 表单相关元素和属性
摘要:HTML使用表单向服务器提交请求,表单、表单控件的主要作用是收集用户输入,当用户提交表单时,用户输入内容将被作为请求参数提交到远程服务器。因此,在Web编程中,表单主要是用于收集用户输入的数据,在需要与用户交互的Web页面中,表单、表单控件都是极为常用的。 HTML 5 在保留HTML原来的表单及表 阅读全文
posted @ 2018-11-04 16:21 安然(o'~'o) 阅读(480) 评论(0) 推荐(0)
HTML 5中的新特性
摘要:HTML 5中的新特性 html5新增了一些语义化更好的标签元素。首先,让我们来了解一下HTML语义化。 1、什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 2、为什么要语义化? 为了在没有C 阅读全文
posted @ 2018-11-01 19:49 安然(o'~'o) 阅读(204) 评论(0) 推荐(0)