div字体居中_div和span的使用

421f7b1e3a687f9c7d5dc9aecaddeb43.gif

这节我们来制作以下效果

f64d86d789bac57982cdf0856c2d8945.png

我们先把四个段落的文字都写出来,分别包含在p标签里

b8373685ee356cf151e1c8ff5dbe2788.png

现在看到的效果如下

a4f054e8855d79b70a9fbc734ce5dcb0.png

我们来一点一点给它加入样式

首先,来使文字水平居中并且加背景色

856a2d37f7677d16a7e20259186f9d6a.png

但是这样显示的效果有一些问题,直接加入文字背景会显示背景顶着两头,导致背景太长

fb74af71a355c403b2cc09c410c06a4a.png

这时我们就需要一个属性span

8a0bc5192b8ba63d12403a7080e8a6f4.png

span只是一个容器,并不实际显示

140ecfbb157d1aef6651a4c04dd87502.png

有了span,我们就可以给span来设置背景颜色控制大小

875cc4090e727d9b8dede5d24065d78f.png

具体的使用如下

e8f6339b605578d6eb579888fc47d3ea.png

设置了背景色、字体颜色、字体大小后,显示效果为

9978cb91e229c37c7e1751b482f4960a.png

我们再来设置需要加粗的文字和改颜色的文字

f694ff6d504d3a6bf9380887bddbfe35.png

效果如下

fc54b7ccc1e142f28006b169b6b87420.png

还有一些字体颜色和加粗的修改此处省略……

设置后效果如下

2d6ccc80a6dafcb8e9f6b16a38c8b81b.png

但是对比一下效果,我们可以看出整个文字的效果并不是纯黑色,而是灰色,这时我们需要怎么设置呢?

有两种方法:

1.设置每个p的color

2.给所有文字嵌套一个div标签,来设置div标签的color

我们肯定会选择第二种方法,先来介绍一下div

77994a72cef4a9495e30be42a196f94f.png

具体的使用如下

bc2f0fbbc39d3bb374442dce01e100d1.gif

效果会看到所有文字(除设置外的)都变成灰色

146f4d17d703ba2961cbe09f3f56b4d6.png

设置完字体的属性样式后,我们来考虑整个容器如何居中?

我们之前已经使用过文字居中是text-align:center;

容器的居中就要使用margin:auto;

但是注意,如果不设置容器的大小,那么默认撑满整个屏幕,那么margin:auto;将没有意义

741cef918c88a0970a00c1a40097d913.png

效果如下

cd80bb05982126656e35a4d22f36ad97.png

本节代码:

344aa946d0885398f4a9776d63784a92.png

我们来做一下总结

368c010ad69c10602ca21269a57aee54.png

--- 笔记来自于【千锋教育】视频

- End –

e4ed1154c56e6ccf5e0b4f9009a2309c.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/502292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java将mysql数据写入到txt_java 追加写入数据到txt

