个人博客网站制作论文,中工信融网站建设,绵阳建设局官方网站,图片展示型网站目录 下载软件
编辑
一.制作蜡笔小新个人介绍界面
二.制作蜡笔小新我的偶像界面
三.制作蜡笔小新我的家乡界面
四.制作蜡笔小新会员注册界面 下载软件
一、HBuilder IDE的下载 HBuilder下载官网地址#xff1a;http://www.pc6.com/mac/140609.htmlHBuilderX官方电脑版…目录 下载软件
编辑
一.制作蜡笔小新个人介绍界面
二.制作蜡笔小新我的偶像界面
三.制作蜡笔小新我的家乡界面
四.制作蜡笔小新会员注册界面 下载软件
一、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
htmlheadmeta charsetutf-8 /title/titlelink relstylesheet href../css/lbxx.css typetext/css/headbody!-- 头部模块 --div classheader/divdiv classnavspana href#首页/a/spanspana hrefindex2.html我的偶像/a/spanspana hrefindex3.html我的家乡/a/spanspana href#我的学校/a/spanspana href#最爱电影/a/spanspana href#喜欢旅游/a/spanspana href#登录/a/span/div!-- 图片模块 --div classtupianh1个人介绍/h1div classnewsimg src../img/IMG2.jpg/divdiv class xingxiul!-- 介绍模块 --h3个人信息/h3li姓名 蜡笔小新/lili名称 クレヨンしんちゃん /lili别名 Crayon Shin-chan /lili作者 臼井仪人(2009年逝世) /lili类型 生活搞笑日常/lili地区 日本/li/ul/divdiv classjianjieh3个人简介/h3p《蜡笔小新》是由日本漫画家臼井仪人创作的漫画。1990年8月在《weekly漫画action》上开始连载。1992年根据漫画改编的同名动画在朝日电视台播出。2010年7月16日臼井仪人遗作《蜡笔小新》第50卷出版。在作者臼井仪人去世后作品由“臼井仪人UY;工作室”沿袭原作风格继续创作。臼井仪人先生说之所以会创造出小新这个形象是因为他在观察自己的孩子的时候发现小孩子的想法往往非常独特以至于作者被小孩的世界所吸引。所有的小孩都有乖巧和调皮的两面性。这种两面性对作者来讲是十分有趣的。/p/divdiv idaihaoh1个人爱好/h1div classaihao3/div!-- 爱好模块 --div classaihao4img src../img/IMG3.jpgP爱好一/P/divdiv classaihao4img src../img/IMG4.jpgP爱好二/P/divdiv classaihao4img src../img/IMG5.jpgP爱好三/P/divdiv classaihao4img src../img/IMG6.jpgP爱好四/P/div/div/div!-- 页脚模块 --div classendp自我介绍官网/pp姓名xxxnbsp;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;
} ctrls保存后点击Edge弹出界面如图所示 运行效果 二.制作蜡笔小新我的偶像界面
制作成这样的界面 index2.html写入代码
!DOCTYPE html
htmlheadmeta charsetutf-8title我的偶像/titlelink relstylesheet href../css/lbxx2.css typetext/css/headbody!-- 头部模块 --div classheader/divdiv classnavspana hrefindex.html首页/a/spanspana href#我的偶像/a/spanspana hrefindex3.html我的家乡/a/spanspana href#我的学校/a/spanspana href#最爱电影/a/spanspana href#喜欢旅游/a/spanspana href#登录/a/span/divdiv!-- 偶像模块 --div classerh3我的偶像/h3ulliimg src../img/IMG7.jpg altp青蛙小新呱呱呱~/p/liliimg src../img/IMG8.jpg altp小新喝饮料这么好喝眼睛都闭上了/p/liliimg src../img/IMG9.jpg altp小新开车~/p/li/ulul liimg src../img/IMG10.jpg altp小新狗狗爬你身上了~/p/liliimg src../img/IMG11.jpg altp小新和狗狗玩耍~/p/liliimg src../img/IMG12.jpg altp我叫蜡笔小新我是一名摄影师~/p/li/ul/div!-- 页脚模块 --div classendp自我介绍/ppxxx学号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;
}ctrls保存后点击Edge弹出界面如图所示运行结果 三.制作蜡笔小新我的家乡界面 制作成这样的界面 index3.html写入代码
!DOCTYPE html
htmlheadmeta charsetutf-8title我的家乡/titlelink relstylesheet href../css/lbxx3.css typetext/css/headbodydiv classquanju!-- 头部模块 --div classheader/divdiv classnavspana hrefindex.html首页/a/spanspana hrefindex2.html我的偶像/a/spanspana href#我的家乡/a/spanspana href#我的学校/a/spanspana href#最爱电影/a/spanspana href#喜欢旅游/a/spanspana href#登录/a/span/divdiv classhomeh2我的家乡/h2dldtimg classtu src../img/IMG13.jpg //dtddspan小新的家乡/spanbr /p与东京和横滨不同的是春日部市是一个彻彻底底的小城市。一下电车真的就感受到了春日部市独特的小城气息以及一种平凡宁静的普通生活之感没错东京作为首都是繁华的象征横滨作为知名旅游城市也是永远热热闹闹然而春日部市就像《蜡笔小新》中描绘的那样带给人们的是一种普通的生活。走在春日部市的街上听着头顶上传来的乌鸦叫想到小时候觉得《蜡笔小新》中乌鸦出现的次数那么多不符合生活实际现在才发现这完全是来源于生活的。/p/dd/dlh2家乡美景/h2ulliimg src../img/IMG14.jpg alt图一h4春天/h4/liliimg src../img/IMG15.jpg alt图二h4夏天/h4/li/ululliimg src../img/IMG16.jpg alt图三h4秋天/h4/liliimg src../img/IMG17.jpg alt图四h4冬天/h4/li/ul/divdiv classendp自我介绍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
htmlheadmeta charsetutf-8title会员注册/titlelink relstylesheet href../css/lbxx4.css typetext/css/headbodydiv classquanju!-- 头部模块 --div classheader/divdiv classnavspana hrefindex. html首页/a/spanspana hrefindex2.html我的偶像/a/spanspana hrefindex3.html我的家乡/a/spanspana hrefindex4.html会员注册/a/spanspana href#最爱电影/a/spanspana href#喜欢旅游/a/spanspana href#登录/a/span/div!-- 注册内容模块 --div classneirongdiv classhuiyuanh3会员注册/h3/divcenterform actiontabletrtd昵nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;称/tdtdinput typetext placeholder小明 /td/trtrtd性nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;别:/tdtdinput typeradio namesex checkedchecked /男nbsp;nbsp;input typeradio namesex /女/td/trtrtd密nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;码:/tdtdinput typepassword namemyname maxlength6/td/trtrtd电子邮箱:/tdtdinput typeemail namemyeamil placeholder123456123.com multiple //td/tr trtd身份证号/td tdinput typetext namemystext pattern^\d{15}|\d{18}$ maxlength18//td/trtrtd手机号码/tdtdinput typetel namemytel pattern^/d{11}$ maxlength11//td/trtrtd所nbsp;nbsp;在nbsp;nbsp;地/tdtdselect name id/option value selectedselected 广州/optionoption value东莞/optionoption value潮汕/option/select/td/trtrtd意见反馈/tdtdtextarea nameyj id cols60 rows5 classyi如果您有什么意见或者问题可以告诉我/textarea/td/tr/tabletable alignlefttrtdinput typesubmit value提交 classspan styleheight: 25px input typesubmit value重置 classspan1 styleheight: 25px/td/tr/table/form/center/div!-- 页脚模块 --div classendp自我介绍br /姓名XXX学号XXX/p/div/div/div/body
/html
运行结果 今天就分享到这里了感谢预览~
