CSS | 东莞科技时代

‘CSS’ 存档

绿色下划线的简洁CSS导航代码

Cody 发表于 2010-08-30 浏览次数: 225

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>懒人图库</title>
<style>
body{background-color:#292929;font-family:Arial, Helvetica, sans-serif;font-size:12px;text-align:center}
#navcontainer{width:778px}
#navlist
{
margin: 0;
padding: 0 0 20px 20px;
border-bottom: 1px solid #444;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 1px solid #76B41C;
padding-bottom: 5px;
background: transparent;
color: #fff;
}

#navlist a:hover { color: #fff; }
</style>
</head>
<body>
<p> </p>
<p> </p>
<div id=”navcontainer”>
<ul id=”navlist”>
<li><a href=”http://www.lanrentuku.com/” target=”_blank” id=”current”>Link 01</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 02</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 03</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 04</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 05</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 06</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 07</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 08</a></li>
<li><a href=”http://www.lanrentuku.com/” target=”_blank”>Link 09</a></li>
</ul>
</div>
</body>
</html>

Posted in CSS

Tags: CSS, 代码, 导航

没有评论 »

表单美化之textarea文本域背景的美化

Cody 发表于 2010-08-30 浏览次数: 218

<!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=gb2312″ />
<title>懒人图库</title>
<style type=”text/css”>
<!–
.textarea {width:500px;height:70px;background:url(http://www.lanrentuku.com/down/js/images/12450456760.gif) no-repeat right top; }
.textfield {width:500px;height:18px;background-image:url(http://www.lanrentuku.com/down/js/images/12450456761.gif);color:#ccc;border:solid 1px #999;padding:3px 0px 0px 5px;}
–>
</style>
</head>

Posted in CSS

Tags: textarea, 文本域, 美化, 表单

没有评论 »

表格隔行换色+鼠标经过变色(兼容IE6,IE7,FF)

Cody 发表于 2010-08-30 浏览次数: 370

效果图：

效果图

代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>test</title>
<style language=”text/css”>
/*第一种颜色*/
#table tr.color1{
background-color:#FFFFFF;
}
/*第二种颜色*/
#table tr.color2{
background-color:#F8F8F8;
}
body,td,th {
font-size: 12px;
color: #333;
font-family: Arial;
}
</style>
<script type=”text/javascript”>
<!–
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!=’function’){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(){
var tableid=’table’; //表格的id
var overcolor=’#D6E7FF’; //鼠标经过颜色
var color1=’#FFFFFF’; //第一种颜色
var color2=’#F8F8F8′; //第二种颜色
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName(“tr”)
for(var i=1 ;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className=”color1″;
}else{
tr[i].className=”color2″;
}
}
}
onloadEvent(showtable);
–>
</script>
</head>
<body id=”">
<table width=”700″ border=”0″ align=”center” cellpadding=”4″ cellspacing=”1″ id=”table” name=”table”>
<thead>
<tr>
<th height=”24″>新闻标题</th>
<th>编辑</th>
<th>发布时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
<tr>
<td height=”24″><a href=”">500年一遇日全食全球上演</a></td>
<td align=”center”>无</td>
<td align=”center”>2009-07-22 08:11:04</td>
<td>结束</td>
</tr>
</tbody>
</table>
</body>
</html>

Posted in CSS

Tags: Firefox, IE, 变色, 表格, 隔行换色, 鼠标

没有评论 »

谈谈网页设计中的字体应用 (1) Font Set

Cody 发表于 2010-08-30 浏览次数: 187

最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: “宋体”, Arial, Helvetica, serif 的阶段，却不明白为什么这样设置，这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档，却没有发现任何能指定某一个特定字体的规则。

想想十年前，你可以随处看见类似于这样的代码：

<font face=”Frankin Gothic Book”>Lorem Ipsum</font>

几乎不会有人考虑到，Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果，系统因为找不到这种字体，就改用Mac的默认字体显示了。于是，网页的风格就和原来完全不一样了，根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表；浏览器从列表头部开始匹配，知道找到第一个可用的字体，并使用该字体进行显示。

比如上面这个例子，我们可以创建这样的一个font set：

<span style=’font-family: “Franklin Gothic Book”,”Lucida Grande”‘>Lorem Ipsum</span>

我们来看看浏览器怎么来呈现这段文字吧：

Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。

Mac 下：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体，终止搜索，并用Lucida Grande字体显示。

这样在Mac上，Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

但是可能存在一台电脑，上面既没有Frankin Gothic Book字体，也没有Lucida Grande字体，那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统，导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”，也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个，以及一些其他的通用字体族。在这里，我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下，浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字：

<span style=’font-family: “Franklin Gothic Book”,”Lucida Grande”,sans-serif’>Lorem Ipsum</span>

我们再看看浏览器怎么来呈现这段改进后的文字吧：

Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。

某系统：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——系统中也不存在Lucida Grande字体。继续搜索下一个字体——通用字体sans-serif。浏览器应用它的默认sans-serif字体”Arial”来显示这段文字。

请注意两点。首先，通用字体族具体对应哪个字体，是由浏览器决定的。上面例子中浏览器指定Arial为sans-serif字体，但完全有可能另一个浏览器指定Helvetica 为它的sans-serif字体。具体哪个字体被最终应用，是无法预期的。其次，通用字体族只是一种在font set中其他字体都无效时的代用方案。因此——设计者应该尽可能的给出齐全的font set，以尽可能的覆盖所有的系统，而不应该依赖于通用字体族。

类似于以下的两种写法都是错误的：

<span style=”font-family:sans-serif”>Lorem Ipsum</span>

<span style=”font-family:sans-serif,Arial”>Lorem Ipsum</span>

第一种写法的错误在于——它相当于根本没有指定字体，仍旧是交由浏览器选择字体。写了相当于没写。

第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此，将指定字体放在通用字体之后，会造成制定字体尚未匹配时就使用了通用字体。所以，你应该务必使通用字体处在font set中的最后一位。

另外，这里要说明两件事情。

首先，浏览器应用font set中哪个字体的规则虽然看上去很简单，但其实非常trickish。我会在以后的文章中做出具体的说明。

其次，虽然字体的CSS规则名称叫font-family, 但它的实质是一个font set，而不等是印刷意义上的font family。印刷上的font family 是指一系列相同字样的不同强度组合，比如Lucida Family（包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等）和Arial Family（Arial, Arial Black, Arial Rounded MT等等），但显然这些font family 都不适合直接拿来当作一个font set来使用。

Posted in CSS

Tags: CSS, Font, 字体, 网页设计

没有评论 »

实现div层相对定位

Cody 发表于 2010-08-30 浏览次数: 231

实现层相对定位的关键是：
一、先赋予参照物（可以是 table,tr,td… ）一个 CSS 的属性 position:relative 。这样浏览器就会以它的左上角为原点，建立新的坐标系。
二、在参照物的下一级加入层，并赋予层绝对定位的 CSS 属性 position:absolute 。注意：这时绝对定位的 top 和 left 的值都是先对于参照物的。

这样不管你的参照物位置怎样移动，层也就跟着移动了。这对使用层做显现式菜单，而页面实用居中对齐的网页来说很重要，不然用800×600做的网页，在1024×768下就会按键和菜单分离。

应用实例：
=========================代码=========================
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td style=”cursor: pointer; position: relative;”><div style=”position:absolute;z-index: 80;”><img src=”images/icon_corner_new.gif”></div>
<a href=”#”><img src=”upload/webzine/25/cover.jpg” width=”300″ height=”378″ border=”0″></a>
</td>
</tr>
</table>
=========================代码=========================

Posted in CSS

Tags: CSS, DIV, 相对定位

没有评论 »

CSS的鼠标为手形:cursor

Cody 发表于 2010-08-30 浏览次数: 246

在IE下，设置CSS的鼠标为手形，通常用： cursor：hand; 这在Firefox下是无效的。在Firefox下，欲使鼠标的形状呈现手形，得用 pointer 值： cursor：pointer; 这在IE和Firefox下都是通用的。

Posted in CSS

Tags: CSS, cursor, Firefox, IE, pointer, 手形, 鼠标

没有评论 »

图文并排CSS

Cody 发表于 2010-08-30 浏览次数: 318

CSS：

—————————-

<STYLE type=text/css>
.blogbox {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 232px; COLOR: #333333; LINE-HEIGHT: 20px; PADDING-TOP: 0px
}
.blogbox UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 5px; COLOR: #333333; LINE-HEIGHT: 20px; PADDING-TOP: 0px
}
.blogbox UL LI {
MARGIN: 5px 0px; COLOR: #333333; LINE-HEIGHT: 20px; LIST-STYLE-TYPE: none
}
.blogbox IMG {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BORDER-RIGHT-WIDTH: 0px
}
</STYLE>

—————————-

HTML

—————————-

在2月9日，比亚迪宣布09款F3R投放市场，售价5.98万-7.38万元。这是国家汽车振兴计划启动后，在中国上市的首款全新中级两厢车。
…
</LI>
</UL>
</DIV>

—————————-

Posted in CSS

Tags: CSS, 图文并排

没有评论 »

25条CSS制作网页编写的提醒及小技巧整理

Cody 发表于 2010-08-30 浏览次数: 175

1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。

3、一个兼容性调整(IE和Mozilla)的笨办法：

初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。

临时解决方法：选择符{属性名:B !important;属性名:A}

4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

5、li标签前面的图标推荐使用background-image，而不是list-style-image。

6、IE分不清继承关系和父子关系的差别，全部都是继承关系。

7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。

8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

10、与内容无关的图片请使用background

11、定义颜色可以缩写#8899FF=#89F

12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

13、<script>没有language这个属性，应该写成这样:

14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>

15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）

table{border-collapse:collapse;}

td{border:#000 solid 1px;}

16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。

17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效

<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：

<!–[if !IE]>Put your commentary in here…<![endif]–>

20、如何用CSS调用外部字体

语法：

@font-face{font-family:name;src:url(url);sRules}

取值：

name：字体名称。任何可能的 font-family 属性的值

url(url)：使用绝对或相对 url 地址指定OpenType字体文件

sRules：样式表定义

21、如何让一个表单中的文本框中的文字垂直居中？

如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。

22、定义A标签要注意的小问题：

当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。

只定义了一个a:link时，一定要记得把其它三种状态定义出来！

23、并不是所有样式都要简写：

当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。

24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

25、几个常用到的CSS样式：

1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。

3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。

针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

Posted in CSS

Tags: CSS, 技巧, 网页

没有评论 »

input变下划线的输入框CSS

Cody 发表于 2010-08-30 浏览次数: 223

CSS部分
——————————————-
.input1 {
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-bottom: #787878 1px solid;
background-color: #ffffff;

}

HTML部分
——————————————-
<input type=”text” name=”test” value=”" size=”30″ />

Posted in CSS

Tags: CSS, input, 下划线, 输入框

没有评论 »

巧用用CSS定义Select

Cody 发表于 2010-08-30 浏览次数: 247

.select * {
margin: 0;
padding: 0;
}
.select {
border:1px solid #cccccc;
float: left;
display: inline;
}
.select div {
border:1px solid #f9f9f9;
float: left;
}
/* 子选择器，在FF等非IE浏览器中识别 */
.select>div {
width:120px;
height: 17px;
overflow:hidden;
}
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
display:block;
float: left;
margin: -2px;
}
.select div>select {
display:block;
width:124px;
float:none;
margin: -2px;
padding: 0px;
}
.select:hover {
border:1px solid #666666; //鼠标移上的效果
}
.select select>option {
text-indent: 2px; //option在FF等非IE浏览器缩进2px
}

Posted in CSS

Tags: CSS, Select

没有评论 »

‘CSS’ 存档

绿色下划线的简洁CSS导航代码

表单美化之textarea文本域背景的美化

表格隔行换色+鼠标经过变色(兼容IE6,IE7,FF)

谈谈网页设计中的字体应用 (1) Font Set

实现div层相对定位

CSS的鼠标为手形:cursor

图文并排CSS

25条CSS制作网页编写的提醒及小技巧整理

input变下划线的输入框CSS

巧用用CSS定义Select

最新文章

存档

日历

Categories

友情链接

赞助商链接

最新的评论

功能

Ads

2012 年二月
一	二	三	四	五	六	日
« 十
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29