CSS - 技术教程文章
CSS（之四）
CSS的核心：浮动、盒子模型、定位DIV作为块级元素，每个DIV占据一行。 块元素特点：1.默认显示在父标签的左上角；2.会计元素默认占满一行（占满整个文档流） 常见的块级元素：p、h1-h6、ul li、ol li、div、table、hr等 相对应的是行内元素（内联元素）：a、span、img、input等 行内元素特点：1.大小受到文字区域影响，不受height、width影响；2.不会单独占据一行。 span标签的应用：不会单独占满一行，不会受到其他块级...
CSS中的未定义行为，浏览器的差异(一)【代码】
今天看了张鑫旭大佬的新书的有感吧，记录一下。Web标准未对一些场景做出明确规范，所以各大浏览器厂家只能根据自己的理解和喜好去实现，表现差异不是浏览器的bug，用计算机领域的术语描述为"未定义行为"。比如一个例子： CSS中的一个伪类，最常用的一个伪类:active，鼠标按下，执行改伪类对应的CSS样式，鼠标抬起还原。但是这种情况呢：<!DOCTYPE html> <html> <head><meta charset="utf-8" /><style>.active-btn {display: inline...
标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？【图】
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样 标准的css盒子模型宽高就是内容区宽高； 低端IE css盒子模型宽高 内边距﹢边界﹢内容区；原文：http://www.cnblogs.com/love-sea520/p/5903442.html
高效整洁CSS代码原则【转载】
CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则： 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：鞍山治疗牛皮癣的医院www.0412n.com *{ margin:0; padding:0; } 这不仅仅因为...
CSS的命名规则
(壹)常用的CSS命名规则头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title...
HTML&CSS
主要内容：1. HTML标签：表单标签2. CSSHTML标签：表单标签* 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 ...
CSS——优先级【代码】
样式优先级：默认样式<标签选择器<类选择器<id选择器<行内样式<!important <!DOCTYPE html> <html> <head><meta charset="utf-8" /><title></title><style>#main {font-size: 80px;color: blue;}.box {font-size: 40px !important;color: yellow;}div{font-size:20px;color:red;} </style> </head> <body><div class="box" id="main" style="font-size:120px;color:gray">哈哈</div> </body> </html>注释：上述代码为了屏蔽样...
readonly背景色（css）
input{ background-color:expression(this.readOnly==true?"#EEEEEE":"#FFFFFF"); } input[readonly]{ background-color:#EEEEEE; }原文：http://www.cnblogs.com/superJF/p/4398770.html
css字体图标的使用方法【代码】
提要：对于传统的一般用css雪碧（css sprite）来搞，目前大部分网站已经主要字体图标 ，利用font+css 或者font+html 来开发，今天总结了一下，记录之~css sprite用背景图片定位，兼容性好，图标颜色丰富，但是对于网站缩放来讲，会使图片失真，也不容易维护；而当我们运用字体图标来做这个事的时候，好处就多多了（但是字体图标就是颜色单一，一般可忽略）1.首先从https://icomoon.io/ 国外的字体图标库 非常好 下载免费的图标库（...
css实现水平垂直居中的几种方式【代码】
梳理下平时常用css水平垂直居中方式～使用flex布局HTML<div class="box"><div class="child"></div> </div> CSS.box {width: 100vw;height: 500px;background: skyblue;display: flex;align-items: center;justify-content: center; }.child {width: 200px;height: 200px;background-color: deepskyblue; } 利用flex的alignItems:center垂直居中，justifycontent:center水平居中利用相对定位和绝对定位的margin:autoHTML<div class...
CSS滚动条设置【代码】
1/*IE滚动条颜色设置*/ 2body {3 scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ 4 scrollbar-track-color:#1589ce; /*底层背景色*/ 5 scrollbar-face-color:#27aeff; /*滚动条前景色*/ 6 scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/ 7 }8/*chrome滚动条颜色设置*/ 9body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...
CSS实现的几款不错的菜单栏【图】
前言 自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！一、滑动菜单1、代码： View Code2、效果 二、左侧带图标多级下拉菜单1、HTML代码： V...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b...
CSS，网页样式【代码】【图】
认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：p{font-size:12px;color:red;font-weight:bold; }使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 CSS样式的优势为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务...
如何用CSS进行开发【代码】
翻译自：How to Develop with CSS很多web开发人员都知道CSS，但是他们很可能认为使用CSS的应用代码就是这样的：<p><span style="font-weight:bold;font-family:Arial">Welcome!</span></p>或者是这样的：<table class="middle grey"><tr><td class="darkTopHeader">Item #</td><td class="darkTopHeader">Qty</td><td class="darkTopHeader">Cost</td></tr><tr><td class="rowHeaderDrk">1341</td><td class="cellFieldDrk">3</td>...
点赞功能实现 $(tag).css('属性', '样式')【代码】
1. 创建标签 document.createElement()2.$(tag).css(‘属性‘， 样式) 赋予标签属性样式3.设置定时器 改变位置 大小<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.container{padding: 50px;border: 1px solid #eeeeee;}.item{cursor: pointer;position: relative;width: 30px;}</style></head><body><div class="container"><div class="item"><span>赞</span></div></div><div class=...
css 做一个常见的按钮【代码】
a:link,a:visited{display:block;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none;}a:hover,a:active{background-color:#7A991A;} 原文：http://www.cnblogs.com/yufenghou/p/4201592.html
css学习_css清除浮动【图】
若元素没有设置宽高，那元素实际宽高是被内容撑起来，若元素自己有设置宽高，那实际面积于自己的盒子模型有关1、清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题。（当父元素没有设置高度时，子元素又全浮动了，此时子元素脱离文档流而不占据位置，那就会出现父元素高度为0底下的盒子会跑上来。）2、清除浮动的方法 a、额外标签法（很少用，不想添加下无意义的标签）b、父级添加overflow方法...
CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）【代码】
《CSS3基本选择器》一、通配符选择器（＊）*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器（.className）四、id选择器（#ID）#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器（ＥＦ）.demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...
CSS3（六 CSS3新特性（阴影、动画、渐变、变形、伪元素等）【代码】【图】
一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius 圆角4.2、边框图片border-image五、变形 transform5.1、rotate()2D旋转5.2、设置原点 transform-origin 5.3、平移 translate() 5.4、缩放 scale5.5、斜切扭曲skew 六、渐变七、透明7.1、opacity7.2、transparent与图片透明7.3、RGBA八、动画8.1、过渡动画8.2、...
reset css
通用版（基本适用于所有的页面）body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-w...
【代码片段】CSS3 渐变（CSS3 Gradients）【代码】
background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#bbb‘, endColorstr=‘#000‘); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image...
CSS3图片圆角+阴影特效【代码】
使用CSS3技术编写的图片圆角及阴影特效代码，与一般的图片阴影有些不一样，用CSS直接生成阴影，当然要比使用图片来修饰要好得多，图片的加载可能会影响到网页的加载，CSS就不会哦。 <!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=u...
css选择符权重【代码】
css选择符权重 目录css选择符权重css选择器权重列表CSS选择符冲突处理css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属性选择符 0010 TAG 0001 伪元素 0001 伪类 0001 inhref 0000 群组选择符 不变 后代选择符 相加 CSS选择符冲突处理 1、权重不同：选择符的css发生冲突时，拥有高权值的css选择符将会显示2、权重相同：选择符权重一...
CSS选择器【图】
CSS选择器有多个选择器 所在的位置是内嵌和外部常用的选择器有 id选择器 { 是给元素一个身份证号，给id定义的id名不能重复 优先级第一 用#来查找liru：body里面 <div id="id1" ></div> 那么我们查找的id名是id1 那么给找到的id是id1 所在的位置是内嵌和外部 #id1 { background-color:red; width:100px; height:100px;} ...
通过CSS禁用页面内容选中和复制操作
CSS禁止鼠标拖动选择文字，禁用页面内容选中和复制操作，只需在body的样式中加入如下代码就可以了 -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; 原文：http://www.cnblogs.com/xiaoky/p/3975340.html
CSS属性(根据继承性分为两类)
一、可继承属性1》所有标签可继承：visibility:行高cursor:2》内联标签可继承：line-height:行高color:文字颜色font-family:文字字体font-size:文字大小font-weight:文字加粗text-decoration:文字下划线3》块级标签可继承：text-indent:缩进text-aligin:对齐4》列表标签可继承：list-style:列表二、不可继承属性display、margin、border、padding、backgroundheight、min-height、max-height、width、min-width、max-widthoverflow...
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）【代码】
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>HTML5-页面切换动画</title> 6<link href="animations.css" rel="stylesheet"> 7<script src="modernizr.custom.js"></script> 8<script src="jquery-1.8.0.min.js"></script> 9<style> 10 #viewsWrapper { 11 top:0px; 12 left:0px; 13 width:300px; 14 height:200px; 15 position:relative; 16 overflo...
Css 图片自适应【代码】
设置 CSS.container{overflow:auto; } img{width:100%;height:auto;overflow:hidden; } 设置 template<div class="container"><img :src="src"> </div> 设置 scriptimport src from ‘../../../assets/image/login/1.jpg‘ export default{data(){return{src: src}} } 原文：https://www.cnblogs.com/leslie1943/p/13358178.html
前端笔记--css样式笔记【代码】【图】
一、浮动 定位布局1、浮动布局left 元素向左浮动right 元素向右浮动例如：设置2个按钮，要使得按钮在同一行位置摆放，可以使用浮动，令按钮浮动到右边。注意，先设置float的按钮，例如：a先设置float：right，b也设置float：right，那么a在b的右边，先设置float的位置在float的方向。both：清除浮动2、定位布局position:fixed;”是结合top、bottom、left和right这4个属性一起使用的，其中“position:fixed;”使得元素成为固定定位元...