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

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

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

案例的演示与分析

行内块级元素

背景图片

在页面内实现水平居中

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

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

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

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

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. Int，String，Integer，double之间的类型的相互转换

    Int整数,String字符串之间的类型的转换 int转成String 结果为: String转成int类型 结果为: double转成String 结果为: String转成double 结果为: ...

  2. Linux系统-scp简介&坑

    文件请见这里: https://blog.csdn.net/xingxingzhilong/article/details/82909015

  3. 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent

    stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...

  4. 未雨绸缪，数据保护之NBU介质备份

    摘要:华为GaussDB目前已支持NBU介质的备份与恢复,本文主要描述了华为GaussDB数据库和NetBackup对接进行备份.恢复的配置方法与性能调优方法. 一.简介 企业要想避开自然灾难和站点中 ...

  5. 从面试角度分析LinkedList源码

    注:本系列文章中用到的jdk版本均为java8 LinkedList类图如下: LinkedList底层是由双向链表实现的.链表好比火车,每节车厢包含了车厢和连接下一节车厢的连接点.而双向链表的每个节 ...

  6. Kylin的特点

    Kylin的特点 0.原理 从Hive读取数据,计算引擎可以用MapReduce 或者Spark, 把结果写入Hbase. 下次查询就会很快,也就是所谓的预计算. 1.为什么会有Kylin? hive ...

  7. 工具-chrome相关-安装crx包及错误解决（99.3.1）

    @ 目录 1.安装教程 2.程序包无效:"CRX_HEADER_INVALID" 1.安装教程 在浏览器上输入 chrome://extensions 并且选择开发者模式 将.cr ...

  8. xss未看完的文章

    https://blog.csdn.net/fen0707/article/details/8596888                XSS介绍与攻击 http://xss.fbisb.com/w ...

  9. 从零到一快速搭建个人博客网站（域名自动跳转www，二级域名使用）（二）

    前言 本篇文章是对上篇文章从零到一快速搭建个人博客网站(域名备案 + https免费证书)(一)的完善,比如域名自动跳转www.二级域名使用等. 域名自动跳转www 这里对上篇域名访问进行优化,首先支 ...

  10. 【electron-playground系列】打包优化之路

    作者:梁棒棒 简介 electron打包工具有两个:electron-builder,electron-packager,官方还提到electron-forge,其实它不是一个打包工具,而是一个类似于 ...