纯css模仿win8 metro风格开始菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:纯css模仿win8 metro风格开始菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
background: #056c86;
color: #fff;
font-weight: 300;
font-size: 1.5em;
font-family: 'Lato', Arial, sans-serif;
margin:0;
padding:0;
padding-bottom:40px;
}
.description{
line-height:40px;
}
a {
color: #b5a4fb;
text-decoration: none;
}
a:hover, a:focus {
color: #000;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a, button {
outline: none;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.header{
background: #004050;
color: #fff;
text-align: center;
}
/* To Navigation Style */
.cctop {
background:#056c86;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 0.75em;
line-height: 3.2;
}
.cctop a {
display: inline-block;
padding: 0 1.5em;
text-decoration: none;
letter-spacing: 1px;.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0