效果一:當(dāng)鼠標(biāo)移動(dòng)到圖標(biāo)上時(shí)滚秩,圖片會(huì)響應(yīng)所點(diǎn)處圖標(biāo)變大且變色灾挨,在其右側(cè)會(huì)展示出文字
效果如下:
圖標(biāo)樣式部分可在bootcdn中搜索genericons诉探,使用<link href>引入
<link rel="stylesheet">
HTML部分
```<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <link rel="stylesheet" href="inde.css">
? ? <title>Slider</title>
</head>
<body>
<div class="container">
<header><h1>手風(fēng)琴</h1></header>
</div>
<ul class="slider">
? <li class="tab">
? ? ? <div class="social youtube">
? ? ? ? ? <a href="#" >youtube</a>
? ? ? </div>
? ? ? <div class="content">
? ? ? ? ? <h1>youtube</h1>
? ? ? ? ? <p>content</p>
? ? ? </div>
? </li>
</body>
</html>```
html沒什么好說的 就是建立6個(gè)盒子
CSS部分