发表于： 2019-02-28 21:51:09
1 794
今天完成的事情：
1使用bootstrap 完成了 导航 与 轮播
明天计划的事情：
继续css任务八
收获：
background-position;background-szie的%值
(下面用bg代替background)
背景属性：background-position;background-szie
首先说一下：background-size:
指的是背景图片尺寸按照容器尺寸的百分比进行计算。
size: x% y%;
在水平方向上，图片的width=容器的width*x%
在竖直方向上，图片的height=容器的height*y%
根据容器的尺寸来计算计算图片的尺寸。
bg-size: 100% 100%;
图片尺寸等于容器尺寸。
bg-size: 50% 50%；
图片尺寸等于容器尺寸的一半。
background-position也可以设置%值
假设容器尺寸大于背景尺寸，在不平铺的前提下：
设置background-position：50% 50%；
此时图片在容器内水平垂直居中。
设置background-position：100% 100%；
此时图片置于容器右下角。
bg-posiiton:xpx ypx 与bg-position:a% b%的换算公式
它与px换算的公式是
xpx=(容器width-背景图片width)*a%;
ypx=(容器width-背景图片width)*b%;
关于link /visited/hover/active
link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面！
返回列表
评论