如何用HBuider x网页制作蜡笔小新

目录

下载软件

​编辑

一.制作蜡笔小新个人介绍界面

二.制作蜡笔小新我的偶像界面

三.制作蜡笔小新我的家乡界面

四.制作蜡笔小新会员注册界面


下载软件

一、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&nbsp;&nbsp;&nbsp;&nbsp;学号: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>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</td><td><input type="text" placeholder="小明" ></td></tr><tr><td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</td><td><input type="radio" name="sex" checked="checked" />男&nbsp;&nbsp;<input type="radio" name="sex" />女</td></tr><tr><td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</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>所&nbsp;&nbsp;在&nbsp;&nbsp;地:</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>

运行结果:

今天就分享到这里了,感谢预览~ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/761132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UpGrow评论:AI能将我的Instagram粉丝数增加10倍吗?

UpGrow Review: Can AI Grow My Instagram Followers 10X? 概述 UpGrow是一款专注于Instagram增长的AI驱动型社交媒体工具。它通过其庞大的300多人的网络&#xff0c;先进的定位功能&#xff0c;实时分析以及卓越的客户服务&#xff0c;帮助用户有机地增长Instagram关注者。…

Oracle锁表解决方案

一&#xff1a;查看完成等待事件的SQL select distinct a.sid, a.event, a.seconds_in_wait, a.wait_class, c.sql_text, c.SQL_ID, d.spid, b.OSUSER, b.USERNAME, d.program from gv$session_wait a, gv$session b, gv$sqlarea c, gv$process d where a.sid b.sid and a.st…

leetcode排列硬币

求根公式解法 public static int arrangeCoins(int n) {return (int) ((Math.sqrt((long) n * 8 1) - 1) / 2);} 二分法 暂未实现 牛顿迭代 暂未实现

【机器学习-07】逻辑回归(Logistic Regression)的介绍和python实现

Logistic Regression 虽然被称为回归&#xff0c;但其实际上是分类模型&#xff0c;并常用于二分类。主要用来表示某件事情发生的可能性&#xff0c;因此因变量的范围在 0 和 1 之间。Logistic Regression 因其简单、可并行化、可解释强深受工业界喜爱。例如&#xff0c;探讨引…

MyBatis配置文件详解

下面是一个典型的 MyBatis 配置文件 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configurat…

Acwing.1355 母亲的牛奶(BFS)

题目 农夫约翰有三个容量分别为 A,B,C升的挤奶桶。 最开始桶 A和桶 B都是空的&#xff0c;而桶 C里装满了牛奶。 有时&#xff0c;约翰会将牛奶从一个桶倒到另一个桶中&#xff0c;直到被倒入牛奶的桶满了或者倒出牛奶的桶空了为止。 这一过程中间不能有任何停顿&#xff0…

前端静态开发案例-基于H5C3开发的仿照视频网站的前端静态页面-2 样式表部分和效果展示

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载 charset "utf-8"; /* 程序员田宝宝原创版权所有&#xff0c;仿冒必究&#xff0c;该界面是仿照某视频网站官网开发的静态页面 */ …

Python 操作sqllite

共有5个字段&#xff0c;实现增、查、改功能 import sqlite3 import threading import functoolsPATH_DATABASE threelang.dbdef synchronized(func):functools.wraps(func)def wrapper(self, *args, **kwargs):with self.lock:return func(self, *args, **kwargs)return wra…

基于Jenkins + Argo 实现多集群的持续交付

作者&#xff1a;周靖峰&#xff0c;青云科技容器顾问&#xff0c;云原生爱好者&#xff0c;目前专注于 DevOps&#xff0c;云原生领域技术涉及 Kubernetes、KubeSphere、Argo。 前文概述 前面我们已经掌握了如何通过 Jenkins Argo CD 的方式实现单集群的持续交付&#xff0c…

埃克拉姆·阿拉姆,MindPortal的CEO和联合创始人 - 采访系列

