219 次浏览【转载需注明来源】
我们继续博客的内容页,首先我们先创建一个博客内容页面。
在项目筛选器上右键,点击新增文件,
输入博客内容,选择.lhtml,地址不用改,当然,改也可以,但是只能在当前项目文件下面。
我们双击文件,打开,像博客列表页一样引入文件,
ok,准备工作完成,我们看一下博客内容页面的设计图:
除了内容板块的列表部分不同,其它地方是不是都一样,我们是不是可以直接把列表页的html搬过来,改一下列表板块就可以了,(网站的通用板块很多,可以重复利用的就重复用,不要同一种东西写n遍,如头部,尾部等)。
我们把列表页搬过来,编译之后发现从列表页进不去内容页,列表页没有加链接,我们给列表页加上链接
我们要弹窗代码页面的链接,需要前面 @代码_
我们点击列表,进到内容页。
只是给列表页的列表部分删除,用高度撑开了一个layui卡片面板,这个雏形是不是就出来了,我们是不是只需要写内容板块就可以了,我们看一看内容页要怎么写,
它是不是从上到下,写下来就行了,这里有个注意的地方,通常内容页的内容部分是不需要加什么样式的,我们只要限制一下里面的图片,表格之类的元素不要超出内容区块就行了(加一个最大宽度100%),然后用一个区块包裹住就行了,因为在编辑内容的时候,编辑器会自动给附上样式。
首先我们先写内容的标题,
<区块 类名="lay-文本">
<标题1>JS与ES6高级编程学习笔记(一)——JavaScript核心组成</标题1>
</区块>
lay-文本 这个类名是layui的内置类名,它可以让区块里面的列表,文字更加美观。
然后我们在加上内容,内容部分代码直接复制,它是生成出来的,
<标题1 行内样式="背景: 颜色通道(230, 230, 230, 1)"><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 16pt">一、JavaScript概要 </行内元素></标题1>
<段落><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 10pt">JavaScript(JS)是一种轻量级、解释型、动态类型的高级程序设计语言。它诞生于1995年,是一门基于原型、函数优先的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持,如 Node.js、 Apache CouchDB 和 Adobe Acrobat。它已经由ECMA(欧洲计算机制造商协会)通过ECMAScript实现语言的标准化。</行内元素></段落>
<段落><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 10pt">JavaScript非常重要。它是一种可以同时运行在服务器端、客户端和桌面应用的跨平台程序语言,当然现在你也可以使用JavaScript进行嵌入式开发。随着Node、V8引擎、React、Angular、Vue、Electron、UnityScript、ECMAScript、HTML5、CSSS3、前端工程化与模块化的出现或升级,JavaScript变得越来越重要,在大前端中JavaScript扮演举足轻重的角色。</行内元素></段落>
<标题2><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 14pt">1.1、JavaScript组成 </行内元素></标题2>
<段落><行内元素 行内样式="颜色: 颜色通道(0, 0, 0, 1); 字体-组: 微软雅黑; 字体-大小: 10pt">JavaScript主要由三部分构成,分别是ECMAScript、DOM与BOM,如图1-1所示。 </行内元素></段落>
<段落>内容......</段落>
再加上,上一篇,下一篇的分页:
<区块 类名="上下一页">
<段落>« 上一篇:<超链接 链接地址="">JS与ES6高级编程学习笔记(五)——ECMAScript6 代码组织</超链接></段落>
<段落>» 下一篇:<行内元素>没有了</行内元素></段落>
</区块>
看看效果:
嗯,雏形出来了,我们再加一点样式。
.博客内容 {
内边距: 20px;
}
.博客内容 .lay-文本 标题1 {
字体-大小: 22px;
外边距: 20px 0;
}
.上下一页 {
内边距: 20px 0;
字体-大小: 16px;
行高: 1.8;
颜色: #999;
}
效果就出来了,内容页是不是就ok了,我们调试一下响应式,
其它端都是正常显示的,ok,内容页做完了。
展示一下:
测试账号