自己的博客
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-width: 641px){ .content{ height: 1000px; width: 12rem; margin: 0 auto; background: #666; } } @media screen and (max-width: 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())
完成了,整个适配很不错
手机也能很好看的查看
电脑首页