利用hbuilder制作网页,用hbuilder做网页实例子

　　写在前面：开始制作介绍性的网页，把第一篇博文写下来作为记录。纯白色的

　　先放上效果图：

　　使用HBuilderX编辑器创建一个“基本HTML项目”:

　　双击index.html打开页面。项目中已经默认生成了所需的HTML5结构。代码如下：

　　！DOCTYPE html htmlheadmeta charset= utf-8 title/title/head body/body/html解读：

　　第一行代码是一条语句，告诉Web浏览器应该使用哪个HTM版本来解析当前页面。

　　Html标签是整个页面的最外壁，用来“包裹”页面的所有内容。

　　标签相当于我的身份证，里面包含了页面的所有重要信息。这部分内容不会呈现在页面上，访问者无法直接看到。

　　正文部分是页面的主要部分，包含了所有要在浏览器上呈现的内容信息，也就是访问者能够接触到的内容。

　　在标记中添加标题和内容：

　　对标题使用<

>标记，对内容使用标记，对按钮使用div标记。这里，因为body标签中的元素是分散的，所以div标签有必要充当“透明盒子”的角色，将元素存储在盒子内部。您可以使用class属性将类名添加到div标记中，以进行区分。

　　让我们开始我们的第一页！/h1p欢迎来到LinWit制作的网页，让我们一起开启一个精彩的世界！/pdiv class= BTN id= start start/div/div/body接下来，我们主要在页面中使用CSS来设计和美化界面。这里，我们需要在head标签中创建新的style标签，页面中的所有标签都放在style标签内。

　　(详见文末完整代码)

　　CSS设计的一些“亮点”:

　　动态页面效果：当鼠标移动到按钮上时，按钮的形状会发生变化。并且在按钮选择器后添加：hover，表示鼠标移动到按钮的状态。BTN:hover {背景色：皇家蓝；宽度：300px高度：100px行高：100px字体大小：36px边距：100px自动；}当鼠标放在按钮上时，变化效果如下：

　　手机查看页面样式调整：在HTML文档的meta中设置移动viewport显示窗口。(注：在电脑上运行浏览器可以进入开发者模式，也可以在手机上查看界面风格)

　　Meta= viewport content= width=设备宽度，initial-scale=1。0用户比例/在手机(不同屏幕尺寸的设备)上查看页面样式如下(部分布局已相应更改):

　　最后附上一个简单web界面的代码：

　　！DOCTYPE html html lang= en head meta name= viewport content= width=device-width，initial-scale=1 . 0 user-scale /meta charset= utf-8 /title document/title style html，body { height:100%；边距：0；填充：0；} body { background:red URL(img/index . jpg)center中心；背景-尺寸：封面；位置：相对；/*相对位置*/}。容器{位置：绝对；/*绝对位置*/top:50%；文本对齐：居中；宽度：100%；transform:translate y(-50%)；/*将div元素移动到其高度的50% */} h1 { line-height:90px；颜色：皇家蓝；字体大小：50px} p {行高：80px颜色：皇家蓝；字体大小：22px}.btn {宽度：200px高度：60px背景色：# 7cacae颜色：# fff字体大小：24px行高：60px边距：30px自动；/*设置上下页边距：30px左右。边距：automatic */border-radius:10px；/*给按钮添加圆角*/transition:1s；}.BTN:hover {背景色：皇家蓝；宽度：300px高度：100px行高：100px字体大小：36px边距：100px自动；}/style/headbody div class= container h1让我们开始第一页吧！/h1p欢迎来到LinWit制作的网页，让我们一起开启一个精彩的世界！/pdiv class= BTN id= start start/div/div/body/html就是这样。本文介绍了如何用HBuilder制作一个简单的HTML5网页。有关使用HBuilder制作HTML5网页的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。