Django打造大型企业官网(三)
程序员文章站
2022-07-11 12:50:56
四、前端首页 4.1.导航条实现 (1)templates/new/index.html 阿里云图标网站:https://www.iconfont.cn/ 搜索person-->>添加入库-->>添加至项目-->>编辑图标-->>放大-->>仅保存-->>查看在线链接 (2)src/css/init ......
四、前端首页
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>
阿里云图标网站:
搜索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; } } } }
导航条效果
下一篇: mysql 级联删除