css制作表单效果

2016-02-19 11:57 5 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享css制作表单效果，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

!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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titleby 阿会楠 2008-12-4/titlescript language="javascript" type="text/javascript"//js辅助window.onload = function(){ var initleft = 200;// 初始化第一个定位 var lis = document.getElementById("menu").getElementsByTagName("li"); for(var i = 0;i  lis.length;i++){  lis[i].style.left = initleft + i*100 + "px"; } }/scriptstyle type="text/css"*{ font-size:12px; padding:0; margin:0;}body{ text-align:center;}#reg{ margin:0 auto; width:600px; background:#cccccc; height:500px;}h6{ background:black; height:28px; color:white; text-align:left; line-height:28px; padding-left:3px;}#menu{ height:30px; text-align:left; padding-top:15px; padding-left:10px; overflow:hidden;}li{ list-style-type:none;}#menu li{  float:left; color:green; height:30px; padding:0 5px; line-height:30px; margin-left:20px; position:absolute;}.current{ border:1px solid blue; border-bottom:0; background:white;}#content{ border:1px solid blue; height:400px; margin:8px; margin-top:0; background:white; padding:10px; }#content dl{ border-top:1px solid #ccc; border-left:1px solid #ccc; width:560px; height:116px;}#content dl dd,#content dl dt{ border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; height:28px;}#content dl dt{ width:200px; float:left; text-align:right; padding-right:3px; background:#F0F0F0; line-height:28px;}#content dl dd{ width:352px; float:left; text-align:left; padding-left:3px;}/*兼容ie 6.0*/#content dl dd div{ padding-top:3px;}/style/headbodydiv id="reg"h6欢迎您注册玩具购会员！/h6div id="menubox"ul id="menu"li style="left:200px;"确认服务条款/lili class="current" style="left:300px;"选择用户名/lili style="left:400px;"选择用户类型/lili style="left:500px;"填写详细资料/li/ul/divdiv id="content"formdl dt用户名/dtdddivinput type="text" //div/dddt密码/dtdddivinput type="text" //div/dddt确认密码/dtdddivinput type="text" //div/dddt/dtddinput type="button" value="注册" //dd/dl /form/div/div/body/html

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
编缉: http://www.poluoluo.com

来源:http://www.tulaoshi.com/n/20160219/1599220.html

上一篇： C#学习基础概念二十五问
下一篇：网页制作与CSS的UTF-8和GB2312编码问题

看过《css制作表单效果》的人还看了以下文章更多>>

巧用CSS制作可控闪烁效果

标签： Web开发

一段文本或一张图片，它的周围有一圈光晕，这圈光晕每一秒钟闪烁一次，而当鼠标移到上面时，立即停止闪烁，当鼠标移开时又继续闪烁。这种效果用于那些需要特别引起别人注意的内容上（如：警示、报告新增内容等），能起到较好的效果。上面这个示例就能实现上面所的效果，由于这里是抓取的一张图片，不能看到动态效果，只要按下面介绍...

CSS教程:制作对用户友好的站内搜索表单

标签： Web开发

站内搜索功能是网站必不可少的，它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成，默认的情况下，在各个浏览器的效果不一样，甚至计算机系统主题的不同，也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好，我们对它进行加工，让它在各种环境下都显示一致的效果，而且还给访问者提示。搜索功能的 XHT...

CSS教程:网页表单设计技巧

标签： Web开发

输入框( Input )应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。– 《HTML权威指南》 Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方式，以及周围的视觉元素都会或多或少影响用户的行为。表单布局考虑到...

用CSS和jQuery制作霓虹效果

标签： Web开发

今天我们为大家准备的JS+CSS霓虹灯效果，让你的文字像灯一样每一分每一秒都变色。今天我们要用CSS和jQuery制作霓虹效果。现在我们开始第一步，制作一个背景。其中有2个不同颜色的文字版本。要生成五颜六色的背景图象，您首先需要新建的Photoshop文件650px和300px文档，#141414的背景颜色。使用您喜爱的字体写您的标题。我使用了哥特式...

用css3制作纸张效果

标签： Web开发

一、中规中矩的效果所谓中规中矩的效果就是加个投影，贴个胶带什么的。效果如下：您可以狠狠地点击这里：中规中矩纸张效果demo 这里纸张本身的效果没有什么说头的，就是个CSS3的 box-shadow投影效果而已，相关代码如下： -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);...

查看更多精彩>>