【H5 40-CSS精灵图】教程文章相关的互联网学习教程文章

CSS3

frameset 框架 分为水平框架 垂直框架 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。transition 过渡transition-pro...

CSS自定义滚动条样式

转自:http://www.yiyifly.com/blog/下面是代码:html {overflow: auto;}body {position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow-y: scroll;overflow-x: hidden;}/*滚动条宽度*/::-webkit-scrollbar {width: 8px;}/* 轨道样式 */::-webkit-scrollbar-track {}/* Handle样式 */::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);}/*当前窗口未激活的情况下*/::-webkit-scrollbar-thumb:wi...

关于CSS中的元素定位【代码】【图】

---恢复内容开始---CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相...

CSS之:active选择器【代码】

Active的一段话 active的英文解释为“积极的”,表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的,然而打开链接是一个一瞬间的动作,这不能很好的体现active选择器的特点。 Active的特点其实我们打开一个带有active链接,激活acive是有一个过程的,就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间,笔者认为其默认花费零点几秒。<!DOCTYPE html> <html><head><title>a</title><...

css属性2【代码】

css属性<style>div{border: 1px solid red;width: 100px;}.div1{width: 100px;height: 100px;/*外边距*//* margin: 50px; */}.div2{width: 200px;height: 200px;padding: 50px;/*设置盒子的属性,让width和height就是最终盒子的大小*/box-sizing: border-box;}.div3{float: left;}.div4{float: left;}.div5{float: right;}</style> <div class="div2"><div class="div1"></div></div><div class="div3">aaaa</div> <div class="di...

《CSS3实战》笔记--溢出文本省略:text-overflow和文本换行显示:word-wrop【代码】【图】

通过阅读和学习书籍《CSS3实战》总结 《CSS3实战》/成林著.—北京机械工业出版社2011.5语法:text-overflow:clip | ellipsis | ellipsis-word取值简单说明:clip属性值表示不显示标记,而是简单的裁切。ellipsis属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。ellipsis-word属性值表示当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word)。?实际上,text-shadow属性仅用于决...

css中的四种定位方式示例介绍

复制代码代码如下:/*通配符选择器*/ *{ margin:0px; padding:0px; } /*div的选择器*/ .div1{ border:1px solid red; background:silver; width:60px; height:30px; float:left; margin-left:5px; } .div2{ position:relative; left:10px; top:10px; width:100px; height:80px; background:pink; float:left; margin-left:5px; } /*相对定位,他原来的空间任然保留*/ #spe{ position:relative; top:40px; left:20px; } /*绝对定位:元...

CSS3 (一)

text-shadow属性:文本阴影 text-shadow: 5px 5px 5px #FF0000; 向右5像素 向下5像素 模糊程度5像素 红色#s1 {font-size:40px; font-family:微软雅黑; -webkit-transition:1s all ease; text-shadow:0 0 0 black,0 0 0 black,0 0 0 black;}#s1:hover {text-shadow:0 0 10px black,0 0 10px black,0 0 10px black;} -webkit-linear-gradien属性:文本线性渐变 -webkit-linear-gradien( 30deg, rgba(255,0,0,0.8) 0%, rgba(0,255...

精选12个时尚的 CSS3 效果【附源码下载】【图】

这里是精选的12个很炫的 CSS3 效果。CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写复杂的 JavaScript 代码才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现。超炫的 CSS3 页面切换动画效果  今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果。源码下载...

HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)

1.手机浏览器与桌面浏览器的不同现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多。一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小的现象。想象一下电脑里12号字体缩小好几倍的效果吧。 所以如果将web网页移植为wap应用上,还是有许多问题需要考虑。2.理解两个viewport的概念做过wap开发的都知道 html的 <meta name=”viewport”> ,这是一个从iphone引入...

MVC-采用Bundles方式引入css和js文件【代码】【图】

优点:修改js或css时会自动生成hash版本号。缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步。web.config中 <compilation debug="true" targetFramework="4.5" />1、BundleConfig  如果是调试模式,前端页面会显示真实的js、css路径,生产环境是会显示前面的路径。在bundles中还可以使用通配符引用。 bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{...

html引入css不显示问题【代码】【图】

html{width: 100%;height: 100%;margin:0px;padding:0px; }body{margin:0px;padding:0px;width: 100%;height: 100%; }#container{background:yellow;width: 100%;height: 100%;margin:0px;padding:0px; }试过很多次,如果不把html的高度宽度设定,那么全页面就没有任何值; 在引入css时特别注意路径问题; 比如 下图 css 和html分别为一个文件夹; 里面的内容导入要使用../css/layout.css 原文:http://www.cnblogs.com/JohnChen-happ...

css3新属性transform 3D的基础笔记.【代码】【图】

研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子:<style>#box{-webkit-perspective:800px;//定义3D场景大小-webkit-transform-origin:50% 50%;//定义3D场景的中心点perspective:800px;transform-origin:50% 50%;}.box{width:200px;height:20...

css 变量教程【代码】

一、变量的声明声明变量的时候,变量名前面要加两根连词线(--)。body { --foo: #7F583F; --bar: #F7EFD2;} 上面代码中,body选择器里面声明了两个变量:--foo和--bar。它们与color、font-size等正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做"CSS 自定义属性"(CSS custom properties)。因为变量与自定义的 CSS 属性其实是一回事。你可能会问,为什么选择两根连词线(--)表示变量?因为$foo被...

CSS制作华为mate8手机模型示例【代码】【图】

CSS制作华为mate8手机模型效果图  1.HTML代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div class="phone"><div class="body"></div><div class="head"></div><div class="cinema"></div><div class="button"></div><div class="screen"></div><div class="probutton"></div><div class="brobutton"></div></div><hr><div class="RotateButton"></div></body></html>  2.CSS代码*{list-...