前端开发者前端开发和设计的发展前途|跨平台前端开发软件|企业前端开发软件
1.上圆角精简版
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>w3c</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
#menubar ul {
height: 29px;
background-color: deepskyblue;
list-style: none;
border-top: solid 3px deepskyblue;
padding-left: 1px;
overflow: hidden;
}
#menubar ul li {
float: left;
margin: 0 2px;
padding: 3px 20px;
color: white;
font-family: “微软雅黑”;
font-size: 15px;
font-weight: bold;
line-height: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#menubar ul li:hover {
cursor: pointer;
background-color: white;
color: deepskyblue;
}
#menubar ul li.current {
cursor: default;
background-color: white;
color: deepskyblue;
height: 21px;
font-size: 16px;
padding-top: 5px;
}
</style>
<script type=”text/javascript”>
$(function () {
“padding”: “30px”,
“font-size”: “120px”
});
$(“#menubar ul li”).click(function () {
var current = $(this).siblings(“.current”);
if ($(this) == current.eq(0)) {
return;
}
$(this).addClass(“current”);
current.removeClass(“current”);
$(“#content”).html($(this).text());
});
});
</script>
</head>
<body>
<div id=”menubar”>
<ul>
<li class=”current”>W3C</li>
<li>HTML</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</div>
<div id=”content”></div>
</body>
</html>
2.斜边叠加版
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>w3c</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
#menubar ul {
height: 29px;
background-color: deepskyblue;
list-style: none;
border-top: solid 3px deepskyblue;
padding-left: 6px;
overflow: hidden;
}
#menubar ul li {
float: left;
margin: 0 6px;
padding: 3px 18px;
color: white;
font-family: “微软雅黑”;
font-size: 15px;
font-weight: bold;
line-height: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#menubar ul li:hover {
cursor: pointer;
background-color: white;
color: deepskyblue;
position: relative;
}
#menubar ul li.current {
cursor: default;
background-color: white;
color: deepskyblue;
height: 21px;
font-size: 16px;
padding-top: 5px;
position: relative;
}
#menubar ul li:hover:before,
#menubar ul li:hover:after {
content: “”;
width: 12px;
height: 22px;
background-color: white;
display: block;
position: absolute;
bottom: 0;
z-index: 1;
}
#menubar ul li.current:before,
#menubar ul li.current:after {
content: “”;
width: 12px;
height: 27px;
background-color: white;
display: block;
position: absolute;
bottom: 0;
z-index: 2;
}
#menubar ul li:hover:before,
#menubar ul li.current:before {
left: -8px;
transform: skew(-24deg);
border-left: solid 3px deepskyblue;
}
#menubar ul li:hover:after,
#menubar ul li.current:after {
right: -8px;
transform: skew(24deg);
border-right: solid 3px deepskyblue;
}
</style>
<script type=”text/javascript”>
$(function () {
$(“#content”).html($(“#menubar ul li.current”).text()).css({
“padding”: “30px”,
“font-size”: “120px”
});
$(“#menubar ul li”).click(function () {
var current = $(this).siblings(“.current”);
if ($(this) == current.eq(0)) {
return;
}
$(this).addClass(“current”);
current.removeClass(“current”);
$(“#content”).html($(this).text());
});
});
</script>
</head>
<body>
<div id=”menubar”>
<ul>
<li class=”current”>W3C</li>
<li>HTML</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</div>
<div id=”content”></div>
</body>
</html>
前端设计和前端开发|.net前端开发设计|软件开发与前端开发区别
» 本文来自：前端开发者 » 《前端开发CSS3 选项卡设计》
» 本文链接地址：https://www.rokub.com/4021.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册