编辑网页中的图像

时间:2015-01-28 17:48:58

标签: javascript html css

我有一个网页,我想要更改其中的图片和文字。我可以看到它不是HTML,并且无法理解我应该具体编辑什么? 这是网站: vericotech.com/iphone6.html

我想编辑第一张图片应该更改哪些内容? 这是源代码:




<!DOCTYPE html>
<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-IN" lang="en-IN" prefix="og: http://ogp.me/ns#">
<head>
		
	<meta charset="utf-8" />
	<meta name="Author" content="Apple Inc." />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />
	<link rel="stylesheet" href="https://www.apple.com/ac/globalheader/1.0/styles/globalheader.css" type="text/css" />

	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Apple (India) - iPhone 6</title>
	<meta property="analytics-track" content="iPhone 6 - Index" />
	
	<meta property="analytics-s-channel" content="iphone" />
	<meta property="analytics-s-bucket-0" content="appleglobal,apple{COUNTRY_CODE}ip,apple{COUNTRY_CODE}iphonetab" />
	<meta property="analytics-s-bucket-1" content="apple{COUNTRY_CODE}global,apple{COUNTRY_CODE}ip,apple{COUNTRY_CODE}iphonetab" />
	<meta property="analytics-s-bucket-2" content="apple{COUNTRY_CODE}global" />

	<meta name="Description" content="With an innovative seamless design, our most advanced display and more, iPhone 6 is bigger than bigger." />
	
	<meta property="og:url" content="https://www.apple.com/in/iphone-6/" />
	<meta property="og:image" content="/euro/iphone-6/a/screens/images/og.jpg?201409250611" />
	<meta property="og:type" content="website" />
	<meta property="og:site_name" content="Apple" />
	<link rel="stylesheet" href="/wss/fonts?family=Myriad+Set+Pro&amp;v=1" type="text/css" media="all" />
<link rel="stylesheet" href="https://www.apple.com/v/iphone-6/a/styles/iphone-6.built.css" />


	<link rel="stylesheet" href="https://www.apple.com/in/iphone-6/styles/iphone-6.css" />
	<link rel="stylesheet" href="https://www.apple.com/v/iphone-6/a/styles/overview.built.css" />
	<link rel="stylesheet" href="https://www.apple.com/in/iphone-6/overview/styles/overview.css" />
	<script src="https://www.apple.com/v/iphone-6/a/scripts/head.built.js" type="text/javascript" charset="utf-8"></script>

</head>
<body class="page-overview">
	<nav id="globalheader" class="globalheader gh-selected-tab-iphone" role="navigation" aria-label="Global Navigation" data-hires="false" data-analytics-region="global nav" lang="en-IN">
	<div id="gh-content" class="gh-content">
		<ul class="gh-menu">
			<li id="gh-menu-icon-toggle" class="gh-menu-icon gh-menu-icon-toggle"><button id="gh-svg-icons" class="gh-svg-wrapper"><span class="gh-text-replace">Menu</span></button></li>
			<li id="gh-menu-icon-home" class="gh-menu-icon gh-menu-icon-home"><a href="/in/"><span class="gh-text-replace">Apple</span></a></li>
		</ul><!--/gh-menu-->

		</div><!--/gh-nav-->
	</div>
</nav><!--/globalheader-->

