打印友好页面：在页面设计中，对于一部分可能需要打印的页面，比如地图，需要考虑其打印后的效果，因此有些背景色将显得并不合适，对于页面上的链接，也需要删除所有的下划线。...总的来说可以通过如下几种方式来实现打印友好的页面：如果页面有背景，就删除它，给页面提供一个白色的背景；将文本颜色设置为黑色；确保字体足够大；删除链接格式化效果；删除任何和所有不是必不可少的图像；添加页面作者信息... @import url(standard.css) all; @import url(for_print.css...>标签和页面上的第一个标题中添加重要的搜索项；添加标签，提供描述和关键词；提高大字标题的价值；通过语义标签增加额外的含义
CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。...譬如下面这个选择器，就可以选取所有没有 [href] 属性的 a 标签，添加一个红色边框。...譬如说，通过属性选择器给图片添加标签，类似一些电商网站会用到的一个效果。 我们希望给图片添加一些标签，在 hover 图片的时候展示出来。...如果页面上的链接很多或者对跳转页面的协议有要求，使用属性选择器配合伪元素对链接的协议进行提示也不失为一种好方法。...a[href^="http:"]:hover::before { content: "这是一个http链接"; ... } a[href^="https:"]:hover::before
一个 WordPress 主题至少需要两个文件存在——style.css 和 index.php 所以进入 wpstart 文件夹并创建这两个文件。在 style.css 中，插入以下注释。...> 这是获取模板的目录，以便可以定位到 CSS、JS、字体等添加资源。 这将回显该站点的主页 url。...侧边栏经常显示存档链接、最近的帖子、社交媒体帐户、广告等。在我们的例子中，我们将使用存档链接和社交媒体链接。同样，WordPress 小部件比“硬编码”的垃圾要好得多！...> style.css：现在我们已经更新了文件，让我们用 CSS 给 index.php 添加一些样式。...Loop是一种功能， 你可以使用它动态地将内容插入到 你的主题中。我们在本教程中的目标是将所有博客文章呈现为一个用户友好的列表，以便读者可以选择其中任何一篇。让我们看看我们是如何做到的。
找不到你想要的页面了" --- 紧接着再新建主题文件夹的 layout 目录下新建 404.ejs 文件，添加内容如下： /* don't remove...，在原有配置基础上添加 url: /aboutme icon: fa fa-user-secret 然后在站点配置文件下，找到 skip_render，在后面添加属性，如下...修改社交链接 在主题的 config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址...，增加链接可参考如下代码： " class...您可以在文章 md 文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则 自定制修改 修改主题颜色 在主题文件的 /source/css/matery.css
修改社交链接 在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、...修改你需要的社交链接地址，增加链接可参考如下代码： <a href="<%= theme.socialLink.github...如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。...以下列出了可能对你有用的地方： 修改主题颜色 在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、...banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。
="http://www.jd.com/favicon.ico"> <script src="hello.js...' 时，后面的<em>href</em>是<em>CSS</em>文件的地址，作用是给网站引用<em>CSS</em>样式 内常用标签 基本标签（块级标签和内联标签） ''' n的取值范围是1~6; 从大到小....和: 上角<em>标</em> 和 下角表. :换行....opacity:透明度 超<em>链接</em>标签(锚标签): 什么是超级<em>链接</em>？...该地址可以有几种类型： target='_blank'，指点击时，<em>在</em>新页面中打开目标网页地址，没有此属性时，默认在当前窗口打开目标网页地址 绝对 URL - 指向另一个站点（比如 <em>href</em>="
在逛别人的博客的时候，发现了有一种叫go.php的东西，可以经过自己站点的网页再跳转出去，方便SEO优化。...但是像Hexo这类静态博客，想要从源HTML修改链接难度有点大，这里我们采用JavaScript动态修改。...await checkLocalSite(link[i].href)){ link[i].href = "https://[你的Go Jumper部署地址]/#"+window.btoa...本地测试域名]"))return true; return false; }catch(err){ return true; } } 然后，我们要将代码注入到主题中...，在主题_config.yml中找到inject项： inject: head: # - - <script
今天，介绍一种在主题中添加Google Prettify代码高亮的方法。这里以next主题为例，如果对应的目录不存在，可以手动创建，或选择其它目录。...3、 在主题的layout/_third-party目录下创建prettify.swig文件，内容如下： <script src="/lib/prettify/prettify.js" type...（最好是最后）添加： {% include '_third-party/prettify.swig' %} 5、 修改主题的_config.yml文件，添加一行： custom_highlight_theme...参考链接： https://liuzhichao.com/2016/hexo-use-prettify-to-highlight-code.html
-- 标黄 --> 标题 详细内容 <!... target为打开链接的方式 _blank为在新窗口打开该链接 _self 在同页面覆盖打开链接 其中图片超链接指的是在标签中加标签 、等其他。...段落1 段落2 段落3 <p id="one"
项目/博客组 在我的网站上，有一个部分需要列出了所有的项目名称。 我想为每个项目添加一个缩略图，但这对我来说并不是最重要的事情。 对我来说，更重要的是链接本身。...1. after 元素 在这种情况下，标题将显示在伪元素叠加图的下方，如下所示： ? 解决方案是在卡片标题中添加z-index。 即使这是一个简单快速的解决方案，也不是正确的做法。...无需在卡片标题中添加z-index。 原因是，使用:before时，该元素不会出现在其他同级项的上方，而当元素为:after时，它将出现在其他同级项之上。...基于文件扩展名的链接样式 例如，如果有一个包含PDF文件的链接，则可以添加PDF图标，以使其对用户更清晰。...面是如何显示链接的PDF图标的示例 HTML Download PDF Download
a链接标签不能继承文字颜色（继承了但是不显示，链接标签默认是蓝色） 优先级 默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式< !...---- 链接伪类 a:link{属性:值;} 链接默认状态 ( a{属性:值}效果是一样的。)...a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态 ：focus...浮动布局 float: left | right （浮动方向） 特点： 1.元素浮动之后不占据原来的位置（脱标） 2.浮动的盒子在一行上显示 3.行内元素浮动之后自动转换为行内块元素。...方法一 额外标签法：在最后一个浮动元素后添加标签。 clear: left | right | both // 工作里用的最多的是clear:both; ?
多页文档 链接 链接可以让我们在网页之间进行跳转，如何在项目文件中添加链接？...正如上文所说，docsify是把md文件动态地转换为html文件，那么我们只需要在md文件中插入链接不就会自动地在html中呈现出来了吗？...需要在设置中添加： subMaxLevel: 2 // 在sidebar目录中显示二级标题 自定义导航栏 开启导航栏需要在设置中添加： loadNavbar: true 然后按照侧边栏_sidebar.md...主题 官方推出的四种主题，只需要在首页引入即可使用： <link rel="stylesheet" href="//cdn.jsdelivr.net
php function custom_login() { echo ' 二、在所用主题中新建一个名称为：custom_login 的文件夹，并在其中新建：custom_login.css 及制作好的网站 LOGO： logo.png 也放进去。...三、将下面代码添加到 custom_login.css 中： /** 背景及字体 **/ HTML,body.login{ background:#f2f2f2...另外，也可以将下面代码添加到主题 functions.php 模版文件中，直接将样式写在其中。...Code Here '; } 四、修改 logo 链接地址 function custom_loginlogo_url($url) { return '
="javascript:;" 和 href=""以及href="#"的区别： "＃"包含了一个位置信息,默认的锚点是＃top 也就是网页的上端,a href ="#" 不会刷新页面，会回到页面顶部...而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首, 而javascript:void(0) 则不是如此,所以调用脚本的时候最好用...透明度（opacity）; left/top; 白色div遮盖； margin(负值或超大)…… 9、事件：鼠标事件、键盘事件、系统事件、表单事件，元素添加事件的方法...（2）是动态方法（在开头处寻找元素，在中间动态创建元素，在末尾输出元素，得到的结果是所有的），区于getElementById，是静态方法，若在寻找元素的行以前没有找到元素，后面重新创建元素将会找不到。...2、非动态实时（动态创建的元素不会被选中）。3、使用包含选择器时，会包含祖先元素在内。
接下来我们修改前端静态页面，使它变为动态数据页面。在这里有两种处理方式。第一种是将html文件改为jsp文件，使用jsp技术（jsp本质上也是一个java servlet）动态显示数据。...-- Custom Font Icons CSS--> <!
php function custom_login() { echo ' 二、在所用主题中新建一个名称为：custom_login 的文件夹，并在其中新建：custom_login.css 及制作好的网站 LOGO： logo.png 也放进去。...三、将下面代码添加到 custom_login.css 中。...f2f2f2; font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif; } /** 去掉链接下划线...另外，也可以将下面代码添加到主题 functions.php 模版文件中，直接将样式写在其中。
特性 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 首页轮播文章及每天动态切换 Banner 图片 瀑布流式的博客文章列表...1.在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children) 2.在children下创建二级菜单的 名称name,路径url和图标icon. 3.注意每个二级菜单模块前要加...修改社交链接 在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、...修改你需要的社交链接地址，增加链接可参考如下代码： <a href="<%= theme.socialLink.github...首页文章列表 修改主题颜色 在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色
在后台开启评论分页后，在 comments.php 中需要添加分页导航的地方加入以下代码（如主题中有类似代码则无须再添加，另外代码中的 nav 标签为 HTML5 标签，若主题没有使用 HTML5 则有...> 四.Ajax 评论分页 根据上文所述，现在主题中已经有评论分页了，要做到 Ajax 的评论分页，只需 JavaScript 的配合，不过在这之前首先要在评论列表前加入一个元素，用于在显示新一页评论列表时表示列表正在加载...– 评论分页导航 –> 1...(document.compatMode=="CSS1Compat"?...$('html'):$('body')):$('html,body'); // 点击分页导航链接时触发分页 $('#comments-navi a').live('click', function(e)
本文记录在 Fluid 主题中加入 Umami 点击事件统计的方法。...Umami 建议升级到 1.39 以上版本，支持事件显示 修改主题 我准备统计导航、 Footer 的点击事件 需要对主题配置文件和主题文件做出一些修改 原理 为了操作简单，我们采用修改 CSS...类的方式 为想要统计的事件元素上添加 umami--event--name 类名 配置文件修改 footer 为想要监控的链接添加点击事件监控代码 添加 umami--click--name 类名 123...blank" rel="nofollow noopener">Fluid navigation 在...li> 配置成功后这些元素就有 umami 相关的类了 效果展示 点击带有统计追踪类的元素就会产生 Umami 的事件追踪，在统计界面就可以看到结果了
浏览器动态标题 主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码 头像呼吸光环和鼠标悬停旋转放大 主题设置 - 开发者设置 - 自定义CSS添加以下代码 .img-full { width: 100px; border-radius...- 开发者设置 - 自定义CSS添加以下代码 /*超链接特效*/ .comment-content-true a:not(.light-link), .wrapper-lg .entry-content...>(大概在87行左右)添加以下内容 文章end标识 在模板文件 post.php内添加以下代码，建议在83行广告输出结束后添加。 <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
