学习目标
- 了解margin合并与塌陷现象(相邻块元素垂直外边距的合并,嵌套块元素垂直外边距的塌陷)
- 能够说出解决margin塌陷的几种方式
- 理解浮动的作用及特点(解决上下盒子 可以水平布局的问题,脱标)
- 能够说出几种清除浮动的方式(额外标签法、overflow、伪元素清除浮动)
- 能够使用浮动完成导航案例
- 能够说清除浮动的目的(消除浮动对之后元素的影响)
- 能够说出background相关的几个属性(color、image、repeat、position)
- 能够使用background设置颜色和图片(color、image)
- 能够使用background-position设置背景图片的位置(left、center、right)
- 能够说出元素的三种显示方式(块级元素、行内元素、行内块元素)
- 能够使用display转换元素的显示方式(display:block/inline/inline-block)
- 能够说出行高的概念并且使用(基线的距离、让文字垂直居中)
- 能够说出a链接的四种伪类(lvha:link、visited、hover、active)
。。。。。。
- 能够写出4~5个常用的表单元素(input(多种形态)、select、textarea、form、label)
- 能够说出表单name属性和value属性的作用(告诉后端发送的数据是什么含义;发送给后端的数据。数据形式:name属性值= value属性值)
- 能够掌握表单元素checked和selected的使用(checked:单选和多选默认选中;selected:下拉菜单默认选中)
- div和span的使用(用于css中的布局)
- H5新增的语义化标签(header、nav、footer、aside、section、article)
- H5新增的属性(placeholder、autofocus、autocomplete、required、multiple)
- H5视频音频标签(audio、video)
可以通过git pull
来下载,而不用再次下载压缩包替换(我还是用下载的方法的)在站点根目录
1 | git clone https://github.com/iissnan/hexo -theme-next themes/next |
Next版本的发布页面
选择下载 Download 区域下的 Source Code (zip) 到本地
解压重命名为next,放置到themes目录下(我是使用的方法)
打开 站点配置文件 _config.yml文件
, 找到 theme 字段,并将其值更改为 next
1 | theme: next |
在切换主题之后、验证之前, 最好使用 hexo clean 来清除 Hexo 的缓存
使用hexo s
可以测试主题是否能使用
目前 NexT 目前支持四种特性,通过修改Scheme可以选择特性,比如:
打开 主题配置文件 themes/next/_config.yml
文件,搜索 scheme 关键字。将你需用启用的 scheme 前面注释 # 去除即可。
1 | # Schemes |
编辑 站点配置文件,将language设置成你需要的语言,我用的是简体中文:
1 | language: zh-Hans |
目前NexT支持的语言如以下表所示:
菜单配置包括三个部分,
编辑 主题配置文件,找到menu字段:
1 | menu: |
NexT默认的菜单项有(解注释即可显示):
需要到next目录下的language/zh-Hans.yml
(以简体中文为例)文件中,找到menu字段,设置如下(这一步一般是弄好的,不用管):
1 | menu: |
1 | menu_icons: |
修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分(我几乎没动)
1 | sidebar: |
编辑 主题配置文件,修改avatar字段,值设置为头像图片的链接地址。
1 | avatar: http://example.com/avatar.png |
也可以将图片放置到theme/source/images
目录下,命名随意:
1 | avatar: /images/master.jpg #配置 |
编辑 站点配置文件:
1 | # Site |
因为打开了菜单栏的选项,但是此时如果直接打开新添加的网页时,是打不开的显示page not found
此时需要添加对应的页面(必须通过hexo命令新建才行)
在站点的根目录中
1 | hexo new page tags #新建标签页面 |
输入命令后,在source
文件夹里会生成一个tags文件夹,其中有个index.md文件。
修改index.md,添加type:tags
1 | --- |
然后标签页中会自动生成对应的几个标签
和上面其实是一样的操作
1 | hexo new page categories/about |
在关于我页面中可以在index.md里写对应的自己的介绍
在站点根目录安装 hexo-generator-searchdb
,在站点的根目录下执行以下命令:
1 | npm install hexo-generator-searchdb --save |
编辑 站点配置文件,新增以下内容到任意位置:
1 | search: |
编辑 主题配置文件,启用本地搜索功能:
1 | # Local search |
此时可以在网页中使用搜索功能
进入hexo博客项目的 themes/next
目录
用文本编辑器打开 _config.yml
文件
搜索 auto_excerpt
,找到如下部分:
auto_excerpt: enable设为false
1 | # Automatically Excerpt. Not recommand. |
然后在md文档在需要阶段的地方加:<!-- more -->
会自动截断
>
删除掉