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

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

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

案例的演示与分析

行内块级元素

背景图片

在页面内实现水平居中

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

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

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

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

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. STL——容器（List）list 的反序排列

    list.reverse(); //反转链表,比如list包含1, 2, 3, 4, 5五个元素,运行此方法后,list就包含5, 4, 3, 2, 1元素. 1 #include <iostr ...

  2. C++ 虚函数表与多态 —— 关键字 final 的用法

    final 字面上最终.最后.不可改变的意思,final 这个关键字在 Jave PHP C++中都有用到,其作用也基本一致. C++中的 final 是C++11新增,他可以用来修饰类,让类无法被继 ...

  3. Day4 dict和set

    dict  -- dictionary    一组key的集合,包含key与value的对应.        Python内置的字典,在其他语言中称为map,使用key-value存储,具有极快的查找 ...

  4. base64 基本使用 和os模块使用

    1  base64 的基本使用 import base64 with open('../static/upload/63bc620d1594779d6a98c53a3a8db1e5.png','rb' ...

  5. JavaSE10-继承&super&this&抽象类

    1.继承 1.1 概述 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那一个类即可. 其中,多个类可以称为子类,单独那一个类称为父类.超类(s ...

  6. k8s ingress - traefik

    前面提到过 k8s 的 ingress 有 ingress-nginx,traefik,haproxy 等多种.今天来实践一下 tarefik. 闲言少叙,直接上代码. # cat traefik.y ...

  7. Kafka Producer TimeoutException

    基本需求 程序读取HDFS上的日志发送至Kafka集群 由于日志量较大 每小时约7亿条+ 采用多线程 多producer实例发送 TPS 可达到120W+ 修改前Producer配置 val prop ...

  8. Python高级语法-GIL-理解（4.1.1）

    @ 目录 1.结论 2.代码 关于作者 1.结论 当一个py文件执行多进程的时候,是真的在并发 当一个文件在使用多线程的时候,伪并发,在同一时刻只有一个线程执行,因为GIL Guido都说了,不好除这 ...

  9. Python字符串常用的一些东西

    字符串的常用方法dir(str).查看某一方法的用法help(str.xxx). 1,索引和切片: 2,len():查看字符串的总长度. 3,+,拼接一个或多个字符串. 4,in,判定字符是否在字符串 ...

  10. 【进程/作业管理】篇章一：Linux进程及其管理（进程管理类工具）----pstree、ps、top、htop、kill、（killall、pkill、pgrep、pidof）

    主要讲解进程管理类命令及工具的使用:pstree.ps.top.htop.kill.(killall.pkill.pgrep.pidof) pstree 以树状图的方式展现进程之间的派生关系,显示效果 ...