随笔分类 -  CSS

CSS 相关
兼容多浏览器，兼容 div、p、td 的强制不换行及强制换行
摘要：兼容多浏览器，兼容 div、p、td 的强制不换行及强制换行2010-11-16 17:07:47| 分类： 程序设计ASP.NET | 标签： |字号大中小订阅关于强制不换行、强制换行的话题在网上已经被讨论了无数次，但我发现都不够全面，没有充分考虑各种浏览器、各种标签等情况，以致不兼容，所以我再来说说。由于 div 和 p 在本文的讨论中，效果相同，所以省略 p。 文中“没有指定宽度的 td”是指：为 table 指定了宽度，但没有给 td 指定宽度。 强制不换行 div, td { white-space:nowrap; } 这点在 Firefox 的 div 和 td 中，以及 ... 阅读全文
posted @ 2012-03-06 16:56 肚肚 阅读(6510) 评论(0) 推荐(0)
dhl:样式在ie不同浏览器下呈现不出来的原因分析
摘要：1.看看是不是页面是gb2312 ansic 码的，而css是uft-8的，这时候是不兼容的2.要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。（这句可是关键啊。而且可以解决在asp.net下css失效的问题）关于声明：WEB2.0标准网页原代码，第一行就是：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi 阅读全文
posted @ 2011-09-23 10:58 肚肚 阅读(184) 评论(0) 推荐(0)
DIV+CSS中让布局居中_背景图片居中_文字内容居中
摘要：从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。1、首先介绍使用css属性让整体布局的居中：设置对象的父级内容居中，这里一个页面的为父级是什么呢？我们可以想象整个页面的内容是由<html></html>和<body></body>这两个包含，那根据较近父级我们就设置body的CSS来实现居中问题，可以向在内容里居中有text-aligh:center;具体css的居中代码为：body{text-aligh:center; } 但是即使这样也会出现问题，因为你没有设置布局有多宽“width”，一旦你内容布局中在最外层 阅读全文
posted @ 2011-03-16 22:08 肚肚 阅读(780) 评论(0) 推荐(1)
网页设计必备工具16进制颜色值对照表
摘要：十六进制颜色值的含义与定义方法在很多软件中，都会遇到设定颜色值的问题，初学者往往不理解颜色是如何与一串数字和字母对应的。这里我们就来简单介绍一下。人的眼睛看到的颜色有两种：1. 一种是发光体发出的颜色，比如计算机显示器屏幕显示的颜色；2. 另一种是物体本身不发光，而是反射的光产生的颜色，比如看报纸和杂志上的颜色。我们又知道任何颜色都是由三种最基本的颜色叠加形成的，这三种颜色称为“三原色”。1. 对于上面提到的第一种颜色，即发光体的颜色模式，又称为“加色模式”，三原色是“红”、“绿”、“蓝”三种颜色。加色模式又称为“RGB模式”；2. 而对于印刷品这样的颜色模式，又称为“减色模式”，它的三原色是 阅读全文
posted @ 2010-12-14 13:52 肚肚 阅读(1281) 评论(0) 推荐(0)
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> <met... 阅读全文
posted @ 2010-12-11 18:26 肚肚 阅读(174) 评论(0) 推荐(0)
实例：CSS二级菜单（横向）兼容IE6、IE7、FF浏览器
摘要：产品介绍 产品一产品一产品一产品一产品一产品一服务介绍 服务二服务二服务二服务二服服务二服服务二成功案例 案例三案例案例三案案例三案关于我们 我们四我们四我们四我们四111在线演示 演示演示演示演示演示演示演示演示演示演示演示演示演示联系我们 联系联系联系联系联系联系联系联系联系联系联系联系联系源码： 阅读全文
posted @ 2010-11-16 16:21 肚肚 阅读(708) 评论(0) 推荐(0)
css div ul li 导航栏(横向）：（纯CSS 多级菜单IE6能支持的）
摘要：这部分最后给出的成品效果比较惊人，也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。毕竟CSS hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以... 阅读全文
posted @ 2010-11-16 15:11 肚肚 阅读(4886) 评论(2) 推荐(0)
css div ul li 导航栏(竖)
摘要：代码 阅读全文
posted @ 2010-11-16 14:19 肚肚 阅读(780) 评论(0) 推荐(0)
css 文本超出时隐藏超出部分
摘要：一行内文本超出指定宽度后用省略号代替一般的文字截断（适用于内联与块）： .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflo... 阅读全文
posted @ 2010-11-11 16:58 肚肚 阅读(437) 评论(0) 推荐(0)
thickbox.js 及 将thickbox "close or esc key "改为 中文"关闭"
摘要：最近的项目中比较多使用的 ThickBox，今天就简单介绍下，ThickBox 是一个基于 JQuery 类库的扩展，它能在浏览器界面上显示非常棒的弹出框，它可以显示单图片，多图片，AJAX 请求内容或链接内容。要使用 ThickBox，需要下载三个文件：JS 文件：thickbox.js 或者压缩版本 thickbox-compressed.js。 CSS 文件：ThickBox.css 最后一... 阅读全文
posted @ 2010-10-14 13:25 肚肚 阅读(1507) 评论(1) 推荐(0)
《文本域美化<
摘要：<script>document.write("<center><b>文本域美化</b>")</script><script>document.write("</center><p>")</script>1。样式一：<br> <br><input type=fi... 阅读全文
posted @ 2010-09-29 15:03 肚肚 阅读(221) 评论(0) 推荐(0)
css里面包含选择符与子对像选择符">"的区别
摘要：举个例子：<div> <ul> <li> </li> </ul><div>要定义li的样式，用包含选择符，你写成：div li{...}没有问题若用子选择符，你只能写成：ul> li{...}不能写成div> li{...}因为div和li非“父子关系”，而是“祖孙关系&rdqu... 阅读全文
posted @ 2010-09-07 10:48 肚肚 阅读(241) 评论(0) 推荐(0)
jQuery伸缩的菜单
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>伸缩的菜单，用toggle()重写</title> &... 阅读全文
posted @ 2010-09-04 16:56 肚肚 阅读(291) 评论(0) 推荐(0)
一个用jquery实现的下拉菜单
摘要：演示程序在这里演示程序这是菜单的内容，用ul标签实现菜单：这是CSS控制代码：这是JS的控制代码：演示程序在这里演示程序 阅读全文
posted @ 2010-09-04 16:52 肚肚 阅读(244) 评论(0) 推荐(0)
margin:0 auto与body{text-align:center;}实现元素居中的区别
摘要：我们设置某个对象水平方向居中的时候，常常将左右的外边距设置为auto来实现。如：div { margin: 0 auto; }body{text-align:center}与margin:0 auto的区别如下:1.text-align:center设置文本或img标签等一些内联对象（或与之类似的元素）的居中。2.margin:0 auto设置块元素（或与之类似的元素）的居中。这两个属性IE与FF... 阅读全文
posted @ 2010-09-04 14:16 肚肚 阅读(418) 评论(0) 推荐(0)
如何让div页面居中|让div在页面居中的方法
摘要：在页面代码最上面加上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">再把div的style加上 margin:0 auto;<div style="height:500px; width... 阅读全文
posted @ 2010-09-03 14:47 肚肚 阅读(1863) 评论(0) 推荐(0)
dhl：给Button设背景图片
摘要：button 背景图片IE下不认，无法显示。要想背景图片起效果，必须将按钮的背景颜色为透明才起作用。默认的都不行的。所以：background-color: Transparent;2.把边框设为0input[type="button"]{margin:0px;padding:0px; width:100px; height:27px; text-align:center; background-... 阅读全文
posted @ 2010-04-05 21:13 肚肚 阅读(205) 评论(0) 推荐(0)