Solid | 易学教程

博客园自定义皮肤

阅读更多关于博客园自定义皮肤

一、背景在园子里浪迹有很长一段时间了，里面遇到了很多大神，学习了很多知识，也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧，在园子这么久，很少发布博文。主要原因是自己有点懒，其他的客观原因也就不说了，每个人都有自己当时的想法。结果现在就有一种“我虽在江湖，但江湖没有我的传说”的尴尬，本着“迟到比不到好”的思想，就想着在这里记录一下自己平凡的学习成长历程，也希望能帮助园友们避免我踩过的坑。之前在逛园子的时候，就发现有些博主的主题很好看，查找了一些攻略，根据自己的喜好，简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客，可以跟我一起，需要有css基础。二. 定制自己的博客 1、准备工作先在博客主页依次点击“ 管理 ”=》“ 设置 ”，下面找到“ 申请JS权限 ”，等待审核，审核通过之后才能，定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式，我觉得站在巨人的肩上，一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”]，每个人的爱好不一样，你可以选择你喜欢的皮肤进行修改，不过下面的一些样式可能需要做一些修改，具体看你想要怎么展示。自定义主题样式操作，对于你不满意的元素，你可以在该页面按F12调出Debug工具，然后对该元素的css进行修改，调整满意之后

HTML及CSS笔记

阅读更多关于 HTML及CSS笔记

目标：Front-end Engineer → Full-stack Engineer 浏览器及其内核 HTML 开发工具 sublime 轻量级的ide 1.使用技巧 h${}*6 vsCode 写大项目时使用 1.使用技巧 SEO-搜索引擎优化 <html lang= "en"> < head > < meta charset = " utf-8 " >  < title > 我是title </ title > < meta content = " 服装 " name = " keywords " > < meta content = " 这是一件你穿了就不想脱的衣服 " name = " description " > </ head > < body >   </ body > </ html > 路径 1. 网上url <img src="https://xxxxxx.jpg" style="width:200px;"> 2.本地的绝对路径 D:/a/b/test.html D:/a/b/c/123.jpg <img src="D:/a/b/c/123.jpg>" 3. 本地的相对路径 …/来表示上一级目录 D:/a/b/test.html D

面向对象编程内功心法系列三（聊一聊设计原则）

阅读更多关于面向对象编程内功心法系列三（聊一聊设计原则）

1.引子说起面向对象编程，我们都知道重要，且需要关注的这么一些事情。比如说设计思想、设计原则、设计模式。之所以说重要，一方面是面试需要，找工作的时候，总需要跟面试官聊上几句，这样显得大家都够专业；另外一方面则这是通往高级工程师，架构师的必备基本技能。在这个系列中，前面我通过两篇文章给你分享了设计思想相关的一些内容，比如说编程范式，基于接口而非实现编程，高内聚低耦合。不知道你都还记得吗？这一篇我想接着给你分享设计原则相关的内容。说起设计原则，你能先说一说都有哪些设计原则吗？经典的设计原则有 SOLID原则 KISS原则 YAGLI原则 DRY原则 LOD原则设计原则的内容稍微有一些多，我们通过两篇文章来分享吧。这一篇我们一起先来看SOLID原则。你需要注意，SOLID并不只是一个设计原则，而是五个原则的统称，它们分别是： SRP（ Single Responsibility Principle ）：单一职责原则 OCP（ Open Closed Principle ）：开闭原则 LSP（ Liskov Substitution Principle ）：里氏替换原则 ISP（ Interface Segregation Principle ）：接口隔离原则 DIP（ Dependence Inversion Principle ）：依赖倒置原则 2.SOLID原则 2.1

关于Sass

阅读更多关于关于Sass

