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

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

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

案例的演示与分析

行内块级元素

背景图片

在页面内实现水平居中

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

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

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

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

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. JavaSE25-Junit&注解

    1.Junit单元测试 1.1 测试分类 1. 黑盒测试:不需要写代码,给输入值,看程序是否能够输出期望的值. 2. 白盒测试:需要写代码的.关注程序具体的执行流程. Junit使用:白盒测试 步骤: ...

  2. react第十四单元(react路由-react路由的跳转以及路由信息)

    第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...

  3. Linux OOM Killer造成数据库访问异常排查

    服务器上的服务器访问异常,查看/va/log/messages发现如下: Sep 22 16:08:21 safeserver kernel: java invoked oom-killer: gfp ...

  4. matplotlib的学习10-Contours 等高线图

    import matplotlib.pyplot as plt import numpy as np ''' 画等高线 数据集即三维点 (x,y) 和对应的高度值,共有256个点. 高度值使用一个 h ...

  5. SpringBoot2 整合OAuth2组件，模拟第三方授权访问

    本文源码:GitHub·点这里 || GitEE·点这里 一.模式描述 授权服务 验证第三方服务的身份,验证邮箱用户的身份,记录和管理认证Token,为资源服务器提供Token校验.场景:第三方网站借 ...

  6. 简单介绍下各种 JavaScript 解析器

    作者:沧海 各种js解析器是前端工程化的基石,可以说如果没有它,很多工程化都无法正常执行,我们每天用到的babel.webpack.eslint.TypeScript背后都需要一套对应的js解析器,今 ...

  7. Jenkins自动化部署服务器及git 提交及git tag标签版本更新流程，超详细！

    工作中部署的项目和服务器较多时就用上了Jenkins进行自动部署 优点 不用在连接单独的服务器进行更新项目,再启动项目服务的操作了 更新部署都是自动的,比较方便.适合大批量的部署 一.git流程部分 ...

  8. Screaming Frog SEO Spider页面分析工具使用方法

    一.  下载地址:https://www.screamingfrog.co.uk/seo-spider/ 二.  使用教程 链接1: https://blog.csdn.net/a055350/art ...

  9. Docker本地镜像仓库搭建Nginx+BusyBox为例

    下载Busybox.Nginx镜像 docker pull busybox docker pull nginx 基于Busybox镜像创建容器,并在容器中做部分变更操作,生成新镜像 添加一些内容 正在 ...

  10. 知乎上看到的一篇讲解Epoll的文章，较形象生动

    作者:蓝形参链接:https://www.zhihu.com/question/20122137/answer/14049112来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...