一、成果展示

当然只是做出样子了，很多地方和自己想的还不一样

二、布局

整体采用flex布局加position定位

单位采用vh和vw

做这个页面最大的收获就是感觉布局上的熟练度增加了

三、滚动容器

点击三个点后会在右侧展开一个容器，选择背景图，超出容器的可以滚动出来。

使用样式overflow：scroll来实现

本来这个东西想封装成一个组件，但是失败了。

四、头像和背景图切换

头像旁边也有一个类似的盒子，当然不只是展示图片，点击后可以切换图片

（因为不会搭服务器，只能用网上的图凑活下了）

背景图和头像的原理是一样的，展示一下头像

<div class="imgside" :style="{'display' : (TouChanging ? 'block' : 'none')}"><div v-for="item in touImgUrl" class="touimg"><img :src="item" alt="" @click="ChangeTouImg(item)">//用v-bind绑定数据，v-for做循环</div></div>ChangeTouImg(m){this.TouImg = m;//这个变量存储图片的地址}touImgUrl:['https://uploadstatic.mihoyo.com/contentweb/20200306/2020030617015669833.png','https://uploadstatic.mihoyo.com/contentweb/20200724/2020072414340926231.png','https://uploadstatic.mihoyo.com/contentweb/20200828/2020082814015644368.png','https://uploadstatic.mihoyo.com/contentweb/20210420/2021042014093440786.png','https://uploadstatic.mihoyo.com/contentweb/20210720/2021072011085576262.png','https://uploadstatic.mihoyo.com/contentweb/20210802/2021080210195390130.png','https://uploadstatic.mihoyo.com/contentweb/20210617/2021061716564818668.png'],//所有的图片

五、样式绑定

盒子不可能一直处于显示状态，很影响美观

采用样式绑定display的形式来控制盒子的显示和隐藏

TouChanging:false,//控制盒子是否显示<div class="imgside" :style="{'display' : (TouChanging ? 'block' : 'none')}">
//样式绑定的格式TolTou(){this.TouChanging = !this.TouChanging;//使用取反来减少代码量},

六、遗留问题

某些数据（头像路径，rks这些数值，应该存储在vuex中）

滚动盒子封装组件未遂，不知道为啥封成组件就报错

背景图的比例问题，需要学习一下css的background属性

七、语法复习

css：flex布局，overflow属性，文字属性

vue：样式绑定

es6：模板字符串

八、犯病

我：neko，嘿嘿，我的neko，不要禁言我，我要做你的狗【该用户已被禁言】

neko：这tm是个什么东西！

Vue制作静态页面--Day03相关推荐

HTMLCSS仿京东首页制作静态页面总结
目录一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用三.字体图标的使用四.base.css和comm ...
Vue编写静态页面框架的基本步骤（实现基本的页面链接跳转）
第一步:定义一个整体的框架(即主页面:可以到element-ui官网-组件-container中找自己满意的) 第二步:将官网的框架拷贝到开发软件中 <template><div&g ...
制作静态页面的悬浮框
在写页面之前,我们首先要对所要实现的界面进行相应的分析,理清层次之后再写. 今天我们以小米官网为例,来进行这样悬浮框的实现. 第一步,我们要分析一下. 我们需要实现的功能: 滑动滚轮,悬浮框能够在页面 ...
基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品...
基于HTML+CSS制作静态页面【剪纸文化15页】传统文化设计题材 dreamweaver制作静态html网页设计作业作品
html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
关于静态页面布局中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
【转】Vue.js入门教程（一）从静态页面到前后端分离开发
第一章:基础知识我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
制作生成静态页面的新闻系统
利用PHP生成静态HTML页面的好处很多: 1.静态页面不需要Web服务器解释执行,用户打开网页的速度会快些: 2.打开静态页面时,Web服务器不需要访问数据库,减轻了对数据库访问的压力: 3.静态H ...

Vue制作静态页面--Day03