利用CSS对注册页面实现修饰

无修饰:

代码

<!-- 程序 ch02_8_1_register.html-->
<html>
<head>
<title>注册页面</title>
</head>
<body>
<form action="">
<table border="0" align="center"width="600">
<tr><td colspan="3"align="center"height="40">填写注册信息</td></tr>
<tr ><td align="right">用户名:*</td>
<td><input type="text"name="userName"/></td>
<td>用户名有字母开头,后跟字母、数字或下划线!</td>
</tr>
<tr><td align="right">密码:*</td>
<td><input type="password"name="userPwd"/></td>
<td>设置登录密码,至少6位!</td>
</tr>
<tr><td align="right">确认密码:*</td>
<td><input type="password"name="userPwd1"/></td>
<td>请再输入一次你的密码!</td>
</tr>
<tr><td align="right">性别:*</td>
<td><input type="radio"name="userSex"value="男"checked/>男
<input type="radio"name="userSex"value="女"checked/>女
<td>请选择你的性别!</td>
</tr>
<tr><td align="right">邮箱地址:*</td>
<td><input type="text"name="userEmail"/></td>
<td>请填写你的常用邮箱,可以用此邮箱找回密码!</td>
</tr>
<tr><td align="right"valign="top">基本情况:*</td>
<td colspan="2">
<textarea name="userBasicInfo"rows="5"cols="50"></textarea></td>
</tr>
<tr><td colspan="3"align="center"height="40">
<input type="checkbox"name="accept"value="yes"/>
我已经仔细阅读并同意接受用户使用协议</td>
</tr>
<tr><td colspan="3"align="center"height="40">
<input type="submit"value="确认">&nbsp;
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>

修饰后:

