我的问题: 1.Logo:我试图将我的徽标放在导航的左上方,但我不能。任何想法(不要改变代码很多)? 2.屏幕分辨率:我已经注意到我的网站在我的PC和笔记本电脑上都不一样了(ofc ...)。是否有可能解决这个问题。在这张图片上,您还可以看到我的网站如何看待我的字体。所以你可以通过Logo看到更好的问题。
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
@font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
@font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}

<!DOCYPE html>
<html>
<head>
<title>MaxSkins-Home</title>
<link rel="stylesheet" href="Home.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="navigacija">
<a href="Home.html"><div class="Home"><b>HOME</b></div></a>
<a href="Shop.html"><b>SHOP</b></a>
<a href="#"><b>GET POINTS</b></a>
<a href="#"><b>INFO</b></a>
</div>
</div>
<h1><b>EARN POINTS,<br> GET SKINS!</b></h1>
<h2><b>How does it work?</b></h2>
<div class="main1">
<p><b>It's simple!<br> Watch videos, do tasks and have fun!
<br>After earning large amount of coins,<br> contact us to get your skins!
<b></p>
</div>
<div class="video-wrapper">
<div class="video-container">
<iframe width="640" height="360"
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5"
allowfullscreen></iframe>
</div>
<!-- /video -->
</div>
<!-- /video-wrapper -->
</body>
</html>
&#13;
答案 0 :(得分:0)
您可以尝试这样的事情。正如我在您链接的网站中看到的那样,徽标是格式化文本。我用左浮动插入文本。看看它是否适合你。
public void onPagePreRender() {
super.onPagePreRender();
// do you data update then call refreshPage_action()
}
&#13;
body {
background-color: white;
margin: 0;
padding: 0;
width: 100%;
height: auto;
min-width: 1000px;
}
@font-face {
font-family: "Jocker";
src: url("JockeyOne-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Pacifica";
src: url("PacificaCondensed-Regular.ttf") format
("truetype");
}
@font-face {
font-family: "ReklameScript";
src:url("ReklameScript.ttf") format("truetype");
}
h1 {
font-size: 120px;
text-align: left;
font-family: "Jocker";
margin-left: 45;
color: rgb(200,101, 103);
}
h2 {
font-size: 70;
margin-left: 224;
font-family: "Jocker";
color: rgb(200,101, 103);
}
#header {
width: 100%;
height: 50px;
margin: auto;
}
#navigacija {
width: 100%;
margin-left: 0px;
padding: 0px;
height: 50px;
overflow: hidden;
text-align: right;
position: fixed;
background-color: #089DE3;
z-index: 9999;
}
#navigacija a {
color: white;
text-decoration: none;
line-height: 50px;
font-size: 30px;
font-family: "Pacifica";
display: inline-block;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 0px;
}
a#logo {
float: left;
}
#navigacija a:hover {
background: #00C5CD;
}
.main1 {
margin-top: 50px;
font-family: "ReklameScript";
font-size: 50;
background: #089DE3;
text-align: left;
margin-left: 194;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
bottom: 930;
right: 0px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-wrapper {
width: 640px;
float: right;
margin-left:auto;
margin-right:auto;
max-width: 100%;
}
&#13;