1、一定要使用reset.css
2、背景图
没有内容的话，就不会有背景
fixed可以固定显示
仔细想想，背景图，应该是放在body下的。
然后app组件下，加个半透明的背景色
这样就能很好的实现背景
同时，背景太清晰了，必须模糊一点
filter: blur(2px);
背景图不能放body下
应该放在app组件下
不然刷新页面的时候，会把清晰的背景图显现出来。
整体CSS
<template> <div id="app"> <div id="container"> <keep-alive> <router-view/> </keep-alive> </div> </div> </template> <script> export default { name: 'App' } </script> <style scoped> #app{ background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed no-repeat; background-size: 100%; filter: blur(2px); } #container{ width: 100%; height: 1500px; background-color: rgba(255,255,255,0.8); } </style>
图片要改成
repeat-y
不然缩放之后，下面就没背景了
x轴不需要
有个问题
这个属性，会让这个div下所有子元素都模糊。所以完美的做法是通过after伪类去搞
需要z-index+position去使得after档住父元素
z-index要设置为负数，不然档住子元素了
#app{ position: relative; z-index: -2; } #app::after{ content: ""; width: 100%; height: 100%; position: absolute; left:0; top:0; background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed repeat-y; background-size: 100%; filter: blur(2px); z-index: -1; }
after是个很奇妙的东西
https://blog.csdn.net/csu_passer/article/details/78406702
after不行
给app设置了-2，after-1。现在页面默认body是0
那么最上层的就是body了。app container里面的东西是无法交互的！
将contaner的层级提到最高，背景全都不见了？？？？为啥
父元素高度为0，因为孩子都浮动了，坍塌
给app显示赋值1500px
after有高度
但是所有常规的清楚浮动方法都无效了
不对。这个不是浮动了。
是因为absolute脱离的文档流，用清除浮动当然没有效果
<div class="container"> <div class="bg"> </div> <div class="content"> </div> </div> <style> /*父元素宽100%，是根据body渲染的*/ .container{ width: 100%; } /*bg width100% 根据contanier*/ /*height 100% 但是目前父元素高度是0*/ .bg{ width: 100%; height: 100%; } /*现在才撑开父元素*/ .content{ width: 100%; height: 1500px; }
如果bg写在后面呢？
还是0。
没有办法的
所以，父元素的高度无法确定的情况下，没法设置模糊背景！
可以在父元素渲染玩之后，通过js代码设定bg的高度
但是vue里面，这种方法不行。。。算了不要背景了
用fixed即可。。。
把背景全都丢进fixed里面。很奇怪的。
因为fixed是一个特殊的potiton，他也脱离文档流，但是他和absolute不一样，他是相对于窗口的，所以他设置height100%的话，高度就是窗口高度
最终效果如下
<template> <div id="app"> <div id="container"> <home-header></home-header> <keep-alive> <router-view/> </keep-alive> </div> <div id="bg"></div> </div> </template> <script> import HomeHeader from "./components/header/Header"; export default { name: 'App', components: {HomeHeader} } </script> <style scoped> #app{ width: 100%; } #container{ width: 100%; height: 1500px; background-color: rgba(255,255,255,0.8); } #bg{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url("https://blog-1252736437.cos.ap-shanghai.myqcloud.com/background.png") fixed repeat-y; background-size: 100%; filter: blur(2px); z-index: -1; } </style>
这样fixed高度100%了，有个坏处，如果contaniner里面的东西，还没到一个窗口大小呢？
footer就会跑上去了
footer position absolute botton 0 也没有用
他是根据窗口定位的。
所以出现滑动条的话，他就卡在中间了。
没法，所以以后的container，最小高度一定要比窗口大
为了不让缩放 发现min-width 也不起作用
可以对content只设置max - width
内容做成这样子，也算小响应式吧
起码iphone5没问题了
@media screen and (min- 641px){ .content{ height: 1000px; width: 12rem; margin: 0 auto; background: #666; } } @media screen and (max- 640px){ .content{ height: 1000px; width: 100%; background: #eee; } }
给App下的container加一个min-height 90vh 即可
最小的高度都会有90vh了，如果大了可以自动增长，这样的话，就能保证背景和footer了
但是在iphone下，还是会有一点问题？
明明都不止一个屏幕的高度了呀
o对了！ 因为margin！！最后一个元素距离footer还有边距呢！
元素内部padding就好了
感觉要进行路由守卫，不然乱路由，
因为页面是根据路由参数渲染的，不守卫会有Bug
主要的难点就是如何上传文章/显示文章！
服务器URL，必须好好敲定....设计
因为使用了CssReset，所有的标签都没有样式了，要自己添加
用了marked，能正确转换了。。
但是转换出来的引用和代码标签.... 没有样式啊？
mark转换出来的东西，只有基础的标签而已.
果然，是需要去网上找样式的。。。
贼难找
找到了样式，不要高亮的话
一个办法，把需要的样式copy下来，再微调
高亮效果很差，很多颜色冲突，或者注释检测不到，还不如不高亮了
1、在node通过marked对markdown进行转换
2、使用外部的css样式进行渲染
这样就能引入外部样式，又不影响全局了
marked的用法
const marked = require('marked');
const highlight = require('highlight.js');
const fs = require('fs');
fs.readFile('test.md',(err,data) =>{
if(err){
console.log(err);
}else{
fs.writeFile('target.txt',marked(data.toString()),err=>{
if(err){
console.log(err)
}
});
}
});
就是把内容转换成对应的html
marked(data.toString())
完成了，整个适配很不错
手机也能很好看的查看
电脑首页
