前端开发常用案例（一）
前端开发常用案例
- 1.实现三角形
- 百度热榜样式
- 分页效果
- 小米商城
- 自动轮播图效果
- 二级下拉菜单效果
- 时间轴效果展示
- 音乐排行榜效果
- 鼠标移入文字加载动画
- 鼠标悬停缩放效果
1.实现三角形
Title
百度热榜样式
Title
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。
1.使用HTML:target=“_blank”，在新的页面中打开链接，形成父子界面的关系。
_blank – 在新窗口中打开链接
_parent – 在父窗体中打开链接
_self – 在当前窗体打开链接,此为默认值
_top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)
Title
使用font-size:0解决设置inline-block引起的空白间隙问题
在进行页面布局的时候为了页面代码所谓整洁刻度，往往会设置缩进或是换行，但是元素display为inline-block或是inline时，行内元素虽然没有设置 margin值，这些换行或是缩进。还是会出现空白间隙。
Title
看别人的代码看到过font-size:0这个设置，不明白为何这样操作，后来研究一下才明白：这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：
123
.box{width: 90px;height: 60px;border: 1px solid #ccc;
}
.box div{display: inline-block;box-sizing: border-box;font-size: 14px;width: 30px;border: 1px solid ;
}
分页效果
Title
font-size:0
注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。
小米商城
小米商城右侧悬浮菜单
自动轮播图效果
自动轮播图效果
![]()
![]()
![]()
![]()
![]()
二级下拉菜单效果
自动轮播图效果
时间轴效果展示
自动轮播图效果
“ 春季腹泻要当心，益生菌要这样... ”
![]()
“ 春季腹泻要当心，益生菌要这样... ”
“ 春季腹泻要当心，益生菌要这样... ”
“ 春季腹泻要当心，益生菌要这样... ”
![]()
border-spacing 属性设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。
为表格设置合并边框模型：table
{border-collapse:collapse;
}
音乐排行榜效果
音乐排行榜效果
排行 歌曲 歌手 时长 1 ![]()
158%![]()
爱丫爱丫《爱情是从告白开始的》电视剧插曲BY2 03:51 2 ![]()
128%![]()
春泥(女版)旺仔小乔 03:03 3 ![]()
118%![]()
孤勇者(Live)《英雄联盟：双城》永彬Ryan.B 03:14 4 ![]()
108%张韶涵/信 04:30
鼠标移入文字加载动画
鼠标移入文字加载动画
![]()
《听闻远方的你》演唱：刘艺雯我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢![]()
《听闻远方的你》演唱：刘艺雯我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢![]()
《听闻远方的你》演唱：刘艺雯我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢![]()
《听闻远方的你》演唱：刘艺雯我吹过你吹过的风，这算不算相拥，我走过你走过的路，这算不算相逢
鼠标悬停缩放效果
鼠标悬停缩放效果 ![]()
金凤蝶金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。![]()
金凤蝶金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。![]()
金凤蝶金凤蝶，Papilio machaon Linnaeus，又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶，属鳞翅目，凤蝶科。因其体态华贵，花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。
transform-origin属性取值为“关键字”
关键字 百分比 说明
top left 0 0 左上
top center 50% 0 靠上居中
top right 100% 0 右上
left center 0 50% 靠左居中
center center 50% 50% 正中
right center 100% 50% 靠右居中
bottom left 0 100% 左下
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下
网盘地址
前端开发常用（二）