style标签中的<!--->的作用是什么

可能很多朋友在阅读别人的css代码的时候,可能会发现这样的现象,那就是style标签内部具有带有html注释。

代码如下:

 
 
1
2
3
4
5
6
7
8
< style type = "text/css" >
<!--
*{
   margin:0px;
   padding:0px;
}
-->
</ style >

下面就介绍一下为什么要加那个html注释:

再强调一遍,<!--->是html注释。它主要是针对老版本不识别style标签的浏览器,如果没有此html注释且浏览器不识别style标签的话,就会将css代码显示于页面,如果加上此注释,那么css代码就会被显示与页面了,对于识别style标签的浏览器来说,它内部的html注释将会被忽略,css代码会被正常渲染。



原文发布时间为:2017-2-17

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:style标签中的<!--->的作用是什么

这段代码是一个 HTML 页面的一部分,用于创建一个侧边栏的快捷方式菜单。 ```html <div class="sidebar-shortcuts" id="sidebar-shortcuts" style="display: none"> <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> <button class="btn btn-success"> <i class="ace-icon fa fa-signal"></i> </button> <button class="btn btn-info"> <i class="ace-icon fa fa-pencil"></i> </button> <!-- #section:basics/sidebar.layout.shortcuts --> <button class="btn btn-warning"> <i class="ace-icon fa fa-users"></i> </button> <button class="btn btn-danger"> <i class="ace-icon fa fa-cogs"></i> </button> <!-- /section:basics/sidebar.layout.shortcuts --> </div> </div> ``` 首先,`<div>` 标签定义了一个具有 class 属性为 "sidebar-shortcuts" 的 `<div>` 元素,并设置了 id 属性为 "sidebar-shortcuts",并通过 style 属性将其初始状态设置为不可见(display: none)。 在这个 `<div>` 元素的内部,又嵌套了一个具有 class 属性为 "sidebar-shortcuts-large" 的 `<div>` 元素,并设置了 id 属性为 "sidebar-shortcuts-large"。这个内层的 `<div>` 元素用于包含多个按钮,表示快捷方式菜单的大尺寸样式。 在内层的 `<div>` 元素,有四个 `<button>` 元素,每个按钮都有不同的 class 属性和 `<i>` 元素作为图标。具体解释如下: - 第一个 `<button>` 元素具有 class 属性为 "btn btn-success",表示一个成功操作的按钮,内部使用了一个带有 class 属性为 "ace-icon fa fa-signal" 的 `<i>` 元素作为图标。 - 第二个 `<button>` 元素具有 class 属性为 "btn btn-info",表示一个信息操作的按钮,内部使用了一个带有 class 属性为 "ace-icon fa fa-pencil" 的 `<i>` 元素作为图标。 - 第三个和第四个 `<button>` 元素类似,分别表示警告操作和危险操作的按钮,内部使用了对应的图标。 注释部分的代码是 HTML 注释,用于标记特定的代码段,在这里用于区分快捷方式菜单的布局部分。 总体来说,这段代码的作用是创建了一个侧边栏的快捷方式菜单,包含了不同样式的按钮和对应的图标。初始状态下,快捷方式菜单是隐藏的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值