利用DIV和CSS修饰简易表单 - - ITeye博客

`

eggbucket1

浏览: 78353 次
性别:
来自: 苏州

最近访客更多访客>>

jiangcon

心杀心

z137384812

lwhwhy

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (133)

社区版块

存档分类

最新评论

lgclove1314：请问：import org.tempuri.ArrayOfSt ...
XFire调用Web服务取得天气预报
Xgw123485：很强大呀！
铸造JavaWeb利器
littleJava：写的很详细
JDK5.0新特性Annotation之@Retention注解

利用DIV和CSS修饰简易表单

阅读更多

<style type="text/css"> * { margin:0; padding:0; } body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; /*全局字体和字号*/ background:#666; } #header { width:480px; margin:0 auto; /*上下间距0，左右自动平衡。实际上就等于是左右自动居中*/ height:60px; } #header a { padding-top:40px; /*距离顶部的内间距为40px*/ display:block; /*默认的内联显示方式是没有内间距的计算的。即若不设为块显示，则看不到效果*/ color:#fff; /*字体为白色*/ text-decoration:none; /*去除下划线*/ } #header a:hover { color:#fc0; } #content { width:480px; margin:0 auto; background:#fff; } #content h1 { padding:20px; /*内间距*/ } #content p { padding:10px 20px; /*上下间距10像素，左右间距20像素*/ line-height:160%; /*行高*/ } #content label { width:130px; display:block; /*更改显示方式为块级。默认的内联显示方式是没有width的*/ float:left; /*设置为左浮动。否则<label>和<input>会各自独占据一行*/ text-align:right; /*让<label>右对齐*/ padding-right:10px; /*内部的右侧边距为10px*/ } .input_text_font { color:red; padding:0 26px 0 160px; /*内间距。上为0，右为26px，下为0，左为160px*/ } .input_text_max { width:270px; } input[type="password"] { /*这里用到了属性选择器。input[type="password"]意思是对<input>类型为password进行操作*/ width:80px; /*设置密码输入框的长度为80px*/ } input[type="text"]:focus, input[type="password"]:focus { background:#DDE3F9; /*当文本框成为输入焦点时，背景色为浅蓝色*/ } .but { padding:20px; } #footer { width:480px; margin:0 auto; text-align:center; padding:3px 0; /*版权信息的上下内间距为3px，左右为0*/ } </style> <body> <div id="header"> <a href="http://blog.csdn.net/jadyer">Back to my blog</a> </div> <div id="content"> <h1>Create An Account</h1> <p> Registration is free, and it's supper quick! Complete the form to create a new Jadyer account </p>  <p> <label for="username">Username:</label> <input type="text" id="username" /> </p> <p> <label for="password">Password:</label> <input type="password" id="password" /> </p> <p> <label for="password_ageain">Password(again):</label> <input type="password" id="password_ageain" /> </p> <p> <label for="e-mail">E-mail:</label> <input type="text" id="e-mail" /> </p> <p> secret question and answer help you reset you password if you forget it. Jadyer will ask you to answer you question before allowing you account password to be reset. This is hightly recommended but optonal. </p> <p> <label for="select_question">Select Question:</label> <input type="text" id="select_question" class="input_text_max" /> </p> <div class="input_text_font"> Enter a question you can answer easlly but others would find hard to guess. Example:"What was the name of first pet?". </div> <p> <label for="select_answer">Select Answer:</label> <input type="text" id="select_answer" class="input_text_max" /> </p> <div class="but"> <input type="button" value="Sign In" name="submit" /> </div> </div> <div id="footer">©Copyright 2010 BeiJing Jadyer.</div> </body>

分享到：

利用CSS和JavaScript实现网页栏目的选择 | 启动Eclipse时选择工作空间

2010-09-05 20:14
浏览 480
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

html-div-css的ppt: "用CSS修饰网页"则涵盖了CSS的基本选择器、属性和值，如颜色、背景、边框、过渡、动画等，这些都是让网页看起来美观并具有交互性的关键。 "超级链接和列表"这部分可能涉及如何创建和使用HTML的标签创建链接，以及...

JQuery&CSS;&CSS;+DIV实例大全.rar: 站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

HTML+CSS+Div测试习题.pdf: * CSS 中的文本修饰可以使用 `text-decoration` 属性，取值可以是 `underline`、`overline`、`line-through` 等。 * CSS 中的文本对齐可以使用 `text-align` 属性，取值可以是 `left`、`right`、`center` 等。 * CSS...

零基础学HTML CSS源代码: div.css 名为div的样式文件。 style.css 名为style的样式文件。第15章（源代码\第15章）示例描述：本章演示CSS基础部分知识。 CSS基础.html 演示CSS基础链接知识用法。 style1.css ...

div+css实现鼠标放上去，背景跟图片都会变化。: 在 DIV+CSS 中实现鼠标悬停效果，可以实现在鼠标悬停时背景图片和颜色的变化。这是交互设计中非常重要的一部分，能够提高用户体验和网站的整体美观度。在 HTML 中，我们使用了无序列表 `<ul>` 和列表项 `<li> `来...

H5+CSS3.zip: css文本样式：使用text-decoration添加文本修饰，text-indent：2em添加首行缩进俩字符，line-height设置行间距，letter-spacing设置字符间距，word-spacing设置英文单词间距，text-align设置文本对齐方式；...

HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)学期授课计划.docx: 5. CSS选择符和CSS3基础：掌握CSS选择符，如类选择器、ID选择器等，用CSS修饰和控制页面元素，学习CSS3的新特性，如阴影、渐变等。 6. CSS盒模型：理解盒模型的概念，包括内容、内边距、边框和外边距，学习如何设置...

css开发字典: - 可以使用CSS来设计表单的布局和样式。 **Decimal（十进制）** - 数字系统的一种，以10为基数。 - 在CSS中，数字常量如`12px`就是十进制数。 **Content（内容）** - 元素内部的信息，如文本、图片或嵌入的对象。 ...

跟我学HTML+CSS答案: <div id="section1">这里是页面顶部</div> ``` ### 第7章：表格布局与单元格属性 #### 单元格属性 - `colspan`: 设置单元格跨多列。 - `rowspan`: 设置单元格跨多行。 #### 示例代码 ```html 横跨两列 ...

