目录
下载软件
编辑
一.制作蜡笔小新个人介绍界面
二.制作蜡笔小新我的偶像界面
三.制作蜡笔小新我的家乡界面
四.制作蜡笔小新会员注册界面
下载软件
一、HBuilder IDE的下载
HBuilder下载官网地址：http://www.pc6.com/mac/140609.htmlHBuilderX官方电脑版_华军纯净下载http://www.pc6.com/mac/140609.html
在地址栏中直接输入
或者直接点击下面的链接
DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
进入官网，免费下载最新版的HBuilder。
HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。
点开网址，下载找到下载按钮【DOWNLOAD】，点击后会出现一个弹窗，根据电脑版本进行选择，点击完成之后便开始进行下载然后进入等待即可。新一代的版本为HBuilder X，上一代的版本为HBuilder。
新建项目之后，创建项目
一.制作蜡笔小新个人介绍界面
制作成这样的界面
在img中放入所需要的图片：
index.html写入代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="../css/lbxx.css" type="text/css"></head><body><!-- 头部模块 --><div class="header"></div><div class="nav"><span><a href="#">首页</a></span><span><a href="index2.html">我的偶像</a></span><span><a href="index3.html">我的家乡</a></span><span><a href="#">我的学校</a></span><span><a href="#">最爱电影</a></span><span><a href="#">喜欢旅游</a></span><span><a href="#">登录</a></span></div><!-- 图片模块 --><div class="tupian"><h1>个人介绍</h1><div class="news"><img src="../img/IMG2.jpg"></div><div class=" xingxi"><ul><!-- 介绍模块 --><h3>个人信息</h3><li>姓名 蜡笔小新</li><li>名称 クレヨンしんちゃん </li><li>别名 Crayon Shin-chan </li><li>作者 臼井仪人(2009年逝世) </li><li>类型 生活，搞笑，日常</li><li>地区 日本</li></ul></div><div class="jianjie"><h3>个人简介</h3><p>《蜡笔小新》是由日本漫画家臼井仪人创作的漫画。1990年8月，在《weekly漫画action》上开始连载。1992年，根据漫画改编的同名动画在朝日电视台播出。2010年7月16日，臼井仪人遗作《蜡笔小新》第50卷出版。在作者臼井仪人去世后，作品由“臼井仪人&UY;工作室”沿袭原作风格继续创作。臼井仪人先生说之所以会创造出小新这个形象，是因为他在观察自己的孩子的时候，发现小孩子的想法往往非常独特，以至于作者被小孩的世界所吸引。所有的小孩都有乖巧和调皮的两面性。这种两面性对作者来讲是十分有趣的。</p></div><div id="aihao"><h1>个人爱好</h1><div class="aihao3"></div><!-- 爱好模块 --><div class="aihao4"><img src="../img/IMG3.jpg"><P>爱好一</P></div><div class="aihao4"><img src="../img/IMG4.jpg"><P>爱好二</P></div><div class="aihao4"><img src="../img/IMG5.jpg"><P>爱好三</P></div><div class="aihao4"><img src="../img/IMG6.jpg"><P>爱好四</P></div></div></div><!-- 页脚模块 --><div class="end"><p>自我介绍官网</p><p>姓名：xxx 学号：xxx</p></div></body>
</html>新建css文件，写入css样式代码：
在lbxx.css写入代码：
* {margin: 0;padding: 0;}body {font-family: "微软雅黑";background-color: #ffaa00;
}.header { width: 960px;height: 400px;background: url(../img/IMG1.jpg) no-repeat;background-size: 960px 400px;margin: 50px auto 0px;
}
.nav {text-align: center;font-size: 16px;width: 960px;height: 60px;margin: 0 auto;background-color: #ffaa7f;line-height: 60px;display: flex;}
.nav span {margin: 0 auto;text-align: center;}
a:link,a:visited{color: #000;text-decoration: none;
}
.nav a{flex: 1;display: block;width: 137px;height: 60px;
}
a:hover{background-color: #CD5C5C;
}
a:active{color: #000;
}
.tupian {margin: 0 auto;width: 960px;height: 680px;background-color: aliceblue;}.tupian h1 {font-size: 34px;text-align: center;font-weight: normal;clear: left;}.tupian h3 {padding: 10px;background-color: #ffaa00;text-align: center;
}
.tupian .news{margin-left: 20px;
}
.tupian img {width: 200px;height: 260px;float: left;margin: 0 auto;
}
.xingxi {width: 220px;height: 270px;text-align: center;float: left;margin: 0px 40px 0px;
}.xingxi li {padding: 6.3px;border: 2px solid #d8d8d8;border-top-style: none;font-size: 16px;list-style: none;text-align: center;
}.jianjie {width: 420px;height: 255px;border: 2px solid #d8d8d8;float: left;}.jianjie p {font-size: 16px;text-indent: 2em;
}
#aihao img{width: 220px;height: 260px;float: left;margin: 0 0px auto;
}.aihao3 {margin: 0 auto;position: absolute;top: 400px;left: 410px;
}.aihao4 {margin: 10px;float: left;font-size: 20px;background-color: #ff6219;text-align: center;color: azure;
}
.end {margin: 0 auto;width: 960px;height: 60px;font-size: 20px;background-color: #ffaa7f;text-align: center;color: #d8d8d8;margin: 0px auto 50px;
}ctrl+s保存后，点击Edge弹出界面，如图所示
运行效果：
二.制作蜡笔小新我的偶像界面
制作成这样的界面
index2.html写入代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的偶像</title><link rel="stylesheet" href="../css/lbxx2.css" type="text/css"></head><body><!-- 头部模块 --><div class="header"></div><div class="nav"><span><a href="index.html">首页</a></span><span><a href="#">我的偶像</a></span><span><a href="index3.html">我的家乡</a></span><span><a href="#">我的学校</a></span><span><a href="#">最爱电影</a></span><span><a href="#">喜欢旅游</a></span><span><a href="#">登录</a></span></div><div><!-- 偶像模块 --><div class="er"><h3>我的偶像</h3><ul><li><img src="../img/IMG7.jpg" alt=""><p>青蛙小新，呱呱呱~</p></li><li><img src="../img/IMG8.jpg" alt=""><p>小新喝饮料，这么好喝眼睛都闭上了</p></li><li><img src="../img/IMG9.jpg" alt=""><p>小新开车~</p></li></ul><ul> <li><img src="../img/IMG10.jpg" alt=""><p>小新，狗狗爬你身上了~</p></li><li><img src="../img/IMG11.jpg" alt=""><p>小新和狗狗玩耍~</p></li><li><img src="../img/IMG12.jpg" alt=""><p>我叫蜡笔小新，我是一名摄影师~</p></li></ul></div><!-- 页脚模块 --><div class="end"><p>自我介绍</p><p>xxx学号：xxx</p></div></div></body>
</html>在lbxx2.css写入代码：
* {margin: 0;padding: 0;}body {font-family: "微软雅黑";background-color: #ffaa00;
}.header { width: 960px;height: 400px;background: url(../img/IMG1.jpg) no-repeat;background-size: 960px 400px;margin: 50px auto 0px;}
.nav {text-align: center;font-size: 16px;width: 960px;height: 60px;margin: 0 auto;background-color: #ffaa7f;line-height: 60px;display: flex;}
.nav span {margin: 0 auto;text-align: center;}
a:link,a:visited{color: #000;text-decoration: none;
}
.nav a{flex: 1;display: block;width: 137px;height: 55px;
}
a:hover{background-color: #CD5C5C;
}
a:active{color: #000;
}
.er{width: 960px;height: 620px;background-color: aliceblue;margin: 0 auto;
}
.er h3{margin-top: -5px;text-align: center;font-size: 28px;
}
.er ul{list-style: none;display: flex;margin-left: -30px;margin-top: -20px;
}
.er ul li{padding-left: 60px;
}
.er ul li img{width: 260px;height: 220px;margin-top: 40px;
}
.er p{background-color: #ff6219;padding-left: 20px;margin-top: -5px;font-size: 14px;line-height: 40px;text-align: center;
}
.end{margin: 0 auto;width: 960px;height: 60px;font-size: 20px;background-color: #ffaa7f;text-align: center;color: #d8d8d8;margin: 0px auto 50px;
}
ctrl+s保存后，点击Edge弹出界面，如图所示运行结果：
三.制作蜡笔小新我的家乡界面
制作成这样的界面
index3.html写入代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的家乡</title><link rel="stylesheet" href="../css/lbxx3.css" type="text/css"></head><body><div class="quanju"><!-- 头部模块 --><div class="header"></div><div class="nav"><span><a href="index.html">首页</a></span><span><a href="index2.html">我的偶像</a></span><span><a href="#">我的家乡</a></span><span><a href="#">我的学校</a></span><span><a href="#">最爱电影</a></span><span><a href="#">喜欢旅游</a></span><span><a href="#">登录</a></span></div><div class="home"><h2>我的家乡</h2><dl><dt><img class="tu" src="../img/IMG13.jpg" /></dt><dd><span>小新的家乡</span><br /><p>与东京和横滨不同的是，春日部市是一个彻彻底底的小城市。一下电车，真的就感受到了春日部市独特的小城气息以及一种平凡宁静的普通生活之感，没错，东京作为首都是繁华的象征，横滨作为知名旅游城市也是永远热热闹闹，然而春日部市就像《蜡笔小新》中描绘的那样，带给人们的是一种普通的生活。走在春日部市的街上，听着头顶上传来的乌鸦叫，想到小时候觉得《蜡笔小新》中乌鸦出现的次数那么多不符合生活实际，现在才发现这完全是来源于生活的。</p></dd></dl><h2>家乡美景</h2><ul><li><img src="../img/IMG14.jpg" alt="图一"><h4>春天</h4></li><li><img src="../img/IMG15.jpg" alt="图二"><h4>夏天</h4></li></ul><ul><li><img src="../img/IMG16.jpg" alt="图三"><h4>秋天</h4></li><li><img src="../img/IMG17.jpg" alt="图四"><h4>冬天</h4></li></ul></div><div class="end"><p>自我介绍<br />姓名：XXX学号：XXX</p></div></div></body>
</html>在lbxx3.css写入代码：
* {margin: 0;padding: 0;}
body {font-family: "微软雅黑";background-color: #ffaa00;
}.header { width: 960px;height: 400px;background: url(../img/IMG1.jpg) no-repeat;background-size: 960px 400px;margin: 50px auto 0px;
}.nav {text-align: center;font-size: 16px;width: 960px;height: 60px;margin: 0 auto;background-color: #ffaa7f;line-height: 60px;display: flex;}
.nav span {margin: 0 auto;text-align: center;}
a:link,a:visited{color: #000;text-decoration: none;
}
.nav a{flex: 1;display: block;width: 137px;height: 60px;
}
a:hover{background-color: #CD5C5C;
}
a:active{color: #000;
}
.home{width: 963px;margin: 0 auto;background-color: #ffffff;
}h2 {font-family: "微软雅黑";text-align: center;font-weight: normal;height: 100px;line-height: 100px;}
dl{display: flex;padding: 0 30px;
}
.home dt .tu{width: 250px;height: 150px;margin-right: 30px;
}
.home dd{width: 600px;font-family: "华文仿宋";font-size: 14px;line-height: 21px;letter-spacing: 2px;
}
.home span{background-color: #CD5C5C;color: #ffffff;font-size: 17px;line-height: 28px;letter-spacing: 3px;text-indent: 2em;
}
.home dd p{text-indent: 2em;
}.home ul{display: flex;/* 弹性布局,默认是水平 */width:750px;height: 300px;margin: 0 5px;
}
.home li{list-style-type: none;flex: 1;margin:30px 20px 50px 25px;
}
img{width: 430px;height: 200px;display: block;
}
h4{text-align: center;background-color: #CD5C5C;width: 430px;height: 50px;color: #ffffff;line-height: 50px;font-size: 14px;
}
.end{margin: 0 auto;width: 960px;height: 60px;font-size: 20px;background-color: #ffaa7f;text-align: center;color: #d8d8d8;margin: 0px auto 50px;
}四.制作蜡笔小新会员注册界面
做成这样的效果
在lbxx4.css写入代码：
* {margin: 0;padding: 0;}body {font-family: "微软雅黑";background-color: #ffaa00;
}.header {width: 960px;height: 400px;background: url(../img/IMG1.jpg) no-repeat;background-size: 960px 400px;margin: 50px auto 0px;
}.nav {text-align: center;font-size: 16px;width: 960px;height: 60px;margin: 0 auto;background-color: #ffaa7f;line-height: 60px;display: flex;}.nav span {margin: 0 auto;text-align: center;
}a:link,
a:visited {color: #000;text-decoration: none;
}.nav a {flex: 1;display: block;width: 137px;height: 55px;
}a:hover {background-color: #CD5C5C;
}a:active {color: #000;
}.huiyuan h3 {margin-top: -5px;text-align: center;font-size: 28px;height: 100px;font-family: "华文仿宋";line-height: 100px;
}.neirong {width: 963px;height: 640px;line-height: 30px;margin: 0 auto;background-color: #fff;
}
.neirong form tr td {line-height: 50px;
}
.neirong input {height: 20px;border: 2px solid #dedede;border-left: 2px solid #767676;border-top: 2px solid #767676;border-radius: 5px;}
.yi
{ border:1px solid #000;border-radius:5px;
} .neirong form {margin-left: 180px;
}.span {margin-left: 120px;
}.span,
.span1 {background-color: #D9E2EB;width: 200px;line-height: 20px;box-shadow: 1px 1px 1px 1px;
}.end {margin: 0 auto;width: 963px;height: 60px;font-size: 20px;background-color: #ffaa7f;text-align: center;color: #d8d8d8;margin: 0px auto 50px;
}index4.html写入代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>会员注册</title><link rel="stylesheet" href="../css/lbxx4.css" type="text/css"></head><body><div class="quanju"><!-- 头部模块 --><div class="header"></div><div class="nav"><span><a href="index. html">首页</a></span><span><a href="index2.html">我的偶像</a></span><span><a href="index3.html">我的家乡</a></span><span><a href="index4.html">会员注册</a></span><span><a href="#">最爱电影</a></span><span><a href="#">喜欢旅游</a></span><span><a href="#">登录</a></span></div><!-- 注册内容模块 --><div class="neirong"><div class="huiyuan"><h3>会员注册</h3></div><center><form action=""><table><tr><td>昵 称：</td><td><input type="text" placeholder="小明" ></td></tr><tr><td>性 别:</td><td><input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女</td></tr><tr><td>密 码:</td><td><input type="password" name="myname" maxlength="6"></td></tr><tr><td>电子邮箱:</td><td><input type="email" name="myeamil" placeholder="123456@123.com" multiple /></td></tr <tr><td>身份证号：</td> <td><input type="text" name="mystext" pattern="^\d{15}|\d{18}$" maxlength="18"/></td></tr><tr><td>手机号码：</td><td><input type="tel" name="mytel" pattern="^/d{11}$" maxlength="11"/></td></tr><tr><td>所 在 地：</td><td><select name="" id=""/><option value="" selected="selected" >广州</option><option value="">东莞</option><option value="">潮汕</option></select></td></tr><tr><td>意见反馈：</td><td><textarea name="yj" id="" cols="60" rows="5" class="yi">如果您有什么意见或者问题可以告诉我！</textarea></td></tr></table><table align="left"><tr><td><input type="submit" value="提交" class="span" style="height: 25px "><input type="submit" value="重置" class="span1" style="height: 25px"></td></tr></table></form></center></div><!-- 页脚模块 --><div class="end"><p>自我介绍<br />姓名：XXX学号：XXX</p></div></div></div></body>
</html>运行结果：
今天就分享到这里了，感谢预览~
