界面组件之导航菜单备案
界面组件一、分页导航菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页导航</title>
<style>
* {
margin: 0;
padding: 0;
}
.pagination {
margin: 10px;
/*取消项目列表*/
list-style-type: none;
/*包裹浮动元素*/
overflow: hidden;
display: inline-block;
}
/*内联元素包裹性*/
.pagination li {
display: inline;
}
.pagination a {
/*带有方向的display: inline-block元素*/
float: left;
/*消除文本修饰*/
text-decoration: none;
padding: .5em;
border: 1px solid #ddd;
font-size: 12px;
color: #428bca;
line-height: 1.42857143;
padding: 6px 12px;
}
/*非首子元素取消左边框*/
.pagination li + li a {
border-left: none;
}
/*第一个与最后一个子元素添加圆角效果*/
.pagination li:first-child a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination li:last-child a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*鼠标移上效果*/
.pagination a:hover {
background-color: #ddd;
}
/*伪类 prev箭头*/
.pagination a[rel="prev"]:before {
content: "\00AB";
padding-right: .5em;
}
/*伪类 next箭头*/
.pagination a[rel="next"]:after {
content: "\00BB";
padding-left: 0.5em;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#" rel="prev">prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" rel="next">next</a></li>
</ul>
</body>
</html>
界面组件二、纵向导航菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>界面组件二、纵向导航菜单</title>
<style>
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
width: 10em;
background-color: #8BD400;
border: 1px solid #486B02;
}
/*非首子元素*/
.nav li + li a {
border-top: 1px solid #E4FFD3;
}
.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
background: url(img/icon.png) no-repeat 5px 50%;
padding: 0.3em 2em;
}
.nav a:hover, .nav a:focus, .nav li.active a {
color: #3F51B5;
background: url(img/iconH.png) no-repeat 5px 50%;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Our Service</a></li>
<li><a href="#">Our work</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
界面组件三、水平导航菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>界面组件化三、水平导航菜单</title>
<style>
/*去掉默认的内边距和外边距*/
* {margin:0; padding:0;}
/*设定本例中菜单的大小和位置*/
nav { margin:50px; }
/*给菜单加上边框*/
.list1 ul {
border:1px solid #f60;
border-radius:3px;
padding:5px 10px;
display: inline-block;
overflow: hidden;
}
/*让li元素水平排列且去掉项目符号*/
.list1 li {
/*让li元素水平排列*/
float: left;
/*去掉项目符号*/
list-style-type:none;
}
/*“非首位子元素”选择符*/
.list1 li + li {
border-left:1px solid #f60;
}
/*
* ==>> 等价于
* .list1 li {
* border-top:1px solid #f60;
* }
* .list1 li:first-child {
* border-top: none;
* }
* */
/*为链接添加样式*/
.list1 a {
display: block;
text-decoration:none;
font:12px Exo, helvetica,arial, sans-serif;
font-weight:400;
color:#000;
background:#e1e1e1;
padding:3px 10px;
}
/*悬停高亮*/
.list1 a:hover {
color:#f60;
}
</style>
</head>
<body>
<nav class="list1">
<ul>
<li><a href="#">项目列表一</a></li>
<li><a href="#">项目列表二</a></li>
<li><a href="#">项目列表三</a></li>
<li><a href="#">项目列表四</a></li>
</ul>
</nav>
</body>
</html>
界面组件四、三级菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>界面组件四、三级菜单</title>
<style>
body {
background-color: #222222;
}
/*添加视觉样式*/
.multi_drop_menu {font:1em helvetica, arial, sans-serif;}
.multi_drop_menu a {
/*让链接充满列表项*/
display:block;
/*文本颜色*/
color:#555;
/*背景颜色*/
background-color:#eee;
/*链接的内边距*/
padding:.2em 1em;
/*分隔线宽度*/
border-width:3px;
/*可以有颜色，也可以透明*/
border-color:transparent;
}
.multi_drop_menu a:hover {
/*悬停时文本颜色*/
color:#fff;
/*悬停时背景色*/
background-color:#aaa;
}
.multi_drop_menu a:active {
/*点击时背景变色*/
background:#fff;
/*点击时文本变色*/
color:#ccc;
}
/*添加功能样式*/
.multi_drop_menu * {margin:0; padding:0;}
/*强制 ul 包围 li*/
.multi_drop_menu ul {float:left;}
.multi_drop_menu li {
/*水平排列菜单项*/
float:left;
/*去掉默认的项目符号*/
list-style-type:none;
/*为子菜单提供定位上下文*/
position:relative;
}
.multi_drop_menu li a {
/*让链接填充列表项*/
display:block;
/*给每个链接添加一个右边框*/
border-right-style:solid;
/*背景只出现在内边距区域后面*/
background-clip:padding-box;
/*去掉链接的下划线*/
text-decoration:none;
}
.multi_drop_menu li:last-child a {border-right-style:none;}
/*临时隐藏低级菜单*/
.multi_drop_menu li ul {display:none;}
/* 添加的视觉样式 */
/*二级菜单宽度*/
.multi_drop_menu li ul {width:9em;}
.multi_drop_menu li li a {
/*去掉继承的右边框*/
border-right-style:none;
/*添加上边框*/
border-top-style:solid;
}
/* 添加的功能样式 */
.multi_drop_menu li ul {/*临时显示二级下拉菜单*/
display:block;
/*相对于父菜单项定位*/
position:absolute;
/*左边与父菜单项对齐*/
left:0;
/*顶边与父菜单项底边对齐*/
top:100%;
}
.multi_drop_menu li li {
/*停止浮动，恢复堆叠*/
float:none;
}
.multi_drop_menu li li ul {
/*继续隐藏三级下拉菜单*/
display:none;
}
.multi_drop_menu li ul {
/*隐藏二级下拉菜单*/
display:none;/*相对于父菜单项定位*/
position:absolute;
/*左边与父菜单项对齐*/
left:0;
/*顶边与父菜单项底边对齐*/
top:100%;
}
.multi_drop_menu li:hover > ul {
/*父元素悬停时显示*/
display:block;
}
.multi_drop_menu li li ul {
/*相对于父菜单定位*/
position:absolute;
/*与父菜单右侧对齐*/
left:100%;
/*与父菜单项顶边对齐*/
top:0;
}
/*顶级垂直菜单宽度*/
.multi_drop_menu.vertical {width:8em;}
.multi_drop_menu.vertical li a {
border-right-style:none;
border-top-style:solid;
}
.multi_drop_menu.vertical li li a {border-left-style:solid;}
.multi_drop_menu.vertical ul,
.multi_drop_menu.vertical li {
/*让顶级菜单垂直显示*/
float:none;
}
.multi_drop_menu.vertical li ul {
/*子菜单左边与上一级菜单右边对齐*/
left:100%;
/*子菜单顶边与上一级菜单项顶边对齐*/
top:0;
}
</style>
</head>
<body>
<nav class="multi_drop_menu vertical">
<!-- 一级开始 -->
<ul>
<li><a href="#">Power</a></li>
<li><a href="#">Money</a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Fame</a>
<!-- 二级开始 -->
<ul>
<li><a href="#">Sports Star</a></li>
<li><a href="#">Movie Star</a></li>
<li><a href="#">Rock Star</a>
<!-- 三级开始 -->
<ul>
<li><a href="#">Bruce Springsteen</a></li>
<li><a href="#">Bono</a></li>
<li><a href="#">Mick Jagger</a></li>
<li><a href="#">Bob Dylan</a></li>
</ul>
<!-- 三级结束 -->
</li>
<li><a href="#">Web Designer</a></li>
</ul>
<!-- 二级结束 -->
</li>
</ul>
<!-- 一级结束 -->
</nav>
</body>
</html>
浙公网安备 33010602011771号