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

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

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

案例的演示与分析

行内块级元素

背景图片

在页面内实现水平居中

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

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

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

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

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. Jwt令牌创建

    添加依赖 <dependencies> <!-- jwt --> <dependency> <groupId>io.jsonwebtoken</g ...

  2. mysql主从双机keepalived配置

    1.关闭selinux SELINUX=disabled 2.yum安装keepalived yum install -y keepalived 3.修改配置文件 主库配置文件: ! Configur ...

  3. Elastic Search 学习之路（二）——inverted index(反向索引)

    这是篇翻译文,图画的挺有意思. Elastic使用非常特殊的数据结构,称作反向索引.反向索引中,包括了一组document中出现的唯一的单词,和对应的单词,所出现的位置.反向索引是在ES中,docum ...

  4. 开源一套原创文本处理工具：Java+Bat脚本实现自动批量处理对账单工具

    原创/朱季谦 这款工具是笔者在2018年初开发完成的,时隔两载,偶然想起这款小工具,于是,决定将其开源,若有人需要做类似Java批处理实现整理文档的工具,可参考该工具逻辑思路来实现. 该工具是运行在w ...

  5. C语言中++*x和*++x的区别

    ++跟*的优先级一样,如果两个同时出现,运算是从右往左(不是常规的从左往右),所以: ++*x即++(*x),先取x的值,然后让值自加1:(地址没变,指针指向的值变了.搞不懂的话自己用快递做例子) * ...

  6. 职场PUA，管理者的五宗罪

    在目前的社会环境下,程序员似乎成了"弱势群体".我们经常谈论的职场PUA已经成为程序员的代名词. 我一直在想,为什么这么多管理者能力会这么差. 但最后最吃亏的还是可怜的程序员. 也 ...

  7. 推荐一款最强Python自动化神器！再也不用写代码了！

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 搞过自动化测试的小伙伴,相信都知道,在Web自动化测试中,有一款自动化测试神器工具: seleniu ...

  8. 教你用Python自制拼图小游戏，一起来制作吧

    摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...

  9. 获取Web项目中的控制器类以及类中Action方法

    前言 在使用时需要修改命名空间.需要过滤控制器.需要过滤Action方法.结果生成表的插入语句. 代码 public ActionResult ReloadData() { #region 获取所有的 ...

  10. wildfly 21中应用程序的部署

    目录 简介 Managed Domain中的部署 管理展开的部署文件 standalone模式下的部署 standalone模式下的自动部署 Marker Files 受管理的和不受管理的部署 部署覆 ...