技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-3.使用flex布局并开始搭建web端

简介: lex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。其中justify-content(水平方向对齐)属性和align-content(垂直方向对齐)属性更方便地解决元素的对其、分布方式
1.用sass工具定义flex布局样式
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
其中 justify-content(水平方向对齐)属性align-content(垂直方向对齐)属性更方便地解决元素的对其、分布方式
在这里插入图片描述
在这里插入图片描述
具体在什么场景如何得到效果大家去链接中测试。

sass工具定义:

// flex布局
.d-flex{
    display: flex;
}
$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
);
@each $key,$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}
$flex-ac: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
);
@each $key,$value in $flex-ac {
    .ac-#{$key} {
        align-content: $value;
    }
}

在这里插入图片描述
另外,如果遇到需要让几个灵活项目横、纵向排列,可以用到flex-derection:

.flex-column{
    // 灵活的项目将垂直显示,正如一个列一样。
    flex-direction: column;
}

在这里插入图片描述
在这里插入图片描述

2.利用sass生成的css搭建web端

(1)添加web端路由
具体路由操作见admin路由设置
与admin端相同,直接给web端添加路由:

cd web 
vue add router

选择no,使用普通路由
在这里插入图片描述
安装完成后,web端文件自动配置,同时页面出现了路由:
在这里插入图片描述
在这里插入图片描述
我们不在所有页面使用固定路由,所以删掉vue默认设置的路由。
在这里插入图片描述
新建主入口页面Main.vue,将Main组件当作主页面,把Home.vue视为首页组件,通过路由将Home.vue作为子组件引入到Main.vue:
在这里插入图片描述
在这里插入图片描述
待页面样式完善后,添加其他页面路由。
(2)使用sass生成的css优化界面
在这里插入图片描述
给我们需要添加效果的模块直接添加类名即可。
我的页面,其中首页为Home.vue,技能学习为Skill.vue,文章中心为Article.vue:
在这里插入图片描述
Main.vue

<template>
    <div>
        <div class="topbar py-2 px-3 d-flex ac-center">
            <img src="../assets/logo.png" height="50">
            <div class="px-2 flex-1">
                <div class="text-black fs-lg pt-2">八方设计</div>
                <div class="text-gray fs-xxs pt-2">用设计挖掘梦想</div>
            </div>
            <div class="py-3">
                <button class="btn bg-primary text-white">用户登录</button>
            </div>
        </div>
        <div class="bg-primary pt-3 pb-2">
            <div class="nav d-flex text-white jc-around">
                <div class="nav-item">
                    <!-- 导航使用路由的active-class,根据所在路由位置为标签添加类名,同时在style.scss中设置active类名的样式 -->
                    <!-- extra属性与active-class配合使用,更精确找到路由位置,若不加则会认为/skill在/内(即技能学习在首页内部),二者都会被赋予active类名 -->
                    <router-link class="nav-link" tag="div" to="/" active-class="active" exact>首页</router-link>
                </div>
                <div class="nav-item">
                    <router-link class="nav-link" tag="div" to="/skill" active-class="active" exact>技能学习</router-link>
                </div>
                <div class="nav-item">
                    <router-link class="nav-link" tag="div" to="/article" active-class="active" exact>文章中心</router-link>
                </div>
            </div>
        </div>

        <!-- 路由组件 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>
    .fs-xxs{
        letter-spacing: 3px;
    }
    .fs-lg{
        letter-spacing: 3px;
    }
    .topbar{
        /* 吸顶效果 */
        position: sticky;
        top: 0;
        z-index: 999;
    }
</style>

style.scss

// 规范样式

* {
    // 避免margin/padding等将页面向外扩充,加入border-box后页面像内部挤压
    box-sizing: border-box;
    // 取消鼠标移入等高亮样式
    outline: none;
}

html {
    // 设置默认字体大小
    font-size: 13px;
}

body {
    // 设置body默认

    // 去除body边框
    margin: 0;
    // 设置字体:所有计算机自带字体,苹果电脑自带字体,非衬线字体
    font-family: Arial, Helvetica, sans-serif;
    // 行距
    line-height: 1.2rem;
    // 背景颜色
    background: #f5f5f5;
}

a {
    color: #999;
}

ul, li{
    list-style: none;
}


// colors常用颜色
$colors: (
    // 主色
    "primary": #a80506,
    // 辅色
    "auxiliary": #054ea8,
    // 点缀色
    "Embellishment":#db9e3f,

    // 白色
    "white": #fff,
    // 黑色
    "black": #000,
    // 灰色
    "gray": #777,
);
@each $colorKey, $color in $colors {
    // 文字颜色
    .text-#{$colorKey} {
        color: $color;
    }
    // 背景颜色
    .bg-#{$colorKey} {
        background: $color;
    }
}