<script src="https://www.apple.com/ac/globalheader/1.0/scripts/globalheader.js" type="text/javascript" charset="utf-8"></script>
	<nav id="localnav" class="localnav localnav-withmenu" data-analytics-region="product nav">
	<header class="localnav-head">
		<a href="/in/iphone-6/" class="localnav-title"></a>
		<a class="button button-buynow" href="/in/iphone/buy/">Buy Now</a>
		<a id="explore-btn" class="localnav-head-disclosure">
			<span class="disclosure-text">Explore</span>
			<span class="disclosure-icon grid-icon squares"></span>
			<span class="disclosure-icon close-icon close"></span>
			<span class="disclosure-icon disclosure-icon-xsmall">
				<i class="icon icon-chevrondown"></i>
			</span>
		</a>
	</header>
	<div id="menu" class="localnav-menu translate-ended">
		<ul class="localnav-links">
			<li class="localnav-item-design large-first xsmall-first">
				<a class="localnav-link thumbnail thumbnail-large-row-1 thumbnail-design" href="/in/iphone-6/design/">
					Design
				</a>
			</li>
			<li class="localnav-item-display">
				<a class="localnav-link thumbnail thumbnail-large-row-1 thumbnail-display" href="/in/iphone-6/display/">
					Retina HD Display
				</a>
			</li>
			<li class="localnav-item-technology">
				<a class="localnav-link thumbnail thumbnail-large-row-1 thumbnail-technology" href="/in/iphone-6/technology/">
					Technology
				</a>
			</li>
			<li class="localnav-item-camera">
				<a class="localnav-link thumbnail thumbnail-large-row-1 thumbnail-camera" href="/in/iphone-6/cameras/">
					Cameras
				</a>
			</li>
			<li class="localnav-item-connectivity">
				<a class="localnav-link thumbnail thumbnail-large-row-1 thumbnail-connectivity" href="/in/iphone-6/connectivity/">
					Connectivity
				</a>
			</li>
			<li class="localnav-item-touchid large-first">
				<a class="localnav-link thumbnail thumbnail-large-row-2 thumbnail-touchid" href="/in/iphone-6/touch-id/">
					Touch ID
				</a>
			</li>
			<li class="localnav-item-ios8">
				<a class="localnav-link thumbnail thumbnail-large-row-2 thumbnail-ios8" href="/in/iphone-6/ios-8/">
					iOS 8
				</a>
			</li>
			<li class="localnav-item-accessories">
				<a class="localnav-link thumbnail thumbnail-large-row-2 thumbnail-accessories" href="/in/iphone-6/accessories/">
					Accessories
				</a>
			</li>
			<li class="localnav-item-techspecs xsmall-last">
				<a class="localnav-link thumbnail thumbnail-large-row-2 thumbnail-techspecs" href="/in/iphone-6/specs/">
					Tech Specs
				</a>
			</li>
		</ul>
	</div>
	<hr role="presentation" aria-hidden="true" />
</nav>
<div class="localnav-placeholder"></div>
<div id="curtain"></div>

	<script src="https://www.apple.com/metrics/ac-analytics/0.2/scripts/ac-analytics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://www.apple.com/metrics/ac-analytics/0.2/scripts/auto-init.js" type="text/javascript" charset="utf-8"></script>


	<div id="main" class="main" role="main" data-hires="true">

		<section class="section section-hero" data-analytics-section-engagement="name:hero">
	<div class="section-content">
		<div class="row">
			<div class="column large-12 xsmall-12">
				<div class="section-copy">
					<h1>iPhone 6</h1>
					<h2>Bigger than bigger</h2>
					<ul class="video-inline-item-list">
						<li class="inline-list-item">
							<a class="icon icon-play" href="/in/iphone-6/films/#video-product">Watch the film</a>
						</li>
						<li class="inline-list-item">
							<a class="icon icon-play" href="/in/iphone-6/films/#huge">Watch the ads</a>
						</li>
						<li class="inline-list-item">
							<a class="icon icon-play" href="/live/2014-sept-event/">Experience the keynote</a>
						</li>
					</ul>
				</div>
				<div class="image-hero-wrapper">
					<figure class="image-hero"></figure>
					<figure class="image-hero-scroll"></figure>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-intro-copy" data-analytics-section-engagement="name:intro">
	<div class="section-content">
		<div class="row">
			<div class="column large-12 xsmall-12">
				<div class="section-copy">
					<p class="intro">iPhone 6 isn’t simply bigger — it’s better in every way. Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display. It’s one continuous form where hardware and software function in perfect unison, creating a new generation of iPhone that’s better by any measure.</p>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-hardware-compare section-gradient" data-analytics-section-engagement="name:hardware-compare">
	<div class="section-content">
		<div class="row callout-row">

			<div class="column column-callout large-2 xsmall-6">
				<aside class="callout callout-iphone-6 callout-from-right" data-analytics-name="size-callout">
					<h6 class="callout-headline">4.7<span class="callout-unit">inches</span></h6>
					<p class="callout-copy">iPhone 6</p>
				</aside>
			</div>

			<div class="column large-8 column-comparison-shot xsmall-12">
				<figure class="image-size-comparison-left"></figure>
				<figure class="image-size-comparison-right"></figure>
			</div>

			<div class="column column-callout large-2 xsmall-6 xsmall-push-6">
				<aside class="callout callout-iphone-6-plus callout-from-left" data-analytics-name="size-plus-callout">
					<h6 class="callout-headline">5.5<span class="callout-unit"> inches</span></h6>
					<p class="callout-copy">iPhone 6 Plus</p>
				</aside>
			</div>
		</div>

	</div>

