四、前端首页
4.1.导航条实现
（1）templates/new/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>知了课堂</title>
<link rel="stylesheet" href="../../dist/css/index.min.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1239817_3xfonheuqlv.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo-box">
<a href="/"></a>
</div>
<ul class="nav">
<li class="active"><a href="/">资讯</a></li>
<li><a href="/">创业课堂</a></li>
<li><a href="/">企业服务</a></li>
<li><a href="/">搜索</a></li>
</ul>
<div class="auth-box">
<i class="icon-person iconfont"></i>  
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</header>
</body>
</html>
阿里云图标网站：https://www.iconfont.cn/
搜索person-->>添加入库-->>添加至项目-->>编辑图标-->>放大-->>仅保存-->>查看在线链接
（2）src/css/init.scss
清除浏览器默认样式
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
（3）src/css/constants.scss
放一些常量
$pageWidth: 1170px
（3）src/css/index.scss
@import "init.scss";
@import "constants.scss";
.header{
width: 100%;
height: 64px;
background: #3a3a3a;
.container{
width: $pageWidth;
height: 100%;
margin: 0 auto;
overflow: hidden;
.logo-box{
width: 140px;
height: 49px;
background: url("https://www.xfz.cn/static/build/images/logo.png") no-repeat;
margin-top: 8px;
float: left;
a{
display: block;
width: 100%;
height: 100%;
}
}
.nav{
margin-left: 128px;
float: left;
li{
float: left;
margin-right: 40px;
line-height: 64px;
height: 64px;
box-sizing: border-box;
font-size: 22px;
a{
color: #fff;
}
&.active{
border-bottom: 5px solid #5c87d9;
}
}
}
.auth-box{
float: right;
line-height: 64px;
height: 64px;
color: #fff;
.iconfont{
color: #fff;
font-size: 20px;
}
a{
color: #fff;
font-size: 22px;
}
}
}
}
导航条效果
原文地址：https://www.cnblogs.com/derek1184405959/p/11013462.html
时间： 2024-10-07 20:47:40