20150712。CSS学习笔记 1，代码开始结束的时候需要注释 <!— headerEnd -->2，form中要定义好name，穿数据时还是会用name取element。3，为每个li配置单独的class。4，可以在css文件开头使用*{}，通配选择器。 /*通配选择器*/*{ margin: 0; padding: 0; color: #000; font-size: 13px; list-style-type: none; text-decoration:none;}5，‘反向浮动’将主要内容在.html中前置，利于网络爬...
面板这东西，随着前端框架的逐渐流行，已经大量地占据网页封面了。其实这东西可以用纯粹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=utf-8" /> <title>panel</title> </head><b...
效果：css： .jt { display:inline-block; /*和后面的文字在同一行*/ *display: inline; /*ie6 7块级元素inline-block兼容*/ *zoom:1; /*同上*/ height:0px; width:0px; line-height:0px; /*行高设0，不然ie6会撑开*/ vertical-align: middle; /*与文字垂直居中对齐，如果依然相差一两个像素，可以设置相对定位，更改top值微调*/ border:3px solid #000;...
如何让图1中的div2移动到如图2上的位置；思路：哪些css命令能够影响盒子显示的位置呢？ relative相对定位/定位偏移量position:relative; 相对定位 a、不影响元素本身的特性； b、不使元素脱离文档流； c、如果没有定位偏移量，对元素本身没有任何影响；定位元素位置控制 top/right/bottom/left 定位元素偏移量。 absolute绝对定位/定位层级osition:absolute; 绝对定位 a、使元素完全脱离文档...
前端CSSCSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。CSS语法CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。CSS注释/*这是注释*/CSS的几种引入方式行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模...
<content><![CDATA[ -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);]]></content><tabTrigger>shadow</tabTrigger><scope>source.css</scope>原文：https://www.cnblogs.com/wyq-web/p/9381814.html
今天练习某线上商城页面仿作的过程中，针对position:relative及position:absolute的使用技巧和疑惑点进行了一番梳理，学习了CSDN上onizukayao作者的一些理解方法，整理心得如下： 1.首先查阅开发文档，position: absolute的意思是： 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 position: relative的意思是： 设置为相对定...
此处只是记录，解析可见原文：http://www.cnblogs.com/skyblue-li/p/6092799.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>旋转图片</title><style>* {padding: 0px;margin: 0px;}/*这是为了消除默认dom元素的内外边距，使得我们写css的时候更精确*/body {background: #000;}#photos {width: 110px;/*宽度*/height: 180px;/...
:hover 当鼠标放到上面时会产生变化border-radius: 设置圆角 可以分别设置4个角background-image: linear-gradient(to right,#ff9000,#ff5000);设置线性渐变，括号里的参数第一个参数为方向第二个参数为起始的颜色第三个参数为结束的颜色但是它的兼容性只支持到IE10，如果要兼容IE8，就要使用到 滤镜filter: ;box-sizing: border-box; 把被设置样式的对象，变为怪异盒模型border: 2px solid #ff5000; 设置边框，大小，实心/虚心...
Blog的全名应该是Web log，中文意思是“网络日志”，后来缩写为Blog，而博客(Blogger)就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接、内容，按照时间顺序排列，并且不断更新的出版方式”。简单的说博客是一类人，这类人习惯于在网上写日记。 如何应Blog的全名应该是Web log，中文意思是“网络日志”，后来缩写为Blog，而博客(Blogger)就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接、内容，按...
html中用css改变颜色， 复制代码代码如下:<hr style="border:0;background-color:#ff0000;height:1px;"> 如果不加border:0;的话，虽然颜色改变了，但是会显示一条黑色的边框。 如果不加height:1px;的话，在firefox下会不显示。原文：http://www.jb51.net/css/111802.html
@keyframes swing{0% { transform: rotate(0deg)}100% {transform: rotate(-30deg)} }#sweetlandia{animation: swing 2s infinite ease-in-out; } Muli-steps keyframes@keyframes swing {0% {transform: rotate(-30deg);}50% {transform: rotate(30deg);}100% {transform: rotate(-30deg);} }#sweetlandia {animation: swing 2s infinite ease-in-out; } @keyframes swing {0%, 100% { transform: rotate(-30deg); }20% {trans...
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了CSS3过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。 使用方法很简单：下载HOVER.CSS 下载地址https://github.com/IanLunn/HoverDownload/InstallNPM: npm install --save hover.cssBower: bower i...
jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码：$("#61dh a").css(‘color‘,‘#123456‘); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,‘#123456‘);表示把颜色设为‘#123456‘如果我们需要改变多个样式属性，我们可以先定义属性变...
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)： 首先是box-shados语法,用于向框添加一个或多个阴影：box-shadow: h-shadowv-shadowblurspreadcolor inset;值描述h-shadow必须。水平阴影的位置v-shadow必须。垂直阴影的位置blur可选。模糊距离spread可...