时间戳

首页 > 解决方案 > 我在页面上的图像做错了什么？

html - 我在页面上的图像做错了什么？

问题描述

body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
}


.main-nav {
	display: none;
	font-family: 'Yantramanav', sans-serif;
}

.logo {
	color: #fff;
	font-family: 'Yantramanav', sans-serif;
	position: absolute;
	top: 70;
	left: 15;
	font-size: .5em;
}

.promo {
	position: fixed;
	top: 0;
	z-index: 99;
	padding: 10px;
	width: 100%;
	height: 60px;
	background-color: #000;
	color: #fff;
	font-size: .7em;
	text-align: center;
}


.welcome {
	color: #fff;
	font-family: 'Yantramanav', sans-serif;
	background-color: lightgrey;
	background: 
	linear-gradient(#303030, transparent 90%),
	url('../imgs/camerabg.jpg') no-repeat center;
	background-size: cover;
	height: 100%;
	width: 100%;
	text-align: center;
	margin-top: -10px;
	padding: 200px;
} 

.welcome h1 {
	font-size: 2em;
}

.welcome a {
	text-decoration-style: underline;
	color: lightgrey;
	font-size: 2em;
	display: inline-block;
}

.welcome ul {
	list-style-type: none;
}

.location {
	font-size: 1.5em;
	margin-top: 10px;
	padding: 10px;
	border: 2px solid lightgrey;
	color: lightgrey;
}

.products {
	font-family: 'Raleway', sans-serif;
	height: 150px;
	width: 100%;
	background-color: #000;
	background: linear-gradient(#181818, transparent 90%),
	url('../imgs/oldcamera.jpg') no-repeat center;
	background-size: cover;
	color: #fff;
	text-align: center;
	padding: 150px;
	margin-bottom: 40px;
}

 .products h1 {
 	font-size: 3em;
 }

 .products a {
 	padding: 10px;
 	border: 2px solid lightgrey;
 	color: lightgrey;
 	font-size: 2em;
 }

 /*===============================
 			Intro
==============================*/

.intro1, .intro2 p {
	font-family: 'Yantramanav', sans-serif;
}

.intro1, .intro2 span {
	font-family: 'Yantramanav', sans-serif;
}
<DOCTYPE! html>
<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<link href="https://fonts.googleapis.com/css?family=Raleway|Yantramanav" rel="stylesheet">
	<link rel="stylesheet" href="styles/stylesheet.css">
	<title>TITLE HERE</title>
</head>

<body>

<header>
<div class="promo">
	<p>BUY 1 GET 1 Free 1/2 OFF CLOCK FRAME COMBOS<br>
	*Offer Valid 5/1/18. May not be combined with another offer or promotion. While supplies last.*<p>
</div>

<div class="logo">
<h1> Name Here</h1>
</div>

<div class="main-nav">
	<ul>
		<a href="#"><li>Home</li></a>
		<a href="#"><li>About</li></a>
		<a href="#"><li>Blog</li></a>
		<a href="#"><li> Hire Us</li></a>
	</ul>
</div>

<div class="welcome">
	<h1>Welcome To Our New Site</h1>
	<p>Let us help you with your best moments.</p>
	<ul>
	<li><a href="#">Order Now</a></li>
	<li><a class="location" href="#">Find Our New Location</a></li>
</ul>
</div>
</header>

<div class="intro1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
</div>


</body>
</html>

我正在做一个项目，但我无法 让事情集中起来。

标题图像使页面水平滚动，文本不在标题的中心，页面后面的另一个图像也会发生同样的事情，并且在移动设备上图像没有填满整个视口，一切都结束了视口的左侧。

我已经获得了元标记以使视口响应。

HTML：

<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Raleway|Yantramanav" rel="stylesheet">
<link rel="stylesheet" href="styles/stylesheet.css">
<title>Title</title>

我已经在标题上隐藏了溢出属性来尝试解决这个问题，但这并没有解决我的问题。

两种图像尺寸均为 640 x 480 像素

用于重置宽度和边距的 CSS：

* {box-sizing: border-box;
}

body {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
}

html {
overflow-x: hidden;
}

这是我的导航、标题（包括背景图像）、标题、徽标和页面顶部广告的 CSS。

.main-nav {
display: none;
font-family: 'Yantramanav', sans-serif;
}

.logo {
color: #fff;
font-family: 'Yantramanav', sans-serif;
position: absolute;
top: 70;
left: 15;
font-size: .5em;
}

.promo {
position: fixed;
top: 0;
z-index: 99;
padding: 10px;
width: 100%;
height: 50px;
background-color: #000;
color: #fff;
font-size: .7em;
text-align: center;
}


.welcome {
color: #fff;
font-family: 'Yantramanav', sans-serif;
background-color: lightgrey;
background: 
linear-gradient(#303030, transparent 90%),
url('../imgs/camerabg.jpg') no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
margin-top: -10px;
padding: 200px;
border: 2px red solid;
} 

.welcome h1 {
font-size: 2em;
}

.welcome a {
text-decoration-style: underline;
color: lightgrey;
font-size: 2em;
display: inline-block;
}

.welcome ul {
list-style-type: none;
}

.location {
font-size: 1.5em;
margin-top: 10px;
padding: 10px;
border: 2px solid lightgrey;
color: lightgrey;
}

这是页面后面的图像的 CSS：

.products {
font-family: 'Raleway', sans-serif;
height: 150px;
width: 100%;
background-color: #000;
background: linear-gradient(#181818, transparent 90%),
url('../imgs/oldcamera.jpg') no-repeat center;
background-size: cover;
color: #fff;
text-align: center;
padding: 150px;
margin-bottom: 40px;
}

.products h1 {
font-size: 3em;
 }

.products a {
padding: 10px;
border: 2px solid lightgrey;
color: lightgrey;
font-size: 2em;
}

标签： htmlcssimagebackgroundheader

解决方案

推荐阅读