CSS - 技术教程文章
css 边框添加三角形指向,简单粗暴，易学易懂
构建一个 div ， class 随便命名 css 部分class 名字 {position: relative; // 相对定位是重点}class名字:before,class名字:after{position: absolute; content: " "; top: 10px; left: -16px; display: block; width: 0; height: 0; border: 8px solid rgba(255, 87, 51, 0.1); border-color: transparent rgba(255, 87, 51, 0.1) transparent transparent; z-index: 111;}class名字...
CSS动画实例【代码】【图】
上一篇讲过css动画transform transition的语法，这一节展示自己做的几个小例子加深印象1. 线条动画效果代码：最外层div包含2个小的div : a和b. a有左右边框(高度变化)， b有上下边框（宽度变化）, 默认不显示，鼠标移上去时，a的高度和b的宽度发生变化，交叉效果<style> *{margin:0;padding:0;} .main{ width: 300px; height: 300px; background: #333; position: relative;} .a,.b{opacity: 0; position: absolute;top: 0;botto...
CSS选择器【代码】
CSS的selector极其强大，大致分为通配符、元素、群组、关系、id及class、伪类、属性、伪对象这八种，下面将进行详细介绍：一、通配选择符 选中HTML文档中的所有标签，语法： *{ 代码块； }<!DOCTYPE html><html lang="en"><head><title></title><style>*{color:red;}</style></head><body><h1>这是h1标签</h1><h3>这是h2标签</h3><p>这是p标签</p></body></html>演示结果: 这是h1标签 这是h2标签 这是p...
Google Pagespeed，自动压缩优化JS/CSS/Image【代码】
Google Pagespeed，自动压缩优化JS/CSS/Image浏览：257 发布日期：2015/07/05 分类：技术分享 关键字： Nginx Appache Pagespeed 自动压缩优化JS/CSS/Image 这个周末，把服务器的Nginx升级了下，并加入了Google Pagespeed模块 效果很明显： 页面加载的多个JS、CSS会自动合并压缩处理 发现新版本的Pagespeed能很好的发现处理用户加载的第三方JS库，如jQuery 发现新版本的lazyload_images处理的很好注意：CSS代码里含有背景图片这类的...
css3学习笔记二
接着是对图形移动、旋转、倾斜、放缩的处理。 -moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/ -moz-transform:rotate(x deg);/*图形绕着原点旋转当然也可以改成XY轴*/ -moz-transform:skew(x deg);/*图形倾斜*/ -moz-transform-origin:0% 0%;/*改变坐标原点在图形中的位置*/ -moz-transform:scale();/*对图形放缩大于1是放大，小于1大于0是缩小，小于0会有反转的效果然后放...
超多的CSS3圆角渐变网页按钮
<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/css">body { background: #ededed; width: 900px; margin: 30px auto; color: #999;}p { margin: 0 0 2em;}h1 { margin: 0;}a { color: #339; text-decoration: none;}a:hover { text-decoration: underline;}div { padding: 20px 0; border-bottom: solid 1px #ccc;}.button { display: inline-block; zoom: 1; *display: inline; vertical...
html和css的总结【代码】
接触前端web开发已经一个月了，当然这里面还是有知识盲点。首先我会先总结一下我自己经常出错的地方，其次再介绍一下html5的部分用法。1、回顾知识点在使用css的时候首先要在head头文件里面加入link语句，具体如下：<head><link rel="stylesheet" type="text/css" href="链接样式表文件.css"/></head>其次我们会在css中建立一个通用css和index.css在通用css中一般会有一下几个语句：*{padding: 0;margin: 0;box-sizing: border-box...
css趣味案例：画三角形
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画三角形</title> <style> #trip{ width:0px; height:0px; border-top:50px solid white; border-right:50px solid white; border-bottom:50px solid green; border-left:50px solid white; } </style></head><body> <div id="trip"> </div></body></html> 效果如图显示: 原文：https://www.cnblogs.com/itfz/p/9901543...
JavaScript+css+ div HTML遮罩層效果【代码】
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test</title><script src="jquery.1.11.0.min.js"></script><script type="text/javascript">$(function () {settime_show();$(‘#btn‘).click(function () {});});function settime_show() {setTimeout(show, 2000);}function show() {$(‘.bg‘).show();$(‘.show‘).fadeIn(‘slow‘)//$(‘.show‘).show(‘slow‘); setTimeout(hide, 4000);//$(‘.show...
CSS3径向渐变实现优惠券波浪造型【代码】【图】
效果看下图： 左右的波浪边框用CSS搞定这个效果。利用CSS radial-gradient() 函数CSS 语法：background: radial-gradient(shape size at position, start-color, ..., last-color);直接上代码如下：<div class="coupon"></div>css部分：.coupon {position: relative;width: 400px;height: 160px;margin: 100px auto;text-align: -webkit-auto;background-image: radial-gradient(circle at 1px 8px,transparent 6px,#ff9e6d 6px,#f...
css中的一些规范
突然感觉自己代码写的乱糟糟，赶快百度一下，学习学习规范的写法，顺便记录一下1.class命名有一下几种方式：className，class_name，class-name。其中据了解很多人js中使用第一种驼峰命名法，css中使用第二种或第三种，但是看网上有文章比较推荐第三种命名法，原因是可以少按一个shift键加快编程速度。笔者在没有查到这是什么命名法，但是看了一下很多大型网站的源码中css都是采用class-name命名方法。（注：其实很多公司有自己的规...
CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单，每个input对应的是每一步，在表单得到焦点时，对应的step也会进行对应的改变。不过这个效果是使用js代码来实现，但整个表单的外观是由CSS3来完成的，整个案例中使用了：@font-face来制作icon图标，使用gradient来制作渐变的按钮效果，使用text-shadow来制作文字阴影效果等等，方便简单点，但细节与创意才是最重要的，喜欢的同学可以看看是怎么实现的吧1. [文件] index.html <!DOCTYPE H...
获取css样式，style、getComputedStyle及currentStyle的区别【代码】
样式表有三种：内嵌样式：<div id="box" style="color:red">box</div>，style写在html中的为内嵌样式；内联样式：<style> #box{ font-size: 25px; background-color: #ccc; } </style>在html页中直接写入<style></style>的为内联样式；外部样式：<link rel="stylesheet" href="css/style.css" />这种为外部样式。现在来测试一个小例子：<style>#box{font-size: 25px;background-color: #ccc;} </style> <div id="box...
认真学习css3--01-全是日志没有技术内容
由于某些原因，还是要写写前端代码。虽然这不是我的主要责任，但也有表率的必要性。css3这个东西没有什么大难度，难点主要集中在：1）样式比较多2）精准定位3）性能优化其中第2个是日常经常面对的情况。由于对css3并不熟悉，有时候会浪费不少时间来固定一个dom或者一个组件的位置，有点浪费时间。不如干脆多花费一些时间，从头开始学习！以后也可以教教那些新手！原文：https://www.cnblogs.com/lzfhope/p/15225594.html
vue 获取当前屏幕的宽度，图片等比例缩放，动态设置css样式【代码】【图】
vue 获取当前屏幕的宽度，图片等比例缩放这个是一个背景图，点击对应的圆圈就会出现一个蒙层上面显示详情，但是只要当前窗口大小变化了，因为我的蒙层大小是固定的px，所以不会变，就不在图片对应的位置了我们要绑定样式style，等后面要根据当前的屏幕来给蒙层动态设置宽高<div class="main"><div class="content"><div class="street"><router-link:to="{name:‘/streetDetails‘,query:{code:‘310151101‘}}":style="style01"cl...
web项目js css静态文件缓存解决【代码】
在web开发过程中经常会遇到js及css文件缓存的问题，开发过程中我们可以自己手动的清空浏览器缓存，但是我们没法告诉用户去执行一个他们或许不熟悉的操作（清空浏览器缓存），为解决这个问题，编写了一个grunt插件，在前端构建的时候，可以使用grunt插件来做这件事情，就是将js及css文件自动的加上一个版本号（这里我用的是时间戳）基于grunt的js 及css文件自动加version的插件，可以将配置的目录下所有引用到指定匹配的js及css文件...
CSS样式【代码】【图】
一.简介 CSS 指层叠样式表 (Cascading Style Sheets)，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一 二.CSS的引入方式行内式嵌入式导入式链接式<!--行内样式--><h1 style="background-color: aqua;color: brown">JD</h1>行内式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--嵌入式--><style>p{color: red;font-size: 14px;}.t{font-size:...
HTML+CSS实现大白效果【代码】【图】
HTML代码： <div id="baymax"><!-- 头部 --><div id="head"><div id="eye"></div><div id="eye2"></div><div id="mouth"></div></div><!-- 躯干 --><div id="torso"><div id="heart"></div></div><!--腹部 --><div id="belly"><div id="cover"></div></div><!-- 手臂 --><div id="left-arm"><div id="l-bigfinger"></div><div id="l-smallfinger"></div></div><div id="right-arm"><div id="r-bigfinger"></div><div id="r-smallf...
HTML CSS布局 二【代码】
基于浮动的布局 基于浮动的布局是最容易使用，也是最可靠的，只需要设置元素的宽度，然后设置为左或者右浮动即可。1.两列浮动布局假设页面总的宽度920px，两个元素间距20px。（display:inline 防止IE双外边距浮动产生的bug）；由于元素是浮动的，将不再文档流中占据空间，将父节点 overflow:hidden;css代码：.right {width: 650px;padding-left: 10px;float: right;display: inline; }.left {width: 230px;float: left;display: in...
史上最全的css hack（ie6-9,firefox,chrome,opera,safari) 写法【代码】
在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。 为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了，直...
css清除select的下拉箭头样式【代码】
select {/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/border: solid 1px #000;/*很关键：将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none;/*在选择框的最右侧中间显示小箭头图片*/background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;/*为下拉小箭头留出一点位置，避免被文字覆盖*/padding-right: 14px; }/*清...
使用CSStickyHeaderFlowLayout实现头部固定的CollectionView【代码】
近期流行的一种界面效果，是瀑布流的header固定，也叫sticky header或者parallax。对于UITableView，能够比較方便地让table header固定，可是对于UICollectionView，原生的iOS API比較难以实现。本文推荐一个开源组件。专门用于实现这样的效果：CSStickyHeaderFlowLayout总体效果贴个总体示意图配合autolayout使用首先须要注意的是，这个组件必须配合autolayout来使用。比方整个header分为4个部分。我想固定的是当中以下的2个subvi...
css3控制div上下跳动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">@-webkit-keyframes bounce-down { 25% { -webkit-transform: translateY(-10px); } 50%, 100% { ...
css布局【代码】
css布局主要是position,float以及margin等属性实现本文主要介绍几种常见的布局：三列布局，等高布局以及水平垂直居中布局。1 三列布局1.1 左右列固定宽度，中间列宽度自适应方法1：absolute+margin1<div id="left">left</div>2<div id="center">center</div>3<div id="right">right</div> 1#left,#right{2 width:200px;3 postion:absolute;4 top:0; /*注意不能少*/ 5 background-color:red;6 }7#left{left:0;...
css中font-family的中文字体
说到css中的font-family，相信很多朋友经常用，但不知道当你遇到引用中文字体的时候你会怎么写？最近特别关注了下，发现最常用的基本有三种类型：1、直接中文；2、英文形式；3、unicode码；前面两种形式很好理解，unicode码是什么意思呢？下面看基本定义:Unicode（统一码、万国码、单一码）是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求...
postcss-px-to-viewport【代码】
autoprefixer: {},‘postcss-px-to-viewport‘: {unitToConvert: ‘px‘, //将要转化的单位viewportWidth: 750, //(Number)视图的宽度unitPrecision: 3, //(Number)指定`px`转换为视窗单位值的小数位数，默认是5propList: [‘*‘], //(Array)指定可以转换的css属性，默认是[‘*‘]，代表全部属性进行转换viewportUnit: ‘vw‘, //(String)指定需要转换成的视窗单位，默认vwfontViewportUnit: ‘vw‘, //(String)指定字体需要转换成...
CSS3选择器
CSS3中，追加了三个属性选择器分别为： [att*=val]。属性值中有val的元素被选中[att^=val] 属性值中以val 开头的[att$=val] 属性值中以val结束的 如果val为数字则数字前边加反斜杠使属性选择器有通配符的概念 ////伪类选择器 伪元素选择器first-linefirst-letterbeforeafterroot. :root{}not. :not(){}empty. 内容为空白时的样式target. 原文：https://www.cnblogs.com/xiaoqianliu/p/9118458.html
CSS选择器世界【代码】【图】
CSS选择器世界CSS选择器的分类与优先级css选择器分为四类：选择器、选择符（后代关系的空格、>、+、~、||）、伪类、伪元素（::before、::after、::first-letter等）。css的优先级:css的优先级有很多划分方法，所有的方法其实都大同小异。这里将CSS优先级划分为6个等级：0级：通配选择器（*）、选择符（+、>、~、空格、||）、逻辑组合伪类(:not()、:is()等)1级：标签选择器2级：类选择器、属性选择器、伪类3级：ID选择器4级：style内...
css规范【代码】
一、文件规范基本样式库 /css/module通用UI元素样式库 /css/libJS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件，放在如下目录中：读书 /css/book/ 文件名必须由小写字母、下划线组成 例如 /css/module/rec_btn.css二、sass使用规范module库和lib库 内文件必须以下划线开头：/css/lib/_lib.scss通用工具文件 /css/lib/_lib.scss 内只允许 使用 @mixin命令，定义代码块。@import 最多允许嵌套两层（最好一层）。mod...
css3新增【图】
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法：border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形，数值设置宽或高的一半，或者 50%； 矩形，数值设置高度的一半 2.盒子阴影 box-shadow box-shadow：水平阴影的位置 垂直阴影的位置 模糊距离 阴影尺寸 阴影颜色 外部阴影 模糊距离：影子的虚实 阴影尺寸：影子大小 注意： 1.默认值外阴影（...