![0005edad76744917924d53652444ffe0.png](https://i-blog.csdnimg.cn/blog_migrate/3151204a5b2299ad9faca8726291cb87.jpeg)
div和span的使用
这节我们来制作以下效果
![dfe9fb99bedeb37ee267810be1c07850.png](https://i-blog.csdnimg.cn/blog_migrate/1883e84dc1e2ef0ec17265da727d1fb5.jpeg)
我们先把四个段落的文字都写出来,分别包含在p标签里
![3c78033ee8260f050f2ed815cf2b07eb.png](https://i-blog.csdnimg.cn/blog_migrate/40c64953ead52f836aa9420bd425ec85.jpeg)
现在看到的效果如下
![b3997326df8a66e28295b798169cf63a.png](https://i-blog.csdnimg.cn/blog_migrate/eaf6d8bbc63cbc948903b6c92c6faf45.jpeg)
我们来一点一点给它加入样式
首先,来使文字水平居中并且加背景色
![df538fd997e4682b6c859ac9a0cda4be.png](https://i-blog.csdnimg.cn/blog_migrate/07dedb9f58bf29301b66ba32a92a3efe.jpeg)
但是这样显示的效果有一些问题,直接加入文字背景会显示背景顶着两头,导致背景太长
![26a73ffdd9cff5f529a9de738ddf586d.png](https://i-blog.csdnimg.cn/blog_migrate/f126b4f06fc2f3496e8237c591a6da74.jpeg)
这时我们就需要一个属性 span
![ce336fc641be647311be7fc41f74517d.png](https://i-blog.csdnimg.cn/blog_migrate/e0c02ef8771b6d78bbdfb76248e51828.jpeg)
span只是一个容器,并不实际显示
![9a1cc8dbc78ce00ac90e6ba4fc51ba54.png](https://i-blog.csdnimg.cn/blog_migrate/27246a56cacfccf82dc6e06243cc9ae0.png)
有了span,我们就可以给span来设置背景颜色控制大小
![bc1836657b9102d21e6dd1a7c975a9b0.png](https://i-blog.csdnimg.cn/blog_migrate/7f7a6ce20593148e0372a221c06a3a26.png)
具体的使用如下
![d41ac5cec4a3640940de085e3b7b3675.png](https://i-blog.csdnimg.cn/blog_migrate/cdb1c054b9bad88662ef84d1ae335e6c.jpeg)
设置了背景色、字体颜色、字体大小后,显示效果为
![a2b41be4e6fa966a78446a503772b44a.png](https://i-blog.csdnimg.cn/blog_migrate/68da38d079ca693162a6b0889d42130b.jpeg)
我们再来设置需要加粗的文字和改颜色的文字
![a0fa5b2226133057e2af1f170c2520a5.png](https://i-blog.csdnimg.cn/blog_migrate/e967c4a6046c8583134401182627e6f4.jpeg)
效果如下
![15af5379fe2802796fd68f910c588d7a.png](https://i-blog.csdnimg.cn/blog_migrate/c18e5fff781a0cb2fe56c4879a55c48d.jpeg)
还有一些字体颜色和加粗的修改此处省略……
设置后效果如下
![e44551ba1f8a8a75621f2cb0c4203436.png](https://i-blog.csdnimg.cn/blog_migrate/e103e04d2a8e39164a2a8ef1b1ca9273.jpeg)
但是对比一下效果,我们可以看出整个文字的效果并不是纯黑色,而是灰色,这时我们需要怎么设置呢?
有两种方法:
1.设置每个p的color
2.给所有文字嵌套一个div标签,来设置div标签的color
我们肯定会选择第二种方法,先来介绍一下div
![fa25a9b97a6f6541bbeb7624639aa07f.png](https://i-blog.csdnimg.cn/blog_migrate/d6cbe5b3a32ced83d5ca4eef26dee399.jpeg)
具体的使用如下
![v2-d9c8365155e0e6120c8d3a3e3d3cc8d1_b.gif](http://img-03.proxy.5ce.com/view/image?&type=2&guid=01696e0f-665e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-d9c8365155e0e6120c8d3a3e3d3cc8d1_b.gif)
效果会看到所有文字(除设置外的)都变成灰色
![8a75c5d78421feef6968659dfe811134.png](https://i-blog.csdnimg.cn/blog_migrate/7c4b511c1ce499cd7d3b8c4897f8ac26.jpeg)
设置完字体的属性样式后,我们来考虑整个容器如何居中?
我们之前已经使用过文字居中是text-align:center;
容器的居中就要使用margin:auto;
但是注意,如果不设置容器的大小,那么默认撑满整个屏幕,那么margin:auto;将没有意义
![b01ab67963692b33ae045c01dc5e0386.png](https://i-blog.csdnimg.cn/blog_migrate/a315d5f780591e81f9d65761de322a0f.jpeg)
效果如下
![cd85102e0ce273f632fa8b36a4694920.png](https://i-blog.csdnimg.cn/blog_migrate/38a6174905c9aafb6569a47928fb1c92.jpeg)
本节代码:
![96055a9916dd66dd16af6a89954d8032.png](https://i-blog.csdnimg.cn/blog_migrate/ced85c59e28b5249c816fefa71603c4a.jpeg)
我们来做一下总结
![067c8ddfe7b29f0336fa62789edc5550.png](https://i-blog.csdnimg.cn/blog_migrate/380d925287880b65a807926377a75887.jpeg)
--- 详情关注公z号<web分享>
![224d46b38f0696bb1b48753dcc7396ad.png](https://i-blog.csdnimg.cn/blog_migrate/5bf9854af8c18bb4062bc3d9a85a21d6.png)
- 笔记来自于【千锋教育】视频 –