HTML+CSS+JS网页设计期末课程大作业——海贼王(8个页面)动漫网页设计: - **DIV+CSS布局**: 使用`<div>`标签来创建区块，并利用CSS进行布局设计。例如，设置`width`, `height`, `background-color`等属性，实现不同区块的布局和样式设计。 - **表格布局**: 通过`<table>`, `<tr>`, `<th>...

CSS初级学习手册.pdf: CSS（层叠样式表）是网页设计中的核心技术之一，负责网页的样式和布局。本手册涵盖了CSS的基础知识，对于刚接触前端开发的初学者来说，提供了易懂的学习资料，并为有经验的前端工程师提供了快速查阅的参考。以下是对...

【JavaScript源代码】一篇文章教你实现VUE多个DIV,button绑定回车事件.docx: 首先，尝试直接在DIV或者button元素上使用Vue的事件修饰符`@keyup.enter`，但这种方法在某些情况下可能无效。例如： ```html <div class="btn submit" @keyup.enter="submit" @click="submit">确定（Ent）</div> ``...

css入门笔记: 1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式行内样式特点：将css样式定义在HTML标记中语法：样式声明：用样式属性和值组成（属性:值;） ...

网页实用效果，html的，很好哦~~~: “CSS修饰”这部分内容广泛，可能涵盖了选择器、盒模型、布局模式（如Flexbox和Grid）、过渡和动画等，这些都是现代网页设计中必不可少的技能。 “images”可能涉及图片的优化、响应式处理以及CSS图像处理技术，如...

html5 Ajax漂亮表单，纸张效果的登录框.rar: html5 Ajax漂亮表单，纸张效果的登录框，具备Ajax提示功能的HTML5简单表单，若在没有输入内容或输入错误内容的情况下提交，会在不刷新网页的情况下弹出一个表单提示...另外表单边缘修饰成纸张的风格，确实也很漂亮哦。

网页设计试题: 5. **H1-H6标题**：H1代表最大的标题，H6是最小的标题，所以H1修饰的文字通常比H6大。 6. **B标记符**：B标记符用于设置文本为粗体，但现代网页设计更倾向于使用CSS来控制字体样式。 7. **GIF格式**：GIF支持256色...

html.css.javascript-学习笔记.doc: HTML、CSS、JavaScript 学习笔记 ... ... ... ...它是一种标准通用标记语言，使用标签来标记网页中的元素，从而实现网页的布局、格式和内容的控制。HTML 的主要特点是：平台无关、设备无关、语言无关，...div+css 篇：（待续）

html项目大一论文: 在这个项目中，JS被用来修饰和验证网页中的表单数据，例如，可以实现表单输入的实时验证，或者创建动态图片效果，如轮播图或鼠标悬停时的动画效果。 4. 动态图片效果：这通常涉及到CSS的动画属性，如`transition`和...

CSS参考手册_第2章__XHTML_书写规范: ### CSS参考手册_第2章_XHTML_书写规范 #### 2.1 为什么要使用XHTML XHTML（可扩展超文本标记语言）作为一种介于HTML与...掌握XHTML的基础知识对于学习和使用CSS布局至关重要，它为正确应用CSS属性提供了坚实的基础。

Global site tag (gtag.js) - Google Analytics