我最近在学校的一个俱乐部为一个项目做了一个网站,用于营销一部电影。但问题是,它没有正确加载。它在我的VSCODE实时服务器上工作和看起来都是应该的,但在web服务器域中,它看起来很奇怪。我附上了两张图片,一张展示了它应该是什么样子,另一张则展示了它的实际样子。
应该看起来像:(
https://i.stack.imgur.com/3r8f1.png
).
外观(使用实时服务器):(
https://i.stack.imgur.com/T8k9A.png
).
我还在链接我的存储库(与域):
https://github.com/olivecatoil/bpa-moviewebsite
。如果需要查看代码,请告诉我如何有效地共享。
我试着清除缓存,我希望它能正常加载,但它没有改变任何东西。我可能以错误的方式上传到了存储库,如果是,有人能告诉我怎么做吗?
我的VS中的错误似乎没有影响实时服务器,但它可能做了一些事情。它必须使用按钮样式:溢出、光标、转换属性和webkit掩码的冒号出现错误,按钮的右括号表示“应为规则或选择器”:
<style>
.button {
position: relative;
padding: 24px 64px;
margin-bottom: 20px;
border-radius: 100vw;
background-color: transparent;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
color: #fafafa;
border: solid 1px rgba($color: #fafafa, $alpha: 0.3);
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-webkit-mask-image: -webkit-radial-gradient(white, black);
a:link {
color: white;
}
a:link, a:visited {
color: white;
}
.button-text{
position: relative;
z-index: 2;
}
.fill-container{
position: absolute;
left: 0;
top: 50%;
width: 100%;
padding-bottom: 100%;
transform: translateY(-50%) rotate(180deg);
&::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
border-radius: 50%;
transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
transform: translateY(-100%);
}
}
&:hover{
border-color: blue;
transform: translateY(-4px);
.fill-container{
transform: translateY(-50%) rotate(0);
&::after{
transform: translateY(0);
}
}
}
}
</style>
<button class="button">
<span class="button-text">
<a href="https://forms.gle/GwLqYaqXitFbYD9cA" target="_blank" style="text-decoration: none;">
Support
</a>
</span>
<div class="fill-container"></div>
</button>
<button class="button">
<span class="button-text">
<a href="tu.html" target="_blank" style="text-decoration: none;">
Terms of Use
</a>
</span>
<div class="fill-container"></div>
</button>
<button class="button">
<span class="button-text">
<a href="pu.html" target="_blank" style="text-decoration: none;">
Privacy Policy
</a>
</span>
<div class="fill-container"></div>
</button>
<button class="button">
<span class="button-text">
<a href="cn.html" target="_blank" style="text-decoration: none;">
Contact Organization
</a>
</span>
<div class="fill-container"></div>
</button>
在我的站点开发工具中,它说我的css链接在某种程度上是一个问题:
(
https://i.stack.imgur.com/YyjOK.png
).在控制台中,它显示了所有这些:(
https://i.stack.imgur.com/u4Yz0.png
).
导入资产和样式表的位置:
(
https://i.stack.imgur.com/Flvbw.png
)
