目录
下载软件
一、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>运行结果：
今天就分享到这里了，感谢预览~
8060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
