div+css页面布局的五个小技巧

　　1、表单文本输入的移动选择：

　　在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中，一切就会变得简单多了，如：


代码如下:

<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Input English..</textarea>

　　类似的，可以加入代码到<input>。

　　2、表单输入单元点击删除：

　　本列同上则作用类似，只是使用鼠标上略有变化，需要点击而不像上则的只要鼠标覆盖。如：

<input type=text name="address" size=19 value="Enter,e-mail..."onFocus="this.value=''"> 
　　点击输入单元后，提示信息会删除，是不是很方便。

　　3、表单输入单元的边框设置：

　　更改传统的表单单元边框，会让你的主页生色不少。如：

<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">
　　其中"style=***"为左右上下和背景色设置，适用于其它单元，请读者亲自试试。

　　4、表单输入单元的文字设置：

　　表单中单元的字体是可以修改的，如：
<input type=text name="address" size=19 value="Enter,e-mail..." style=font-family:"verdana";font-size:10px > 
　　其中"style=***"为字体和字大小设置。

　　5、修改表单属性为弹出窗口：

　　大多数表单激活后，会在当前页面中打开，影响正常浏览。不如修改一下，如：
<form method=POST action=url target=_blank>
　　其中"target=_blank"为控制在弹出窗口打开。

赞 (0)

相关推荐

  • div+css页面布局的五个小技巧

    1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: 复制代码 代码如下: <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="th

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • div+CSS网页布局的意义与副作用原因小结第1/2页

    如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积

  • div＋css div+css divcss布局入门教程 迅雷下载

    你正在学习 CSS 布局吗?是不是还不能完全掌握纯 CSS 布局?通常有两种情况阻碍你的学习:     第 CSS 处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构, 然后再针对语义.结构添加 CSS.这篇文章将告诉你应该怎样把 HTML 结构化.     另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该 转换成对应的什么 CSS语句.当你解决了第 HTML,我再给出一个

  • 学习dreamweaver cs3新功能之直接生成div+css页面

    学习dreamweaver cs3新功能之直接生成div+css页面

    dreamweaver cs3在新建文件时比以前版本有了较大改变,分为了四列形,有点类似于golive的样式了.最大的改观就算它能自动创建div+css布局,基本上涵盖了所有的常用布局形式.可以为我们设计页面时节省很大一部分时间,值得表扬. 下面的是自动生成的页面,里边还带注释呢 二列固定.左侧栏.标题和脚注www.aa25.cn /* 将 IE 5* 的 css 方块模型修正放在这个条件注释中 */ .twoColFixRtHdr #sidebar1 { width: 220px; } /*

  • CSS整体布局声明的一些使用技巧

    我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化.提高运行效率提供了途径.我们列举比较常用的形式,并加上解释.整体布局声明的作用在于将目标作一个整体的概括,声明一些完全相同或基本相同的属性及值,以免在后面的代码中每一个标签中都需要单独定义.若有不同的属性与值,后面的重新定义即可. 一.通配式整体布局声明. * { margin:0; padding:0; font-size:0.8em; ... } 这类形式的声明是针对整个页面的.可以设置页面元素共有的属性.而不必每一个元素单独的

  • DIV CSS网页布局 最小高度（min-height）的妙用

    假定有二个BOX,我们需要它的最小高度为150PX. CSS div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; float: left; margin-right: 20px; } xhtml <div>IE中没保持最小高度为150px</div> <div>最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也能保持BOX的高度为一定</div> 现在的效果,I

  • jsp 页面上图片分行输出小技巧

    <table border="0" cellpadding="2"> <c:forEach items="${pics}" var="pic" varStatus="status"> <c:if test="${((status.index)%3)==0}"><tr></c:if> <td> <input cl

  • 比较详细的DIV+CSS布局网页对网站SEO的影响

    SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量

  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags

    做DIV+CSS页面,不推荐使用的标签代码,请尽量不要使用这些HTML标签: Do not use these html elements in html pages.  Presentational elements should not be used.  Support for some elements has been (or will be) deprecated; they should not be used. Don't Use These Tags Presentationa

随机推荐