Ekram Alam 专访&#xff1a;MindPortal 创始人兼首席执行官 引言 Ekram Alam 是 MindPortal 的创始人兼首席执行官&#xff0c;该公司致力于开发非侵入式神经接口&#xff0c;改变人类与人工智能的交互方式。他们的使命是通过让用户仅通过思想与人工智能交互&#xff0c;从而…

c++11笔记 跨平台线程池

1. 左值&#xff1a; 简单的说&#xff0c;可以放在等号左边的变量可以称之为左值&#xff0c;可以对该变量进行取地址运算的是左值,左值在内存中有确切的地址&#xff0c;可以长期存在&#xff0c;拥有具体的名字的。 比如 int a 10; int *p &a;//这里的a就是左值 2.…

java 继承(下)

前面我们已经说明了什么是继承&#xff1f;继承的好处弊端等&#xff0c;不清楚的可参照链接 java 继承&#xff08;上&#xff09;-CSDN博客 本篇文章主要理解 继承中变量&#xff0c;构造方法&#xff0c;成员方法的访问特点。 1、继承中变量的访问特点 1.1 代码实现 不看…

亚马逊认证考试系列 - 知识点 - 安全组简介

AWS安全组是一种虚拟防火墙&#xff0c;用于控制实例进出网络流量。安全组是一个实例级别的防火墙&#xff0c;可以定义哪些流量可以进入或离开特定的EC2实例。 功能&#xff1a;安全组可以用于限制特定类型的流量&#xff0c;如HTTP或SSH&#xff0c;允许特定IP地址范围的流量…

若依添加页面

背景&#xff1a;我想增加的是一个收支管理的页面 views中直接添加income文件夹&#xff0c;里面放着index.vue 网页的菜单中添加这个页面的菜单

基于springboot的留守儿童爱心网站

技术&#xff1a;springbootmysqlvue 一、系统背景 现代社会&#xff0c;由于经济不断发展&#xff0c;旧物捐赠的数量也在不断的增加&#xff0c;人们对留守儿童爱心信息的需求也越来越高。 以往的留守儿童爱心的管理&#xff0c;一般都是纸质文件来管理留守儿童爱心信息&am…

分布式异步任务框架celery

Celery介绍 github地址&#xff1a;GitHub - celery/celery: Distributed Task Queue (development branch) 文档地址&#xff1a;Celery - Distributed Task Queue — Celery 5.3.6 documentation 1.1 Celery是什么 celery时一个灵活且可靠的处理大量消息的分布式系统&…

rust学习(简单handler实现)

用过android的同学对于handler应该都很了解&#xff0c;用起来比较方便。这里用rust设计了一个简单的rust。 1.处理接口 pub trait ProcessMessage {fn handleMessage(&self,msg:Message); } 2.Message结构体 pub struct Message {pub what:u32,pub arg1:i32,pub arg2:…

Java:设计模式

文章目录 参考简介工厂模式简单工厂模式工厂方法模式抽象工厂模式总结 单例模式预加载懒加载线程安全问题 策略模式 参考 知乎 简介 总体来说设计模式分为三类共23种。 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模…

Function与Module的差异与应用场景,symbolic() 和 forward() 是什么关系?

Function与Module的差异与应用场景 Function与Module都可以对pytorch进行自定义拓展&#xff0c;使其满足网络的需求&#xff0c;但这两者还是有十分重要的不同&#xff1a; Function一般只定义一个操作&#xff0c;因为其无法保存参数&#xff0c;因此适用于激活函数、pooli…

Unity构建详解(1)——SBP介绍

【前言】 Unity的资源工作流程分为导入、创建、构建、分发、加载。我们说的是其中的构建步骤。 构建是指将项目工程中的资源文件和代码整合程可执行文件的过程&#xff0c;构建的结果是生成可执行文件&#xff0c;在win平台上是exe&#xff0c;在Android平台上是apk&#xff…