css响应式自适应导航条菜单效果代码

代码语言:html

所属分类:响应式

代码描述:css响应式自适应导航条菜单效果代码

代码标签: css 响应式 自适应 导航条 菜单

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Saira:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *:not(ul) {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	box-sizing: border-box;
    }
    *:not(ul)::after, *:not(ul)::before {
    	box-sizing: border-box;
    }
    
    h1 {
    	font-size: 2.5rem;
    }
    
    h2 {
    	font-size: 2rem;
    }
    
    h3 {
    	font-size: 1.75rem;
    }
    
    h4 {
    	font-size: 1.5rem;
    }
    
    h5 {
    	font-size: 1.25rem;
    }
    
    h6 {
    	font-size: 1rem;
    }
    
    a {
    	text-decoration: none;
    	color: #464646;
    }
    
    ul {
    	margin: auto;
    	box-sizing: border-box;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-weight: 500;
    	font-family: inherit;
    	margin-bottom: 1rem;
    	line-height: 1.5;
    	color: inherit;
    }
    
    .btn-primary {
    	display: inline-block;
    	cursor: pointer;
    	color: #FFF;
    	padding: 0.5rem 1.5rem;
    	margin: 1rem auto;
    	text-decoration: none;
    	border-radius: 2px;
    	background: black;
    	text-align: cen.........完整代码请登录后点击上方下载按钮下载查看

网友评论0