【Web】block
- 作者: 五速梦信息网
- 时间: 2026年04月04日 13:55
步骤三：社交账号注册按钮效果
简单记录 - 慕课网 - 前端 步骤三：社交账号注册按钮效果
了解元素的分类，更加灵活的选择标签，学会背景图片的设置和使用、最终实现一个社交账号注册的一个按钮的特效。
案例的演示与分析行内块级元素
背景图片
在页面内实现水平居中
这几个背景图片在页面内实现水平居中是怎么做到的？
三张图片并排一起，在页面内实现水平居中
- 行内块级元素
- 背景图片
- 在页面内实现水平居中
分别学习去搞定，再去实现吧。
CSS属性与HTML标签元素分类
块级元素
块级元素
块级元素可以设置宽和高的。
例如：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>Title</title><br/>
<style type="text/css"><br/>
#box1{<br/>
width: 200px;<br/>
height:200px;<br/>
background: yellow;<br/>
}<br/>
#box2{<br/>
width: 200px;<br/>
height:200px;<br/>
background: red;<br/>
}<br/>
</style><br/>
</head>
<body>
<div id="box1">我好呀</div><br/>
<p id="box2">你好呀</p><br/>
<h1>我很好呀，你还好呀。</h1><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
</body>
</html>
内联元素
内联元素
内联元素一般是不能设置的宽和高得，设置了是没用用的。
例如: 给a标签设置了宽和高，没作用的。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>Title</title><br/>
<style type="text/css"><br/>
#box1{<br/>
width: 200px;<br/>
height:200px;<br/>
background: yellow;<br/>
}<br/>
#box2{<br/>
width: 200px;<br/>
height:200px;<br/>
background: red;<br/>
}<br/>
a{<br/>
width: 200px;<br/>
height: 200px;<br/>
background:gray;<br/>
}<br/>
</style><br/>
</head>
<body>
<div id="box1">我好呀</div><br/>
<p id="box2">你好呀</p><br/>
<h1>我很好呀，你还好呀。</h1><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
</body>
</html>
行内块级元素
行内块级元素
- 行内块级元素显示会与其他相邻元素出现在同一行中，并且两个相邻元素之间存在空白空间 （默认的）。
行内块级元素是可以设置宽度和高度的。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>Title</title><br/>
<style type="text/css"><br/>
#box1{<br/>
width: 200px;<br/>
height:200px;<br/>
background: yellow;<br/>
}<br/>
#box2{<br/>
width: 200px;<br/>
height:200px;<br/>
background: red;<br/>
}<br/>
a{<br/>
width: 200px;<br/>
height: 200px;<br/>
background:gray;<br/>
}<br/>
button{<br/>
width: 200px;<br/>
height: 100px;<br/>
}<br/>
</style><br/>
</head>
<body>
<div id="box1">我好呀</div><br/>
<p id="box2">你好呀</p><br/>
<h1>我很好呀，你还好呀。</h1><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
<a href="#">这是一个超链接</a><br/>
<br><br/>
<button>我是一个button按钮滴</button><br/>
<button>我是一个button按钮滴</button><br/>
<button>我是一个button按钮滴</button><br/>
<button>我是一个button按钮滴</button><br/>
</body>
</html>
行内元素有内联元素和块级元素一些特型。
行捏元素的空白区是页面默认存在的，我们可以利用或解决点着空白区的这个问题。
CSS的display属性
CSS的display属性
CSS提供的display属性可以设置任意标签为块级、内联或行内块级元素
- 值为block的话，表示当前标签是块级元素。
- 值位inline的话，表示当前标签是内联元素。
- 值位inline-block的话，表示当前标签是行内块级元素。
CSS的display属性的小案例练习
参考下图，分别将a标签和span标签设置成块级元素，并设置宽度、高度和背景色
效果图：
任务
1、分别将a标签和span标签设置成块级元素
2、分别设置a标签和span标签宽度和高度都是200px
3、设置a标签的背景色是红色，设置span标签的背景色是
任务提示 1、红色是red、绿色是green 2、设置 display:block;就行
实现：
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>CSS的display属性</title><br/>
<style><br/>
*{<br/>
padding:0;<br/>
margin:0;<br/>
}<br/>
a{<br/>
width:200px;<br/>
height:200px;<br/>
display:block;<br/>
background: red;
}
span{<br/>
width:200px;<br/>
height:200px;<br/>
display:block;<br/>
background: green;<br/>
}<br/>
</style><br/>
</head>
<body>
<a href=“”>请把我变成块元素</a>
<span>请把我变成块元素</span>
</body>
</html>
实现
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>CSS的display属性</title><br/>
<style><br/>
*{<br/>
padding:0;<br/>
margin:0;<br/>
}<br/>
a{<br/>
width:200px;<br/>
height:200px;<br/>
display:block;<br/>
background: red;
}
span{<br/>
width:200px;<br/>
height:200px;<br/>
display:block;<br/>
background: green;<br/>
}<br/>
</style><br/>
</head>
<body>
<a href=“”>请把我变成块元素</a>
<span>请把我变成块元素</span>
</body>
</html>
效果
block
inline-block
inline
CSS中的背景图片属性
什么是背景图片？
所谓背景图片就是引入一张外部图片作为某个标签的背景。
引入图片做标签的背景
CSS中背景图片属性有哪些呢？
background-image
background-image属性用于设置一个或多个背景图像
格式是这样的
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>background-image属性</title><br/>
<style type="text/css"><br/>
h1{<br/>
background-image: url("imgs/btn1.png");<br/>
}<br/>
</style><br/>
</head>
<body>
<h1>我是个h1标签</h1><br/>
</body>
</html>
效果：
background-repeat
background-repeat属性定义背景图像的平铺方式
background-repeat属性的值 no-repeat决定图像不会被重复
no-repeat 不重复 背景图不重复平铺显示
repeat-x 水平重复
repeat-y 垂直重复
例子
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>background-repeat属性</title><br/>
<style type="text/css"><br/>
h1{<br/>
background-image: url("imgs/btn1.png");<br/>
background-repeat: no-repeat;<br/>
}<br/>
</style><br/>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>
效果：
background-position属性
background-position属性用于设置背景图像显示的初始位置
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>background-positiont属性</title><br/>
<style type="text/css"><br/>
h1{<br/>
background-image: url("imgs/btn1.png");<br/>
background-repeat: no-repeat;<br/>
background-position: center;<br/>
}<br/>
</style><br/>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>
background-size
background-size属性用于设置背景图像显示的大小
例如
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>background-positiont属性</title><br/>
<style type="text/css"><br/>
h1{<br/>
background-image: url("imgs/btn1.png");<br/>
background-repeat: no-repeat;<br/>
background-position: center;<br/>
background-position: center;<br/>
background-size: 800px;<br/>
}<br/>
</style><br/>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>
显示的大小, 像素大,显示就大。
这些属性都需要自己去敲 ，别看看就行了，你看懂了就会了？ 听和看与自己实现完全是两回事的，来实现一个小案例。
实现社交账号注册按钮案例三张图片并排一起，在页面内实现水平居中
- 行内块级元素
- 背景图片
- 在页面内实现水平居中
如何实现呢？
两行显示？？？行内块级元素，有内联元素特点 一行显示不下 就换行了。
在页面内实现水平居中，可以利用行内块级元素的特点
使用文本水平居中的属性实现居中效果 。
理论 真实案例
用css中的display属性可以随意转换元素分类
display:block 设置位行内块级元素
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8"><br/>
<title>行内块级元素对齐方式</title><br/>
<style><br/>
div {<br/>
margin: 0 auto;<br/>
text-align: center;<br/>
}
a {
display: inline-block;<br/>
/* 设置为行内块级元素 */<br/>
/* 行内块级元素允许设置宽度和高度 */<br/>
width: 161px;<br/>
height: 40px;
background-repeat: no-repeat;
background-size: 100%;<br/>
}
.btn1 {
background-image: url("imgs/btn1.png");<br/>
}
.btn2 {
background-image: url("imgs/btn2.png");<br/>
}
.btn3 {
background-image: url("imgs/btn3.png");<br/>
}
.btn4 {
background-image: url("imgs/btn4.png");<br/>
}<br/>
</style><br/>
</head>
<body>
<div><br/>
<a class="btn1" href="#"></a><br/>
<a class="btn2" href="#"></a><br/>
<a class="btn3" href="#"></a><br/>
<a class="btn4" href="#"></a><br/>
</div><br/>
</body>
</html>
社交账号注册按钮效果
nine，搞定。
相关文章
-
【WebApi】通过HttpClient调用Web Api接口
【WebApi】通过HttpClient调用Web Api接口
- 互联网
- 2026年04月04日
-
【Win 10 应用开发】导入.pfx证书
【Win 10 应用开发】导入.pfx证书
- 互联网
- 2026年04月04日
-
【Win 10 应用开发】在App所在的进程中执行后台任务
【Win 10 应用开发】在App所在的进程中执行后台任务
- 互联网
- 2026年04月04日
-
【VC++技术杂谈004】使用微软TTS语音引擎实现文本朗读
【VC++技术杂谈004】使用微软TTS语音引擎实现文本朗读
- 互联网
- 2026年04月04日
-
【Unity3D】使用GL绘制线段
【Unity3D】使用GL绘制线段
- 互联网
- 2026年04月04日
-
【Unity3D】UGUI之Button
【Unity3D】UGUI之Button
- 互联网
- 2026年04月04日
