sass实现前端页面基础框架布局

知识点总结

sass控制指令 @if @else
sass 混合指令 @mixin @include
flex布局
column- 布局
css 修改滚动条 -webkit-scrollbar-
背景图片平铺页面（no-repeat center center fixed /cover）
下载安装sass （详见菜鸟教程点击详情）

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="./index.css"/></head><body><div id="app"><header><div class="left-logo"><img src="img/logo.png" ></div><div class="right-nav"><div class="nav-item">篮球</div></div></header><div class="main-content"><div class="sidebar"><div class="sidebar-page"><p>哈哈哈</p></div></div><div class="container"><div class="content-page"><div class="content"><div class="nav-item"></div><div class="nav-item"></div></div></div></div><footer>©2022-2033</footer></div></body>
</html>

sass代码

@mixin flex-a-center {display: flex;align-items: center;
}
@mixin flex-a-j-center {display: flex;justify-content: center;align-items: center;
}
@mixin flex {display: flex;
}
/*** $w:0* $h:0*/
@mixin w-h($w:0,$h:0) {@if $w == 0 and $h != 0 {height: $h;} @else if $w != 0 and $h == 0{width: $w;} @else if $w != 0 and $h != 0{height: $h;width: $w;}
}
/*** @param {Object} $pTop | 上内边距 0px* @param {Object} $pBottom | 下内边距 0px* @param {Object} $pLeft | 左内边距 0px* @param {Object} $pRight | 右内边距 0px* @param {Object} $isBs | 保持原大小 true/false* @param {Object} $around | 四周都有边距 0*/
@mixin padding-b-s($pTop:0px,$pBottom:0px,$pLeft:0px,$pRight:0px,$isBs:true,$around:0){@if $around != 0 and $isBs == true  {padding: $around;box-sizing: border-box;} @else if $around != 0 and $isBs == false {padding: $around;} @else if $around == 0 and $isBs == true{padding-left: $pLeft;padding-top: $pTop;padding-bottom: $pBottom;padding-right: $pRight;box-sizing: border-box;} @else if $around == 0 and $isBs == false{padding-left: $pLeft;padding-top: $pTop;padding-bottom: $pBottom;padding-right: $pRight;}
}
body,html{margin: 0;font-size: 14px;font-weight: bold;color: #0F0F0F;@include w-h($w:100%,$h:100%);@include padding-b-s($isBs:false)
}#app{@include w-h($w:100%,$h:100%);background: url(img/bg.jpeg) no-repeat center center fixed;background-size: cover;position: relative;min-width: 768px;
}
header{@include w-h($h:60px);background:rgba(255,255,255,0.5);@include flex-a-center;@include padding-b-s($pLeft:20px,$pRight:20px,$isBs:false);justify-content: space-around;.left-logo{flex: 1;img{@include w-h($w:40px,$h:40px);}}.right-nav{@include padding-b-s($around:20px,$isBs:false);column-count: 5;column-gap: 10px;column-rule:3px outset #0000FF;column-width: auto;.nav-item{@include padding-b-s($pLeft:20px,$pRight:20px,$isBs:false);text-align: center;cursor: pointer;&:hover{color: #fff;}}}
}
footer{@include flex-a-j-center;@include w-h($w:100%,$h:60px);background: rgba(255,255,255,0.5);position: fixed;bottom: 0;
}
.main-content{@include flex;@include padding-b-s($around:20px);@include w-h($h:calc(100vh - 120px));.sidebar{@include w-h($w:200px,$h:100%);.sidebar-page{background: rgba(255,255,255,0.5);border-radius: 8px;overflow-y: auto;@include w-h($h:100%);@include padding-b-s($around:20px);&::-webkit-scrollbar{@include w-h($w:5px);}&::-webkit-scrollbar-thumb{border-radius:10px;background-color:#fff;}}}.container{flex: 1;@include w-h($h:100%);margin-left: 20px;.content-page{background: rgba(255,255,255,0.5);border-radius: 8px;@include padding-b-s($around:20px);overflow-y: scroll;@include w-h($h:100%);&::-webkit-scrollbar{width: 5px;}&::-webkit-scrollbar-thumb{border-radius:10px;background-color:#fff;}.content{column-count: 6;column-gap: 20px;-moz-column-count:6; /* Firefox */-webkit-column-count:6; /* Safari 和 Chrome */-moz-column-gap: 20px;-webkit-column-gap: 20px;.nav-item{height: 260px;border-radius: 12px;background: #00AA7F;break-inside:avoid;-webkit-column-break-inside: avoid;margin-bottom: 20px;}}}}
}

sass实现前端页面基础框架布局相关推荐

❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
旅游系统（SSM框架+MySQL+Redis+VUE）前端页面代码
旅游系统(SSM框架+MySQL+Redis+VUE)前端页面代码文章目录旅游系统(SSM框架+MySQL+Redis+VUE)前端页面代码主页登录页注册页注册成功头部尾部收藏我的 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
flask后台管理系统快速开发案例之bootstrap搭建前端页面框架
这次为了给大家来一次较为完整的flask知识的分享,于是乎,我干脆直接写一个较为全面的,从前端到后端均自定义的基于flask的后台管理项目,先给大家看一下本次项目的效果图: 因为是示范版的,比较简洁, ...
SpringMVC(SSM)框架搭建JavaWeb项目时，前端页面文件上传，后台Java下载功能实现及相关问题记录说明
看在前面:前端页面通过input控件实现文件上传,后台Java使用SpringMVC框架的实现网上有较多教程,但是真正配置一遍下来不报错的较少,所以本博客前面先介绍一遍完整的设置步骤,然后介绍遇到的一 ...
android 模仿微信布局,【Android初学者】框架布局：仿微信页面制作
学习Android有一段时间了,跟大家分享一下经验吧! 如果有错误的地方,有更好的方法,麻烦大家留言指导! 工具:studio2.2,虚拟机版本:4.3,API 18(感觉比5.1的稳定啊!) 例子是 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询修改密 ...
div 页面框架布局
div 页面框架布局 There is no nutrition in the blog content. After reading it, you will not only suffer fro ...
2.18 前端页面布局方式的演变
第一阶段现在已经很少有人提及,其实最早的页面布局是使用table布局的,那时候的网页设计师基本不会担心跑位的问题,但是随着网页的功能越来越复杂,CSS的表现力越来越强,对HTML文档的语义化要求和页 ...

sass实现前端页面基础框架布局

sass实现前端页面基础框架布局相关推荐

最新文章

热门文章