一、响应式设计
|
#nav ul li a { /* background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" lang="en-US"> #5385ff; */ /*float: left;*/ /*a标签是行内标签，在一行可显示多个标签，其宽度等于内容的大小。要想固定a标签的宽度，应变为行内-块级标签*/ display: inline-block; width: 200px; color: white; margin: 0px 20px 10px; font-size: 30px; text-align: center; } /* 响应式设计：监听屏幕宽度或高度的变化。*/ /* 当屏幕的宽度或高度达到某个临界值时，就执行下面的东西 */ @media screen and (max-width: 1210px) { /*改变a标签的宽度和字体大小*/ #nav ul li a { width: 160px; font-size: 25px; } } @media screen and (max-width: 1010px) { /*改变a标签的宽度和字体大小*/ #nav ul li a { width: 120px; font-size: 20px; } } @media screen and (max-width: 810px) { /*改变a标签的宽度和字体大小*/ #nav ul li a { width: 80px; font-size: 15px; } } |
二、网页中的过渡动画
|
#footer .dock ul li { display: inline-block; margin: 0px 5px; /* 设置动画过渡的时长和效果（有线性、非线性） */ -webkit-transition: 0.2s linear; } #footer .dock ul li a img { width: 50px; height: 50px; } /* 过渡形变动画 */ #footer .dock ul li:hover { /* 参照点（以坐标点的位置为参照点来进行形变：底部中心） */ -webkit-transform-origin: bottomcenter; /* 设置形变（如：移动、放大、缩小等） */ -webkit-transform: scale(1.6); } |