使用HBuilder制作一个简单的HTML5网页

Daniel的万事通杂货铺

于 2024-07-29 22:41:59 发布

阅读量355

点赞数

分类专栏： APP开发文章标签： Hbuilder

原文链接：https://blog.csdn.net/m0_53156691/article/details/122503759

版权

APP开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用HBuilder制作一个简单的HTML5网页

写在前面：开始入门网页制作，写下第一篇博文作为记录。纯纯小白一个，如有阅览者，欢迎批评指正！❤

先放上效果图：
在这里插入图片描述

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

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
   </body>
</html>

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

<!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%;
           margin:0;
           padding:0;
       }
       body{
           background: red url(img/index.jpg) center center;
           background-size: cover;
           position: relative;/* 相对位置 */
       }
       .container{
           position: absolute;/* 绝对位置 */
           top: 50%;
           text-align: center;
           width: 100%;
           transform: translateY(-50%);/* 将div元素上移至自身高度的50% */
       }
       h1{
           line-height: 90px;
           color: royalblue;
           font-size: 50px;
       }
       p{
           line-height: 80px;
           color: royalblue;
           font-size: 22px;
       }
       .btn{
           width: 200px;
           height: 60px;
           background-color: #7cacae;
           color: #fff;
           font-size: 24px;
           line-height: 60px;
           margin: 30px auto;/* 设置其上下边距：30px 左右边距：自动 */
           border-radius: 10px;/* 给按钮增加圆角样式 */
           transition: 1s;
       }
       .btn:hover{
           background-color: royalblue;
           width: 300px;
           height: 100px;
           line-height: 100px;
           font-size: 36px;
           margin: 100px auto;
       }
       </style>
   </head>
   <body>
       <div class="container">
       <h1>Let's start our first page!</h1>
       <p>欢迎大家来到LinWit的制作的网页，
       一起开启精彩的世界吧！
       </p>
       <div class="btn" id="start">start</div>
       </div>
   </body>
</html>