一、菜单栏中标签与侧边栏中标签关联的问题 以我的博客为例，关于菜单栏中的选项 与侧边栏中的选项，由于顶部菜单栏中位置有限，所以我就想在顶部菜单栏中不显示标签这一项，于是我在 主题配置文件 中 将 menu...但是与此同时，我们发现侧边栏中的标签选项只能显示标签数量，不能点击。 这是因为侧边栏中的点击链接是根据菜单栏中对应的项来添加的，什么意思呢？...就是说如果顶部菜单栏中有 标签 这一项，那么就会给侧边栏中标签这一项也添加点击链接；如果顶部菜单栏中没有标签这一项，那么就不给侧边栏中标签这一项添加点击链接，导致侧边栏中的标签项只有显示数据，不提供点击链接...如果我们不想在菜单栏中显示标签项，但是希望侧边栏中的标签项 可以点击，该怎么做呢？ ...60 行开始。
ctrl+shift+k:快速删除行 ctrl+enter:直接到下一行 ctrl+shift+enter:直接到上一行 ctrl+/:添加注释 ctrl+shift+v：粘贴的过程中保持了缩进...ctrl+方向：逐词移动 ctrl+shift+方向：逐词移动选择 ctrl+shift+l：打散当前行，可以同时进行编辑 ctrl+j：将当前趋于合并为一行 选中 ctrl+d：下一个元素...查找打开过的文件，输入文件名或者路径，支持模糊匹配； @找到对应的标签。...#对页面内容进行匹配 工程 标签 ctrl+tab：切换标签页 Emmet 缩写 #page>div.logo+ul#navigation>li*5>a{Item $} ...#header+div.page+div#footer.class1.class2.class3 <div
: 我是导航栏 layout/_partial/footer.ejs: 我是底部信息 我们在layout中创建layout.ejs，并引入...所以首页会显示每一篇文章的内容，实际上我们并不想在首页显示那么多内容，只想显示文章的摘录。 Hexo 提供了 excerpt 属性来获取文章的摘录部分，不过这里需要在文章中添加一个 添加样式 到目前为止，我们完成了首页的整体页面结构，不过由于没添加css样式，因此整体页面非常难看...需要注意的是，要想在页面中展示分类页，需要先执行hexo new page categories生成分类页面，并添加type为categories： title: categories date: 2019...添加标签页 标签页与分类页及其类似，只是根据标签进行归档。
默认插槽通常在组件标签内部添加一个 slot 标签来声明，比如我们定义一个MyComponent.vue组件，其代码如下： ... 这里我们在App.vue中调用 MyComponent组件时，在 MyComponent标签内部添加了一个h1标签，里面填写了一段内容。...> 在上面的代码中，我声明了两个插槽：一个具名为 “header” 的插槽，和一个默认插槽。... 这是header插槽的内容 <template...示例代码如下： 定义一个需要动态显示的组件DynamicComponent.vue， 我是动态组件,我也可以放入SlotComponent组件定义的插槽中 <
下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 练习： c1Sibling... c1Sibling c1 //获取父亲的上一个兄弟的第一个儿子 tag.parentElement.previousElementSibling.firstElementChild.../select/textarea里面输入的内容 （2）属性 attributes 获取所有标签属性 getAttribute() 获取指定标签属性 setAttribute...登陆 我的资料 注销...) { //创建标签 //将标签添加到i1里面 var tag=document.createElement("input");
当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件。通过该属性，可以使得组件之间的样式不互相污染，相当于实现了样式的模块化。...属性的div标签。...如下所示代码： a[href] {color:red;} 只对有href属性的a标签应用样式。...在编译阶段，PostCSS插件通过给html标签添加data-v-5558831a属性，并且同时给样式类.example添加同名修饰符，自动实现了css模块化。...假设项目中使用element-ui的table组件，此时想在己方组件中修改table组件标题高度。通过检视组件代码发现，其标题类名为.el-table__header-wrapper。
P 标签，为什么和如何使用？ 为什么 - 当我们输入日志的时候，每次跳过一行就是一个段落，这个时候需要一个方法去展示？...第2步：使用 DIV 标签把博客日志的内容和标题区分开 给 the_content() 两边添加 DIV 标签并给该 DIV 标签附上class="entry"属性，如下： <div class="entry...到目前为止，对于每个 DIV 标签，我们可以用 id 去命名它，如 id="header"，那么id 和 class之间有什么区别呢？ id 是唯一的而 class不是。...当你想一遍又一遍重新利用一些东西如日志的标题，那么请使用 class。 第3步：给日志的标题和内容添加 class=”post” 的 DIV 标签 用一个 DIV 标签把日志的标题和内容一起围住。...保存并刷新浏览器，然后查看源代码中的代码。 为什么你要添加另外一个 DIV 标签去围住日志标题和日志内容？
jumbotron 元素是一个大框，相比于页面的其他部分显得鹤立鸡群，你想在其中包含什么东西都可以；它通 常用于在主页中呈现项目的简要描述。我们还可以修改主页显示的消息。...在3处，我们添加了属性class="form"；然后使用模板标签{% bootstrap_form %}来显示表 单（见4）；这个标签替换了我们在第19章使用的标签{{ form.as_p }}。...login.html所做的修改：在1处加载bootstrap3，添加header块并在其中包含合适的消息；接下来，我们在标签 中添加属性class="form"（见2），使用模板 标签{% bootstrap_form...我们在header块中添加了标题Topics（见1）。...为设置每个主题的样式，我们将它们都 设置为 元素，让它们在页面上显得大些（见2）；对于添加新主题的链接，也做了同样的处 理（见3）。
logo 图片 第三步：创建一个图片标签显示 header 图片 代码效果: <!.../文件名称 下一级：目录名称/文件名称 1.5.3.基础标签4 1.5.3.1.列表标签 效果: 列表标签分类: 1)有序列表 ol用来定义有序列表 2)无序列表 ul用来定义无序列表 不管是有序的ol...属性 案例4:网站表单页面 【实现思路】: 1.在页面中间添加一个表格 2.10行3列表格 3.在表格中添加表单表单子标签 1.5.7.基础标签7 1.5.7.1.框架标签 frameset框架级...根据显示的类型，主要可以分为3大类 块级标签 独占一行的标签 能随时设置宽度和高度（比如div、p、h1、h2、ul、li） 行内标签（内联标签） 多个行内标签能同时显示在一行 宽度和高度取决于内容的尺寸...对比其他标签，发现div很纯洁 Div容器标签 Div独占一行 span一行显示多个 钩子 同时选择多个 用于精准的定位 满足条件的所有后代 直接后代 优先级很低 性能很差 [Web
最后，我将把我们的logo和一些语义标记，与一个容器一起添加到我们的header中，这样我稍后可以添加一些样式： <a class...--- // The code fence area --- 例如，在上一节中，我在我的代码栅栏中添加了一个导入行，将Header组件添加到我的页面。我们将继续讨论我们在代码栅栏中还能做什么。...使用UI框架 Astro最引人注目的特点之一是它可以灵活地与你喜欢的JS框架集成。而且你不必只使用一个框架，你可以使用多个。 在我们的项目中，我想在主页的底部添加一个FAQ部分。...我将在下一节向你展示我们需要的东西。 指令 正如你在上一个例子中看到的，这个组件被添加到了页面上，但它没有生效。...我想在页面加载时加载我的FAQ组件，所以这就是我需要的： 请注意，所有这些都来自于Astro中的Island Architecture[9]。
placeholder 属性 案例4:网站表单页面 【实现思路】: 1.在页面中间添加一个表格 2.10行3列表格 3.在表格中添加表单表单子标签 1.5.7.基础标签7 1.5.7.1.框架标签...8 1.5.8.1.块标签div和行标签span div 标签 span 标签 2.CSS 2.1.为什么要学习CSS CSS 美化网页（样式）!!!...假设，我想这页面上所有的div都共同拥有相同的样式该怎么办呢?...: 帮助我们找到对应的标签，并为其添加css样式 2.5.CSS常见的选择器 2.5.1.通配符选择器 2.5.2.CSS中的标签选择器 标签选择器作用： 根据标签名找到标签 格式: 标签名{ Css...，主要可以分为3大类 块级标签 独占一行的标签 能随时设置宽度和高度（比如div、p、h1、h2、ul、li） 行内标签（内联标签） 多个行内标签能同时显示在一行 宽度和高度取决于内容的尺寸（比如span
也许是我的分离做的不够彻底。 第 2 阶段: 让样式与结构解耦 在寻找解决办法的过程中，我发现大家更倾向于给标签添加更多的类名，这样定义起来就会更直观。...> ...在header标签里的按钮右对齐： New...你可以通过声明变量和使用mixins加强代码的一致性。但 每一行新的CSS仍然有可能会使样式变得更复杂，添加更多的CSS是永远不会使CSS更简单的。...你仍然应该创建组件 我的观点与那些顽固的实用派CSS拥护者的区别之一就是，我不认为你应该仅用通用类来给标签添加样式。......但是先要用通用类构建样式 我的方法需要先使用通用类给标签添加样式的原因是，我希望使用通用类来构建网站样式（译者：言外之意，不添加任何新样式）。而且只有当他们出现时才会精确的复用重复的部分。
也可有如下写法，省标签，便于控制局部 ，主要方法是单独写一个layout类，需要控制布局的时候，加上这个类就可以了 范例演示地址 .layout{ width...是三列布局，两边固定宽度，中间自适应 中间内容元素在 dom 元素次序中优先位置 按照注释编号，一行行实现观察效果 范例 http://js.jirengu.com/poya/1/......">extra 缺点：.mian的最小宽度不能小于.aside的宽度 双飞翼布局 双飞翼布局 按照注释编号，一行行实现观察效果 范例 http://js.jirengu.com...做布局的时候，要分清布局块和内容块！布局块DIV只用来布局，内容快DIV只用来添加网页内容。bootstrop就用栅格系统做布局块，内容块是自己设计的独立元素。 例子：简单的头部导航布局 ?...请看我的博客，媒体查询CSS5:移动端页面(响应式) 图片处理技巧 为了防止图片收缩，尽量不要使用img标签，使用div标签然后使用 background:transparent url('xxx')
CSS Grid 布局示例 当我正在学习一些东西时，我发现最好的学习方法是使用现有的工具构建实用的东西。...可以只使用列间距，但我想在 Header 和 Footer 之前留出一些空白，所以还同时使用行间距。 ? 接下来，就是需要定义应用程序的不同区域。...Grid还引入了一个额外的长度单位，以帮助各位创建灵活的Grid轨道。新的fr单元表示网格容器中可用空间的一小部分。 第二行的1fr会告诉区域占用剩余的可用空间。...{ grid-area: 3 / 1 / 4 / 5; } 接着添加对应的标签： ... Header Left
第二行是这个主题的地址，如果你的主题只是私用的而不准备发布的话，那就不用管它了。 第三行是主题的描述。 第四行是版本号，这是非常重要的，特别是当你公开发布你主题新版本的时候。...当输入 CSS 代码去样式化你的网页的时候，你可能想在这里增加些注释使得能够在以后更清楚知道这部分代码是干什么的。...（我在涉及到 XHTML，PHP，CSS的时候都使用标签，属性和值这些术语是为了保持简单，实际上 PHP 和 CSS 有不同术语。...在我们继续之前，我需要解释下为什么使用 body{ } （CSS 选择器），是因为你是在样式化网页的绝大基本部分（或者说是总体部分）， 标签。...然后，在后面你会样式化 ID 为 header 的 DIV 标签。
1.本节标签一览 : 定义文档中的节 : 定义文档中的节 New : 定义一个文档头部 New : 定义一个文档底部 New :...前面讲述到，div元素它属于块级元素，浏览器会在其前后显示折行（会换行）。...为文档添加了额外的结构。...同时，由于这些 div 属于同一类元素，所以可以使用 class="news" 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得...-- 示例2.span标签使用内联样式 --> 我的母亲有 蓝色 的眼睛，我得父亲有 <span
不再需要脚本、链接类型 很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。...你也可以将第九行的代码写成这样（不用引号）： 7....语义性的Header和Footer … … 上面的代码一去不复返。...例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在标签里使用JavaScript 来包裹每一次动作。...何时使用 是否还需要使用标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住，特别是为了内容的定位， 将会是非常理想的选择。
从标签是否闭合上我们可以分为两大类：双标签和单标签。 双标签：有开始标签和结束标签的，如，称为双标签。...具体标签有：div标签，header头部信息，footer底部信息，nav导航标签，p段落标签，pre保留空格换行标签，h1-h6标题标签，audio视频标签，aside文章标签，b/strong加粗标签...div标签，h1-h6标题标签，from表单，header头部内容，footer页脚，table表格，ol有序列表，ul无序列表，dl自定义列表，li列表元素标签，iframe内联框架，nav导航，section...行内块标签：结合的行内和块级的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；img图片标签，input输入框标签。 HTML代码注释： 单行注释：<!...-- 注释内容1 注释内容2 --> HTML代码注释是特别常用的，几大好处： 添加代码注释，增加代码的可读性。 隐藏掉暂时不需要显示的内容。
（标签）中的文本 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性 注释是注释节点(comment对象) JavaScript 可以通过DOM创建动态的 HTML： JavaScript...如：header = document.getElementById('header') header.parentElement //查找header元素的父标签。...第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling...名 d3Ele.innerText = '我后来创建的div' //设置div里面的内容 添加子节点 d2Ele = document.getElementsByClassName('d3...') //获取id为d2的div元素 d2Ele.appendChild(d3Ele) //将d3Ele作为子元素添加到d2Ele中 删除节点 d2Ele.removeChild
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
