网上定做相册_龙口seo_苏州百度搜索排名优化_百度指数移动版app

0基础学前端-----CSS DAY5

视频参考：B站Pink老师
今天是CSS学习的第五天，今天开始的笔记对应Pink老师课程中的CSS第二天的内容。
本节重点：CSS的元素显示模式、三种元素显示模式的转换、CSS背景设置。

2. CSS的元素显示模式

2.1 什么是元素显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML元素分为块元素和行内元素两种类型。

2.2-1 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：

比较霸道，自己占一行。
高度、宽度，外边距以及内边距都可以控制。
宽度默认是容器的100%。
是一个容器及盒子，里面可以放行内或块级元素。

注意：

文字类的元素（<h1>~<h6>、<p>）内不能使用块级元素。
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。
同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。
参考代码：
Document
比较霸道，自己独占一行
瑟瑟发抖

这里有问题

结果展示：
在这里插入图片描述

2.2-2 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意：
链接里不能再放链接。
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
参考代码：
Document pink老师品如的衣服 pink老师品如的衣服

结果展示：
在这里插入图片描述

2.3 行内块元素

在行内元素中有几个特殊的标签——、、，它们同时具有块元素和行内元素的特点，有些资料称他们为行内块元素。

行内块元素的特点：

和相邻的行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个。（行内元素特点）
默认宽度就是他本身内容的宽度。（行内元素特点）
高度、行高、外（内）边距均可控制。（块级元素特点）
参考代码：
Document

结果展示：
在这里插入图片描述

2.4 元素显示模式总结

元素模式

元素排列

设置样式

默认宽度

包含

块级元素

一行只能放一个块级元素

可设置宽、高

容器的100%

容器级可以包含任何标签，<p>中不可包含块级元素

行内元素

一行可以放多个行内元素

不可直接设置宽、高

它本身内容的宽度

容纳文本或其他行内元素，<a>可放块级元素

行内块元素

一行放多个行内块元素

可设置宽、高

它本身内容的宽度

2.5 元素显示模式转换

特殊情况下，我们需要元素模式的转换，即一个模式元素需要另外一种模式特性。
e:想要增加<a>的触发范围
使用以下语法：
转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块元素：display: inline-block;
其中第一个和第三个最常用。
参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {width: 150px;height: 50px;background-color: pink;/* 把行内元素a转换为块级元素 */display: block;}div {width: 300px;height: 100px;background-color: purple;/* 把块级元素div转换为行内元素 */display: inline;}span {width: 300px;height: 30px;background-color: skyblue;/* 行内元素转换为行内块元素 */display: inline-block;}</style>
</head><body><a href="#">金星阿姨</a><a href="#">金星阿姨</a><div>我是块级元素</div><div>我是块级元素</div><span>行内元素转换为行内块元素</span><span>行内元素转换为行内块元素</span>
</body></html>

结果展示：
在这里插入图片描述

2.6 一个小工具----snipaste

这是一个强大的截图工具，也可以让你的截图贴回屏幕上。这里有需要的同学，可以去看pink老师的视频，下载并使用这个工具。个人体验感非常好！！！

课堂案例------简洁版小米侧边栏

任务：

把链接a转换为块级元素，这样链接可以独占一行并有宽和高。
鼠标经过a链接设置背景颜色。
参考代码：
Document

结果展示：
在这里插入图片描述

2.7 小技巧-------单行文字垂直居中的代码

CSS并没有提供文字垂直居中的代码，这里使用技巧让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。
参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 40px;background-color: pink;line-height: 40px;}</style>
</head><body><div>我要垂直居中</div>
</body></html>

重点是： height= line-height
结果展示：
在这里插入图片描述

2.8 单行文字垂直居中的原理

简单理解：行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。可以参考下图理解：在这里插入图片描述

3. CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

background-color属性定义了元素的背景颜色。
background-color:颜色值；
一般情况下元素背景默认值是transparent，也可手动指定为透明色。
参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景颜色</title><style>div {width: 200px;height: 200px;/* background-color: transparent;透明的 */background-color: pink;}</style>
</head><body><div></div>
</body></html>

结果展示：
在这里插入图片描述

3.2 背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或超大背景图，有点事便于控制位置（精灵图也是一种运用场景）。
background-image: none/url(url);

参数值

作用

none

无背景图（默认的）

url

使用绝对或相对地址指定背景图片

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图片</title><style>div {width: 300px;height: 300px;background-image: url(images/logo.png);}</style>
</head><body><div></div>
</body></html>

结果展示：
在这里插入图片描述

3.3 背景平铺

对背景图平铺可以使用background-repeat

background-repeat: repeat/no-repeat/repeat-x/repeat-y

参数值

作用

repeat

背景图像在横向和纵向上平铺（默认值）

no-repeat

不平铺

repeat-x

横向平铺

repeat-y

纵向平铺

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图片</title><style>div {width: 300px;height: 300px;/* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色 */background-color: pink;background-image: url(images/logo.png);/* 背景图片不平铺 ,默认情况下都平铺*//* background-repeat: no-repeat; *//* 沿x轴平铺 */background-repeat: repeat-x;/* 沿y轴平铺 *//* background-repeat: repeat-y; */}</style>
</head><body><div></div>
</body></html>

结果展示：
在这里插入图片描述

3.4 背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position： x y;

参数值

说明

length

百分数/由浮点数和单位标识符组成的长度值

position