</section>

<section class="section section-largest" data-analytics-section-engagement="name:iphone-largest">
	<div class="section-content">
		<figure class="image-delay image-largest-hero"></figure>
		<div class="row">
			<div class="column large-9 medium-8 xsmall-12">
				<div class="section-copy" data-analytics-region="learn more">
					<a href="/in/iphone-6/design/" class="block">
						<h2>iPhone at its largest. And thinnest.</h2>
						<p>Developing an iPhone with a larger, more advanced display meant pushing the edge of design. From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, iPhone 6 feels just right.</p>
						<p><span class="more block-link">Learn more about Design</span></p>
					</a>
				</div>
			</div>

			<div class="column large-3 xsmall-12 column-callout">

				<div class="section-copy">
					<div class="callout-list">
						<aside class="callout column xsmall-6 callout-depth-iphone-6 callout-from-left" data-analytics-name="depth-callout">
							<h6 class="callout-headline">6.9<span class="callout-unit">mm</span></h6>
							<p class="callout-copy">iPhone 6</p>
						</aside>
						<aside class="callout column xsmall-6 callout-depth-iphone-6-plus callout-from-left" data-analytics-name="depth-plus-callout">
							<h6 class="callout-headline"><span class="callout-headline-number">7.1</span><span class="callout-unit">mm</span></h6>
							<p class="callout-copy">iPhone 6 Plus</p>
						</aside>
					</div>
				</div>

			</div>
		</div>
	</div>
</section>

<section class="section section-design-details section-two-boxes section-fade-in" data-analytics-section-engagement="name:design-details">

	<div class="section-content">
		<div class="row section-full">
			<div class="column large-6 xsmall-12 column-left">
				<div class="section-copy section-full-left align-center">
					<figure class="image-delay image-display-details-corner"></figure>
				</div>
			</div>
			<div class="column large-6 xsmall-12 column-right">
				<div class="section-copy section-full-right align-center">
					<figure class="image-delay image-display-details-side"></figure>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-buttons section-background section-fade-in" data-analytics-section-engagement="name:buttons">
	<div class="section-content">
		<div class="row">
			<figure class="image-delay image-button"></figure>
		</div>
	</div>
</section>

