CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来。
要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js,它导出一个 JavaScript 对象,使用的是Commonjs文件导入导出的规范 如有对 CommonJS 使用疑惑可参考文档:commonJs 使用规范
滚动条是图形用户界面(UI)中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下,浏览器会为body内容的溢出包含一个滚动条。在其他情况下,UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下,您可能有充分的理由来定制滚动条。例如,您可以定制滚动条样式以匹配网站的外观和感觉。
本篇为Vue-element-admin开源框架的使用,用于使用该框架的一些方法和注意点
这款Mac osx风格的Wordpress主题,在原版基础上,经过多次调整修改,重写了部分结构及CSS,添加可以自定义的导航下拉菜单;解决与部分插件冲突问题;更换可以显示标题的flash幻灯;优化图片及代码,并通过W3C验证!正式发布2.1版。
vue-element-admin 是 vue 框架的一个优秀的后台管理系统开源项目,目前star数75k。
1 <script type="text/javascript"> 2 $(function(){ 3 if($("#left").height() > $("#right").height()){ 4 $("#right").css("height",$("#left").height()); 5 }else{ 6 $("#left").css("height",$("#right").height()); 7 } 8 }) 9 </script> 下面是解决侧边导航栏与主内
今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名称,即可将对应分类下的图片以瀑布流的方式展示出来,这款插件在筛选图片上使用还是比较方便的。
侧边栏其实就是一种比较经典的网站导航设计,它的形式通常为竖向的一列,展示在网站的右侧或者左侧,具体的位置当然是取决于整体的设计。
在前端领域,CSS(层叠样式表:Cascading Style Sheets)是绕不过的话题。
😁作为一个程序员,在日常的工作、生活、学习的过程中基本都有很多需要做笔记的地方;做笔记的主要目的之一是为了“温故而知新”,另一个则是为了在下一次遇到的时候,不需要再次耗费精力去找解决方法; 回顾自己之前写的那个主题,不管是写还是查都不怎么方便,最终下定决心重写一个主题;以 “方便记、方便查、简约”作为设计核心; 开源地址 Github:https://github.com/friend-nicen/theme-document Gitee:https://gitee.com/friend-nicen/the
多级目录构建navbar、sidebar引用404问题:在构建多级文件目录的时候,针对多级文件夹下的md文件,其会相应加载同级目录下的navbar.md、sidebar.md文件,但这个时候由于navbar.md、sidebar.md文件存放在根目录或者是自定义指定的文件夹下,引用相对路径则会报404问题。针对上述情况,可以有如下调整方案:
概览 shiny提供了几种基本的布局: 最简单的布局是左侧边栏右主页的布局。 使用栅栏自定义布局 使用 tabsetPanel()和navlistPanel()函数实现分段布局。 使用 navbarPage()函数实现头部导航布局。 侧边栏布局 示例如下: ui <- fluidPage( titlePanel("Hello Shiny!"), sidebarLayout( sidebarPanel( sliderInput("obs", "Number of observ
对于wordpress主题来说 wp的菜单是必不可少的 可以用于制作导航栏 也可以做侧边栏、页脚导航等等 只要熟练掌握 就能利用wp菜单做成想要的东西 话不多说 现在先讲一下菜单的创建 首先要开启导航菜单功能 下面是一个例子 /* register_nav_menu( $location, $description ) 函数功能:开启导航菜单功能 @参数 string $location, 导航菜单的位置 @参数 string $description, 导航菜单的描述 开启多个位置的导航菜单,只需要重
转载请标明出处: https://www.jianshu.com/p/307684deff51
Next主题允许用户使用自定义样式个性化设置自己网站的主题,本文介绍使用自定义样式的方法。 修改主题配置文件 去掉主题配置文件 中custom_file_path字段style值的注释 # Define custom file paths. # Create your custom files in site directory `source/_data` and uncomment needed files below. custom_file_path: #head: source/_
导航栏 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航栏之间的距离设置成 60 像素即可 ;
博客地址 程序员成长指北(http://www.inode.club/) 可以先体验下。
Shiny 包含了许多用于布局应用程序组件的工具。本指南描述了以下应用程序布局功能特性:
前言 Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月(几乎每个版本都是这个节奏😳),Ng-Matero 也终于更新到了 v15。其实 Ng-Matero 本身的更新非常简单,但是同步维护的 Material Extensions 这个库要先于 Ng-Matero 发布,所以大部分精力都耗费在组件库上面了。 我已经很久没有写关于 Ng-Matero 的发版文章了。上次介绍发版还是 v10 版本,竟然已经是两年前的事情了。在这两年的开源生涯中,主要精力都在 Materi
大家好我是费老师,对于刚上手dash应用开发的新手朋友来说,如何进行合理且美观的页面整体布局构建是一道“难题”。今天的文章中,我就将为大家介绍有关dash应用页面布局的一些实用技巧,并附上几个可以直接套用的dash应用经典页面模板,话不多说,let's go🚀
一.DIV+CSS布局文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright 导 航:menu 菜单:menu 子菜单:submenu 导航:nav 子导航:subnav 标 志:logo 广告:bann
WordPress 6.2 版本今天发布了,新版全面提升了站点编辑器的体验,引入了更多网站设计的功能,并提供了新的无干扰的写作模式。总之新版让 WordPress 用户可以对站点有更多的控制,也能容易表达自己的想法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <meta name="apple-touch-fullscreen" content="yes" /> <meta name="apple-m
Docsify是一款开源的文档生成工具,目前在Github上已有21K+Star。Docsify可以快速帮你生成文档网站,不同于VuePrese和Hexo的地方是它不会生成静态的.html文件,所有转换工作都是在运行时。
初始项目结构 app.jsx index.jsx 集成 Boostrap 直接引用此 URL 直接将其在全局安装即可 引入字体样式, 使用并全部改为 http 站点 于是 yarn 也可以卸载原先安装的了 测试样式是否引入成功 表明成功 引入皮肤 https://webthemez.com/demo/insight-free-bootstra
VuePress 应该有很多人用过,而 VitePress 是 VuePress 的下一代框架 ,是支持vue 3.0 的 web 网站框架。
在我们日常的开发和学习中,我们可能会进行在线文档的写作,为了能够让我们的文档公开给大家查阅,我们可能需要将其发布到公网。这个时候,我们会有很多的文档软件选项,比如GitBook、Docsify、MdBook、Docusaurus2、MkDocs等等。
这是一款仿Mac osx外观的Wordpress杂志型主题。首页可以添加自定义图片并显示日志摘要,主题包含两套主页面模板。通过主流浏览器测试。独立页面模板下面仿Mac osx的动态dock导航,由于IE6不支持透明PNG图片,而采用GIF图片,效果差了些。
请注意,本文编写于 179 天前,最后修改于 161 天前,其中某些信息可能已经过时。
导航栏文本 有 10 像素内边距 , 20 像素外边距 , 文本输入框 表单 , 距离 导航栏外边距有 65 像素 ;
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
翻译:布兰 作者:Adam Argyle 来源:https://web.dev/building-a-sidenav-component/
在我们日常使用中,会安装很多插件,如: 主题、Prettier、code snippets、Eslint、Jest Runner、Git等等。每种插件都能解决我们实际开发中的某一块诉求。我把所有的插件大致归为三类:UX/UI类、语言类、工具类
搭建后台管理系统最基础的是什么呢?个人的体会是整体的基础框架,这个是指最基础的框架,比如根 router-view, 侧边栏以及侧边栏的router-view,以及顶部栏,等基础布局的控制。
今天我们继续介绍一款文档软件,它堪称程序员文档利器。是Docute的大哥。也是专注纯净的文档构建。对于SEO并不擅长,但是它简单高效的特点斩获了大批的用户,我也是其忠实的拥护者。
改了好几天,翻遍了 Hugo Jekyll Hexo 的模板仓库,又翻完了 Typecho 的主题站。 感觉没啥好看的又开始翻友链,翻了得有个两三天,最后缝合了一个单栏模板。
最近在尝试一些项目技术文档搭建的工具,看到网上很多人推荐 gitbook,使用后总体感觉良好。无意中发现一款 Vue 驱动的静态站点生成工具 vuepress,看到官网和demo后立即被它的简约灵活所吸引。一个 vuepress 网站是一个由 Vue、Vue Router 和 Webpack 驱动的单页应用。在构建时,创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。
网上关于动态文档生成工具有很多如:Docsify、 VuePress、Docute 、Hexo这些都是一些非常优秀的文档生成工具,本章主要介绍如何快速使用Docsify搭建一个快捷、轻量级的个人&团队文档。
注意:实验环境都是 macOS 10.12.6 Chrome stable 61。第三方插件和 cotainer queries 用得少,所以没研究。
根据官方说法,docsify是一个神奇的文档网站生成工具,也可以把它当做一个简易版的静态站点诸如Hexo、Hugo等。当然,它是专门针对文档的,忽然想到了程序员深恶痛绝的就是写API文档……
微搭中的应用分为两类,模型应用和自定义应用。上一篇我们介绍了模型应用的创建方法,本篇我们介绍一下自定义应用的创建方法。
挂载点:doAction('adm_main_top') 所在文件:admin/views/default/header.php 描述:后台红线区域扩展 挂载点:doAction('adm_head') 所在文件:admin/views/default/header.php 描述:后台头部扩展:可以用于增加后台css样式、加载js等 挂载点:doAction('adm_siderbar_ext') 所在文件:admin/views/default/header.php 描
article可以看成一个独立的部分,也可以看成别名的div,它内部可以包含标题及其他部分。
在Mac osX2.02基础上,修正了一些BUG,添加了滑动门按钮,主题2.03a和2.03b左侧日志改为通栏,2.03c和2.03d为分栏,首页显示摘要和显示全文共四个版本。建议下载使用新版!经测试,发现独立页面模板下面的动态导航与部分插件有冲突,目前发现与Lightbox和Clean Archives Reloaded两个插件有冲突,如果发现动态导航没有正常显示或提示有错误,可禁用插件试一下。感谢网友aunsen的测试。
挂载点:doAction('adm_main_top') 所在文件:admin/views/default/header.php 描述:后台红线区域扩展 挂载点:doAction('adm_head') 所在文件:admin/views/default/header.php 描述:后台头部扩展:可以用于增加后台css样式、加载js等 挂载点:doAction('adm_siderbar_ext') 所在文件:admin/views/default/header.php 描述:后台侧边栏 功能扩展 子菜
后面,打算讲在之前沉淀的一些前端知识体系相关的文章陆陆续续整理一下,在html和css中,有一些不是常常被提及,但是又非常有用的一些知识,这里面非常值得一说要数语义化标签和布局断点了。
介绍: autocjs 是一个专门用来生成文章目录(Table of Contents)导航的工具。autocjs 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的目录导航(独立的侧边栏菜单,或者在文章的开始处生成文章目录)。 支持 AMD 和 CMD 规范; 可以作为独立模块使用,也可以作为 jQuery 插件使用; 支持中文和英文(标题文字); 界面简洁大方; 拥有 AnchorJS 的基础功能; 即支持生成独立文章目录导航菜单,又可
编者按:本文作者Anthony Rose,是社交网络电台Zeebox的联合创始人及CTO,文章不仅分析了侧边栏导航和Tab导航的利弊,还有改版过程进行A/B test 的详尽过程,且最后也给了建议,读完能对这两种导航有清晰的认识,非常有价值的经验分享 。 设想你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的Tab导航。等一下,多出来的一排导航看上去有点碍眼?我们尝试下把他们收到侧边栏里,或者叫安卓团队给它的名字“侧边抽屉导航”。 如果你们的应用的也是多
VuePress是Vue驱动的静态网站生成器。对比我们的Docsify动态生成网站,对SEO更加友好。
领取专属 10元无门槛券
手把手带您无忧上云