// text常用文本
@each $var in (left, center, right) {
    .text-#{$var}{
        text-align: $var;
    }
}
// 使用px to rem插件设置默认字体大小为13px
// 设置基础字体大小
$base-font-size: 1rem;
// 根据基础字体大小设置字体大小
$font-size: (
    // 使用px to rem插件,alt + z 转化px到rem
    // xs为6px
    xxs: 0.4615,
    // xs为10px
    xs: 0.7692,
    // sm为12px
    sm: 0.9231,
    // md为13px
    md: 1,
    // lg为14px
    lg: 1.0769,
    // xl为16px
    xl: 1.2308,
);
@each $sizeKey, $size in $font-size {
    // 文字颜色
    .fs-#{$sizeKey} {
        font-size: $size * $base-font-size;
    }
}


// flex布局
.d-flex{
    display: flex;
}
.flex-1{
    flex: 1;
}
.flex-column{
    // 灵活的项目将垂直显示,正如一个列一样。
    flex-direction: column;
}
$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
);
@each $key,$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}
$flex-ac: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
);
@each $key,$value in $flex-ac {
    .ac-#{$key} {
        align-content: $value;
    }
}


// 间距spacing
// bootstrap中,mt-1 -> margin-top: 1rem, pb-2 -> padding-bottom: 2rem

// 类型
$spacing-types: (m: margin, p: padding);
// 方向
$spacing-directions: (t: top, r: right, b: bottom, l:left);
// 尺寸
$base-spacing-size: 1rem; // 基础尺寸
$spacing-sizes: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3); // 基础尺寸为准的倍数
@each $typeKey, $type in $spacing-types {
    @each $directionKey, $direction in $spacing-directions {
        @each $sizeKey, $size in $spacing-sizes {
            // 样版: .mt-1 { margin-top: 0.25rem }
            .#{$typeKey}#{$directionKey}-#{$sizeKey} {
                #{$type}-#{$direction}: $size * $base-spacing-size;
            }
        }
    }
}
// m-1, p-1等只需要嵌套类型变量$spacing-directions和尺寸变量$spacing-sizes
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // 样版: .mt-1 { margin-top: 0.25rem }
        .#{$typeKey}-#{$sizeKey} {
            #{$type}: $size * $base-spacing-size;
        }
    }
}

// 水平、垂直方向边距
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // mx-1,px-1
        .#{$typeKey}x-#{$sizeKey} {
            #{$type}-left: $size * $base-spacing-size;
            #{$type}-right: $size * $base-spacing-size;
        }
        // my-1,py-1
        .#{$typeKey}y-#{$sizeKey} {
            #{$type}-top: $size * $base-spacing-size;
            #{$type}-bottom: $size * $base-spacing-size;
        }
    }
}

// button
.btn{
    border: none;
    border-radius: 0.1538rem;
    font-size: map-get($font-size, 'sm') * $base-font-size;
    padding: 0.4rem 0.6rem;
}

// nav-border
.nav{
    .nav-item{
        border-bottom: 3px solid transparent;
        padding-bottom: 0.2rem;
        // 符号&代表上一层本身
        .active{
            border-bottom: 2px solid #fff;
        }
    }
}
相关文章
|
1天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
13 2
|
1天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
12 1
|
8天前
|
JavaScript 前端开发 测试技术
探索现代JavaScript开发的最佳实践
本文探讨了现代JavaScript开发中的最佳实践,涵盖ES6+特性、现代框架使用、模块化与代码分割、测试驱动开发、代码质量与性能优化、异步编程、SPA与MPA架构选择、服务端渲染和静态站点生成等内容,旨在帮助开发者提升代码质量和开发效率。
|
11天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
16天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
13天前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
33 4
|
17天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
36 2
|
24天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
39 5
|
14天前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
30 0
|
21天前
|
JavaScript 前端开发 安全
深入浅出Node.js后端开发
【10月更文挑战第26天】在这篇文章中,我们将一起探索Node.js的奇妙世界。不同于传统的Java或Python,Node.js以其异步非阻塞I/O和事件驱动的特性,在后端开发领域独树一帜。无论你是初学者还是资深开发者,这篇文章都将为你提供新的视角和思考。从基础概念到实际应用,我们一步步深入Node.js的世界,让你了解其不仅仅是JavaScript运行环境那么简单。
下一篇
无影云桌面