top/center/bottom/left/center/right方位名词

1.参数是方位名词

如果指定的两个值都是方位名词，则前后顺序无关，left top的效果=top left的效果。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参考代码1:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图片</title><style>div {width: 300px;height: 300px;background-image: url(images/logo.png);background-color: pink;background-repeat: no-repeat;/* background-position: top center; *//* 如果是方位名词 right center 和 center right 效果是等价的跟顺序无关 *//* background-position: right center; *//* background-position: right; *//* 此时，第一个参数一定是top y轴顶部对齐第二个参数省略x轴是水平居中显示的 */background-position: top;}</style>
</head><body><div></div>
</body></html>

结果展示：
在这里插入图片描述
参考代码二（应用1）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3 {width: 118px;height: 40px;/* background-color: pink; */font-size: 14px;font-weight: 400;line-height: 40px;background-image: url(images/icon.png);background-repeat: no-repeat;background-position: left center;text-indent: 1.5em;}</style>
</head><body><h3>成长守护平台</h3>
</body></html>

结果展示：
在这里插入图片描述
参考代码三（应用2）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超大背景图片</title><style>body {background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top;}</style>
</head><body></body></html>

结果展示：
在这里插入图片描述 2. 参数是精确单位

如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只能指定一个数值，那么该数值一定是x坐标，另外一个默认垂直居中

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* background-position: 20px 50px; */background-position: 20px;}</style>
</head><body><div></div>
</body></html>

结果展示：
在这里插入图片描述
3. 参数是混合单位

如果是混合单位，则第一个值为x坐标，第二个值为y坐标。
参考代码：
背景位置-精确单位

结果展示：
在这里插入图片描述

3.5 背景图像固定

background-attachment属性设置背景图像是否固定或随页面其余部分滚动

background-attachment：scroll/fixed;

参数

作用

scroll

背景图随对象滚动

fixed

背景图像固定

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top;color: #fff;font-size: 20px;background-attachment: fixed;/* 把背景固定住 */}</style>
</head><body><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p>
</body></html>

结果展示：
fixed效果如下，滚动滑动条背景图不变。
在这里插入图片描述
scroll效果如下，滚动滑动条背景图变化。

3.6 背景复合写法-----节约代码量

这个复合写法字体符合属性写法不同，他没有特定的书写顺序，一般约定为：
background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
实际开发中更提倡复合写法。
代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {/* background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top;background-color: black;background-attachment: fixed; */background: black url(images/bg.jpg) no-repeat fixed center top;color: #fff;font-size: 20px;/* background-attachment: fixed; *//* 把背景固定住 */}</style>
</head><body><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p><p>天王盖地虎, pink老师一米五</p>
</body></html>

重点注意： background: black url(images/bg.jpg) no-repeat fixed center top;和之前不同。

3.7背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

background: rgb(0,0,0,0.3);

最后一个参数为alpha透明度，取值在0-1之间。
我们习惯把0.3的0省略，写为background: rgb(0,0,0,.3);
注意：背景半透明是指盒子背景半透明，盒子里内容不受影响。
CSS3新增属性IE9+版本支持，但开发中不太关注兼容性写法，可放心使用。

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景色半透明</title><style>div {width: 300px;height: 300px;background: rgba(0, 0, 0, .6);}</style>
</head><body><div>隐形的翅膀</div>
</body></html>

结果展示：
在这里插入图片描述

3.8 背景总结

属性

作用

值

background-color

背景颜色

预定义颜色值/16进制/RGB

background-image

背景图片

url(图片路径)

background-repeat

是否平铺

repeat/no-repeat/repeat-x/repeat-y

background-position

背景位置

方位名词/精确单位/混合单位

background-attachment

背景附着

scroll/fixed

背景简写

书写简单

背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

背景色半透明

background: rgba(0,0,0,.3)后必为四个值

案例-----五彩导航栏

参考代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例-五彩导航</title><style>.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url(images/bg1.png) no-repeat;}.nav .bg1:hover {background-image: url(images/bg11.png);}.nav .bg2 {background: url(images/bg2.png) no-repeat;}.nav .bg2:hover {background-image: url(images/bg22.png);}</style>
</head><body><div class="nav"><a href="#" class="bg1">五彩导航</a><a href="#" class="bg2">五彩导航</a><a href="#" class="bg3">五彩导航</a><a href="#" class="bg4">五彩导航</a><a href="#" class="bg5">五彩导航</a></div>
</body></html>

结果展示：
在这里插入图片描述

—————————————————————————————————————————
第二天内容全部更新完毕，下节第三天开始( _)，有什么问题都可以在评论区进行讨论哦！

网上定做相册_龙口seo_苏州百度搜索排名优化_百度指数移动版app

0基础学前端-----CSS DAY5

2. CSS的元素显示模式

2.1 什么是元素显示模式

2.2-1 块元素

2.2-2 行内元素

2.3 行内块元素

2.4 元素显示模式总结

2.5 元素显示模式转换

2.6 一个小工具----snipaste

课堂案例------简洁版小米侧边栏

2.7 小技巧-------单行文字垂直居中的代码

2.8 单行文字垂直居中的原理

3. CSS的背景

3.1 背景颜色

3.2 背景图片

3.3 背景平铺

3.4 背景图片位置

3.5 背景图像固定

3.6 背景复合写法-----节约代码量

3.7背景色半透明

3.8 背景总结

案例-----五彩导航栏

最新新闻

热搜词