<!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>隐藏导航练习</title><style type="text/css"> <style type="text/css"> * { margin:0px;padding:0px;} #aa {height:40px;width:90px;top:80px;left:200px;background...
html代码是这样的 <div class="arrow-up"><!--向上的三角--> </div> <div class="arrow-down"><!--向下的三角--> </div> <div class="arrow-left"><!--向左的三角--> </div> <div class="arrow-right"><!--向右的三角--> </div>下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up {width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:30px solid #fff; }/*...
CSS3 边框用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image浏览器支持Internet Explorer 9+ 支持 border-radius 和 box-shadow.Firefox, Chrome, 和 Safari 支持所有最新的 border 属性.注意： 前缀是-webkit-的Safari支持阴影边框。前缀是-o-的Opera支持边框图像。CSS3 圆角在CSS2中添加圆角棘手。我们不得不在每...
原文名称:Creating Sexy Stylesheets原文地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来...
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time,...
正文自动给CSS文件添加不同浏览器的CSS3前缀：Autoprefixer安装只需兼容主流浏览器正常情况使用：（在书写完的CSS样式文件中，按F1，选择Autoprefixer CSS）这时候会添加最新需要兼容的css头（PS：现在基本上只考虑Safari和Chrome了）兼容其他浏览器但是，这往往不是我们需要的，有时候还需要兼容Firefox、Opera和IE，那么可以自定义VSCode的配置项：// autoprefixer配置"autoprefixer.browsers": ["ie >= 6", "firefox >= 8","chr...
一，css进阶篇： 等css哪些事儿看了两三遍之后，需要对看过的知识综合应用，这时候需要大量的实践 经验， 简单的想法：把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html，有无 从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信 可以自己先写，写完之后在对比，以其来找寻自己的差距。结构是网站的骨架，如果 写的不合理，将是bug产生的重要根源，所以学习分析大型网站的...
CSS 文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进。缩进文本把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行...
这是一款效果非常时尚的Tabs选项卡标签的流线型线条效果。该效果使用纯CSS3来制作，效果类似eclipse软件的标签页效果。该Tabs标签使用流线型设计，并且可以自定义标签的颜色，非常实用和好看。效果演示：http://www.htmleaf.com/Demo/201504041626.html下载地址：http://www.htmleaf.com/css3/daohangcaidan/201504041625.html原文：http://blog.csdn.net/souhugirl/article/details/44887103
letter-spacing是CSS的一个属性，其作用是设置字符之间的距离。letter意为字符。1、normal：规定字符之间没有额外的空间。该值是默认值。如下示例： p{ letter-spacing:normal;}结果： 2、length：定义字符之间的距离，可以为负值。如下示例：当为正值时，如letter-spacing:1em： p{ letter-spacing:1em;//注意：1em=16px}结果：当为负值时，如letter-spacing:-0.5em： p{ ...
接触了B/S的东西之后才发现自己需要学习的东西太多了，html、xml、JavaScript、jquery、HTMLdom、VBScript、ajax、jquery、json等等技术都是需要我们一一研究的！ 刚刚接触了CSS部分的知识，但仅仅是这一小小的技术就让自己瞠目结舌，看似不起眼的东西却实现了自己日常网页操作中非常多的功能——信息的自动检测、友好的弹窗、绚丽的动态效果、体贴的个性化服务，让自己产生了很大的共鸣。总体来说这一块的知识并不是很多，但是要...
http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/在HTML中, 如果过你没有指定一个确定的宽度的话, 块级元素本身就会在垂直方向上延展. 想象一个无序清单. 这个清单会自己扩展来适应它所有的清单元素. 如果用户在他们的浏览器中增加了字体大小, 清单会在垂直方向上延展, 来适应变大的内容. 有时候, 感觉仅仅在垂直方向延展是非常局限的, 如果水平方向也能和垂直方向一样因为用户增加字体大小而自延展那就更好...
例子 1 - 匹配第一个 <p> 元素在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：<html> <head> <style type="text/css"> p:first-child {color: red;} </style> </head><body> <p>some text</p> <p>some text</p> </body> </html>例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：<html> <head> <style type="text/css"> p > i:first-child {font-wei...
px : Pixel像素单位。像素是相对显示器分辨率而言。em : 相对长度单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px）。rem : 相对单位，可理解为 "root em" ,相对于根节点html的字体大小来计算，css3新加属性。如果没有重置，html默认font-size:16px。也就是说，em是以自身父容器为参考对象的，而rem直接以HTML为参考对象的，所以rem更适合移动式开发。em ： em是一个相对长度单位，...
css实现运动光环的小Demo 效果图:实现代码:代码分析: Demo用到知识点: 1.CSS的常用选择器,transform属性居中 2.css的动画效果,动画延迟, 3.filer:模糊 HTML结构:<!DOCTYPE html> <html><head><meta charset="utf-8"><title>圆形光环</title><link rel="stylesheet" href="css/style02.css" /></head><body><!-- <div class="aura"></div> --><ul class="aura"><li></li><li></li><li></li></ul><div class="box"></div></body> </h...