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

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

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

案例的演示与分析

行内块级元素

背景图片

在页面内实现水平居中

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

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

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

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

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属性

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，搞定。

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

  1. Web前端社交账号注册按钮

    [外链图片转存失败(img-vXBQK5k4-1564155857781)(https://upload-images.jianshu.io/upload_images/11158618-ceccff ...

  2. block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  3. CSS background 属性

    CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...

  4. html中的块元素(Block)和内联元素(Inline)(转)

    我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...

  5. 块元素block，内联元素inline; inline-block;

    block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...

  6. 关于block和inline元素的float

    CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...

  7. 块级元素和行内元素的区别 (block vs. inline)

    块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...

  8. 【学习笔记】block、inline（替换元素、不可替换元素）、inline-block的理解

    本文转载 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).blo ...

  9. block（块级元素）和 inline（内联元素） 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

随机推荐

  1. 看我如何用微信上线CobaltStrike

    前言 DLL劫持漏洞是老生常谈的一个漏洞,已经被前辈们各种奇技淫巧玩烂.但DLL劫持技术在后渗透和域渗透中的权限提升和权限维持都起到了至关重要的作用.本文简单剖析DLL劫持技术并通过实例应用来查看如何 ...

  2. 配置nginx支持THINKPHP的PATH_INFO

    ThinkPHP支持通过PATHINFO和URL rewrite的方式来提供友好的URL,但是Nginx中默认是不支持PATHINFO的,所以我们需要修改nginx.conf文件. location ...

  3. PHP代码审计学习-PHP-Audit-Labs-day2

    filter_var()函数 filter_var() 函数通过指定的过滤器过滤一个变量.如果成功,则返回被过滤的数据.如果失败,则返回 FALSE. filter_var(variable, fil ...

  4. C#数据结构-线索化二叉树

    为什么线索化二叉树? 对于二叉树的遍历,我们知道每个节点的前驱与后继,但是这是建立在遍历的基础上,否则我们只知道后续的左右子树.现在我们充分利用二叉树左右子树的空节点,分别指向当前节点的前驱.后继,便 ...

  5. db2常用操作

    1. db2建立远程节点编目及删除 db2 catalog tcpip node nodeName remote remoteIp server remotePort db2 list node di ...

  6. ElasticSearch中head插件的简单用法

    1.首先在左侧打开Query栏. 2.Query下方的第一栏是分别输入es的地址.端口号.index.type. 3.Query下方的第二栏是输入将要执行的方式,旁边的下拉框是辅助选择执行的类型,如图 ...

  7. js上 四、数据类型转换

    1. 转布尔类型 Boolean():可以将任意类型的数据转为布尔类型: 语法:Boolean(值) 规则:

  8. Eureka系列(九)Eureka自我保护机制

      因为本篇简文并不是自己总结的,而是当了下搬运工,所以直接直接附上原作者博客链接. 参考链接:   1.SpringCloud Eureka自我保护机制   2.Spring Cloud Eurek ...

  9. 闭关修炼180天--手写IOC和AOP(xml篇)

    闭关修炼180天--手写IOC和AOP(xml篇) 帝莘 首先先分享一波思维导图,涵盖了一些Spring的知识点,当然这里并不全面,后期我会持续更新知识点. 在手写实现IOC和AOP之前(也就是打造一 ...

  10. Qt QChart 创建图表

    Qt QChart 创建图表 @ 目录 Qt QChart 创建图表 效果 流程 代码 1. 饼图 2. 柱图 3. 折/曲线图 4. 区域图 效果 流程 graph LR q(value 数据) q ...