将图像对齐到html页面

时间：2015-04-19 21:45:52

标签： css html5

我一直试图把这张图片放进去，但我到这里的问题是图片一直在通过页脚，我似乎无法解决它。请帮帮我。 ＆＃34; batmanshop＆＃34;的图像大小是宽度= 890，高度= 2000。

这是CSS代码，下面是HTML代码

＆＃13;
＆＃13; 
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-image: url(images/background.png);
	margin: 0;
	padding: 0;
	color: #000;
}

IMG.titleImage {
    margin-left: 300px;
}

ul, ol, dl {
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
    word-wrap: break-word;
}
a img {
	border: none;
}

a:link {
	color: black;
}
a:visited {
	color: #6E6C64;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}


.container {
	width: 960px;
    height:100%;
	background-color: #FFF;
	margin: 0 auto;
}

.header {
	background-image:url(images/headerbg.png);
    height:140px;
}

.content {
    width:100%; 
    height:100%;
    background-color: white;
}

.footer {
	padding: 10px 0;
	background-color: #F1F8E0;
}

.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}





//Navigation Bar
.nav, .nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

.nav {
	/* Layout & positioning */
	position: relative;
	margin: auto; /* Centering the menu */
	height: 46px;
	width: 960px;
	text-align: center;
	
	/* Background & effects */
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	background: #65c0bb;
	background-image:url(images/navImage.png);
}


.nav>li {
	margin: 0;
	line-height: 1;
	padding: 0;
	display: inline;
	position: relative;
	margin: 0 12px;
}

.nav::after, .nav::before {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	height: 0px;
	width: 0px;
	border: 23px solid #65c0bb;
	z-index: -1;
}

/* The left ribbon */
.nav::before {
	border-left-color: transparent;
	left: -30px;
}

/* The right ribbon */
.nav::after {
	border-right-color: transparent;
	right: -30px;
}

.nav>li>a {
	display: inline-block;
	padding: 15px 20px;
	position: relative;

	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	
	-webkit-transition: color .3s linear;
	   -moz-transition: color .3s linear;
	     -o-transition: color .3s linear;
	    -ms-transition: color .3s linear;
	        transition: color .3s linear;
}

.nav>li>a:hover, .nav>li:hover>a {
	color: #eae8a5;
}

.nav>li>a::after {
	content: "";
	height: 15px;
	width: 15px;
	position: absolute;
	right: -20px;
	top: 16px;
	display: block;
}

.nav>li:last-child>a::after {
	display: none;
}

.nav ul {
	position: absolute;
	left: -9999px;
	padding-top: 10px;
	border-bottom: 1px solid #ccc;
	opacity: 0;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
}

.nav>li:hover>ul {
	left: 0;
	opacity: 1;
	top: 30px;
}


.nav ul li:hover>ul {
	left: 150px;
	opacity: 1;
	top: -11px;
	padding-left: 12px;
	border-bottom: 0;
	box-shadow: none;
}

.nav ul li {
	display: block;
	position: relative;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: 150px;
	text-align: justify;
	z-index: 9;
	background: #eee;
	box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
	-webkit-transition: background .3s linear;
	-moz-transition: background .3s linear;
	-ms-transition: background .3s linear;
	-o-transition: background .3s linear;
}

.nav ul li a {
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	text-decoration: none;
	display: block;
	padding: 7px 12px 7px 20px;
	color: #65c0bb;
	-webkit-transition: color .3s linear;
	-moz-transition: color .3s linear;
	-ms-transition: color .3s linear;
	-o-transition: color .3s linear;
}

.nav ul li:hover>a, .nav ul li a:hover {
	color: #4db6b0;
}

.nav ul li:hover {
	background: #f7f7f7;
}

.nav ul ul li:last-child {
	border-bottom: 1px solid #ccc;
}

.nav ul ul li {
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}

.nav ul::after, .nav ul::before {
	content: "";
	display: block;
	z-index: 1;
	position: absolute;
	height: 9px;
	width: 9px;
}

