HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第六章课后习题(用户注册页)

xiaozhima-dun

于 2023-02-14 23:27:10 发布

阅读量2.3k

点赞数 7

分类专栏：静态网页文章标签： javascript html css

本文链接：https://blog.csdn.net/yw1990128/article/details/129035402

版权

静态网页专栏收录该内容

6 篇文章 15 订阅

订阅专栏

黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程

第六章：用户注册页-课后习题参考代码

。。。。。。。。

记得关注，收藏，评论哦，作者将持续更新。。。。

我自己做的效果如下：

参考代码：

HTML代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="bg">
    <h1></h1>
    <div class="content">
    	<div class="content_border">
            <div class="content_1">
                <p>注 册 新 用 户</p>
            </div>
            <form action="#"  method="post" class="content_2">
                <input class="icon_1" type="text" value="用户名"/>
				<input class="icon_2" type="text" value="密码"/>
                <input class="icon_2" type="text" value="确认密码"/>
                <input class="icon_3" type="email" value="电子邮件"/>
                <input class="btn" type="submit" value="注册新用户"/>
            </form>
        </div>
    </div>
</div>
</body>
</html>

style.css代码如下：

@charset "utf-8";
/* CSS Document */
/*清空浏览器默认样式*/
body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img,input{margin:0; padding:0; border:0; list-style:none;}
/*全局控制*/
body{font-family:Arial, Helvetica, sans-serif,"宋体"; font-size:16px;}
a:link,a:visited{text-decoration:none; color:#999;}
a:hover{color:#F30;}
#bg{width:1024px; height:768px; margin:10px auto; background-color:#efefef;}
/*头部样式*/
h1{width:900px; height:70px; margin:0 auto; background:#38b593 url(images/logo.png) no-repeat center center;}
/*整体控制内容*/
.content{width:880px; height:480px; margin:0 auto; background-color:#eeecec; margin-top:10px; border:10px solid #fff;}
.content_border{width:870px; height:470px; border:5px solid #eeecec;}
/*新用户注册部分*/
.content_1{width:870px; height:55px; background:url(images/bg.png) repeat-x;}
.content_1 p{height:55px;color:#666; font-size:24px; line-height:55px; font-family:"微软雅黑"; background:url(images/jia.png) no-repeat left center; padding-left:45px; margin-left:60px;}
/*表单样式*/
.content_2{width:404px; margin:0 auto; }
.icon_1,.icon_2,.icon_3{width:350px; height:39px; line-height:39px; color:#999; font-size:16px; font-weight:600; background:#faf9f9 url(images/icon1.png) no-repeat 10px center; padding-left:50px; border:2px solid #7f9db9; margin-top:30px;}
.icon_2{ background:#faf9f9 url(images/icon2.png) no-repeat 10px center;}
.icon_3{ background:#faf9f9 url(images/icon3.png) no-repeat 10px center;}
.btn{width:400px; height:39px;  background-color:#53c2a2; padding-left:30px;  font-size:18px; color:#FFF; border:2px solid #7f9db9; margin-top:30px; text-align:center;}

实现了简单效果，和大佬的作品还有差距，供新手学习使用。