Question

你能帮我分析一下这个网站的内容吗？

www.hardrock.com

我想让它与此类似。我怎么能这样做？例如，菜单如何在用户向下滚动时移动？

这是导航CSS代码：

html, body {
height: 100%;
}

body {
background: linear-gradient(  #CCCCCC,  #CCCCCC 0%,   #999999 25%, #666666 50%, #999999 75%, #CCCCCC 100%);
}

nav {
max-width: 960px;
/* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
margin: 0 auto;
/* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
padding: 75px 0;
}

nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
width: 100%;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul li {
display: inline-block;
}

nav ul li a {
padding: 20px;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
font-size: 25px;
text-decoration: none;
display: block;
}

nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: rgba(0, 0, 0, 0.7);
}

/* Demo credits stuff */
@import url(http://fonts.googleapis.com/css?family=Nixie+One);
h1#author {
position: fixed;
bottom: 50px;
text-align: center;
color: #30303f;
width: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
padding: 10px 0;
font-family: "Nixie One";
text-stroke: 1px;
font-size: 30px;
text-shadow: 0 0 10px #aaaaaa;
font-family: "Roboto"
}
h1#author a {
color: #3399dd;
text-decoration: none;
}

Answer 1

我不会只是复制和粘贴来自其他人工作的代码。话虽如此，可能在某处涉及JavaScript。

我只是将网页保存到桌面并从那里获取。拿走一点直到你有你需要的东西

Answer 2

您可以通过浏览器扩展程序了解这一点，在浏览器的扩展程序中搜索＆＃34; wappalyzer＆＃34;

或者您可以访问此网站以获取更多信息wappalyzer

我怎么知道网站页面是什么？

2 个答案: