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


Posted in HTML / CSS onJuly 07, 2022

写在前面:开始入门网页制作,写下第一篇博文作为记录。纯纯小白一个

先放上效果图:

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

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

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

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

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

解读:

第1行代码是一个声明,告诉 Web 浏览器当前页面应该使用哪个HTM版本进行解析。

< html >标签是整个页 的最外层围墙,用来“包裏”页面的所有内容。

< head >标签相当于我面的身份证,包括了页面的所有重要信息,这一部分内容不会呈现在页面上,浏览者不能直接看到。

< body >部分是页面的主体部分,包含了所有在浏览器上要呈现的内容信息,也就是浏览者可以着到的内容。

在< body >标签内加入标题和内容:

  • 标题使用<h1>标签,
  • 内容使用< p >标签,
  • 按钮使用< div >标签。

这里,由于< body > 标签里的元素是散乱的,所以需要< div >标签充当一个“透明的盒子”,将元素收纳在盒子内部。可以使用class属性给< div >标签增加类名以作区分。

<body>
		<div class="container">
		<h1>Let's start our first page!</h1>
		<p>欢迎大家来到LinWit的制作的网页,
		一起开启精彩的世界吧!
		</p>
		<div class="btn" id="start">start</div>
		</div>
	</body>

接下来主要是在页面中使用CSS进行界面的设计与美化,这里需要在< head >标签中新建一个< style > 标签,页面中的标签都放在< style >标签内部。
(具体见文末完整代码)

一些CSS设计的“出彩点”:

页面动态效果:当鼠标移动到按钮上时,让按钮的形态发生变化。及在按钮选择器后面加上:hover,表示鼠标移动到按钮上的状态。

.btn:hover{
			background-color: royalblue;
			width: 300px;
			height: 100px;
			line-height: 100px;
			font-size: 36px;
			margin: 100px auto;
		}

当鼠标放上按钮时,变化效果如下:

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

在手机上查看页面样式调整:在HTML文档的< meta >中设置移动端的viewport显示窗口。(注:在电脑上可运行在浏览器上时进入开发者模式,亦可查看在手机上的界面样式)

<meta name="viewport" content="width=device-width,initial-scale=1 .0 user-scale"/>

在手机(不同屏幕大小的设备)上查看页面样式如下(一些布局都进行了相应的变化):

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

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

<!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>

 到此这篇关于使用HBuilder制作一个简单的HTML5网页的文章就介绍到这了,更多相关HBuilder制作HTML5网页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 

Tags in this post...

HTML / CSS 相关文章推荐
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
使用CSS定位HTML元素的实现方法
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 #HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 #HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 #HTML / CSS
CSS SandBox应用场景及常见问题
CSS的calc函数用法小结
Jun 25 #HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 #HTML / CSS
You might like
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php文件上传的简单实例
2013/10/19 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
结婚邀请函范文
2014/01/14 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
教师节联欢会主持词
2015/07/04 职场文书
导游词之西安骊山
2019/12/20 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Python实现批量自动整理文件
2022/03/16 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript