Vue3留言墙项目——头部和底部静态页面搭建

文章目录

创建项目
头部
底部

创建项目

Vue中使用scss

头部

头部当中有两个按钮，然后根据设计稿可知，本留言墙中有4个按钮，所以可以自己封装一个按钮组件

按钮组件的博客

components/TopNav.vue

<template><div class="topNav"><div class="left"><img src="@/assets/img/logo.svg" alt="" /><span class="title">ZEMOZ</span></div><div class="center"><my-button-vue type="primary">留言墙</my-button-vue><my-button-vue type="default">照片墙</my-button-vue></div><div class="right"><div class="user-head"></div></div></div>
</template><script>
import MyButtonVue from "./MyButtoon/MyButton.vue";
export default {components: {MyButtonVue,},
};
</script><style lang="scss" scoped>
.topNav {width: 100%;//   max-width: 1500px; 这里加了这句话以后，页面缩放会很怪height: 52px;background: rgba(255, 255, 255, 0.8);box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);// 毛玻璃效果backdrop-filter: blur(10px);position: fixed;top: 0;left: 0;z-index: 9999;padding: 0 30px;display: flex;justify-content: space-between;align-items: center;flex: 0 0 200px;.left {display: flex;align-items: center;img {width: 32px;height: 32px;margin-right: 10px;}}.center {flex: 1;}.right {flex: 0 0 100px;.user-head {border-radius: 50%;height: 36px;width: 36px;background-image: linear-gradient(180deg, #7be7ff, #1e85e2);}}
}
</style>

底部

麻了写html和css的时候一定要先把大的框架搭建出来再往里面仔细去写，否则思路很容易乱掉。

比如这个底部看着是三栏布局，就先把布局搭好，最后再往每一部分里面仔细写

<template><div class="footer"><div class="container"><div class="left">时光</div><div class="center">链接</div><div class="right">支付</div></div></div>
</template><script>
export default {};
</script><style lang="scss" scoped>
.footer {margin-top: 200px;background-color: $gray-1;width: 100%;height: 200px;.container {width: 1200px;display: flex;padding-top: $pd-20;box-sizing: border-box;color: $gray-10;.left {width: 400px;}.center {flex: 1;}.right {width: 200px;}}
}
</style>

最后实现效果为：

<template><div class="footer"><div class="container"><div class="left"><div class="user"><img src="@/assets/img/logo.svg" alt="" /><p class="logo-name">ZEMOZ</p></div><p class="center-p">该留言墙是本人独自开发的，为便于与用户交流的留言平台。用户将留言便签贴在留言墙上，用户可以自定义便签颜色和内容属性，不仅可以用于交流，也是一场记录。</p><p class="center-p"></p><div class="bottom"><span>声明</span><span>备案/许可证豫ICP备11111111号 </span><span>网站备案/许可证豫ICP备11111111号-1</span></div></div><div class="center"><p class="title">链接</p><div class="link"><a href="javascript">gitee</a><a href="javascript">CSDN</a></div></div><div class="right"><p class="title">打赏</p><div class="qr-code"><div class="payfor wechat"><img src="@/assets/img/weixin.png" alt="" /><p class="words">微信支付</p></div><div class="payfor"><img src="@/assets/img/zhifubao.jpg" alt="" /><p class="words">支付宝支付</p></div></div></div></div></div>
</template><script>
export default {};
</script><style lang="scss" scoped>
.footer {margin-top: 200px;background-color: $gray-1;width: 100%;height: 200px;.container {display: flex;padding: $pd-20 100px 0;box-sizing: border-box;color: $gray-10;.left {.user {display: flex;align-items: center;padding-bottom: $pd-20;.logo-name {padding-left: $pd-20;font-size: $font-16;}}.center-p {font-size: $font-12;text-align: left;width: 400px;}.bottom {margin-top: $pd-20;font-size: $font-12;box-sizing: border-box;span {padding-right: $pd-8;}}}.center {flex: 1;margin-left: -200px;.title {margin-left: -55px;}.link {a {&:first-child {margin-right: 20px;}}}}.title {font-size: $font-16;padding-bottom: $pd-8;}.right {width: 200px;.title {margin-left: -170px;}.qr-code {display: flex;.payfor {&.wechat {margin-right: $pd-20;}img {width: 100px;height: 100px;padding-bottom: $pd-8;}.words {text-align: left;}}}}}
}
</style>

具体可查看gitee此部分改动的代码——点击跳转

Vue3留言墙项目——头部和底部静态页面搭建相关推荐

Vue3留言墙项目——主体部分静态、mock
文章目录主体头部主体关键部分小卡片组件创建mock数据以及使用主体头部主体部分显示的内容,根据头部点击的是留言墙还是照片墙的按钮,显示不同的内容. 将照片墙和留言墙要渲染的数据抽取到一个j ...
小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面一.效果图二.文件和目录准备新建index.html在根目录新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...
留言墙项目【Vue3 + nodejs + express + mysql】——上
学习视频来自--b站创建项目如何使用 mddir 命令生成目录结构树规范文件目录 ## 默认目录 |-- undefined|-- .gitignore|-- babel.config.js|- ...
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建
把(一)里面创建好的项目文件夹拖入到IDEA里面进行完上步操作后就可以快捷的启动项目了这里稍微修改一下可以让我们启动项目后,自动地打开页面页面搭建和改造对此项目文件进行改造,改造成最终我们需要 ...
Flask项目实战——10—(前台板块页面搭建、文本编辑页面搭建、发布帖子信息前验证权限、帖子模型搭建、发布帖子功能、帖子信息渲染到前后台页面)
1.前台板块页面搭建视图文件查询数据传输到前台界面:前台蓝图文件:apps/front/views.py 注意数据的收集方法和数据传输的类型. # -*- encoding: utf-8 -*- & ...
03----3小时用 websocket 实现聊天室之项目静态页面搭建
创建一个public文件夹,把所有静态资源都放进public文件夹中,如图所示由于要使用public的静态资源,必须使用express 中的语句 // express使用静态资源 app.use(r ...
从0搭建一个Springboot+vue前后端分离项目(三)使用idea进行页面搭建+Element框架
因为搭建一个后台管理系统,如果要手写CSS样式很繁琐,这里使用ELement框架安装Element npm install element-plus --save 引入Element import ...
Zepto实战练习(1)_静态页面搭建及css动画完成
Zepto实战练习最终成品展示 html: <!DOCTYPE html> <html><head><meta charset="UTF-8&qu ...
【SpringBoot】写一个具有留言墙功能的JavaWeb
[SpringBoot]写一个具有留言墙功能的JavaWeb 项目已经部署上线一.需求说明二.概要设计三.详细设计 (一)数据库设计 (二)页面设计 (三)功能设计 (四)项目结构四.具体代码 ...

Vue3留言墙项目——头部和底部静态页面搭建

文章目录

创建项目

头部

底部

Vue3留言墙项目——头部和底部静态页面搭建相关推荐

最新文章

热门文章