zoukankan html css js c++ java

【Web】block、inline、inline-block元素与background属性概述(案例实现社交账号注册按钮效果)

步骤三：社交账号注册按钮效果

文章目录

步骤三：社交账号注册按钮效果
案例的演示与分析
CSS属性与HTML标签

块级元素
内联元素
行内块级元素
CSS的display属性
CSS中的背景图片属性

background-image
background-repeat
background-position属性
background-size

实现社交账号注册按钮案例

简单记录 - 慕课网 - 前端步骤三：社交账号注册按钮效果

了解元素的分类，更加灵活的选择标签，学会背景图片的设置和使用、最终实现一个社交账号注册的一个按钮的特效。

案例的演示与分析

行内块级元素

背景图片

在页面内实现水平居中

在这里插入图片描述

这几个背景图片在页面内实现水平居中是怎么做到的？

三张图片并排一起，在页面内实现水平居中

行内块级元素
背景图片
在页面内实现水平居中

分别学习去搞定，再去实现吧。

CSS属性与HTML标签

元素分类

块级元素

块级元素显示会独占一行，例如标题<h1></h1>,段落<p></p>等。

块级元素可以设置宽和高的。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width: 200px;
            height:200px;
            background: yellow;
        }
        #box2{
            width: 200px;
            height:200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box1">我好呀</div>
    <p id="box2">你好呀</p>
    <h1>我很好呀，你还好呀。</h1>
    <a href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
</body>
</html>

在这里插入图片描述

内联元素

内联元素又称行内元素，多个内联元素处在一行中，例如<a>等，容不下了会自动换行。

内联元素一般是不能设置的宽和高得，设置了是没用用的。

例如: 给a标签设置了宽和高，没作用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width: 200px;
            height:200px;
            background: yellow;
        }
        #box2{
            width: 200px;
            height:200px;
            background: red;
        }
        a{
            width: 200px;
            height: 200px;
            background:gray;
        }
    </style>
</head>
<body>
    <div id="box1">我好呀</div>
    <p id="box2">你好呀</p>
    <h1>我很好呀，你还好呀。</h1>
    <a  href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
</body>
</html>

在这里插入图片描述

行内块级元素

行内块级元素显示会与其他相邻元素出现在同一行中，并且两个相邻元素之间存在空白空间（默认的）。

行内块级元素是可以设置宽度和高度的。

例如，<button>就是一个行内块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width: 200px;
            height:200px;
            background: yellow;
        }
        #box2{
            width: 200px;
            height:200px;
            background: red;
        }
        a{
            width: 200px;
            height: 200px;
            background:gray;
        }
        button{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="box1">我好呀</div>
    <p id="box2">你好呀</p>
    <h1>我很好呀，你还好呀。</h1>
    <a  href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
    <a href="#">这是一个超链接</a>
    <br>
    <button>我是一个button按钮滴</button>
    <button>我是一个button按钮滴</button>
    <button>我是一个button按钮滴</button>
    <button>我是一个button按钮滴</button>
</body>
</html>

在这里插入图片描述

行内元素有内联元素和块级元素一些特型。

行捏元素的空白区是页面默认存在的，我们可以利用或解决点着空白区的这个问题。

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">
    <title>CSS的display属性</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        a{
            width:200px;
            height:200px;
            display:block;
            background: red;

        }
        span{
            width:200px;
            height:200px;
            display:block;
            background: green;
        }
    </style>
</head>
<body>
<a href="">请把我变成块元素</a>
<span>请把我变成块元素</span>
</body>
</html>

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的display属性</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        a{
            width:200px;
            height:200px;
            display:block;
            background: red;

        }
        span{
            width:200px;
            height:200px;
            display:block;
            background: green;
        }
    </style>
</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">
    <title>background-image属性</title>
    <style type="text/css">
        h1{
            background-image: url("imgs/btn1.png");
        }
    </style>
</head>
<body>
    <h1>我是个h1标签</h1>
</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">
    <title>background-repeat属性</title>
    <style type="text/css">
        h1{
            background-image: url("imgs/btn1.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>

效果：

在这里插入图片描述

background-position属性

background-position属性用于设置背景图像显示的初始位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-positiont属性</title>
    <style type="text/css">
        h1{
            background-image: url("imgs/btn1.png");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>

在这里插入图片描述

background-size

background-size属性用于设置背景图像显示的大小

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-positiont属性</title>
    <style type="text/css">
        h1{
            background-image: url("imgs/btn1.png");
            background-repeat: no-repeat;
            background-position: center;
            background-position: center;
            background-size: 800px;
        }
    </style>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>

在这里插入图片描述
显示的大小, 像素大,显示就大。

这些属性都需要自己去敲，别看看就行了，你看懂了就会了？听和看与自己实现完全是两回事的，来实现一个小案例。

实现社交账号注册按钮案例

三张图片并排一起，在页面内实现水平居中

行内块级元素
背景图片
在页面内实现水平居中

如何实现呢？

两行显示？？？行内块级元素，有内联元素特点一行显示不下就换行了。

在页面内实现水平居中，可以利用行内块级元素的特点

使用文本水平居中的属性实现居中效果。

理论真实案例

用css中的display属性可以随意转换元素分类

display:block 设置位行内块级元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>行内块级元素对齐方式</title>
    <style>
        div {
            margin: 0 auto;
            text-align: center;
        }

        a {
            display: inline-block;
            /* 设置为行内块级元素 */
            /* 行内块级元素允许设置宽度和高度 */
            width: 161px;
            height: 40px;

            background-repeat: no-repeat;
            background-size: 100%;
        }

        .btn1 {
            background-image: url("imgs/btn1.png");
        }

        .btn2 {
            background-image: url("imgs/btn2.png");
        }

        .btn3 {
            background-image: url("imgs/btn3.png");
        }

        .btn4 {
            background-image: url("imgs/btn4.png");
        }
    </style>
</head>

<body>
    <div>
        <a class="btn1" href="#"></a>
        <a class="btn2" href="#"></a>
        <a class="btn3" href="#"></a>
        <a class="btn4" href="#"></a>
    </div>
</body>

</html>

社交账号注册按钮效果

在这里插入图片描述

nine，搞定。

查看全文

相关阅读:
转：高并发场景下强一致预算/库存扣减方案
 转：Dubbo性能调优参数及原理
 转：java线程状态说明，Jstack线程状态BLOCKED/TIMED_WAITING/WAITING解释
 使用增强学习法之SQ3R主动阅读
 建立实用投资计划
 使用smarty方法实现目标
 主动学习
 小知识
 大脑的处理模式
 真正的随笔

原文地址：https://www.cnblogs.com/liuawen/p/12854060.html