我下载了一个HTML template , 开始修改一些元素,我要做的第一件事是更改 id
<article>
的属性元素。
我只改变了它,因此网站外观变得不理想。控制台显示任何 CSS 问题。
这是我感兴趣的原始 HTML 代码部分:
<!-- Nav -->
<nav id="nav">
<a href="#me" class="fa fa-home active"><span>Home</span></a>
<a href="#work" class="fa fa-folder"><span></span></a>
<a href="#email" class="fa fa-envelope"><span>Email Me</span></a>
<a href="http://twitter.com/daguilaraguilar" class="fa fa-twitter"><span>Twitter</span></a>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Diego Benjamín <br><br> Aguilar Aguilar</h1>
<!-- <span class="byline">Senior Astral Projectionist</span> !-->
刚刚改变:
<a href="#start" class="fa fa-home active"><span>Home</span></a>
<article id="start" class="panel">
这是视觉变化:
我缺少或应该修复什么?
EDIT
在评论之后我去看了 CSS 文件并发现:
/*********************************************************************************/
/* Panels */
/*********************************************************************************/
#main
{
position: relative;
overflow: hidden;
}
.panel
{
position: relative;
}
/* Me */
#me
{
}
#me .pic
{
position: relative;
display: block;
}
最佳答案
这是因为在 CSS
中设置了 id me
的样式。
取自CSS(我下载了):
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
基本上,如果您想更改 #me
ID,您必须进入 CSS
样式表并在那里进行更改。
更新
有多种不同的样式表。我从 style.css
中获取了该片段,但是还有 style-desktop.css
包含各种不同的 #me
样式。我的建议就是遍历每个 css
文件并编辑 #me
的每个实例成为你想要的。
关于html - 为什么更改文章 HTML 元素的 id 会破坏 CSS 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22036532/