四、前端首页
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,5b8b4f53;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; } } } }
导航条效果
4.2.主题盒子布局
templates/news/index.html
<div class="main"> <div class="wrapper"> <div class="news-wrapper"></div> <div class="sidebar-wrapper"></div> </div> </div>
src/css/index.scss
.main{ width: 100%; margin-top: 84px; .wrapper{ width: $pageWidth; margin: 0 auto; background: green; height: 1000px; overflow: hidden; .news-wrapper{ float: left; width: 798px; height: 500px; background: yellowgreen; } .sidebar-wrapper{ float: right; width: 356px; height: 500px; background: deeppink; } } }
固定导航条
src/css/index.scss
.header{ width: 100%; height: 64px; background: #3a3a3a; position: fixed; left: 0; right: 0; top: 0;
效果