.nav>li>ul::after {
	border: 1px solid #ccc;
	background: #eee;
	border-right: 0;
	border-bottom: 0;
	top: 5px;
	left: 25px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

.nav>li>ul::before {
	height: 1px;
	width: 12px;
	background: #eee;
	border-right: 0;
	border-bottom: 0;
	top: 10px;
	left: 24px;
	z-index: 99;
}

.nav ul ul::after {
	border: 1px solid #ccc;
	background: #eee;
	border-right: 0;
	border-bottom: 0;
	top: 20px;
	left: 8px;
	position: absolute;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
}

.nav ul ul::before {
	height: 10px;
	width: 1px;
	background: #eee;
	z-index: 99;
	top: 20px;
	left: 12px;
}




.titleImage2 {
    margin-left: 250px;
}


.birthdayDream {
    padding-right: 15px;
	padding-left: 15px;
    float: right;
}

p1 {
    display: block;
    margin-top: 30px;
    padding-right: 15px;
	padding-left: 15px;

}

form {
    margin-left: auto;
    margin-right: auto;s
    display:inline-block; 
    width:600px;
    
}


input {
    float:right;
    margin-right: 50px;
    clear:both;
}

input2 {
    float:left;
}

.row {
margin-left: 200px;
}

.batmanImage {
    margin-left: 180px;
}

.batmanshop {
    height:auto;
    margin: 0 auto;
}
＆＃13; 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>

<body>

<div class="container">
    
<div class="header">
 
</div>
    <ul class="nav">
        
		<li>
            <a href="index.html">Home</a>
        </li>
		<li>
			<a href="themes.html">Themes</a>
			<ul>
				<li><a href="boys.html">Boys Party Theme</a></li>
				<li><a href="girls.html">Girls Party Theme</a></li>
			</ul>
		</li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
        <li><a href="login.html">Login</a></li>
        <li><a href="signUp.html">Sign Up</a></li>
        
	</ul>
    
                                                                            
<div class="content">
      
    <br/>
    <IMG class="batmanImage">
          <img src="images/batmantitle.jpg" name="Title" width="600" height="206">
    </IMG>
    
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p> 

<IMG class="batmanshop">
          <img src="images/batmanshop.jpg" name="Title">
    </IMG>

    
</div>
                    
<div class="footer">
    <div class="navigationbar">   
    <ul class="nav">
        
		<li>
        <a href="index.html">Home</a>
        </li>
		<li>
        <a href="about.html">About</a>
        </li>
		<li>
        <a href="contact.html">Contact</a>
        </li>
        <li>
        <a href="terms.html">Terms and Conditions</a>
        </li>
        
        
	</ul>
</div>
</div>
                   
</div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

无论你想达到什么目的，你都做不到：

<IMG class="batmanshop">
          <img src="images/batmanshop.jpg" name="Title">
    </IMG>

我将其替换为：<img class="batmanshop" src="images/batmanshop.jpg" name="Title" />

无论如何，即使使用您的代码，我也看不到图像通过页脚。

＆＃13;
＆＃13; 
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-image: url(images/background.png);
	margin: 0;
	padding: 0;
	color: #000;
}

IMG.titleImage {
    margin-left: 300px;
}

ul, ol, dl {
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
    word-wrap: break-word;
}
a img {
	border: none;
}

a:link {
	color: black;
}
a:visited {
	color: #6E6C64;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}


.container {
	width: 960px;
    height:100%;
	background-color: #FFF;
	margin: 0 auto;
}

.header {
	background-image:url(images/headerbg.png);
    height:140px;
}

.content {
    width:100%; 
    height:100%;
    background-color: white;
}

.footer {
	padding: 10px 0;
	background-color: #F1F8E0;
}

.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}





//Navigation Bar
.nav, .nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

.nav {
	/* Layout & positioning */
	position: relative;
	margin: auto; /* Centering the menu */
	height: 46px;
	width: 960px;
	text-align: center;
	
	/* Background & effects */
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	background: #65c0bb;
	background-image:url(images/navImage.png);
}


.nav>li {
	margin: 0;
	line-height: 1;
	padding: 0;
	display: inline;
	position: relative;
	margin: 0 12px;
}

.nav::after, .nav::before {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	height: 0px;
	width: 0px;
	border: 23px solid #65c0bb;
	z-index: -1;
}

/* The left ribbon */
.nav::before {
	border-left-color: transparent;
	left: -30px;
}

/* The right ribbon */
.nav::after {
	border-right-color: transparent;
	right: -30px;
}

.nav>li>a {
	display: inline-block;
	padding: 15px 20px;
	position: relative;

	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	
	-webkit-transition: color .3s linear;
	   -moz-transition: color .3s linear;
	     -o-transition: color .3s linear;
	    -ms-transition: color .3s linear;
	        transition: color .3s linear;
}

.nav>li>a:hover, .nav>li:hover>a {
	color: #eae8a5;
}