转载于:https://www.cnblogs.com/liao-pxsoftware15/p/7628069.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准的前景 第 2 章 XHTML 书写规范 第14 页 2.1 为什么要使用XHTML 2.2 什么是XHTML 2.3 XHTML 语法基础 2.3.1 XHTML 页面结构 2.3.2 元素的书写格式和属性 2.3.3 各种元素的属性 2.4 XHTML 代码规范 第 3 章 CSS 基础与书写规范 第29 页 3.1 CSS 的基础知识 3.1.1 什么是CSS 3.1.2 CSS 的语法 3.1.3 选择符 3.1.4 属性 3.1.5 伪类和伪元素 3.1.6 默认值 3.1.7 继承性 3.2 CSS 编码规范 3.2.1 CSS 基本书写规范 3.2.2 CSS 样式表书写顺序 3.3 怎样更好地应用CSS 3.3.1 块元素和内联元素 3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta 标签 4.5 CSS 的调用 4.5.1 调用样式表的几种方法 4.5.2 应用样式的优先级 4.6 网页头部实例 第 5 章 CSS 基本布局属性 第50 页 5.1 页面的制作流程和整体分析 5.2 元素定位基础知识 5.2.1 块元素的默认排列 5.2.2 内联元素的默认排列 5.2.3 块元素和内联元素的混合默认排列 5.2.4 使用浮动属性进行定位 5.3 定位属性详解 5.3.1 定位模式 5.3.2 边偏移 5.3.3 层叠定位属性 5.4 定位属性的应用 5.4.1 页面的制作流程和整体分析 5.4.2 相对定位 5.4.3 固定定位 5.4.4 层叠定位属性的使用 5.5 页面的背景设定 5.5.1 使用背景色定义背景 5.5.2 背景图片默认使用 5.5.3 背景图片的重复 5.5.4 背景图片的位置 5.5.5 背景图片的附件 5.6 背景的综合应用 5.6.1 背景的综合应用 5.6.2 背景颜色和背景图片的层叠 5.6.3 背景属性在内联元素中的使用 5.6.4 背景属性的缩写 5.6.5 页面文本的样式 5.6.6 链接的样式 5.7 布局的基础 5.7.1 布局页面的步骤 5.7.2 使用ID 还是Class 5.7.3 控制内容显示的display 属性 5.7.4 控制内容显示的visibility 属性 5.7.5 使用text-align 属性的水平居中 5.7.6 使用margin 属性的水平居中 5.8 浮动属性 5.8.1 浮动属性详解 5.8.2 相邻的浮动元素和固定元素 5.8.3 相邻的两个浮动元素 5.8.4 相邻的多个浮动元素 5.9 关于ul 和li 的样式详解 5.9.1 使用list-style-type 属 5.9.2 使用list-style-position 属性 5.9.3 使用list-style-image 属性 5.9.4 list-style 属性 5.10 菜单原理 5.10.1 菜单原理 5.10.2 制作菜单内容和结构部分 5.10.3 CSS 代码编写 5.11 一个横向导航菜单的制作 5.11.1 菜单原理 5.11.2 制作菜单内容和结构部分 5.11.3 CSS 代码编写 5.12 清除浮动 5.12.1 清除浮动属性详解 5.12.2 清除浮动属性的使用 第6 章 CSS 定义文本属性 第123 页 6.1 文本的缩进和对齐 6.1.1 段首缩进 6.1.2 段首字符下沉与大写 6.1.3 文本的对齐 6.1.4 图文混排 6.2 行高与间隔 6.2.1 行高属性详解 6.2.2 利用行高属性使文本垂直居中 6.2.3 间隔与空白 6.2.4 文本的转换 6.3 水平和垂直居中问题 6.3.1 已知容器和内容大小的水平和垂直居中问题 6.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的加粗 6.4.4 字体的样式 6.4.5 字体的变形 6.4.6 字体属性的简写 6.5 文本的修饰和链接 6.5.1 文本的修饰 6.5.2 链接属性详解 6.5.3 使用链接的顺序 6.5.4 链接的继承性 6.5.5 cursor 属性 第7 章 CSS 容器属性 7.1 什么是盒模型 7.1.1 内容与盒模型 7.1.2 背景与盒模型 7.2 补白属性 7.2.1 补白属性详解 7.2.2 百分比值的使用 7.2.3 单侧的补白属性 7.2.4 补白属性的简写 7.3 边框属性 7.3.1 边框样式 7.3.2 边框宽度 7.3.3 边框颜色 7.3.4 边框的综合定义 7.3.5 单侧边框的综合定义 7.3.6 一个有用的表格边框属性 7.3.7 应用边框属性的实例 7.4 边界属性 7.4.1 边界属性 7.4.2 单侧的边界和简写 7.4.3 垂直方向的边界重叠 7.4.4 水平方向的边界 7.4.5 负的边界值 7.4.6 在内联元素中使用边界属性 第8 章 浏览器及兼容问题 8.1 浏览器介绍 8.2 要兼容哪些浏览器 8.3 解决兼容问题的原理 8.4 !important 的使用 8.5 水平居中的问题 8.5.1 IE6.0 中的水平居中 8.5.2 FIREFOX2.0 中的水平居中 8.5.3 解决方法 8.6 非浮动内容和容器的问题 8.6.1 IE6.0 中固定宽度和高度的容器和内容 8.6.2 FIREFOX2.0 中的容器与内容 8.6.3 可能出现的问题和解决方法 8.7 使用:after 伪类解决浮动的问题 8.7.1 IE6.0 中的浮动元素和容器 8.7.2 FIREFOX2.0 中的浮动元素和容器 8.7.3 并列浮动元素默认宽度的问题 8.8 嵌套元素宽度和高度叠中的问题 8.8.1 父元素和子元素均没有定义宽度和高度 8.8.2 定义子元素的宽度后的效果 8.8.3 定义父元素宽度后的效果 8.8.4 解决的方法 8.9 子元素负边界的问题 8.9.1 IE6.0 中子元素的负边界 8.9.2 FIREFOX2.0 中子元素的负边界 8.9.3 解决方法 8.10 列表的默认显示问题 8.10.1 列表的默认显示方式 8.10.2 默认属性的取消 8.11 IE6.0 中的问题 8.11.1 浮动元素的双边距和零边距问题 8.11.2 浮动列表的问题 8.11.3 图片的间隙问题 8.12 IE7.0 中的问题 8.12.1 内容和容器的显示方式不同 8.12.2 支持!important 的声明 8.12.3 嵌套的问题 8.12.4 浮动子元素的问题 8.12.5 和IE6.0 相同的问题 8.13 兼容问题实例 8.13.1 纵向导航菜单的兼容 8.13.2 横向导航菜单的兼容 8.13.3 自适应高度的兼容 8.13.4 实例制作中的兼容问题 第9 章 一个英文网站的制作 9.1 分析效果图 9.2 切图 9.2.1 制作首页的切图 9.2.2 二级页面的切图 9.3 制作站点首页头部 9.3.1 首页头部的信息和基础样式的制作 9.3.2 首页头部的分析 9.3.3 首页头部结构的制作 9.3.4 首页头部CSS 代码的编写 9.4 制作首页的主体部分 9.4.1 分析主体部分效果图 9.4.2 制作主体左侧部分的结构 9.4.3 制作主体左侧部分的样式 9.4.4 制作主体中间部分的结构 9.4.5 制作主体中间部分的样式 9.4.6 制作主体右侧部分的结构 9.4.7 制作主体右侧部分的样式 9.5 制作首页的底部 9.6 首页的兼容问题 9.7 二级页面的制作 9.7.1 分析二级页面的效果图 9.7.2 制作二级页面中间内容部分的结构 9.7.3 制作二级页面中间内容部分的样式 9.7.4 制作二级页面右侧部分的结构 9.7.5 制作二级页面右侧部分的样式
利用CSS制作注册页面背景,可以按照以下步骤进行: 1. 创建HTML文件,并在文件头部引入CSS文件。 2. 在HTML文件中创建一个div元素,用于包含注册表单。 3. 设置该div元素的宽度、高度、边框和背景颜色。 4. 创建一个背景图片,并将其保存到服务器上。 5. 在CSS文件中,使用background-image属性将背景图片作为div元素的背景。 6. 根据需要,使用background-size、background-position和background-repeat属性调整背景图片的大小、位置和重复方式。 以下是一个简单的代码示例: HTML文件: ``` <!DOCTYPE html> <html> <head> <title>注册页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="register-form"> <!-- 在这里添加注册表单的HTML代码 --> </div> </body> </html> ``` CSS文件: ``` .register-form { width: 500px; height: 600px; border: 1px solid #ccc; background-color: #fff; background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` 在这个示例中,我们创建了一个名为register-form的div元素,并将其设置为500像素宽、600像素高,带有1像素灰色边框和白色背景色。我们还将名为background.jpg的背景图片作为该元素的背景,并使用CSS属性调整其大小、位置和重复方式。根据需要,您可以使用其他CSS属性来进一步自定义注册页面的外观和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值