实战系列 —— CSS 加成的 HTML “注册表”
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了实战系列 —— CSS 加成的 HTML “注册表”，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5813字，纯文字阅读大概需要9分钟。
内容图文
需要做到的—样式
自备材料
zc.jpg：
zc_bt01.jpg :
zc_bt02.jpg :
yzm.jpg：
纯文本HTML的效果图
： 对于HTML的构造思路我们就不详细解释了，相关内容实战系列 —— HTML 的 “注册信息表”里面有详细解说。
效果图中的细节解剖
（需要注意的是
： 1. 路径要具体到他本身，我们在属性中看到的是它所在的位置，并没有具体到它 本身，所以我们要具体到他本身，在HTML文本中手动添加他的名字，前面用斜线分开）
CSS加成详细解说
：1.CSS与HTML如何联系？
：要想使用 CSS 为 HTML进加成操作，就得使用 link 属性了
（需要注意的是
： 1. 路径要具体到他本身，我们在属性中看到的是它所在的位置，并没有具体到它 本身，所以我们要具体到他本身，在HTML文本中手动添加他的名字，前面用斜线分开）
： 2. CSS定义的斜线是和windows的斜线方向相反。
2.使用CSS加成布局
2.1：整体布局修饰
图片解说
： 这里我们在 CSS 中对于body中的内容进行了大致规划，其中最明显的就是背景图的引入；
属性解释
body{
font-family:'微软雅黑';（字体设置）
background-image:url("背景图所在位置");
background-position:center top;
（background-position 属性设置背景图像的起始位置）
background-repeat:no-repeat;
（background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。）
}
效果图 2.1
： 从效果图中我们可以明显看出背景不再是空白茫然一篇了，而是我们选择的背景图，对于其他变化我们的好好对比一下就可以看出他的变化。
2.2：标题布局
： 我们进行了整体的布局后，开始慢慢去进行细节的修饰。我们现在进行的是对标题修饰。
属性解释
h1{
text-align:center;
margin-top: 190px;
margin-bottom:30px;
color:#990000;
}以上属性都属于CSS盒子模型属性，相关内容请到 HTML 的豪华外套之 ”CSS“中查看
效果图 2.2：
： 从效果图中我们看到了标题发生了变化，跟着我们定义的属性变化，标题是可以更改的，虽然我们给出样式，但是我们还是可以多变的。一成不变不是我们的作风，所以标题就留给你想象了。
2.3：表格修饰
属性解释
table{
margin:auto;（让元素水平居中）
}
2.3：效果图
：从效果图中我们看见表格遵循着我们的布局，实现了居中。
2.4.表格 td 修饰
属性解释
table tr td{
padding-top:10px;
}
table tr td.td_1{
font-size: 18px;
text-align:right;
}以上属性都是在我上面推荐的文章可以找到，所以我就不在这里进行详细解释了。
2.4：效果图
： 如果你不仔细看得话，是不好发现区别的，但是你仔细的观察，就发现最明显的就是表格之间的距离发生了改变。
2.5 input 布局
属性解释
input{
width:160px;
height:22px;
border:1px solid #ccc;
}以上属性都是在我上面推荐的文章可以找到，所以我就不在这里进行详细解释了。
2.5：效果图
：这个就好观察了，因为这个的范围就小多了，你只需要关注 最下面那个 注册用户 就行了，因为其他的都是对应的空白框，它不会有啥变化的。而下面那个 注册用户 一看就知道 它发生了变化
2.6 input细节布局
input[name="yanzheng"]+img{
vertical-align: top;
}
input[type="submit"]{
border:none;
width: 127px;
height: 44px;
color:white;
font-size: 20px;
font-weight: bolder;
background-image: url
("C:/Users/Administrator/Desktop/zc_btn01.jpg");
}
input[type="submit"]:hover{
background-image: url
("C:/Users/Administrator/Desktop/zc_btn02.jpg");
}以上属性都是在我上面推荐的文章可以找到，所以我就不在这里进行详细解释了。
2.6：效果图
： 最明显的就是 注册用户 变成红色了
HTML 代码
<!DOCTYPE HTML> <html> <head> <title>自定义内容</title> <meta http-equiv="Content-type" content="text/html charset=utf-8" /> <link rel ="stylesheet" href="C:/Users/Administrator/Desktop/CSS.css" /> </head> <body> <h1>自定义内容</h1> <form action="#" method="POST"> <table> <tr> <td class="td_1">用户名:</td> <td><input type="text" name="username"></td> </tr> <tr> <td class="td_1">密码:</td> <td><input type="password" name="password1"></td> </tr> <tr> <td class="td_1">确认密码:</td> <td><input type="password" name="password2"></td> </tr> <tr> <td class="td_1">昵称:</td> <td><input type="text" name="nickname"></td> </tr> <tr> <td class="td_1">邮箱:</td> <td><input type="text" name="email"></td> </tr> <tr> <td class="td_1">验证码:</td> <td><input type="text" name="identifying code"> <img alt="验证码图片" src="C:\Users\Administrator\Desktop\yzm.jpg"> </td> </tr> <tr> <td colspan="2" align="center"> <input type ="submit" value="注册用户"> </td> <table> <form> </body> </html>
CSS代码
body{font-family:'微软雅黑';background-image:url("C:/Users/Administrator/Desktop/zc.jpg");background-position:center top;background-repeat:no-repeat;} h1{ text-align:center; margin-top: 190px; margin-bottom:30px; color:#990000;
} table{ margin:auto;} table tr td{ padding-top:10px;} table tr td.td_1{ font-size: 18px; text-align:right;} input{ width:160px; height:22px; border:1px solid #ccc;} input[name="identifying code"]{ width:80px; vertical-align:top;}input[name="yanzheng"]+img{vertical-align: top;} input[type="submit"]{border:none;width: 127px;height: 44px;color:white;font-size: 20px;font-weight: bolder;background-image: url("C:/Users/Administrator/Desktop/zc_btn01.jpg"); } input[type="submit"]:hover{background-image: url("C:/Users/Administrator/Desktop/zc_btn02.jpg");}
内容总结
以上是互联网集市为您收集整理的实战系列 —— CSS 加成的 HTML “注册表”全部内容，希望文章能够帮你解决实战系列 —— CSS 加成的 HTML “注册表”所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。