第一次翻译技术类型的文章,措辞应该会有不当之处,还请各位看客们批评的批评,指正的指正,小弟还望各位不吝赐教。
发现国内技术类书籍翻译存在一个误区,或许称不上误区,而是能力不足,不少优秀的技术书籍一旦翻译为中文,便会引来唏嘘声一片,大家不妨上豆瓣看看。
依小弟愚见,之所以出现这类现象,大致可以分为两类情况,一是译者英语功底不足,专业词汇量不足,这类翻译书籍基本上是在糟蹋人,侮辱了作者又来侮辱读者,二是译者水平是足够了,但是译者的文学水平不敢恭维,语句牵强,难于理解,
说了这麽多,感觉是给自己下了一个套,一旦下文的翻译不能满足各位的品味,那就有些搬起石头砸自己的脚的尴尬了.
使用简单CSS技巧增强你的Input输入域
我们将尝试去构建一个高效且好看的web表单。但总会有一个新的挑战,如果读过我以前关于如何构建一个像样表单的文章,你应该注意到存在如此多的细节,Label的布置,文本高亮或者元素对齐。但是,通过使用一些简单的CSS技巧,能够使得一个普通、无趣的web表单更加有趣。
你将看到的例子是你每天都用到的:Blog评论表单。你将如何增强你的表单呢?
准备:
<div id="inputArea">
<label for="txtName">
Name</label>
<input id="Text16" type="text" />
<label for="txtEmail">
Email</label>
<input id="Text17" type="text" />
<label for="txtWebsite">
Website</label>
<input id="Text18" type="text" />
<label for="txtComment">
Comment</label>
<textarea id="Textarea6" rows="4" cols="30"></textarea></div>
...添加Borders
至少你能够做的是添加Borders和Padding到你的表单域。以上的两个例子展示了你能够设置border的颜色去匹配你的颜色模式,添加padding到你的输入域也是一个很好的实践。这将使表单看起来更加清晰。该示例中设置input和textarea 4px
#inputArea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
background-color: #d6e5f4;
padding: 10px;
}
#inputArea input[type="text"], #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
border: solid 1px #85b1de;
width: 300px;
}
让我们快速的回顾以上代码,这是为第二个示例所写的代码,整个表单是浅蓝色背景#d6e5f4和10px的padding。每个input元素以block展示,这样确保标签布置在输入域之上。现在,这很简单。但是你可以做更多。
...添加背景
你也能够想下面例子中一样添加一些纯色的背景
#inputArea input[type="text"], #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
border: solid 1px #85b1de;
width: 300px;
background-color: #EDF2F7;
}
或者你也能够添加一些渐变色为背景,以下示例展示了灰和蓝色渐变。
#inputArea input[type="text"], #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
border: solid 1px #85b1de;
width: 300px;
background-image: url( 'blue_bg.png' );
background-repeat: repeat-x;
background-position: top;
}
这个技巧简单并且仅包括最后的三条代码,增加渐变图片作为背景,设置它水平重复(repeat-x),并且将它放置在field的顶端。简单吧
...添加一些行为
非常简单,使得激活的输入域与其它不同,如下图所示。
#inputArea input[type="text"]:focus, #inputArea textarea:focus
{
background-image: none;
background-color: #ffffff;
border: solid 1px #33677F;
}
就像你看到的,代码非常简单。每一次当field得到焦点时,一个不同的样式将会被应用,它改变了背景和边框。但是稍等!它不能在IE上工作!!为此我们不得不使用js(或者jquery)寻求帮助。好的,你知道我在开玩笑。
#inputArea input, #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
width: 300px;
}
除了背景和边框,我们将为输入域和文本框定义所有的样式。
.activeField
{
background-image: none;
background-color: #ffffff;
border: solid 1px #33677F;
}
.idle
{
border: solid 1px #85b1de;
background-image: url( 'blue_bg.png' );
background-repeat: repeat-x;
background-position: top;
}
接下来,我们将定义两个类,他们将会设置idle和active状态下的样式,
这里使用jquery,
$(document).ready(function(){
$("input, textarea").addClass("idle");
$("input, textarea").focus(function(){
$(this).addClass("activeField").removeClass("idle");
}).blur(function(){
$(this).removeClass("activeField").addClass("idle");
});
});
现在可以工作在IE上了,当然,它也可以工作在火狐上,这些代码做了三件事情:初始化,添加“idle”类到所有的input和为focus和blue事件定义的行为可能并不完美,但是可以工作,
就这样了,还有什么你可以做呢?
试验
使用不同的颜色,边框大小以及背景。你可以添加鼠标悬停(hover)功能。尝试并且摆脱乏味无趣的表单吧!