SharePoint Online 开发:如何用Developer Tool找到CSS元素并做改变

https://blog.51cto.com/13969817
当我们使用CSS元素时,几乎每个浏览器都内置了开发工具,非常方便,开发工具将允许你定位页面上的对象并查看他们的属性,好处是开发工具不仅可以在每个浏览器中使用,而且可以以相同的方式打开它们,我们继续以网站的主页、使用IE浏览器打开为例,按F12键就可以了,如果你使用的是联想笔记本,那么需要Fn+F12键一起使用。

你将在资源管理器窗格中看到,HTML有很多元素,Microsoft一次调用很多元素,而SharePoint则从大量的样式表中工作,元素嵌套在嵌套的元素中等等,所以,如果你不是一个专业的网站开发人员,在你试验你的网站风格时,会有一些尝试和错误,但不会破坏任何Object的风险,你在这个页面上做的任何动作都是临时的,你可以通过简单地刷新浏览器页面将一切设置置回默认值。

现在我们来看一下如何找到一个元素,如何做出改变以及如何测试它?

我们先从比较明显的Object开始,比如移除搜索栏,我们使用选择页面元素指针点击搜索区域,在资源管理器面板中,你将看到跳转到相关页面代码中,我们想查找:searchux-searchbox,双击并复制它,然后在右侧style标签下添加一条rule, 你将发现左侧的搜索框消失了。
SharePoint Online 开发:如何用Developer Tool找到CSS元素并做改变

在Style 标签下添加的Rule,示例代码:

ms-searchux-searchbox {
Display: none
}

需要注意的是:

  • 当我们再次刷新页面的时候,页面会重新刷新+加载,做的修改会消失,置回初始状态。
  • 如果想永久性保留,需要将此规则复制,然后到样式表中进行粘贴,保存,这会永久性使用这个规则

猜你喜欢

转载自blog.51cto.com/13969817/2450551