.nav>li>a::after {
	content: "";
	height: 15px;
	width: 15px;
	position: absolute;
	right: -20px;
	top: 16px;
	display: block;
}

.nav>li:last-child>a::after {
	display: none;
}

.nav ul {
	position: absolute;
	left: -9999px;
	padding-top: 10px;
	border-bottom: 1px solid #ccc;
	opacity: 0;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
}

.nav>li:hover>ul {
	left: 0;
	opacity: 1;
	top: 30px;
}


.nav ul li:hover>ul {
	left: 150px;
	opacity: 1;
	top: -11px;
	padding-left: 12px;
	border-bottom: 0;
	box-shadow: none;
}

.nav ul li {
	display: block;
	position: relative;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: 150px;
	text-align: justify;
	z-index: 9;
	background: #eee;
	box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
	-webkit-transition: background .3s linear;
	-moz-transition: background .3s linear;
	-ms-transition: background .3s linear;
	-o-transition: background .3s linear;
}

.nav ul li a {
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	text-decoration: none;
	display: block;
	padding: 7px 12px 7px 20px;
	color: #65c0bb;
	-webkit-transition: color .3s linear;
	-moz-transition: color .3s linear;
	-ms-transition: color .3s linear;
	-o-transition: color .3s linear;
}

.nav ul li:hover>a, .nav ul li a:hover {
	color: #4db6b0;
}

.nav ul li:hover {
	background: #f7f7f7;
}

.nav ul ul li:last-child {
	border-bottom: 1px solid #ccc;
}

.nav ul ul li {
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}

.nav ul::after, .nav ul::before {
	content: "";
	display: block;
	z-index: 1;
	position: absolute;
	height: 9px;
	width: 9px;
}

.nav>li>ul::after {
	border: 1px solid #ccc;
	background: #eee;
	border-right: 0;
	border-bottom: 0;
	top: 5px;
	left: 25px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

.nav>li>ul::before {
	height: 1px;
	width: 12px;
	background: #eee;
	border-right: 0;
	border-bottom: 0;
	top: 10px;
	left: 24px;
	z-index: 99;
}

.nav ul ul::after {
	border: 1px solid #ccc;
	background: #eee;
	border-right: 0;
	border-bottom: 0;
	top: 20px;
	left: 8px;
	position: absolute;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
}

.nav ul ul::before {
	height: 10px;
	width: 1px;
	background: #eee;
	z-index: 99;
	top: 20px;
	left: 12px;
}




.titleImage2 {
    margin-left: 250px;
}


.birthdayDream {
    padding-right: 15px;
	padding-left: 15px;
    float: right;
}

p1 {
    display: block;
    margin-top: 30px;
    padding-right: 15px;
	padding-left: 15px;

}

form {
    margin-left: auto;
    margin-right: auto;s
    display:inline-block; 
    width:600px;
    
}


input {
    float:right;
    margin-right: 50px;
    clear:both;
}

input2 {
    float:left;
}

.row {
margin-left: 200px;
}

.batmanImage {
    margin-left: 180px;
}

.batmanshop {
    height:auto;
    margin: 0 auto;
}
＆＃13; 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>

<body>

<div class="container">
    
<div class="header">
 
</div>
    <ul class="nav">
        
		<li>
            <a href="index.html">Home</a>
        </li>
		<li>
			<a href="themes.html">Themes</a>
			<ul>
				<li><a href="boys.html">Boys Party Theme</a></li>
				<li><a href="girls.html">Girls Party Theme</a></li>
			</ul>
		</li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
        <li><a href="login.html">Login</a></li>
        <li><a href="signUp.html">Sign Up</a></li>
        
	</ul>
    
                                                                            
<div class="content">
      
    <br/>
    <IMG class="batmanImage">
          <img src="images/batmantitle.jpg" name="Title" width="600" height="206">
    </IMG>
    
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p> 
 
<img class="batmanshop" src="http://placehold.it/890x2000&text=Batmanshop" name="Title" />


    
</div>
                    
<div class="footer">
    <div class="navigationbar">   
    <ul class="nav">
        
		<li>
        <a href="index.html">Home</a>
        </li>
		<li>
        <a href="about.html">About</a>
        </li>
		<li>
        <a href="contact.html">Contact</a>
        </li>
        <li>
        <a href="terms.html">Terms and Conditions</a>
        </li>
        
        
	</ul>
</div>
</div>
                   
</div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题