徽标,屏幕分辨率

时间:2017-02-17 17:24:39

标签: html css

我的问题: 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;
&#13;
&#13;

1680x1050 1366x768

1 个答案:

答案 0 :(得分:0)

您可以尝试这样的事情。正如我在您链接的网站中看到的那样,徽标是格式化文本。我用左浮动插入文本。看看它是否适合你。

&#13;
&#13;
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;
&#13;
&#13;