html5+css3之制作header实例与更新_css3_CSS
上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。
事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我提升，但要说html结构完全控制于c er的话就不一定了
在整个header组件的代码过程中，我...[2020/12/21]
html5+CSS3的编码规范_Web标准教程_CSS
黄金定律
不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。
语法
1.用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
2.嵌套元素应当缩进一次（即两个空格）。
3.对于属性的定义，确保全部使用双引号，绝不要使用单...[2020/12/21]
Html5+CSS3+EL表达式问题小结
最近一直做关于装修的一个项目，后台功能实现很快，但是前台界面展示确实遇到不少的问题。
问题1、下拉框选择不管用，选中之后没有变。如图
当我选择其他的选项时，不发生任何变化。虽然不是大问题，但是也得找办法解决啊。
解决办法，加上如下代码，解决。
问...[2020/12/21]
CSS3中animation实现流光按钮效果_css3_CSS
在学习c 3的过程中，发现很多看着炫酷的效果，利用c 3的属性能很简单的实现，animation是c 3动画效果中常见的属性。下面让我们了解一下如何利用这个属性做出以下鼠标停在按钮上有流光按钮效果~
在此之前简单介绍一下animation属性的用法。
animation：[ anima...[2020/12/21]
CSS3 实现的缩略图悬停效果_css3_CSS
实现效果
实现代码
html
<header>
<h1>Thumbnail Hover Effect with <em>CSS3</em></h1>
</header>
<div cl...[2020/12/14]
CSS3简易切割轮播图的实现代码_CSS教程_CSS
实现思路
首先创建一个父容器，用两个无序列表通过弹性布局将父容器分为两栏。
在li里面存放图片通过给左边的li {background: url(''图片地址'') no-repeat; background-size: 200% 100%;}给右边的li{backgrou...[2020/12/14]
html+css3实现的登录界面_css3_CSS
实现效果
先用html搭建个基本框架
<body>
<div cla ="container">
<section id="content">
<form action="...[2020/12/14]
详解CSS3+JS完美实现放大镜模式_css3_CSS详解CSS3+JS完美实现放大镜模式_css3_CSS
大概一年多之前写过一篇文章：仿放大镜效果的几种方式原理解析，当时觉得自己技术可以了、飘了，于是就起了这样牛气哄哄的标题，其实也只算是介绍了c 里的transform和animation两种动画方式 —— 当然，实现的效果也是巨简单的那种…惭愧。
虽然后来随...[2020/12/8]
CSS3实现的渐变幻灯片效果_css3_CSS
实现效果
代码
html
<div cla ="c -slideshow">
<figure>
<img src="http: themarklee.com/wp-content/upload 2013...[2020/12/8]
CSS3 实现的加载动画_css3_CSS
实现效果
实现代码
<h1>w3xue</h1>
<h3>JB51.net</h3>
<div cla =''loader loader1''>
<div>
<div>...[2020/12/8]
CSS3 实现的火焰动画_css3_CSSCSS3 实现的火焰动画_css3_CSS
实现效果
实现代码
html
<div cla ="container">
<div cla ="red flame"></div>
<div cla ="orange...[2020/12/8]
CSS3 实现时间轴动画_css3_CSS
实现效果
html
<h2>CSS3 Timeline</h2>
<p>Please set the $vertical variable to false to see the horizontal version.</p>...[2020/11/23]
CSS3贝塞尔曲线示例：创建链接悬停动画效果_css3_CSS
我们将使用 CSS3 动画过渡来创建简单但引人入胜的链接悬停效果，将鼠标悬停在链接上时，会弹出一个小弹出框。
我们还将看一下CSS3 Cubic-Bezier（贝塞尔）曲线，它是 CSS 过渡，为弹出框提供了更加流畅的运动，而不是僵化的机械运动。
这是我们最后的效果：
让我们开始...[2020/11/23]
HTML+CSS3+JS 实现的下拉菜单_css3_CSS
实现效果
html
<div cla ="container">
<h1 cla ="title">Dropdown Menu</h1>
<ul>
<li cl...[2020/11/23]
纯CSS3实现的井字棋游戏_css3_CSS
运行效果：
html
.tic-tac-toe
- for (var turn = 1; turn <= 9; turn++)
- for (var row = 1; row <= 3; row++)
- for (var colum...[2020/11/23]
CSS3 实现倒计时效果_css3_CSS
实现效果
html
%div.wrapper
%div.time-part-wrapper
%div.time-part.minutes.tens
%div.digit-wrapper
%span.digit 0
...[2020/11/23]
CSS3制作轮播图的一种方法_css3_CSS
轮播图，网页上经常能看得见，画面比较精美，下面是纯CSS3的轮播图的一种
下面是style部分：
这几行都能明白吧
<style>
*{margin:0;padding:0;}
a{text-decoration:none}
li{li...[2019/11/12]
CSS3 边框效果_css3_CSSCSS3 边框效果_css3_CSS
什么是CSS#
CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表”或“级联样式表”，简称样式表。
CSS的主要作用#
它主要是用来给HTML网页来设置外观或样式。外观或样式：HTML网页中的文字的大小、颜色...[2019/11/4]
Github上流行的CSS3动画效果库 animate.css
介绍 animate.c 是一堆很酷，有趣且跨浏览器的动画，供你在项目中使用。非常适合强调，主页，滑块和一般的加水效果。 animate.c v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。感兴趣的小伙伴可以上github关注进展以及提供反馈！...[2019/11/4]
CSS3 实现footer 固定在底部(无论页面多高始终在底部)_css3_CSS
前言
把 footer 区固定在底部，无论页面高度多宽，它始终在底部不会变，就像移动端的菜单一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />...[2019/10/16]
常用到用css3实现的转换，过渡和动画
为什么要用c 动画替换js动画 导致JavaScript效率低的两大原因：操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时，浏览器会不停的执行重排和重绘，在PC版本的浏览器中，因为浏览器可用的内...[2019/10/12]
用css3实现转换过渡和动画效果_css3_CSS
为什么要用c 动画替换js动画
导致JavaScript效率低的两大原因：操作DOM和使用页面动画。
通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时，浏览器会不停的执行重排和重绘，在PC版本的浏...[2019/10/12]
css3 响应式媒体查询的示例代码_css3_CSS
让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术，用于向不同的设备提供定制的样式表。为了演示一个简单的示例，我们可以更改不同设备的背景颜色
/* 将body的背景颜色设置为tan */
body {
background-color: tan;
}
/* 在99...[2019/9/26]
css3 给背景设置渐变色的方法_css3_CSS
c 给网页中的背景设置渐变色，c 的渐变颜色可以指定固定的两个颜色之前的线性过度，这个c 3属性只支持高版本的浏览器。
浏览器前缀
background: linear-gradient(red, blue);
background: -webkit-linear-gradie...[2019/9/17]
CSS3 @media的基本用法总结_css3_CSS
语法：
@media mediatype and | not | only (media feature) { c -code; }
也可以针对不同的媒体使用不同的stylesheets:
<link rel="stylesheet" media=&q...[2019/9/11]
CSS中这个函数你会用吗？垂直居中都可以设置CSS中这个函数你会用吗？垂直居中都可以设置
今天给大家分享一个CSS函数（calc）从认识到如何实现元素居中的事。 没错，今天要说的就是calc函数的功能，先来简单认识一下。一、认识一下calc函数 这个函数出自于CSS3的功能，可以用来动态计算长度值。不要想太复杂，更不需要说的太多，只需要记住下面几点，就足够了熟悉它了： 第一，可以组合使...[2019/8/23]
通过css3动画和opacity透明度实现呼吸灯效果_css3_CSS
本文介绍了通过c 3动画和opacity透明度实现呼吸灯效果的方法，分享给大家，具体如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="U...[2019/8/12]
详解css position 5种不同的值的用法 _css3_CSS
position属性
position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值：
•static
•relative
•fixed
•absolute
•sticky
然...[2019/7/31]
这应该是最详细的响应式系统讲解了
前言
本文从一个简单的双向绑定开始，逐步升级到由defineProperty和Proxy分别实现的响应式系统，注重入手思路，抓住关键细节，希望能对你有所帮助。
一、极简双向绑定
首先从最简单的双向绑定入手：
html
<input type="text"...[2019/7/23]
使用CSS3实现input多选框自定义样式的方法示例_css3_CSS
原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS
效果预览
html代码
<div cla ="radio">
...[2019/7/22]
移动端吸顶fixbar的解决方案详解
需求背景
经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。
问题
position：fixed...[2019/7/17]
移动端开发1px线的理解与解决办法
1px线变粗的原因
在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经...[2019/7/12]
详解css3中 text-fill-color属性 _css3_CSS详解css3中 text-fill-color属性 _css3_CSS
text-fill-color是什么意思呢？单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color和color两个属性，则text-fill-color会覆盖掉color的值。
...[2019/7/8]
解决margin 外边距合并问题 _css3_CSS
一、兄弟元素的外边距合并
效果图如下：（二者之间的间距为100px，不是150px）
二、嵌套元素的外边距合并
对于两个嵌套关系的元素，如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框，则父元素的上边距会与子元素的上外边距发生合并，且值为最大的那个上外边距，...[2019/7/4]
Vue+CSS3实现转盘抽奖的示例代码_CSS教程_CSS
最近有个转盘抽奖的需求，搜了一下现有的轮子，有的是用jQuery的动画函数实现的，有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法，前者太老了没法简单移植到vue项目，后者感觉性能表现可能不会太好。也有一些用CSS动画的方案，设计了加速-匀速-减速三个动画，再计算偏转角度让...[2019/6/26]
em与rem有什么区别？移动设备中的适配方案
em与rem之间的区别：
共同点：
它们都是像素单位
它们都是相对单位
不同点：
em大小是基于父元素的字体大小
rem大小是基于根元素(html)的字体的大小
实例：
<!DOCTYPE html>
<html lang="...[2019/6/26]
css3实现蒙版弹幕功能_css3_CSScss3实现蒙版弹幕功能_css3_CSS
最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕， 打开之后效果大概是这样的
再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。
实现原理其实就是类似于ps的蒙版，也就是说将图像的一部分 “隐藏”。这里我们需要用到的是...[2019/6/19]
CSS3中媒体查询结合rem布局适配手机屏幕_css3_CSS
c 3语法: （750px设计图的1rem = 100px）
@media only screen and (min-width: 320px) and (max-width: 479px){
html {
font-size: 42.67px !impor...[2019/6/11]
详解CSS3 弹性布局快速入门_css3_CSS详解CSS3 弹性布局快速入门_css3_CSS
前言
弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。
PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局在PC端中还存在兼容性问题，移...[2019/6/10]
纯CSS3制作页面切换效果的实例代码_css3_CSS
此前写的那个太复杂了，来点简单的核心
<html>
<head>
<title></title>
<style type="text/c ">
* { marg...[2019/5/31]
CSS3 分类菜单效果_css3_CSS
CSS3 分类菜单效果如下所述：
HTML
<html>
<head>
<title></title>
<style type="text/c ">
#bg...[2019/5/28]
CSS3实现炫酷的切片式图片轮播效果_CSS教程_CSS
今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素（label）来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄弟选择器来定位每张图片。
我们要实现的最终效果是这样的：
轮播的构成
HTML由三个主要部分组成：单选按钮和...[2019/5/27]
css3实现六边形边框的实例代码_css3_CSS
最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置 visibility: hidden ; 而第3层div是放图片的，需要显示...[2019/5/27]
css和css3弹性盒模型实现元素宽度（高度）自适应_css3_CSS
一、c 实现左侧宽度固定右侧宽度自适应
1、定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
...[2019/5/16]
使用 css3 transform 属性来变换背景图的方法_css3_CSS使用 css3 transform 属性来变换背景图的方法_css3_CSS
使用 c 3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。
#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}...[2019/5/8]
css3实现可拖动的魔方3d效果 _css3_CSS
主要用到知识点：
•c 3 3d转换 •原生js鼠标拖动事件
•display:grid 布局
实现的功能
•3d魔方 可点击，可拖动
•直接看效果
html：
<div cla =&q...[2019/5/7]
怎样实现H5+CSS3手指滑动切换图片的示例代码
包含3个文件：html、slider-H5.js、jquery.js。在html中可配置滑动参数。具体代码如下：
HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<met...[2019/5/6]
CSS3 实现童年的纸飞机 _css3_CSS
今天我们来折纸飞机（可以飞出去的那种哦）
基本全用c 来实现，只有一小部分的js
首先看一下飞机的构造
灰色区域为可折叠区域
白色区域为机身
三角形由border画出来的再经过各种平移翻转变成上图
写之前再补充个知识点：
我们颜色的设置不用rgba，
用hsl...[2019/5/6]
使用CSS变量实现炫酷惊人的悬浮效果_css3_CSS
最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。
怎样才能达到这个效果，使我们的网站脱颖而出呢？其实，它并不像...[2019/4/28]
css3 中实现炫酷的loading效果 _css3_CSS
•今天实现了一个炫酷的loading效果，基本全用c 来实现，主要练习一下c 3的熟练运用
•js需要引入jquery 只用到了一点点js
•先看效果图
html：
<div cla ="box">
...[2019/4/28]
经验首页