方法一try {BufferedWriter out new BufferedWriter(new FileWriter(fileName));out.write("aString1\n");out.close();out new BufferedWriter(new FileWriter(fileName,true));out.write("aString2");out.close();BufferedReader in new BufferedRead…

dubbo协议_Dubbo协议解析与OPPO自研ESA RPC框架实践

本文来自OPPO互联网基础技术团队,转载请注名作者。同时欢迎关注我们的公众号:OPPO_tech,与你分享OPPO前沿互联网技术及活动。1. 背景Dubbo是一款高性能、轻量级的开源Java RPC框架,诞生于2012年,2015年停止研发&#x…

fastjson反序列化过滤字段属性_原创干货 | 从RMI入门到fastjson反序列化RCE

关注我,让我成为你的专属小太阳吧RMI入门什么是RMIRMI(Remote Method Invocation)为远程方法调用,是允许运行在一个Java虚拟机的对象调用运行在另一个Java虚拟机上的对象的方法。这两个虚拟机可以是运行在相同计算机上的不同进程中,也可以是运…

python pyquery.get()_Python爬虫之PyQuery使用(六)

Python爬虫之PyQuery使用PyQuery简介pyquery能够通过选择器精确定位 DOM 树中的目标并进行操作。pyquery相当于jQuery的python实现,可以用于解析HTML网页等。它的语法与jQuery几乎完全相同,对于使用过jQuery的人来说很熟悉,也很好上手。初始化…

axure web组件下载_Element - 饿了么团队出品的神级桌面 UI 组件库

一套著名的桌面端的组件库,同时提供Sketch、Axure模板资源文件方便快速产品设计。 介绍由饿了么团队出品,一套为开发者、设计师和产品经理准备的组件库,提供了配套axure、sektch设计资源,可以直接下载使用,能帮我等搬砖…

三农电子商务创业创新大赛作品_全国大学生电子商务“创新、创意及创业”挑战赛五邑大学校赛...

大赛简介第十届全国大学生电子商务“创新、创意及创业”挑战赛(简称“三创赛”)是由全国电子商务创新产教联盟主办,由“三创赛”竞赛组织委员会统一策划、组织、管理与实施。“三创赛”由校赛、省赛和国赛三级竞赛组成,分别由教育部认可的全国高校提出申…

程序员的数学 pdf_作为一个程序员,分享我日常学习方式,自学渠道和方式

做了几年程序员,只有高中学生的基础,就做不了高等数学算法相关工作,在有限的技术领域里进行自学做自己能做的业务。学习是少不了的事情,每天一大部分时间都是处于自学状态。第一个平台是慕课网,从高中毕业开始看慕课网…

python中可通过()实现代码的复用_(  )是可复用的,提供明确接口完成特定功能的程序代码块。...

【填空题】PE 表示( )线,PEN表示( )线;【单选题】建筑电气工程平面图中的图例 MEB 表示( )。【其它】自己选择几个著名品牌的官方网站,进行比较归纳,整理出你认为企业官网应当设置的板块,理由是什么?【判断题】实现二十进制计数,要用到进位端Qc。(5.0分)【单选题】截平面垂直于…

apache2 wordpress目录权限_小白指南:WordPress中的用户角色和权限

WordPress本身自带了一套用户角色管理系统,这套系统定义了每个用户角色可以做什么,不可以做什么。随着网站的发展,弄懂这些用户角色和权限的问题是非常有必要的。在这篇小白指南中,我们将用图表的形式对比WordPress中每个用户角色…

mysql binary安装_mysql的二进制安装方式

mysql总共有三种安装方式,源代码安装,二进制安装和源安装。这次写的是二进制安装,对其他两种方式不予讨论。关闭selinux和防火墙上课的时候,老师说过这是重中之重,一定要先关闭selinux和iptables。如果不关闭这两个&am…

mysql分区概念_mysql的分区

在mysql 5.1.3之后引入和partition(分区)的概念。这个是个好东东。以前遇到一个大表的时候,我们会手动将其分为几个小表(就是分表操作)。但是分表操作有几个缺点:1 麻烦,这里指的麻烦是不仅对于调用分表的sql语句的处理上,也是分表…

pytest测试实战pdf_Pytest+Allure美化测试报告

今日推荐音乐:我最爱的霉霉在学习pytest的时候,生成的html报告觉得实在不是很美观,查到资料有很多测试报告的第三方插件,不仅美观而且查看测试用例也很方便,那我们一起来学习下吧~0 1参考案例要学习一个新技术&#xf…

java 递归_采用递归算法求解迷宫问题(Java版) | 附代码+视频

递归算法能够解决很多计算机科学问题,迷宫问题就是其中一个典型案例。本篇教程我们将采用递归算法求解迷宫问题,输出从入口到出口的所有迷宫路径。01用递归算法解决迷宫问题迷宫问题在《数据结构教程》第3章介绍过,设mgpath(int xi&#xff0…

挂机宝装mysql_挂机宝安装

万安挂机宝下载后安装包里有介绍.proxydroid使用说明以雷电模拟器为例永久记住选择 允许 (安卓手机 需要 root 方可使用)设置 账号密码启动即可 下面是详细翻译说明一、下载ProxyDroid。二、对ProxyDroid进行配置(基本配置:)(1) Auto Setting不勾选,我们…

python爬虫是数据挖掘吗_爬虫属于数据挖掘 python为什么叫爬虫

数据挖掘和爬虫有区别吗?数据挖掘和爬虫有很大的区别。数据挖掘过程应用于爬虫的可能性并不是特别大,但所占比例相对较大。但是使用爬虫,一般来说,爬虫都是爬到别人的网站上的,而且有些规则。因此,从数据挖…

python如何训练图片_Python练习第一题,在图片上加入数字

题目:在头像(QQ、微信等)右上角加上红色的数字,类似于微信未读信息数量那种提示效果。下面是示例,在图片上加数字。用PS很简单就可以做到,但是如何用Python完成呢?一、思路:利用Python强大的图片处理库——…

python计算汉明距离_有效地使用python计算汉明距离

python中的distance软件包提供汉明距离计算器:import distancedistance.levenshtein("lenvestein", "levenshtein")distance.hamming("hamming", "hamning")还有一个levenshtein包提供了levenshtein距离计算.最后difflib可…

python给字母赋值_给字母赋值的更快方法?

我试着从列表中的单词中读出每个字符,然后根据单词中的每个字母给它们赋值。我的代码太长了,我相信一定有一个更短的方法来实现它。。。在for c in tempWord:if(c "A"):tempSum 1elif(c "B"):tempSum 2elif(c "C"):t…

web mysql 界面表命名规范_MySql数据库表字段命名及设计规范

1.设计原则1) 标准化和规范化web数据的标准化有助于消除数据库中的数据冗余。标准化有好几种形式,但 Third Normal Form(3NF)一般被认为在性能、扩展性和数据完整性方面达到了最好平衡。简单来讲,遵照3NF 标准的数据库的表设计原 则是:“One …

通过代理上网 固定ip_浅析局部代理IP与全局代理IP的使用说明

经常有人问,如何设置局部代理IP,如何设置全局代理IP,今天我们一起来看看。何谓局部代理IP,顾名思义,改变局部的IP,不影响其他程序软件运行的使用IP;所谓全局代理IP,就是改变整个客户…