Preparation—HBuilder X

如有需要,自行点击:HBuilder X下载

下载安装 HBuilder X,创建一个新的普通项目并命名为 Test1,左侧视图右击 Test1,新建一个 html 文件并命名为 introduction。

Step 1:设置背景

通过项目 Test1 的保存路径,找到 Test1 文件夹并在其中新建一个文件夹命名为 img,用来保存在制作网页时所需要的所有图像。

插入背景图片

CSS background-image 属性描述了元素的背景图像.默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
CSS background-size 属性指定背景图像的大小,cover:覆盖

<style>
body 
		{
			background-image: url(img/背景2.jpg);
			background-size: cover;
		}
</style>

插入透明背景框

div 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。CSS3 opacity 属性可以设置一个div元素的透明度级别。

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
		<title>咸盐月饼的个人介绍</title>
<style>
div.transbox
		{
		  width: 1050px;
		  height: 420px;
		  margin: 90px 90px;
		  background-color: #ffffff;
		  border: 1px solid #FFFFFF;
		  opacity:0.8;
		}
</style></head>
<body>
<div class="background">
<div class="transbox">
</div></div>
</body>
</html>

Step 2:设置标题与段落

标题是通过 h1 - h6 标签进行定义的,段落是通过 p 标签定义的。

标题与段落的插入与布局

CSS text-align 属性指定元素文本的水平对齐方式。
CSS margin 简写属性在一个声明中设置所有外边距属性。

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>咸盐月饼的个人介绍</title>
<style>
		h1 {text-align: center;}
		h2.ex1 {margin-left:5cm;}
		h3.ex1 {margin-left:5cm;}
		p{text-align: right;}
		p.ex1{margin-right: 2cm;}
		p{color:mediumpurple}
</style>
</head>
<body>
			<h1>个人简介</h1>
			<h2 class="ex1">咸盐月饼</h2>
			<h3 class="ex1">学号:**********</h3>
			<h3 class="ex1">班级:**********</h3>
			<h3 class="ex1">学院:电商与物流</h3>
			<h3 class="ex1">学校:北京工商大学</h3>
			<p class="ex1">这个人很懒,什么都没有留下......</p>
</body>
</html>

Step 3:设置图片

在 HTML 中,图像由 img 标签定义,只包含属性且没有闭合标签。要在页面上显示图像,需要使用源属性 src,它的值是图像的 URL 地址。

图像的插入与布局

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。布局与标题 CSS margin 布局同理。

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>咸盐月饼的个人介绍</title>
<style>
   img.ex1{margin-left:5cm;}
</style>
</head>
<body>
    <img src="img/头像.jpg" height="50px" width="50px" class="ex1" />
</body>
</html>

Step 4:设置链接

HTML 使用标签 a 来设置超文本链接,使用了 href 属性来描述链接的地址。点击链接可以从一张页面跳转到另一张页面。

超链接的插入与布局

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>咸盐月饼的个人介绍</title>
<style>
		h3.ex1 {margin-left:5cm;}
</style>
</head>
<body>
	  <h3 class="ex1">学校:<a href="http://www.btbu.edu.cn/">北京工商大学</a></h3>
</body>
</html>

超链接颜色形式的改变

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>咸盐月饼的个人介绍</title>
		<style>
/*cc:change color*/
		a.cc:visited {color:#0000ff;}
		a.cc:hover {color:#ffcc00;}
</style>
</head>
<body>
		<h3 class="ex1">学校:<a class="cc" href="http://www.btbu.edu.cn/">北京工商大学</a></h3>
</body>
</html>

Step 5:设置音频

通过项目 Test1 的保存路径,找到 Test1 文件夹并在其中新建一个文件夹命名为 bgm,用来保存在制作网页时所需要的所有音频。
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
使用插件 embed 标签添加在页面上,定义外部(非 HTML)内容的容器。

<body>
	<embed height="50" width="100" src="bgm/Sunburst.mp3">
</body>

The end—成果展示

在这里插入图片描述
你也想做出一个独属于自己的 perfect 网页吗?那就从 HTML 开始吧→HTML基础标签和属性学习

! 完整代码来啦:【完整代码】用HTML/CSS制作一个美观的个人简介网页

!喜欢的话不要忘记【一键三连】哦!
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