2019-05-25 响应式媒介查询
2019-05-25 本文已影响0人
DreamNeverDie
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
* {margin:0; padding:0; list-style:none;}
#aside {height:250px; position:fixed; left:0; top:50%; margin-top:-125px;}
#aside li {width:100px;height:50px; text-align: center; line-height:50px; color:white; transition:0.3s all ease}
#aside li:hover {width:150px;}
#aside li.b1 {background:#3b5998}
#aside li.b2 {background:#1da1f1}
#aside li.b3 {background:#db4e41}
#aside li.b4 {background:#6383a8}
#aside li.b5 {background:#fe6550}
@media (max-width:1024px) {
#aside {height:50px;display:flex;width:100%;bottom:0; top:auto;margin-top:0;}
#aside li {flex:1;width:auto;}
#aside li:hover {width:auto;}
}
</style>
</head>
<body>
<ul id="aside">
<li class="b1">Facebook</li>
<li class="b2">Twitter</li>
<li class="b3">Google+</li>
<li class="b4">vk</li>
<li class="b5">other</li>
</ul>
</body>
</html>
