搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 熊孩子教研组 > 啥都不会就敢改css

啥都不会就敢改css

熊孩子教研组 2020-06-27

我当时做的导航页面有不少人问我怎么自己改,因为我的样式是按照我自己屏幕调整的,这里我就介绍一种零基础入门教程。

首先用的typora的github主题

这里用到了vscode,如果没有的小伙伴也没关系,用记事本就可以,把css文件拖进去就行,

你这一看一坨代码好像很高端的样子,下面咱来看看到底这玩意是干啥的


首先你得知道哪块是干啥的,这个typora官网有,我就不赘述了,


啥都不会就敢改css

这个就是侧栏颜色,就算没看过官方css参考会英语也能翻译出来,那就调一下呗

调成血红色,保存,看,就是这么丑陋(记事本麻烦就在这,不好看颜色,可以在photoshop打开调色板看或者网上找颜色代码)

啥都不会就敢改css

然后你看官方说怎么调整背景,那就按照他说的加上,我这里选的是本地背景,如果你用的是VScode就直接后面都出来了,但是记事本就得自己敲

啥都不会就敢改css

啥都不会就敢改css

然后自己找个图片填上就行,保存

啥都不会就敢改css

这好像还是太丑
那就在write里面调整一下背景,这是因为官方参考上说了在这调整背景颜色,那就是background-color,就算没学过css只要学过英语就能看出来

啥都不会就敢改css

点上面点几下弄成rgb格式,然后最会加个,0.5,就是这样:


rgb(170, 162, 162,0.5);0.5表示的是透明度,保存

啥都不会就敢改css

你看,界面更丑了

再加阴影

啥都不会就敢改css
这里可以先掠过,后面会介绍

啥都不会就敢改css

那就变成这样了
我们再来调一下margin和padding,
问:这俩是啥?答:百度直接搜索

啥都不会就敢改css

同样在搜一下padding
至于为啥改这俩,这是因为官方那里面写着,如果会css不会问为啥,但是这里我们的目标是不会就敢改

    margin-top:    30px;

    margin-bottom: 30px;

啥都不会就敢改css

那你看,改了之后就不顶头了,这就是margin作用
然后先改代码块,我一看这有个code,那我觉得这差不多了
啥都不会就敢改css
这个东西,我这直接把颜色改了

啥都不会就敢改css

这好像没啥用哎,但是边框改了,再看,好像前面还有个.md-fence,你看,这貌似级别比他高,那就改成红色

md-fences {

    background-color: #cc6e6e;

}

啥都不会就敢改css

那你看这,更丑了

我们再看原先的这块,我觉得我大可以改改

啥都不会就敢改css

先看一下border,顾名思义,边框,他说1px,我觉得这就是宽度类似的吧,改成20看看先

啥都不会就敢改css

你看,果然

再看一下border-radius,直译过来就是边-半径?不管,先调再说调到20

啥都不会就敢改css

那这就是他边圆不圆呗,再加个阴影,那就是box-shadow,直接翻译就是盒子阴影,要是不知道可以看css手册

 box-shadow: 6px 6px 3px #888a2e

啥都不会就敢改css

那个padding干啥的呐?先改改再说

改了一通没啥反应,那就改回去,先放那

好,这你大概就调整完了,然后再看公式块,查后知道是

[mdtype=”math_block”]

你看前面都是#write 。。。,那你这就是#write [mdtype=”math_block”]

然后先把代码快的复制进去

现在这个主题已经抽到家了,但是我们的目的是该清楚这都干什么的。

我估计你大体已经清楚了

你可以把background-color换成background-img,然后自己选个图片,总之玩花就行。

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《啥都不会就敢改css》的版权归原作者「熊孩子教研组」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注熊孩子教研组微信公众号

熊孩子教研组微信公众号:gh_891c2533b9ce

熊孩子教研组

手机扫描上方二维码即可关注熊孩子教研组微信公众号

熊孩子教研组最新文章

精品公众号随机推荐