简介 SASS 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 [Compass](http://compass-style.org/)）有助于更好地组织管理样式文件，以及更高效地开发项目。具体可参考中文官网：https://www.sass.hk/ SASS的安装先安装Ruby（下载网址：http://www.ruby-lang.org/zh_cn/downloads/）安装完成后在cmd输入命令：gem install sass 即可安装成功 SASS的四种编译风格 nested：嵌套缩进的css代码，其为默认值 expanded：没有缩进的，扩展的css代码 compact：简洁格式的css代码 compressed：压缩后的css代码 SASS的一些终端命令查看sass文件的css内容，在cmd中输入命令：sass 文件名.scss 把sass文件转为css文件,在cmd中输入命令：sass 文件名.scss 转换后的文件名.css （若想以某种风格压缩）：sass --style 风格名称 xxx.scss xxx.css

设置渐变色

阅读更多关于设置渐变色

<! DOCTYPE html > < html > < head > < meta charset ="utf-8" /> < title ></ title > < style type ="text/css" > #canvas1 { margin : 0 auto ; /* background: #efefef; */ display : block ; border : 1px solid #aaa ; /* width: 600px; height: 400px; */ } </ style > </ head > < body > < canvas id ="canvas1" width ="600" height ="400" > 你的浏览器不支持canvas </ canvas > < script type ="text/javascript" > // 找到要设置的画布 var canvas1 = document.querySelector( ' #canvas1 ' ) // 能够对这个画布画画的对象,就是画笔，canvas1的上下文对象 var ctx = canvas1.getContext( ' 2d ' ) ctx.rect( 100 , 100 , 200 , 100 ) // ctx.fillStyle = 'skyblue' // ctx

博客园添加博客签名 (版权声明)添加From me Github

阅读更多关于博客园添加博客签名 (版权声明)添加From me Github

这个版权信息我们在看一些博客的时候很多都会有一个签名每个随笔都会在末尾加上估计很多小伙伴和我一样开始找不到在哪里添加虽然在后台管理页面可以添加页面的页首Html、侧边栏公告、页尾Html（页首Html这里可以添加Github稍微调一下样式就好了和选择的主题也有一定关系）肯定不是在这些地方后来才发现(登录博客园>我的博客>管理 >博客签名) 博客签名添加HTML 代码  当然你也可以自己定义一些更酷炫的博客签名还有就是在博客园中添加 fork me github 的链接 https://github.blog/2008-12-19-github-ribbons/ http://simonwhitaker.github.io/github-fork-ribbon-css/ 个性化更强 http://codepo8.github.io/css-fork-on-github-ribbon/ https://codepen.io/edull24/pen/diljy 这里可以选择自己喜欢的样式或者是自己写样式添加到页首HTML就可以了 <style> #MySignature { border: solid 1px

wangeditor 支持上传视频版

阅读更多关于 wangeditor 支持上传视频版

1、关于使用哪个富文本编辑器。简单的要求，不要求发布出来的文章排版要求很高。可用wangediter。(简单，体积小，不可修改上传图片的尺寸大小）转载来源： https://blog.csdn.net/m0_37885651/article/details/83660206 添加了：自定义上传方法： customUploadVideo 用法同：customUploadImg (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.wangEditor = factory()); }(this, (function () { 'use strict'; /* poly-fill */ var polyfill = function () { // Object.assign if (typeof Object.assign != 'function') { Object.assign = function (target, varArgs) { //

css入门基础

阅读更多关于 css入门基础

css入门基础笔记一.元素模式 1.块元素 2.行内元素 3.行内块元素 4.元素显示模式总结 5.元素显示转换二.背景 1.背景颜色 2.背景图片 3.背景平铺 4.背景固定 5.背景图片位置注意 6.背景复合写法 7.背景色半透明 8.背景总结三.三大特性 1.层叠性 2.继承性 2.1行高的继承性 3.优先级选择器权重如下表所示注意点权重叠加四.css盒子模型 1.盒子模型组成 1.1边框常用的边框样式：边框复合写法注：表格的细线边框 1.2内边距内边距复合写法注： 1.3外边距 1.4外边距典型应用注： 1.5外边距合并 1.相邻块元素垂直外边距的合并 2.嵌套块元素垂直外边距的塌陷 1.5清除内外边距一.元素模式 1.块元素 2.行内元素 3.行内块元素 4.元素显示模式总结 5.元素显示转换直接写在样式声明里二.背景 1.背景颜色 2.背景图片 3.背景平铺 4.背景固定 5.背景图片位置注意 6.背景复合写法 7.背景色半透明 8.背景总结三.三大特性 1.层叠性 2.继承性 2.1行高的继承性 3.优先级选择器权重如下表所示注意点权重叠加如果是复合选择器，则会有权重叠加，需要计算权重。四.css盒子模型 1.盒子模型组成 1.1边框常用的边框样式： solid 实现边框 dashed 虚线边框 dotted

CSS基础学习笔记

阅读更多关于 CSS基础学习笔记

一、导入样式表：当想要将样式运用到整个网站而不是单张页面时，管理样式的更好的方法是将它们从网页中分离出来，放到称作样式表的独立文件中，以便在需要时导入。 (1).使用CSS的@immport指令导入样式表： < style > @import url(;styles.css'); </ style > (2).从HTML内部导入样式表： < link rel ='stylesheet' type ='text/css' href ='styles.cdd' /> (3).嵌入样式: < div style ='font-style:italic; color:blue;' > Hello there </ div > 二、CSS规则： CSS规则是指一条或一系列语句，用以告诉网页浏览器怎样在页面上渲染某个或某些元素。CSS规则中的每条语句以选择器开始，指定施加规则的元素。规则中所有要修改的属性必须在选择器后面的"{"和"}"内出现。例如，要将一号标题改为红色并放大24%： h1 { font-size : 240% ; color : red ; } 三、CSS选择器用于在页面上访问一个或多个元素的方法称为选择，在CSS规则中的这一部分被称为选择器。 (1) 类型选择器：类型选择器为HTML元素指定类型，像<p>、<div>等： p { text-align :

CSS学习笔记

阅读更多关于 CSS学习笔记

Cascading Style Sheet（层叠样式表、级联样式表） px与屏幕分辨率有关 css样式表推荐的书写顺序：显示属性（display、list-style、position、float、clear) 自身属性（width、height、margin、padding、border、background）文本属性（color、font、text-decoration、text-align、vertical-align、white-space、othertext、content)。边偏移 top：定义元素相对于其父元素上边线的距离。 right：定义元素相对于其父元素右边线的距离。 bottom:定义元素相对于其父元素下边线的距离。 left:定义元素相对于其父元素左边线的距离。例如： top:auto/长度值/百分比层叠定位属性 z-index h1和p元素之间默认会保留间隙，浏览器在标记上应用默认的上下边界为标题指定一个负的下边距边距可以是负值，填充不可以是负值 span可以单独设置样式行间距（行高）可以用line-height line-height可以不用单位，有单位的话，span将会继承实际的行距，而不会继承比例。 hr水平线的样式：基于Mozilla的李岚清使用background-color定义线的颜色，IE用color定义图片边框：img {

订阅 Solid