jojoSpace

1.服务端准备1.1 Nginx 环境配置1.1.1 安装 nginx 下载 Nginx 1yum install nginx 安装成功则出现下图所示的信息。 查看 nginx 版本 1nginx -v 出现的信息如下图所示 1.1.2 更改Nginx配置文件 需要将Nginx的配置文件中网站的根目录(root)指向hexo的部署目录，以及修改域名(server_name)为自己已备案的域名，如果没有，则填公网Ip。 首先创建一个文件夹来存放hexo的部署文件 1mkdir -p /data/hexo 通过下面命令找到Nginx的安装目录 1rpm -ql nginx 修改nginx配置文件nginx.conf 1234//进入nginx安装路径cd /ext/nginx//通过vim打开配置文件vim nginx.cong 进入到/etc/nginx/conf.d文件夹下面，通过vim default.conf命令打开文件，添加如下内容： 123456789101112131415server { listen ...

1.列表属性 列表相关的属性，可以作用在ul、ol、li元素上 属性名 功能 属性值 list-style-type 设置列表符号 常用值如下：none：不显示前面的标识(很实用)square：实心方块disc：圆形decimal：数字lower-roman：小罗马数字uper-roman：大罗马数字lower-alpha：小写字母uper-alpha：大写字母 list-style-position 设置列表符号的位置 inside：在li里面outside：在li外面 list-style-image 自定义列表符号 url(图片属性) list-style 复合属性 没有数量、顺序的要求

1.简介 CSS 全称为：层叠样式表（Cascading Style Sheets）。CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等。样式：文字大小、背景颜色，元素宽高。层叠：给网页一层一层“涂”上样式表：列表 简单理解：CSS 可以美化 HTML，让 HTML 更漂亮。 核心思想：HTML 搭建结构，CSS 添加样式，实现了：结构与样式的分离。 2.行内样式 写在标签style属性中（又称：内联样式）不推荐使用无法复用，样式写多了不方便维护 1<h1 style="color: cadetblue;font-size: 50px;">欢迎来到我的乐园！</h1> 3.内部样式 写在 HTML 页面内部，将所有的 CSS 代码提取出来，单独放在<style>标签中写法 12345678910111213<style> h1{ color: chocolate; font-size: 55px; } h2{ color:...

1.相对定位1.1 如何给元素设置相对定位 给元素设置position:relative，即可实现相对定位 可以使用left、right、top、bottom四个属性调整位置 1.2 相对定位的参考点 相对自己原来的位置 1.3 相对定位的特点 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规则是： 定位的元素会盖在普通元素之上 都发生定位的两个元素，后写的元素会盖在先写的元素之上 left不能和right一起设置，top不能和bottom一起设置 相对定位的元素，也能继续浮动，但是不推荐这样做 相对定位的元素，也能通过margin调整位置，但不推荐这样做 注意：绝大多数情况下，相对定位会与绝对定位配合使用。 1.4 作用 对网页元素进行微调 配合绝对定位一起使用 2.绝对定位2.1 如何设置绝对定位 给元素设置position:absolute，即可实现相对定位 可以使用left、right、top、bottom四个属性调整位置 2.2...

1.版心 在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这就是网页的版心。 版心的宽度一般是960 ~ 1200像素之间 版心可以是一个，也可以是多个。 2.常用布局名词 位置 布局名词 顶部导航条 topbar 页头 header、page-header 导航 nav、navigator、navbar 搜索框 search、search-box 横幅、广告、宣传图 banner 主要内容 content、main 侧边栏 aside、sidebar 页脚 footer、page-footer 3.重置默认样式很多元素都有默认样式，比如： p元素有默认的上下margin。 h1 ~...

1.文本颜色 属性名：color 可选值 颜色名 rgb或rgba HEX或HEXA(十六进制) HSL或HSLA 开发中常用的是：rgb/rgba或HEX/HEXA(十六进制) 2.文本间距 字母间距：letter-spacing 单词间距：word-spacing(通过空格识别单词，对中文不起作用，除非每个中文之间都加空格) 属性值为像素，正值让间距变大，负值让间距缩小。 3.文本修饰属性 属性名：text-decoration 可选值： none：无装饰线（常用） underline：下划线（常用） overline：上划线 line-through：删除线 可搭配如下值使用： dotted：虚线 wavy：波浪线 可以通过颜色写法指定颜色 举例： 1234.dragon { /* 下划的红色波浪线 */ text-decoration: underline wavy red;} 4.文本缩进属性 属性名：text-indent 属性值：CSS 中的长度单位，例如：px 举例： 123div...

1.简介 最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。最初的网页页面布局是通过表格来实现的，后续因为网页元素变得更多更大更复杂，表格来做布局，就显得力不从心且维护困难，后发现浮动也能实现布局的效果，就通过浮动来实现布局了。![[Pasted image 20240829104807.png]] 2.元素浮动后的特点 脱离文档流(这并不是一件好事) 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高 不会独占一行，可以与其他元素共用一行 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding 不会像行内块元素一样被当作文本处理（没有行内块的空白问题） 3.浮动后会产生的影响 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素下方，对浮动元素前面的兄弟无影响。 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然能够约束浮动的元素。 4.解决浮动产生的影响（清除浮动）解决方案： 方案 1：给父元素指定高度。 方案...

1.字体大小 属性名：font-size 语法： 123.one { font-size: 50px;} 注意点 chrome浏览器支持的最小文字为12px, 默认的文字大小为16px，并且0px会自动消失 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要使用默认的大小 通常可以通过给body设置font-size属性，这样body中的其他元素就可以基础这一属性了 接住控制台看样式![[Pasted image 20240819170047.png]] 2.字体族 属性名：font-family 语法： 12345.god { font-size: 50px; /* 字体族都使用：非衬线字体 */ font-family: "STHupo", "Microsoft YaHei",...

1.CSS 中常用的长度单位 px：像素 em：相对元素font-size的倍数 rem：相对于根字体大小，html 标签就是根 %：相对父元素计算 CSS 中设置长度，必须加单位，否则样式无效 2.元素的显示模式2.1 块元素(block) 又称：块级元素 特点： 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。 默认宽度：撑满父元素 默认高度：由内容撑开 可以通过 CSS...

1.边框相关的属性 属性名 功能 属性值 border-width 边框宽度 CSS 中可以用的长度值 border-color 边框颜色 CSS 中可用的颜色值 border-style 边框风格 none：默认值solid：实线dashed：虚线dotted：点线double：双实线 border 边框复合属性 上面的属性值往里写，没有数量、顺序的要求 1.以上 4 个边框相关的属性，其他元素也可以用。 2. 在盒子模型中，会详细接触边框的知识 2. 表格独有属性 属性名 功能 属性值 table-layout 设置列宽度 auto：自动、列宽根据内容计算（默认值）fixed：固定的，平均分 border-spacing 单元格间距 CSS...