2017年9月25日
学习笔记与总结
1.div内图片的属性与调整（雪碧图）
background-image
背景图片（优先显示）
background-repeat: no-repeat
图片复制 no-repeat：不复制
background-size: contain
background-size: cover
图片大小
contain：在保证图片缩放比例的前提下，
以最先达到容器宽或高的比例进行显示
有可能出现图片填充不满的情况
cover： 在保证图片缩放比例的前提下，
以最后达到容器款或高的比例进行显示
有可能出现图片溢出的情况
background-size: 100% 100%
background-position: 20px 20px
background-position: right bottom
图片偏移量 （1：x轴方向的偏移
2：y轴方向的偏移
3：缺省值为center）
2.div内列表的部分属性
list-style: disc;/*实心圆*/
list-style: circle;/*空心圆*/
list-style: decimal;/*数字*/
list-style: none;/*无样式*/
列表可以组合 float：left 达到横排排列的效果
3.hover伪类
用于鼠标不同状态放置或点击时出现的形态
#container li:hover{
color: crimson;
border-left: 5px crimson solid;
padding-left: 25px;
}
鼠标放置后li中触发效果
超链接（伪类）
/*还没有被访问的默认显示状态*/
a:link{
color: black;
}
/*访问过的显示状态*/
a:visited{
color: #cccccc;
}
/*鼠标悬浮显示的颜色*/
a:hover{
color: palevioletred;
}
/*鼠标摁下到放开*/
a:active{
color: #ff7300;
}
4.联系中有用的笔记
border-bottom：线框显示在底部
border-left: 5px solid crimson（粗细 线形 颜色）
line-height：设置行高 （用于文字居中显示）
padding-left：靠左（内边距）
margin: 0px auto 居中显示
margin-top: 20px; （居中显示切向下悬浮20px）
display: inline-block;
display规定元素应该生成的框的类型
inline-block：行内块元素
text-decoration: underline：文本内线型
来源：CSDN
作者：AUPRO
链接：https://blog.csdn.net/AUPRO/article/details/78088490