CSS - 技术教程文章
css3 做border = 0.5px的细线
参考： https://blog.csdn.net/Tyro_java/article/details/52013531原文：https://www.cnblogs.com/linjiangxian/p/11460729.html
[CSS] Create a Card Flip Animation with CSS【代码】
Animation can be a powerful way to enhance a user experience. In this lesson, we‘ll walk through the creation of a card-flip animation, creating a nice visual effect when toggling between the front and back of a div meant to represent a card, like a playing card, or a flashcard. We‘ll create this effect using a touch of JavaScript and CSS transforms. No framework or library required. .container ...
CSS多列、用户界面属性【图】
CSS多列常用属性：column-count 分几列column-gap 列间距column-rule 列分割线的样式（写法和border一样）例如：一个div分三列，列之间间距为10px，分割线为（可以不设置）5像素红色实线这样写<style> div{column-count:3; column-gap:10px; column-rule:5px solid red; }</style>写此样式要加前缀column-rule 宽度:可选值有thin（细边框）、medium（中等边框）、thick（粗边框）、也可以指定数值样式:可...
css修饰操作【代码】
一：宽和高： width：为元素设置宽度。 height：为元素设置高度。 ps：块级标签才能设置宽度，内联标签的宽度由内容来决定。 二：字体属性： 1.文字字体： font-family 可以把多个字体名称作为‘退回’ 系统来保存。如果浏览器不支持第一个字体就会尝试下一个。浏览器会使用可识别的第一个值。 2.字体大小： font-size ：设置字体大小。（设置成inherit表示继承父元素的字体大小） 3.字体字重（...
CSS3 多媒体查询：查找设备的类型，CSS3 根据设置自适应显示
CSS3 多媒体查询CSS2 多媒体类型@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度...
一款基于jquery和css3的头像恶搞特效【代码】【图】
今天给大家分享一款基于jquery和css3的头像恶搞特效。这款实例中，一个头像在画面中跳舞，头像还有可爱的帽子，单击下面的按钮可以为头像切换不同的帽子。效果图如下：在线预览 源码下载实现的代码。html代码：<div class="wwiaftm-container"><div class="base wwiaftm"><div class="body-1 wwiaftm"><div class="body-2 wwiaftm"><div class="hat wwiaftm" style="background-image: url(Mini_Sombrero.png)"></div><div class...
css基本布局
1. 盒子 针对于块元素来说(比如div,ul,li,h1等) 基本属性: 外边距 margin(当前盒子与其他元素的距离) margin-top margin-right margin-bottom margin-left 基本用法:(margin:0 auto能让块级元素在父元素中居中显示) margin:10px; 上右下左 margin:0 10px; 上下，左右 margin:0 10px 5px; 上 左右 下 margin:0 1...
什么是CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定...
CSS3实现的一款三级下拉菜单【代码】
<html><head><title>河北礼品公司</title><style> body {background:#eee;margin:0;padding:0;} .example {background:#fff url(/imagesforcode/201306/clouds-in-blue-sky.jpg);width:770px;height:570px;border:1px #000 solid;margin:20px auto;padding:15px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}/* main menu styles */ #nav {display:inline-block;width:100%;margin:0px auto;padding:0;ba...
css 3D转换【代码】【图】
3D转换我们主要学习工作中最常用的3D位移和3D旋转主要知识点●3D位移: translate3d(x,y,z)●3D旋转: rotate3d(x,y,z) D●透视: perspective●3D呈现transfrom-style 6.2 3D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。●translform:translateX(100px) :仅仅是在x轴上移动●translform:translateY(100px) :仅仅是在Y轴上移动●translform:translateZ(100px) :仅仅是在Z轴上移动(注意: translateZ-...
基于css3的环形动态进度条（原创）【代码】
基于css3实现的环形动态加载条，也用到了jquery。当时的想法是通过两个半圆的转动，来实现相应的效果，其实用css3的animation也可以实现这种效果。之所以用jquery是因为通过jquery可以在网站中动态改变加载的百分比。同时，用如果单纯用css3的animation的话扩展性太差，因为你要先确定出百分比是多少，而如果百分比超过一半时，左边的半圆也需转动，单纯用animation就太复杂了。 另外，svg和canvas都可以实现这样的效果。canvas...
less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)【代码】【图】
前端技术众多，作为一名前端工程师，我们每接触新技术首先要懂得此技术的优势和劣势，这是最基本的。往深入了说还需要懂得技术的应用场景，与之配合的技术等，方便为以后架构做准备。而less作为一门CSS预处理语言，拥有函数式变成的特点，主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在：项目公共样式的定义，如页面主色、固定数值（宽、高、时间等）、公用样式模板、封装省略浏览器兼容前缀的函数等。1.less的两...
CSS 选择器及优先级【图】
CSS 选择器及优先级1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同，那么以后定义的为准。 3.一般在类选择器、属性选择器、伪类选择器优先级比较容易出错。 css3选择器主要有：基本选择器 ， 层次选择器， 伪类选择器 ， 伪元素选择器 ， 属性选择器基本选择器 层次选择器 伪类选择器分为 动态伪类选择器， 目标伪类选择器， 语言伪类选择器， UI元...
css3渐变 彩虹条纹【代码】【图】
linear-gradient 常用来制作渐变，如（色彩渣，我就随便找个颜色举例）css代码如下background:linear-gradient(45deg,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%);如果想制作条纹，很简单啦background:linear-gradient(45deg,#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9...
python全栈开发 * css 选择器 浮动 * 180808【代码】
css 选择器一.基本选择器1.标签选择器 标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“body{color:gray;font-size: 12px; } /*标签选择器*/ p{color: red; font-size: 20px; } span{color: yellow; }2.id选择器 同一个页面中id不能重复。 任何的标签都可以设置id id命名规范 要以字母 可以有数字 下划线 - 大...
css中line-height行高的深入学习【代码】【图】
之前对css中行高的理解还是有些肤浅，深入后才发觉里面内有乾坤。学习line-height,首先从基本原理开始（标注该文章转载 http://www.cnblogs.com/dolphinX/p/3236686.html） 顶线/中线/基本/底线<!DOCTYPE html> <html><head><title>Test</title><style type="text/css" >span{padding:0px;line-height:1.5;}</style></head><body><div class="test"><div style="background-color:#ccc;"><span style="font-size:3em;background-...
网格，逻辑值和写入模式 | CSS Grid Layout: CSS Grid, Logical Values and Writing Modes (Grid Layout) - CSS 中文开发手册 - Break易站【代码】
??CSS 中文开发手册网格，逻辑值和写入模式 | CSS Grid Layout: CSS Grid, Logical Values and Writing Modes (Grid Layout) - CSS 中文开发手册在这些指南中，我已经讨论了网格布局的一个重要特性：支持规范中内置的不同编写模式。对于本指南，我们将研究网格和其他现代布局方法的这一特性，学习一些关于编写模式和逻辑与物理属性的知识。逻辑和物理属性和值css充满了物理定位关键字-左和右，上和下。如果我们使用绝对定位定位一个...
2. CSS三种导入方式【代码】
优先级：就近原则 1. 行内样式 > 内部样式&外部样式 2. 内部和外部样式，谁近，谁优先级高<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 内部样式：--><style>h1{color: green;}</style><link rel="stylesheet" href="css/style.css"></head><body><!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 --><h1 style="color: red">我是标题</h1></body></html>/*外部样式...
css【代码】【图】
1.CSS 特点 1、页面内容与表现形式分离 2、可很好的控制页面的布局 3、提高网页加载速度 4、降低服务器的成本 5、呈现一致的效果2.link和@import的区别 一般使用link较多，推荐使用link 两者都是外部引用CSS的方式，但是存在一定的区别： 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 区别2：link引用CSS时，在页面载入时同时加载；@i...
CSS垂直居中总结【代码】【图】
原文:CSS垂直居中总结 工作中遇到垂直居中问题，特此总结了一下几种方式与大家分享。本文讨论的垂直居中仅支持IE8+ 1、使用绝对定位垂直居中<div class="container"><!--<div class="floater"></div>--><div class="center absolute_center">生活不能等待别人来安排，要自已去争取和奋斗；<br>而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。<br>有了这样的认识，你就会珍重生活，而不会玩世不恭；同时...
第十二课 CSS基本选择器 css学习2
基础选择器一、标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类语法：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}二、类选择器1、类选择器使用"."(英文)+类名进行选择三、css命名规范1、长名称或词组可以使用中横线来为选择器命名2、不建议使用“_”下划线来命名Css选择器3、不要用纯数字或中文命名命名规范是我们通俗约定。见名知意四、多类名选择器语法：class="类名1 类名2"五、id选...
css 實現微信聊天類似的氣泡【代码】【图】
要實現這樣的效果 代碼如下：---------------------------------------<style> .test{width:300px; padding:30px 20px; margin-left:60px; margin-top:100px; background:#beceeb; position:relative;} .test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;} .test span.bot{border-width:20px; border-style:solid; border-color:#ffffff #beceeb #beceeb #ffffff; left:-40px; top:40px;} .test spa...
CSS3之flex兼容写法【代码】
很久不写博文，之前的长时间不上都关闭了，但随着工作时间长越来越长，对知识的积累和总结还真的是很重要的。所以奉劝码农们每天都还是要抽出来一点时间总结点东西，以后对你受益匪浅！！今天还是变谈CSS3里的flex怎么处理兼容的flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了，虽然现在低版本浏览器不支持，可是对于移动来说兼容性不是问题，可是在安卓4.3以后版本里。那就不好用了...
JavaScript基础--事件驱动和访问CSS技术(十)【代码】【图】
1、原理： 2、快速入门案例js中的事件主要分为4种：案例：监听鼠标点击事件，并能够显示鼠标点击的位置x,y<script language="javascript" type="text/javascript">function test1(e){window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY);}function test2(e){window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY);}function test3(){window.alert(new Date());} </script> <body onmousedown="test1(event)" onmousemove="test2(event)">...
[CSS揭秘]鼠标光标
鼠标指针可以用来告诉用户当前可以执行什么动作目前已有的内置光标种类有:crosshairhelpmovepointerprogresstextwaite-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizenonecontext-menucellvertical-textaliascopyno-dropnot-allowedew-resizens-resizenesw-resizenwse-resizecol-resizerow-resizeall-resizezoom-inzoom-out 介绍几种常用光标1. 提示禁用状态not-allowed用于提示某个控件因为某种原因无法进行...
css的垂直居中【代码】
父元素样式.father{width: 100%;height: 100%;margin: 0;padding: 0; } 子元素垂直居中方法一子元素要是块 absolute+top50%+maringTop(-div一半高度).son{width: 400px;height: 400px;background: orange;margin: 0 auto; /*水平居中*/position: relative;top: 50%; /*偏移*/margin-top:-200px; } 子元素垂直居中方法二absolute+top50%+translateY(-50%)一半高度 子元素要是块.son{width: 400px;height: 400px;background: orange;...
[CSS3] Using flex-direction to layout content horizontally and vertically
The Flexbox css spec allows for more adjustable layouts. The flex-directionproperty allows you to easily change the layout on the children of an element without making any changes to the dom, which is particularly useful when combined with media queries. Idea is when greater then 599px, it will show in row layout, when it goes down under 599px, it will show in column layout. 原文：http://www.cnblo...
CSS设置背景颜色渐变【代码】
table th {border:1px solid #CCCCCC;background-color:#FFFFFF;FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); /*IE6-IE8*/background: -ms-linear-gradient(top, #fff, #C3DAF5); /* IE 10 */background:-moz-linear-gradient(top, #fff,#C3DAF5);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#fff), to(#C3DAF5));/*谷歌*/ ...
CSS3的高级特性
CSS3对响应式设计非常有用：使用CSS3替代图片，在有带宽限制的网页中可有效减少http请求（从而使网页加载更快），并可使网页更灵活、更容易维护。在开发CSS3时，要记住添加相关的浏览器私有前缀以保证最广泛的浏览器兼容。1.文字阴影 1.基本语法 .element{ text-shadow:1px 1px 1px #cccccc; } 记住，阴影值的速记规则永远是先右再向下。因此，第一个值指的是右侧阴影的大小，第二个值指的是下方阴影的大小，第...
CSS之display样式【代码】【图】
一、前言 行内标签：类似span，无法设置高度，宽度，padding，margin 块级标签：类似div，可以设置高度，宽度，padding，margin 默认情况下是这个样子的，但是可以通过display来进行设置二、display样式2.1 display：inline 作用：可以将块级标签转换成行内标签<head><meta charset="UTF-8"><title>display</title><style>.c1{background-color: #a0fff9;border-left: 1px dotted gray;display: inline;}</style></hea...