当前位置：一起CSS
日期：2008-12-8 分类：用户体验
站内搜索功能是网站必不可少的，它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成，默认的情况下，在各个浏览器的效果不一样，甚至计算机系统主题的不同，也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好，我们对它进行“加工”，让它在各种环境下都显示一致的效果，而且还给访问者提示。
搜索功能的 XHTML 代码一般如下：
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="keyword" id="keyword" />
</label>
<label>
<input type="submit" name="put-in" id="put-in" value="搜索" />
</label>
</form>
默认情况下，在各个浏览中的效果如下图：
给它加上样式：
*{
margin:0;
padding:0;
}
form{
position:relative;
margin:20px;
}
input{
position:absolute;
border:1px solid #00CCFF;
background:#fff;
}
#keyword{
width:150px;
height:24px;
padding-left:2px;
line-height:24px;
color:#bbb;
}
#put-in{
width:50px;
height:26px;
left:150px;
}
加上样式之后，在各个浏览器中的效果都如下图：
我们再给它添加提示：在 XHTML 代码中，给文本框加上默认的文字 value="请输入关键字" ，然后再加上 javascript 代码，使用户用鼠标点击文本框时，默认的文本消失，能够直接输入关键字。
javascript代码：
window.onload = function(){
var wordinput = document.getElementById("keyword");
wordinput.onfocus = function(){
this.value = "";
this.style.color = "#000"
}
wordinput.onblur = function(){
if(this.value == ""){
this.value = "请输入关键字";
this.style.color = "#bbb"
}
}
}
相关解释：
onfocus —— 元素聚焦时触发的事件
onblur —— 元素失去焦点时触发的事件
至此，制作完成。查看效果。
查看：520 评论：1 标签：javascript,友好
日期：2008-12-7 分类：CSS
与无图 CSS 圆角相比，上下两张图片 CSS 圆角就比较容易制作了，即用切图软件把圆角的上半部分、下半部分分别切出来，然后放到网页中。效果图如下：
圆角上半部分和下半部分图片：
上下两张图片和中间元素的左右边框就组成了完整的圆角。
例子代码
XHTML代码：
<div id="box">
<div id="top"></div>
<div id="content"><h1>有图CSS圆角</h1></div>
<div id="bottom"></div>
</div>
XHTML代码不一定要这样写，您可以根据您的实际情况写出更有语义的XHTML代码，这里这样写是为了更好的理解这种制作方法。
CSS代码：
*{
margin:0;
padding:0;
}
#box{
width:415px;
margin:20px auto;
}
#top{
height:5px;
overflow:hidden;
background:url(images/top.gif);
}
#bottom{
height:5px;
overflow:hidden;
background:url(images/bottom.gif);
}
#content{
border-left:1px solid #000;
border-right:1px solid #000;
}
h1{
font-size:16px;
padding:20px;
text-align:center;
}
查看效果
#top 放圆角上半部分图片，#bottom 放圆角下半部分图片，#content 设置左右边框，合起来就成了完整的圆角。
查看：495 评论：没有评论 标签：CSS圆角,圆角
日期：2008-12-7 分类：CSS
先看效果吧：
这种3D效果CSS圆角和《流行的CSS圆角》制作方法是一样的，只是左右上下边框颜色不一样，左上浅，右下深，看上去有阴影，因此就产生了这种3D效果。
既然制作方法和《流行的CSS圆角》一样，这里就不啰嗦了，下面给出相应的代码。
XHTML代码：
<div class="box">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h1>3D效果CSS圆角</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
CSS代码：
*{
margin:0;
padding:0;
}
.box{
width:400px;
margin:20px auto;
}
h1{
font-size:2em;
color:#fff;
padding:20px;
text-align:center;
}
b{
display:block;
overflow:hidden;
height:1px;
background:#96C2F1;
border-width:0 1px;
border-style:solid;
}
.b1{
margin:0 5px;
background:#fff;
border:none;
}
.b2{
border-right:#eee;
}
.b3{
border-right:#ddd;
}
.b4{
border-right:#aaa;
}
.b4b{
border-left:#eee;
}
.b3b{
border-left:#ddd;
}
.b2b{
border-left:#aaa;
}
.b2,.b3,.b4{
border-left-color:#fff;
}
.b4b,.b3b,.b2b{
border-right-color:#999;
}
.b2,.b2b{
margin:0 3px;
border-width:0 2px;
}
.b3,.b3b{
margin:0 2px;
}
.b4,.b4b{
height:2px; margin:0 1px;
}
.b1b{
margin:0 5px;
background:#999;
border:none;
}
.content{
background:#96C2F1;
border-left:1px solid #fff;
border-right:1px solid #999;
}
查看效果
由于不同的边框要设置不同的颜色，所以 CSS 代码较多，容易混淆，请多看几遍。
更多例子：
查看：871 评论：4 标签：CSS圆角,圆角
日期：2008-12-6 分类：CSS
这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。
先看效果：
制作方法
为了更好的理解，先用简单的代码为例。
XHTML代码：
<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>
CSS代码：
b{
display:block;
}
.b1,.b2,.b3,.b4{
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
}
.b1{
margin:0 5px;
background:#000;
}
.b2{
margin:0 3px;
border-width:0 2px;
}
.b3{
margin:0 2px;
}
.b4{
height:2px;
margin:0 1px;
}
这段代码效果如下图：
.top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。
为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。
下半部分和上半部分的原理是一样的，只是“倒”过来了。
完整的代码
XTHML代码：
<div id="box"><!--容器-->
<b class="top"><!--上半部分圆角-->
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
</b>
<div id="content">内容区</div>
<b class="bottom"><!--下半部分圆角-->
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</b>
</div>
CSS代码：
b{
display:block;
}
.b1,.b2,.b3,.b4{
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
}
.b1{
margin:0 5px;
background:#000;
}
.b2{
margin:0 3px;
border-width:0 2px;
}
.b3{
margin:0 2px;
}
.b4{
height:2px;
margin:0 1px;
}
#content{
border:solid #000;
border-width:0 1px;
}
查看效果
注意各个数值的设置。
查看：622 评论：1 标签：CSS圆角,圆角
日期：2008-12-2 分类：CSS,前端技术
当一个网页比较简单，内容比较少使得网页不足浏览器高的时候，为了显示更合理，我们希望让 footer 部分显示在浏览器的底部。先前介绍了《使用CSS定位页面的“footer”》，现在来用 javascript 来实现这种效果。
基本思路
以常见的架构来为例，容器 #container 内有上中下三部分，分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度，如果容器 #container 的高度小于浏览器的高度，就让 #footer 绝对定位到底部。
代码实现
XHTML 代码：
<div id="container">
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
javascript 代码：
<script language="javascript" type="text/javascript">
window.onload = function(){
var containerHeight = document.getElementById("container").scrollHeight;
var footer = document.getElementById("footer")
var allHeight = document.documentElement.clientHeight;
if(containerHeight < allHeight){
footer.style.position = "absolute";
footer.style.bottom = "0"
}
else{
footer.style.positong = "";
footer.style.bottom = "";
}
}
</script>
解释一下两个重要的属性 scrollHeight 和 clientHeight：
scrollHeight 层的实际高度，实际有多高就多高，与当前网页高度无关；
clientHeight 层在当浏览器屏幕的高度，非该层的实际高度。
为了让例子效果更明显，再加上一些 CSS 代码：
*{
margin:0;
padding:0;
}
#header{
background:#ff0000;
}
#content{
background:#00CCFF;
}
#footer{
background:#FFCC00;
width:100%;
}
这样，如果网页的高度小于浏览器的高度，那么 footer 部分就会定位到底部。
查看效果
查看：364 评论：没有评论 标签：javascript