<section class="section section-display" data-analytics-section-engagement="name:display">
	<div class="section-content">
		<div class="row">
			<div class="column large-5 xsmall-12 column-copy">
				<div class="section-copy" data-analytics-region="learn more">
					<a href="/in/iphone-6/display/" class="block">
						<h2>Not just a bigger display. A better display.</h2>
						<p>It’s one thing to make a bigger display. It’s something else entirely to make a bigger Multi‑Touch display with brilliant colours and higher contrast at even wider viewing angles. But that’s exactly what we did with the new Retina HD display.</p>
						<p><span class="more block-link">Learn more about the Retina HD display</span></p>
					</a>
				</div>
				<div class="callout-list row">
					<aside class="callout column large-6 xsmall-6 callout-resolution-iphone-6 callout-from-right">
						<h6 class="callout-headline">1334<span class="callout-unit">×</span><br />750</h6>
						<p class="callout-copy">iPhone 6 RESOLUTION</p>
					</aside>

					<aside class="callout column large-6 xsmall-6 callout-resolution-iphone-6-plus callout-from-right">
						<h6 class="callout-headline">1920<span class="callout-unit">×</span><br />1080</h6>
						<p class="callout-copy">iPhone 6 Plus RESOLUTION</p>
					</aside>

				  <figure class="image-delay image-display-hero"></figure>
				</div>

			</div>
		</div>
	</div>
</section>

