前端开发者| 前端开发模板化方案 |
| 复用性模板开发前端 |
| 前端开发用模板引擎嘛 |
今天骑个摩拜上班，在路上忽然想到，都css3了，这效果可以起“翻天覆地”的变化了。
所以下班回来简单实现了一下（只写css效果，未写js效果，js切换，一般都会的吧）。
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”author” content=”” />
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” />
<title> new document </title>
<style>
.tab {
margin: 2em 5em;
font-size: 14px;
}
.tab:after {
display: block;
content: “”;
height: 0;
clear: both;
}
.tab>a {
text-decoration: none;
padding: .5em 2em;
border: 1px solid #CCC;
color: #666;
border-right-width: 0;
float: left;
outline: none;
}
.tab>a:first-child {
border-radius: 5px 0 0 5px;
}
.tab>a:last-child {
border-right-width: 1px;
border-radius: 0 5px 5px 0;
}
.tab>a:focus,
.tab>a:hover {
border-color: blue;
color: blue;
}
.tab>a:focus+a,
.tab>a:hover+a {
border-left-color: blue;
}
</style>
</head>
<body>
<div class=”tab” id=”my_tab”>
<a href=”javascript:;”>天下</a>
<a href=”javascript:;”>英雄</a>
<a href=”javascript:;”>谁敌手</a>
<a href=”javascript:;”>曹刘</a>
</div>
<script>
document.getElementById(“my_tab”).firstElementChild.focus();
</script>
</body>
</html>
| web前端开发模板 |
| html 前端开发模板 |
| 汽车前端开发模块化 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册