第1章CSS3简介如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。1.1 CSS3的现状1、浏览器支持程度差，需要添加私有前缀2、移动端支持优于PC端3、不断改进中4、应用相对广泛1.2 如何对待1、坚持渐进增强原则2、考虑用户群体3、遵照产品的方案4、听Boss的第2章准备工作2.1 统一环境由于CSS3兼容性问题的普遍存在，为了避免因...
部分HTML代码如下：<div class="wrap block"><div class="block-center">块儿居中</div></div><div class="wrap inline"><span class="inline-center">内联居中</span></div>一、absolute拔河效应（元素宽高需设定） .block{ position: relative; } .block-center{ position: absolute; margin: auto; /*这句要写，否则无效果*/ left: 0; top: 0; right: 0; bottom: 0; } 利用margin（元素宽高需设定） .block{positio...
左侧宽固定200，高度自适应，右侧的框宽度都自适应<style> * { margin: 0; padding: 0; } html { height: auto; } body { margin: 0; padding: 0; } #container { background: #ffe3a6; } #wrapper { display: inline-block; border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/ position: relative; vertical-a...
一、定位：1、定位的理解（1）相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。#box_relative {position: relative;left: 30px;top: 20px;}...
css三种样式表：1、内嵌样式表： <head> <style type="text/css"> 样式表写法 </style> </head>2、外链样式表： <link rel="stylesheet" href="1.css">3、行内样式表： <h1 style="font-size:30px;color:pink">红豆</h1>三种写法的特点：◆内嵌样式表写法，样式只作用于当前文件，没有真正实现结构（html）表现（css）分离◆外链样式表写法，作用范围是当前站点，范围广，真正实现结构表现分离◆行内样式表写法，作用范围仅限于...
当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。#test{margin:10px;padding:10px;width:100px;height:100px;}如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width＝margin-left margin-right width...
css3被拆分成如下的小模块，选择器，盒模型，背景和边框，文字特效，2D/3D转换，动画，多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换，兼容浏览器加前缀 –webkit- -moz- 使用rotate()方法，让元素旋转一定的角度，参数：角度例如：transform:rotate(30deg); deg是角度的单位 使用translate()方法，让元素位移，参数：x轴 ，y轴例如：transform:translate(10px,10px); 使用scale()方法，改变元素的比例大小，参...
圆角效果： border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 阴影： box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式(inset)]; 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果...
CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误： 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2...
CSS三大特性—— 继承、 优先级和层叠继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类 1.标签选择器(如：body,div,p,ul,li) 2.类选择器(如：class="head",class="head_logo") 3.ID选择器(如：id="name",id="name_txt") 4.全局选择器(如：*号) 5.组合选择器(如：.head .head_logo) 6.后代选择器 (如：#head .nav ul li...
jQuery修改class属性和CSS样式class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 具体使用方法见:http://www.w3school.com.cn/css/css_selector_class.asp 用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), rem...
每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘。或许你会莫名其妙，程序员学代码那是理所应当，但是作为一个作家、营销人员、财务工作者甚至是工人，为什么也需要学习代码呢？ 好吧，下面我会告诉你为什么懂点 HTML 和 CSS 会让你的职业生涯发生巨大的改变。学习技术不仅仅是生产助理亦或是印刷设计师的事——无论你是小企业主、销售经理、事件协调员还是魔术师，都能让你受益于 HTML 和 CSS 知识。 不要...
经验分享：CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。 写在前面的话： 由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 小菜水平有限，本...
固定宽度布局1-2-1布局（浮动）http://www.w3.org/1999/xhtml"><head><title>固定宽度-float</title><style type="text/css">#header,#footer,#container{ width: 760px; margin: 0 auto;} #content { float: left; width: 500px; background: #d5ddf3;}#side { float: left; width: 260px; background: #d2d8de;}#footer { clear: both; background: #d5ddf3;}</style></head><body> <h2>Pa...
1：超出三行用省略号display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。overflow:hidden; 原文：https://www.cnblogs.com/programmer-1/p/11712180.html