<section class="section section-technology section-background" data-analytics-section-engagement="name:technology">

	<div class="section-content">
		<figure class="image-delay image-powerful"></figure>
		<div class="row">

			<div class="column large-6 medium-9 xsmall-12 column-title">
				<div class="section-copy" data-analytics-region="learn more">
					<a href="/in/iphone-6/technology/" class="block">
						<h2>Hugely powerful. Enormously efficient.</h2>
						<p>Built on 64-bit desktop-class architecture, the new A8 chip delivers more power, even while driving a larger display. The M8 motion coprocessor efficiently gathers data from advanced sensors and a new barometer. And with increased battery life, iPhone 6 lets you do more, for longer than ever.</p>
						<p><span class="more block-link">Learn more about Technology</span></p>
					</a>
				</div>
			</div>
			<figure class="image-delay mobile-image-powerful xsmall-12 column"></figure>
			<div class="column large-6 medium-12 xsmall-12 large-push-0 medium-push-0 column-section-copy">
				<div class="section-copy">
					<div class="rounded-callout-container">
						<figure class="callout graph callout-no-intro align-center graph-first">
							<h6 class="callout-headline">64<span class="callout-unit">-bit</span></h6>
							<p class="callout-copy">ARCHITECTURE</p>
						</figure>
						<figure class="callout graph callout-no-intro graph-middle align-center">
							<h6 class="callout-headline">A8</h6>
							<p class="callout-copy">CHIP</p>
						</figure>
						<figure class="callout graph graph-two-line callout-no-intro align-center graph-last">
							<h6 class="callout-headline">M8</h6>
							<p class="callout-copy">MOTION COPROCESSOR </p>
						</figure>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-camera" data-analytics-section-engagement="name:camera">
	<div class="section-content">
		<figure class="image-delay image-popular"></figure>
		<div class="row">
			<div class="column large-9 medium-10 xsmall-12">
				<div class="section-copy" data-analytics-region="learn more">
					<a href="/in/iphone-6/cameras/" class="block">
						<h2>The camera that changed photos now does the same for video.</h2>
						<p>More people take more photos with iPhone than with any other camera. And now the iSight camera has a new sensor with Focus Pixels and new video features, like 1080p HD at 60 fps, slo-mo at 240 fps, and time-lapse video mode. So you’ll have more reasons to capture more moments on video too.</p>
						<p><span class="more block-link">Learn more about Cameras</span></p>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-camera-lense section-two-boxes" data-analytics-section-engagement="name:camera-lense">
	<div class="section-content">
		<div class="row section-full">
			<div class="column large-6 xsmall-12 column-left">
				<div class="section-copy section-full-left align-center">
					<p class="caption">All-new sensor supports Focus Pixels and enables even faster autofocus.</p>
					<figure class="image-delay image-camera-lense-explode"></figure>
				</div>
			</div>
			<div class="column large-6 xsmall-12 column-right">
				<div class="section-copy section-full-right">
					<div class="callout-list">
						<aside class="callout callout-aperture callout-from-left">
							<h6 class="callout-headline">
								<span class="callout-unit">Æ’/ </span>2.2
							</h6>
							<p class="callout-copy">APERTURE</p>
						</aside>
						<aside class="callout callout-pixels callout-from-left">
							<h6 class="callout-headline">1.5<span class="callout-unit">µ</span></h6>
							<p class="callout-copy">PIXELS</p>
						</aside>
					</div>
					<figure class="image-delay image-camera-lense-assembled"></figure>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-wireless" data-analytics-section-engagement="name:wireless">
	<div class="section-content">
		<div class="row">
			<div class="column large-5 large-push-6 medium-6 xsmall-12 xsmall-push-0">
				<div class="section-copy" data-analytics-region="learn more">
					<a href="/in/iphone-6/connectivity/" class="block">
						<h2>Faster wireless. Far and wide.</h2>
						<p>iPhone 6 supports fast wireless technologies and connects to networks all over the world. And with advanced Wi‑Fi, you’ll experience incredibly fast wireless speeds.</p>
						<p><span class="more block-link">Learn more about Connectivity</span></p>
					</a>
					<figure class="image-delay image-wireless"></figure>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-security section-background" data-analytics-section-engagement="name:security">
	<div class="section-content">
		<div class="row">
			<div class="column large-5 xsmall-12">
				<div class="section-copy" data-analytics-region="learn more">
					<a href="/in/iphone-6/touch-id/" class="block">
						<h2>Security. Right at your fingertip.</h2>
						<p>The breakthrough Touch ID technology lets you securely access your iPhone with the perfect password: your fingerprint. You can also use it to approve purchases from iTunes and the App Store without having to enter your password.</p>
						<p><span class="more block-link">Learn more about Touch ID</span></p>
					</a>
				  <figure class="image-delay image-security"></figure>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-ios" data-analytics-section-engagement="name:ios">
	<div class="section-content">
		<div class="row">
			<div class="column column-copy large-5 large-push-6 medium-6 medium-push-6 xsmall-12 xsmall-push-0">
				<div class="section-copy" data-analytics-region="learn more">
					<a href="/in/iphone-6/ios-8/" class="block">
					  <h2>The biggest iOS release ever.</h2>
					  <p>iOS 8 is our most advanced mobile operating system. And with incredible new capabilities and features designed to make the most of a larger display, iOS 8 doesn’t just work seamlessly with iPhone 6. It makes every experience feel bigger and better.</p>
					  <p><span class="more block-link">Learn more about iOS 8</span></p>
					</a>
				</div>
			</div>
			<div class="column large-2 large-pull-12 medium-pull-12 xsmall-12 xsmall-pull-0 polor-col">
				<div class="column-image">
    	    		<figure class="image-delay image-ios-release-left"></figure>
        	    	<figure class="image-delay image-ios-release-right"></figure>
          		</div>	
			</div>
		</div>
	</div>
</section>


	</div><!--/main-->


	

	<script>
	(function( window, document, undefined ) {

		var mediaConfig = {

			locale : "in",
			videos : [
				"hero-intro",
				"hero-scrollable",
				"largest-scrollable",
				"display-scrollable",
				"camera-scrollable",
			]

		};

		window.mediaConfig = mediaConfig;

	}( window, document ));
</script>
	<script src="https://www.apple.com/v/iphone-6/a/scripts/overview.built.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您还需要保存该网站的CSS。如果你检查元素的第一个图像(黑色iPhone 6或其他)。你会看到一个class = image-hero,它是图像分配给它的地方。

.page-overview .section-hero .image-hero { background-image:url(&#34; https://www.apple.com/euro/iphone-6/a/generic/overview/images/hero_large.jpg&#34;); }

查看他们指定的类/元素的完整图像列表: https://www.apple.com/in/iphone-6/overview/styles/overview.css

答案 1 :(得分:0)

图像在div中,带有class image-hero-wrapper。你必须考虑改变人物的css。

<div class="image-hero-wrapper">
    <figure class="image-hero"></figure>
    <figure class="image-hero-scroll"></figure>
</div>