随笔分类 - css
摘要：随着浏览器的升级，CSS3已经可以投入实际应用了。但是，不同的浏览器有不同的CSS3实现，兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站，该网站总结了一些常用功能的写法。以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证，原文的错误之处也已得到改正。一、圆角（Rounded Corner）.box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Op...
阅读全文
摘要：1. 文字的水平居中将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; }3. 文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。比如，容器中有一行数字。 <div id="container">1234567890</div>然后CSS这样写： div#container {height: 35px;
阅读全文
摘要：CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页 眉：header内 容：content容 器：container页 脚：footer版 权：copyright 导 航：menu主导航：mainMenu子导航：subMenu标 志：logo标 语：banner标 题：title侧边栏：sidebar图 标：Icon注 释：note搜 索：search按 钮：btn登 录：login链 接：link信息框：manage……常用类的命名应尽量
阅读全文
摘要：气泡状文本框，是一种很生动的网页设计手段。它可以用来表示用户的发言。也可以用来作为特定信息的提示符。DVD租借网站Netflix，还用它显示碟片的详细信息。=========================制作CSS气泡框的传统方法，需要5张背景图片，分别是： *tl.gif，左上方的圆角。 *tr.gif，右上方的圆角。 *bl.gif，左下方的圆角。 *br.gif，右下方的圆角。 *angle.gif，突出的三角形。现在假定有这样一段代码： <blockquote>床前明月光，疑是地上霜。</blockquote> <p>李白</p>我们希
阅读全文
摘要：他们发现，美国前100大网站的Logo，主要使用12种颜色。其中，采用蓝色的网站最多，红色排在第二种，黄色排在第三种。我把这12种颜色的RGB代码列出来，供将来自己做网页时参考。1. 浅绿 #8cc5402. 深绿 #009f5d3. 暗蓝 #019fa04. 蓝色 #019fde5. 深蓝 #007cdc6. 深紫 #887ddd7. 浅紫 #cd7bdd8. 粉色 #ff56759. 红色 #ff124410. 橙色 #ff834511. 黄色 #f8bd0b12. 灰色 #d1d2d4（完）
阅读全文
摘要：一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点： * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。 * 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。二、border-radius属性CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一
阅读全文
摘要：一、"自适应网页设计"的概念2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。mediaqueri.es上面有更多这样的例子。这里还有一个测试小工具，
阅读全文
摘要：CSS中背景图片的定位，困扰我很久了。今天总算搞懂了，一定要记下来。在CSS中，背景图片的定位方法有3种： 1）关键字：background-position: top left; 2）像素：background-position: 0px 0px; 3）百分比：background-position: 0% 0%;上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是"20px 10px"和"60px 50px"，都是
阅读全文
摘要：The float property sets where an image or a text will appear in another element.float属性可设置在另一个元素中的图片或是一段文字在哪出现。Note:If there is too little space on a line for the floating element, it will jump down on the next line, and continue until a line has enough space.注意：如果在一行空间上的浮动元素过多，超出了空间的容纳范围，它就会自动跳到下一行
阅读全文
摘要：css中字体单位px与empx是固定大小单位称为像素，em是非固定大小单位称为相对单位字。在ie中px单位的文本的字号不随浏览器字号设置的改变而改变。浏览器字号的设置将改变默认em的大小。例如：当ie文字大小为中时默认的1em相当于16px，当文字大小为较小时默认的1em相当于12px。当em单位处于具有固定字号的对象中时，em将以此对象中的文字大小为基准单位<div style="font-size:12px;">12px字体<br /> <span style="font-size:1em; color:blue">
阅读全文
摘要：UL-LI 标签结合CSS的运用LI代码的格式化:A).运用CSS格式化列表符： ul li{list-style-type:none;}B).如果你想将列表符换成图像，则： ul li{list-style-type:none;list-style-image: url(images/icon.gif);}C).为了左对齐，可以用如下代码： ul{list-style-type:none;margin:0px;}D).如果想给列表加背景色，可以用如下代码： ul{list-style-type: none;margin:0px;}ul li{background:#CCC;}E).如果想给列
阅读全文
摘要：现在国内绝大多数的站点都用CSS把字体大小设定为12px，像素虽然也是相对尺寸单位，但只是相对于屏幕的分辨率，当屏幕的分辨率一定时，如果你 感到字太小，阅读有困难，在非标准浏览器中就无能为力了，从而降低了用户体验。所以说，如果把单位改成em，那么就可以用CTRL+鼠标滚动把字放大，或者用菜单上的查 看>文字大小来改变字的大小。1.在body标签里将字体尺寸设为62.5%，如果在body里没有CSS设定，那么浏览器默认的大小是16px，设了62.5%，则字体尺寸=16px*62.5%=10px，这时你能用em方便地设大小了，比如你需要用12px，只要设1.2em。body { font-s
阅读全文
摘要：几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好ol 有序列表。<ol><li>……</li><li>……</li><li>……</li></ol>表现为：1……2……3……ul 无序列表，表现为li前面是大圆点而不是123<ul><li>……</li><li>……</li></ul>很多人容易忽略 dl dt dd的用法dl 内容块dt 内容块
阅读全文
摘要：总结的CSS简写表http://blog.downke.cn/post/2009/06/18/cssShortening.aspx总结的CSS简写表:CSS中有许多简写方式，可能平时大家注意不到。简写可以有效的减少CSS代码量，提高网页加载速度和节约服务器流量。我想，对于这些简写方式，还是很有必要总结一下：分类1：Margin & Padding#div {margin-top: 0;margin-right: 5px;margin-bottom: 10px;margin-left: 15px;(auto, 0, px, pt, em or %)}可以简写成：#div {margin:
阅读全文
摘要：超强1000个jquery插件！（连载中。。。。最近更新2011年01月25日）如果没有您要的内容，请使用下面的搜索框进行搜索：热点图书二手图书图书网站网上书店二手书图书批发图书商城特价图书本文原创，转载请注明出处：当客：http://blog.downke.cn/1.导航类(1)Horizontal accordion: jQuery基于jQuery开发，非常简单的水平方向折叠控件。二手图书二手书特价书旧书网(2)jQuery-Horizontal Accordion具有XBOX360 blade界面风格的水平方向Accordion。二手图书二手书特价书旧书网(3)jQuery plugin
阅读全文
摘要：<link rel="shortcut icon" href="http://book.chaoxing.com/images/favicon.ico" type="image/x-icon" /><link rel="icon" href="http://book.chaoxing.com/images/favicon.ico" mce_href="http://book.chaoxing.com/images/favicon.ico" type=&quo
阅读全文
摘要：代码片段： <div id="sort-photos"> <dl> <dd>1</dd> <dt>2</dt> </dl></div>CSS:#sort-photos {width:590px;background-color:#5F5F5F;padding-top:5px;}#sort-photos dl {float:left; //如果不要这行，dl的背景色就是#sort-photos的背景色width:120px;height:150px;margin:0px 12px;
阅读全文
摘要：CSS两列布局，右侧固定，左侧自适应宽度<divstyle="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"><divstyle="width:200px; float:right; background:#090">这是右侧的内容</div><divstyle=" margin-right:210px; background:#F33">这是左侧的内容，自适应宽度</div></div&
阅读全文
摘要：/*公共style*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,code,del,em,img,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline}/* CSS Document */div,dl,dt,dd,ul,ol,l
阅读全文
浙公网安备 33010602011771号