display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 一、使用以及介绍：1、要实现水平或者垂直切分，必须先满足以下要求 i. display : box必须用在对应的父窗口，比如div.parent>div.panel*3 这种格局， parent 必须先先定义此属性 ii. .panel的元素定义box-flex，来实现按比例切分。如下图：就是将三个div水...
前端的工作很细，涉及的东西也很多，静态页面和js开发，调接口之类，有时还要自己设计。现在css管理使用less和sass，新东西起码要支持下，具体用与不用看公司的业务需求。前端人员之间的配合也很重要要有统一的文档，命名和一些规范。现在介绍一下网易的NEC，我觉得很不错。起码在命名和一些规范，动画效果上可以快速开发，代码写的快是王道我喜欢这句话。原文：http://www.cnblogs.com/heboliufengjie/p/4149600.html
id、class都是web元素的属性，因为他们是很常用的属性，所以css选择器专门提供了根据id、class选择的语法。那么其他的属性呢？比如：<a href="https://www.baidu.com"> 百度</a> 根据href选择，也可以使用css选择器 css选择器支持通过任何属性来选择元素，语法是用一个方括号[ ]比如：要选择上面的 a元素，可以使用 [ href = "https://www.baidu.com" ] 即选择属性href值为 https://www.baidu.com 的元素当然，前面可以加上css表达...
前端之HTML，CSS（十） 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式，实质是将小的背景图片拼接到一张大的背景图像上。拼接成的大图被称为精灵图。浏览器打开网页时，每一个图片显示都是浏览器向服务器发送一次请求的结果，精灵技术是把多个小图片拼接为一个大图，有效减少了浏览器请求服务器的次数，与此同时也提高了页面的加载速度。 精灵技术使用 精灵技术实际是通过background属性限定...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"/> 5<title>CSS实现div居中</title> 6<style> 7/*外层div居中*/ 8 #main { 9 position: absolute;/*极为重要*/10 background-color: blue;11 width:400px;12 height:200px;13 left:50%;14 top:50%;15 margin-left:-200px;16 margin-top:-100px;17 border:1px solid #00F;18}1920 #content {21 ...
1.如何让文字水平垂直居中？<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>css练习</title><style>a {/* 行内元素转行内块级元素,因为行内元素无法改变宽高,若想改变,必须先转成行内块级元素 */display: inline-block;width: 70px;/* 行高等于高度，文字才会垂直居中 */height: 30px;line-height: 30px;background-color: aqua;/*...
一、CSS的三种使用方式：1. 内联样式 * 在标签内使用style属性指定css代码 * 如：<div style="color:red;">hello css</div>2. 内部样式 * 在head标签内，定义style标签，style标签的标签体内容就是css代码 * 如： <style> div{ color:blue; } </style> <div...
CSS是Cascading Style Sheets的缩写。即层叠样式表，它用于表现HTML的样式，即HTML仅仅是去写该网页有哪些内容，至于怎样去表现它们，由CSS去定制。 *************时代的呼唤*************1.在之前，我们直接把网页的格式写到HTML中去，这样会造成格式的混乱，并且难以阅读和改动，只是这不是最大的问题，最大的问题在于我们想给网页换一个表达样式的时候，须要改动的地方不仅非常多关键是非常零散，须要花费非常大的力气去定位这些...
此文章仅为转发，非原创，原文http://www.cnblogs.com/zhuanggege/p/5754543.html请支持原创 css3动画@keyframes规定动画，必须定义动画的名称，动画时长的百分比，一个或多个css样式属性以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%语法：@keyframes animationname {keyframes-selector {css-styles;}}animation是一个简写属性，用于设置六个动画属性：animation-name规定@keyframes动画的名称anim...
1、行内元素居中 line-height（须知高度）.box{height:300px; } p{line-height:300px; } 2、table居中 display:table-cell;vertical-align:middle;.box{display:table; } p{display: table-cell;vertical-align: middle; } 3、绝对定位，top+margin-top:-xxpx（须知高度）.box{position:relative; } p{position:absolute;top:50%;margin-top:-50px; width:100px;height:100px; }4、绝对定位 top+tranform.box{p...
1 height:auto;min-height:100%;使得最小高度为屏幕高度。2 -webkit-tap-highlight-color:rgba(0,0,0,0);避免移动端点击事件出现背景框3 text-decoration：underline/overline/line-through; 定义文本上的下划线/上划线/中划线原文：http://www.cnblogs.com/yunrundetizi/p/5176943.html
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的一切用法，在此总结一下，以供需要的朋友们，总共30个例子1.长方形#Rectangle{width: 200px;height: 50px;background-color: red;color: white;text-align: center;}2.正方形#square{width: 200px;height: 200px;backgrou...
@-webkit-keyframes swing {20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }20% { -webkit-transform: rotate(15deg);}40%{-webkit-transform: rotate(-10deg);}60%{-webkit-transform: rotate(5deg);}80%{-webkit-transform: rotate(-5deg);}100%{-webkit-transform: rotate(0deg);}} @-moz-keyframes swing {20% { -moz-transform: rotate(15deg); }40% { -moz-transform: rotate(-10deg); }60% { -moz-tra...
/*check,radio*/ input.check_txt[type=‘checkbox‘]{display: none; }input.check_txt[type=‘checkbox‘] + label{display: block;float: left;-moz-appearance: none;-webkit-appearance: none;width: 20px;height: 20px;background: #fff;border:2px solid #cecece;border-radius: 3px; cursor:pointer; }input.check_txt[type=‘checkbox‘]:checked + label {background: #f0f0f0 url(../images/check.png) no-repeat cent...
css作用：控制网页的样式 css语法：选择符{属性1：属性值；属性2：属性值；属性3：属性值1 属性值2 属性值3；} css实例： div{ width:300px; height:400px; background:red; } css语法解释： 1、选择符：对标签进行获取 2、所有声明都放在大括号里面，声明和声明之间用分号（“；”）连接 3、声明包括属性及属性值，属性和属性值之间用冒号连接 4、如果一个属性拥有多个属性值，属性值之间用空格隔开 例：border（边框）:10px(像...