- 浏览: 29323 次
- 性别:
- 来自: 温州
文章分类
最新评论
-
helloqidi:
谢谢博主分享
在ubuntu上安装全文搜索中文分词Coreseek/sphinx 及和Rails集成 -
jim.jin:
谢谢提醒。
设计模式与动态语言 之 Observer -
open2ye:
有错别字 有错别字
设计模式与动态语言 之 Observer
DIV 上下居中用 line-height
例子1:
清除浏览器默认样式
1.用其他有名的库来清除(如:YUI)
2.自已清除
如:
* {
padding: 0;
margin:0;
}
让A支持所有浏览器
例子2:
A 伪类定义顺序记忆法
LoVe:HAte(爱恨)
IMG vertical-align
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默认值。将支持 valign 特性的对象的内容与基线对齐
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top : 将支持 valign 特性的对象的内容对象顶端对齐
text-top : 将支持 valign 特性的对象的文本与对象顶端对齐
middle : 将支持 valign 特性的对象的内容与对象中部对齐
bottom : 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数
例子3:
垂直 Margin 叠加
例子4:
Background position
例子5:
Float 占地问题
1.父子TAG都Float以父能包含子
例子6:
2.最后一个子TAG后加一clear的无语义tag
例子7:
<style type="text/css"> div.v-align { line-height: 200px; height: 200px; border: 1px solid red; } </style> <div class="v-align"> 垂直居中 </div>
例子1:
<!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" xml:lang="en"> <head> <title>AgiCRM</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="demo" content="Demo" /> <meta name="demo" content="demo" /> <style type="text/css"> div.v-align { line-height: 200px; height: 200px; border: 1px solid red; } </style> <!--[if IE]> <![endif]--> </head> <body> <div class="v-align"> 垂直居中 </div> </body> </html>
清除浏览器默认样式
1.用其他有名的库来清除(如:YUI)
2.自已清除
如:
* {
padding: 0;
margin:0;
}
让A支持所有浏览器
<style type="text/css"> a.agideo:link, a.agideo:visited { font-weight: bold; text-decoration: none; color: green; } a.agideo:hover, a.agideo:active { font-weight: bold; text-decoration: none; color: red; } </style> <a href="http://www.agideo.com" class="agideo">捷道数码</a> <style type="text/css"> a.google:hover, a.google:active { font-weight: bold; text-decoration: none; color: red; } a.google:link, a.google:visited {font-weight: bold; text-decoration: none; color: green; } </style> <a href="http://www.google.com" class="google">Google</a>
例子2:
<!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" xml:lang="en"> <head> <title>AgiCRM</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="demo" content="Demo" /> <meta name="demo" content="demo" /> <style type="text/css"> a.agideo:link, a.agideo:visited { font-weight: bold; text-decoration: none; color: green; } a.agideo:hover, a.agideo:active { font-weight: bold; text-decoration: none; color: red; } a.google:hover, a.google:active { font-weight: bold; text-decoration: none; color: red; } a.google:link, a.google:visited { font-weight: bold; text-decoration: none; color: green; } </style> <!--[if IE]> <![endif]--> </head> <body> <a href="http://www.agideo.com" class="agideo">捷道数码</a> <a href="http://www.google.com" class="google">Google</a> </body> </html>
A 伪类定义顺序记忆法
LoVe:HAte(爱恨)
IMG vertical-align
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默认值。将支持 valign 特性的对象的内容与基线对齐
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top : 将支持 valign 特性的对象的内容对象顶端对齐
text-top : 将支持 valign 特性的对象的文本与对象顶端对齐
middle : 将支持 valign 特性的对象的内容与对象中部对齐
bottom : 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数
例子3:
<!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" xml:lang="en"> <head> <title>AgiCRM</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="demo" content="Demo" /> <meta name="demo" content="demo" /> <style type="text/css"> div.v-align { border: 1px solid red; line-height: 40px; float: left; font-size: 11px; height: 40px; } div.v-align img.only-img { float:left; } div.v-align.has-img { padding-top: 10px; height: 30px; } div.v-align.has-img-and-text img.has-text { vertical-align: -4px !important; vertical-align: middle; margin-top: -3px !important; margin-top: 0px; } div.v-align.has-img-and-text { padding-top: 0px !important; padding-top: 10px; height: 40px !important; height: 30px; } </style> <!--[if IE]> <![endif]--> </head> <body> <div class="v-align"> 正常 </div> <div class="v-align has-img"> <img src="http://dl.iteye.com/upload/attachment/162320/1f89f269-580c-304b-975a-e6004b9893ce.png" class="only-img" /> </div> <div class="v-align has-img-and-text"> <img src="./accept.png" align="absmiddle" class="has-text" />有图片有字 </div> </body> </html>
垂直 Margin 叠加
例子4:
<!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" xml:lang="en"> <head> <title>AgiCRM</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="demo" content="Demo" /> <meta name="demo" content="demo" /> <style tyep="text/css"> body, div { padding:0; margin:0; } div, span { padding: 10px; margin: 10px; border: 10px solid #000; } #div1 { background-color: red; } #div2 { background-color: green; } #div3 { background-color: blue; } </style> <!--[if IE]> <![endif]--> </head> <body> <div id="div1"> <div>div1</div> </div> <div id="div2"> <div>div2</div> </div> <div id="div3"> <span>span1</span> <span>span2</span> </div> </body> </html>
<!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" xml:lang="en"> <head> <title>AgiCRM</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="demo" content="Demo" /> <meta name="demo" content="demo" /> <style tyep="text/css"> body, div { padding:0; margin:0; } div { border:1px solid #ccc; height: 200px; width: 300px; } #div1 { background: url(http://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20px 20px; } #div2 { background: urlhttp://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20% 20%; } #div3 { background: url(http://dl.iteye.com/upload/attachment/162318/8be0e495-2d0a-3ec2-9f5f-7465eb8c23ae.jpg) no-repeat 20% 20%; } </style> <!--[if IE]> <![endif]--> </head> <body> <div id="div1"> 20px </div> <br/> <div id="div2"> 20% </div> <br/> <div id="div3"> 20% </div> </body> </html>
Float 占地问题
1.父子TAG都Float以父能包含子
<style type="text/css"> div.parent { border: 1px solid red; width: 600px; float: left; /* For round child */ } div.child { border: 1px solid green; float: left; } </style> <div class="parent"> <div class="child"> child </div> <div class="child"> child </div> <div class="child"> child </div> </div>
例子6:
<!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" xml:lang="en"> <head> <title>AgiCRM</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="demo" content="Demo" /> <meta name="demo" content="demo" /> <style type="text/css"> div.parent { border: 1px solid red; width: 600px; float: left; /* For round child */ } div.child { border: 1px solid green; float: left; } </style> <!--[if IE]> <![endif]--> </head> <body> <div class="parent"> <div class="child"> child </div> <div class="child"> child </div> <div class="child"> child </div> </div> </body> </html>
2.最后一个子TAG后加一clear的无语义tag
<style type="text/css"> div.parent { border: 1px solid red; width: 600px; } div.child { border: 1px solid green; float: left; } div.clear { clear: both; } </style> <div class="parent"> <div class="child"> child </div> <div class="child"> child </div> <div class="child"> child </div> <div class="clear"></div> </div>
例子7:
<!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" xml:lang="en"> <head> <title>AgiCRM</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="demo" content="Demo" /> <meta name="demo" content="demo" /> <style type="text/css"> div.parent { border: 1px solid red; width: 600px; } div.child { border: 1px solid green; float: left; } div.clear { clear: both; } </style> <!--[if IE]> <![endif]--> </head> <body> <div class="parent"> <div class="child"> child </div> <div class="child"> child </div> <div class="child"> child </div> <div class="clear"></div> </div> </body> </html>
发表评论
-
icons
2009-11-10 13:19 0http://www.tucoo.com/icon/BoA_I ... -
CSS 精华-使用原则
2009-10-29 22:59 636布局和功能分离 不同功能要用简明注释,并用空行分开 公共的样 ... -
CSS 精华-BUG 修复
2009-10-29 22:49 825大部分BUG是人为的 CSS 编写不规范,语法错误可以用 W ... -
CSS 精华-Why CSS?
2009-10-29 22:46 499总结得出如下好处: 让逻辑与表现分离 分 ... -
去除Google Doc 页脚的方法
2009-10-29 09:39 922什么是页脚? 去除Google Doc 页脚的方法: 1 ...
相关推荐
广告------css---css广告------css---css
CSS-技巧记录 记录一些常用的CSS属性 还可以CSS-技巧记录 记录一些常用的CSS属性 还可以
pro-html5-css3-design-patterns-master
前端开源库-postcss-css-variablespostcss css变量,postcss插件,用于将css自定义属性(css变量)语法转换为静态表示形式
HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 ...
5日精通CSS------------------超级实用
css-cheat-sheet,css-cheat-sheet,css-cheat-sheet
css3d-engine, css 3d 轻型引擎很容易使用 14k css3d-enginehttps://github.com/shrekshrek/css3d-matrix-es6具体使用请看案例演示:http://shrek.imdevsh.com/demo/css3d/spa
CSS--文本溢出完美样式,CSS--文本溢出完美样式,CSS--文本溢出完美样式
前端开源库-postcss-variablespostss变量,postss插件,用于将变量转换为css
HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...
前端开源库-css-background-videoCSS背景视频,一个支持背景视频作为CSS属性的HTML5填充程序
实验题目使用CCS美化"北京... ----------------------- css--实验报告全文共4页,当前为第1页。 css--实验报告全文共4页,当前为第2页。 css--实验报告全文共4页,当前为第3页。 css--实验报告全文共4页,当前为第4页。
CSS--HTML--JAVASCRIPT语法表 CSS--HTML--JAVASCRIPT语法表
响应式页面 引用的两个js 兼容ie8 ie7的html5标签与media属性 css3-mediaqueries.js html5.js
css css样式--百度端午龙舟 百度logo,动态显示,人船同步显示。
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习...
npm install postcss-css-variables --save-dev 目录 -- ---嵌套规则 为什么? -互操作性-与postcss-custom-properties差异 注意事项 选项 快速参考/注释 测验 变更日志 代码游乐场 在操场上尝试一下,看看您的想法...
css--实现透明三角形(来自百度web前端工程师试题)