ReactJS应用无法加载背景图片

时间:2016-06-27 21:37:42

标签: javascript html css reactjs webpack

我很少发现一个我无法找到答案的问题,但这次我真的很难过 - 如果我的问题证明是愚蠢或微不足道,我会提前感到抱歉。

我正在构建一个简单的React应用程序,我应该为Home组件提供一个背景图像,这是一个.svg文件。但是,图像没有加载 - 开发工具网络部分说它无法加载图像 - 但它确实显示在那里,带有散列文件名,所以我猜测文件加载器工作。我也在使用react-css-modules。我尝试了几种方法:

React Component v.1

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from '../styles/home.css'

class Home extends React.Component {
render() {
return (
  <div className='homeContainer' styleName='homeBg'>
    <div className='col-sm-12 text-center'>
      <div className="jumbotron col-sm-6 col-sm-offset-3" styleName='transparentBg'>
        <h1>Enter Your Location</h1>
        <form>
          <div className="form-group">
            <input type="text" className="form-control" placeholder='Location...' />
          </div>
          <div className="form-group">
            <button className='btn btn-lg btn-submit btn-success' type="submit">Continue</button>
          </div>
        </form>
      </div>
    </div>
  </div>
);
}
}
export default CSSModules(Home, styles)

这是CSS模块:

.homeBg {
    background-image: url(../images/pattern.svg)
}
...

我的Webpack配置:

loaders: [
  {test: /\.js$/, exclude: '/node_modules/', loader: 'babel-loader'},
  {test: /\.css$/,
    loaders: [
      'style?sourceMap',
      'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
  },
  {test: /\.svg$/, loader: 'file-loader'}
]

这是我在组件中尝试的第二种方法:

render() {
const bgImg = require('../images/pattern.svg')

const background = {
  backgroundImage: 'url(' + bgImg + ')'
}

return (
  <div className='homeContainer' style={background}>
...

但无论我做什么 - 图像都没有加载。它以常规<img>标记加载,但不作为背景加载。我还能尝试什么?提前感谢任何建议!

4 个答案:

答案 0 :(得分:0)

你可以试试,在第二个例子中

render() {
  const bgImgUrl = // Insert the url for your image here

  const background = {
    backgroundImage: 'url(' + bgImgUrl + ')';
  }

  ...
}

而不是使用要求?每https://facebook.github.io/react/tips/inline-styles.html,它似乎需要一个实际的网址才能做到这一点。

答案 1 :(得分:0)

也许,你必须知道{s {1}}对你的svg做了什么。在你的第二种方法file-loader做的事情:

  1. file-loader更改为hash并使其成为模块只返回svg路径,如下所示:

    功能(模块,导出, webpack_require ){

    ../images/pattern

    }

  2. 将您的svg文件复制到输出文件夹

  3. 要解决您的问题,我认为您可以查看思考输出文件,了解您的svg会发生什么。

    您可以在file-loade

    的文档中找到

答案 2 :(得分:0)

感谢所有的建议,但正如我所料,对于Bootstrap和一些糟糕的标记结构来说,事实证明这是一个愚蠢的事情......

答案 3 :(得分:0)

我会这样做

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="utf-8">
	<script async src="//cdn.ampproject.org/v0.js">
	</script>
	<title>Aurum Moon Resort | Anı Tur</title>
	<link href="//cdn.anitur.com/web/assets/img/favicon/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
	<script async src="//cdn.ampproject.org/v0/amp-bind-0.1.js">
	</script>
	<meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">
	<style>
	body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#eceaeb;font-size:100%;font-family:tahoma;box-sizing:border-box;color:#404040}*{box-sizing:border-box}.with-scroll{max-height:200px;overflow-y:scroll !important}#navigation{margin-top:10px;margin-bottom:10px;background:#FFF}#navigation li{float:left;position:relative;border-right:1px solid #ddd}#navigation li:last-child{border-right:none}#navigation li a{font-size:12px;display:block;margin-right:5px;padding:12px}#wrapper{background:#FFF;border-radius:3px;padding:15px 15px 30px 15px}.layout{width:90%;margin:10px auto}.layout:before,.layout:after{content:"";display:table;clear:both}ul,ol{margin:0;padding:0;list-style-type:none}a{text-decoration:none;color:#404040}#detail-header{margin-bottom:5px}#detail-header:before,#detail-header:after{content:"";display:table;clear:both}.col-left{width:70%;float:left}.col-right{width:30%;float:right}#detail-header h1{margin:0 0 2px 0;font-size:1.1em}#detail-header ul,#detail-header ol{margin-bottom:5px}#detail-header li{display:inline-block;background:#eceaeb;border:1px solid #d2d2d2;color:#333;font-size:11px;padding:2px 8px;border-radius:2px}.list-details ul,.list-details ol{margin-top:10px}.list-details li,.list-details li a{font-size:12px;position:relative;padding-left:14px;padding-bottom:2px;margin-left:5px}.list-details li:before{content:"";width:5px;height:5px;color:#000;background:#000;float:left;vertical-align:middle;position:absolute;left:0;top:6px}.go-links{margin-left:9px}.go-links a{font-size:12px;padding:7px;display:inline-block}.go-hotel{border:1px solid #ccc;background:#f0f0f0}.go-call{background:#012770;border:1px solid #012e85;color:#FFF}.call-number{text-align:center;font-size:12px}.call-number h5{padding:0;margin:0 0 5px 0}.call-number a{display:block}.list-details ul,.list-details ol{margin-top:10px}.list-details li,.list-details li a{font-size:12px;position:relative;padding-left:14px;padding-bottom:2px;margin-left:5px}.list-details li:before{content:"";width:5px;height:5px;color:#000;background:#000;float:left;vertical-align:middle;position:absolute;left:0;top:6px}#stay-input{border:1px solid #ccc;padding:12px}.ampstart-btn.caps{background-color:#efefef;padding:7px;border:1px solid #dfdfdf;margin:5px 0}.ampstart-input{margin-bottom:5px}[name="guests"]{width:50%;padding:.3em;border-radius:4px;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd}.ampstart-input:before,.ampstart-input:after{content:"";display:table;clear:both}.ampstart-input label{float:left;width:50%}.ampstart-input input{float:right;width:50%;padding:.3em;border-radius:4px;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd}#my-lightbox{background:rgba(0,0,0,.5)}.lightbox{position:relative;width:90%;margin:10% auto;padding:10px;background:#FFF;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.5)}.lightbox p{line-height:19px}.close-lightbox-btn{position:absolute;right:0;top:0;border:none;padding:1px 8px;font-weight:bold;font-size:19px}.lightbox form{margin:0 20px 15px 20px}.lightbox input{float:none}.lightbox .ampstart-btn.caps{margin:0}.lightbox .ampstart-input input{margin-top:5px}.lightbox .ampstart-input h3{margin-bottom:3px}.foot-links{background:#FFF;padding:10px}.foot-links:after,.foot-links:before{content:"";display:table;clear:both}.foot-links li{float:left;width:50%}.foot-links li a{display:block;padding:4px 0;font-size:11px}.information-text{font:normal 11px/20px tahoma;color:#666;text-align:justify}.reserved{text-align:center;font-size:11px;color:#404040}.reserved span{display:block;color:#888}#footer-main{background:#FFF}#footer{margin-bottom:0}.phone{background:#FFF;padding:10px;margin-bottom:0;border-bottom:1px solid #ededed}.dip-text{color:#b6b6b6;font-size:11px}.tursab_img{display:block;margin:0 auto;width:79px;height:47px}.foot-logo{width:60px;height:61px;display:block;margin:auto;margin-top:-30px}
	</style>
	<link href="//www.anitur.com.tr/otel/aurum-moon-resort" rel="canonical">
	<link href="//www.anitur.com.tr/otel/aurum-moon-resort" rel="amphtml">
	<script async src="//cdn.ampproject.org/v0/amp-carousel-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-selector-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-form-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-access-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-analytics-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-bind-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-accordion-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-iframe-0.1.js">
	</script>
	<script async src="//cdn.ampproject.org/v0/amp-mustache-0.1.js">
	</script>
	<script id="amp-access" type="application/json">
	   {
	   "authorization": "/hotel/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
	   "pingback": "/hotel/pingback?rid=READER_ID&ref=DOCUMENT_REFERRER&url=CANONICAL_URL",
	   "login": "/hotel/login?rid=READER_ID&url=CANONICAL_URL",
	   "authorizationFallbackResponse": {
	   "error": true,
	   "access": false
	   }
	   }
	</script>
	<script type="application/ld+json">
	   {
	   "@context": "http://schema.org",
	   "@type": "NewsArticle",
	   "headline": "Aurum Moon Resort",
	   "datePublished": "2015-10-07T12:02:41Z",
	   "image": [
	   "logo.jpg"
	   ]
	   }
	</script>
	<style>
	body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
	</style><noscript>
	<style>
	body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
	</style></noscript>
	<style>
	.location{padding:0;margin:0;font-size:11px;color:#636363}amp-accordion section[expanded] .show-more{display:none}amp-accordion section:not([expanded]) .show-less{display:none}amp-accordion section[expanded]{padding:10px 4px}amp-accordion section h4{font-size:14px;padding:10px;background:#f0f0f0}amp-accordion{padding:10px 0}amp-#hidden-header section[expanded] h4{border:none}.ampTabContainer{display:flex;flex-wrap:wrap}.tabButton[selected]{outline:none;background:#FFF;padding:7px}.tabButton{list-style:none;flex-grow:1;text-align:center;cursor:pointer}.tabContent{display:none;width:100%;order:1;border:1px solid #ccc;padding:10px;}.tabButton[selected] + .tabContent{display:block}amp-selector [option][selected]{outline:1px solid #ccc;background:#f0f0f0}.itemCustom{border:1px solid #000;height:280px;width:380px;margin:10px;text-align:center;padding-top:140px}amp-selector{margin:1rem 0}.map{margin:10px}.map h4{font-size:16px;margin:0;border-bottom:1px solid #ddd;padding-bottom:5px;margin-bottom:10px}.services{margin:10px 0}.services h5{margin:0;border-bottom:1px solid #ccc;padding-bottom:5px}.services p{font-size:11px;line-height:18px}.price{background:#eceaeb;border:1px solid #d2d2d2;color:#333;font-weight:600}.price span{color:#8e8e8e;font-size:10px;font-weight:400}.buy{color:#FFF;background:orange;padding:0;display:block}.price,.buy{font-size:12px;padding:3px;margin:0;text-align:center}#carousel-with-preview amp-img{transition:opacity 1s ease-in-out}.carousel-preview{display:flex;align-items:center;justify-content:center}.carousel-preview button{height:40px;width:60px;min-width:60px;margin:4px;padding:0}.carousel-preview .amp-carousel-slide{margin:4px;padding:0}.carousel-preview button:active{opacity:0.5}.checkit h5{margin:15px 5px 5px 5px}
	</style>
</head>
<body>
	<header class="layout">
		<div class="logo col-left"></div>
		<div class="col-right call-number">
			<h5>Bilgi ve Rezervasyon</h5><a class="first-number" href="tel:08503000264">0850 300 02 64</a> <a class="last-number" href="tel:4440264">444 0 264</a>
		</div>
	</header>
	<nav class="layout" id="navigation">
		<ul>
			<li>
				<a href="/yurtici-otel"></a>
			</li>
			<li>
				<a href="/tur">Tur</a>
			</li>
			<li>
				<a href="/gemi-turlari"></a>
			</li>
			<li>
				<a href="/ucak-bileti"></a>
			</li>
		</ul>
	</nav>
	<main class="layout" id="wrapper">
		<div id="detail-header">
			<div class="col-left">
				<h1>Aurum Moon Resort</h1>
				<ul>
					<li>Ultra Her Şey Dahil</li>
					<li>Oda Kahvaltı</li>
				</ul>
				<p class="location">Didim, Yeşilkent</p>
			</div>
			<div class="col-right">
				<a class="buy" href="/otel/aurum-moon-resort">SATIN AL</a>
				<p class="price">415.00 <span>' itibaren</span></p>
			</div>
		</div>
		<div id="detail-body">
			<div id="detail-slider">
				<button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button> <button></button>
			</div>
			<div class="checkit">
				<h5>Oda fiyatlarını görmek için tarih seç</h5>
				<form class="px3 mb4" method="get" target="_top">
					<fieldset class="border-none p0 m0" id="stay-input">
						<div class="ampstart-input relative m0 p0 mb3">
							<label for="checkin">Check-in:</label> <input class="block border-none p0 m0" id="checkin" name="checkin" type="date" value="2017-08-15">
						</div>
						<div class="ampstart-input relative m0 p0 mb3">
							<label for="checkout">Check-out:</label> <input class="block border-none p0 m0" name="checkout" type="date" value="2017-08-16">
						</div>
						<div class="ampstart-input relative m0 p0 mb3">
							<label for="guests">Kişi Sayısı:</label> <select class="block border-none p0 m0" name="guests">
								<option value="1">
									1
								</option>
								<option selected value="2">
									2
								</option>
								<option value="3">
									3
								</option>
							</select>
						</div>
						<div class="ampstart-input relative m0 p0 mb3">
							<label for="guests">Çocuk Sayısı:</label> <select class="block border-none p0 m0" name="guests">
								<option selected value="0">
									0
								</option>
								<option value="1">
									1
								</option>
								<option value="2">
									2
								</option>
							</select>
						</div>
					</fieldset><input class="ampstart-btn caps" type="submit" value="Göster">
					<div>
						<template>
							Bulunan Odalar Buraya Gelecek
						</template>
					</div>
					<div>
						<template>
							Müsait oda yok
						</template>
					</div>
				</form>
			</div>
			<section>
				<h4>Genel Özellikler</h4>
				<div class="list-details with-scroll">
					<ol>
						<li>Ana Restaurant ( Açık )</li>
						<li>Ana Restaurant ( Kapalı )</li>
						<li>A La Carte Restaurant</li>
						<li>Bar</li>
						<li>Oda Servisi</li>
						<li>Disco</li>
						<li>Toplantı Salonu</li>
						<li>Kuaför</li>
						<li>Doktor</li>
						<li>Market</li>
						<li>Mağaza</li>
						<li>Çamaşır Hizmetleri</li>
						<li>Kuru Temizleme</li>
						<li>Araç Kiralama</li>
						<li>Uyandırma Servisi</li>
						<li>Ütü</li>
						<li>Taksi</li>
						<li>Asansör</li>
						<li>Alışveriş</li>
					</ol>
				</div>
			</section>
			<section>
				<h4>Aktivite ve Eğlence Özellikleri</h4>
				<div class="list-details with-scroll">
					<ol>
						<li>Spa Merkezi</li>
						<li>Hamam</li>
						<li>Sauna</li>
						<li>Buhar Odası</li>
						<li>Açık Yüzme Havuz</li>
						<li>Su Kaydırağı</li>
						<li>Aqua Park</li>
						<li>Fitness Center</li>
						<li>Animasyon</li>
						<li>Elektronik Oyunlar</li>
						<li>Dart</li>
						<li>Masa Tenisi</li>
						<li>Basketbol</li>
						<li>Voleybol</li>
						<li>Plaj Voleybol</li>
						<li>Masaj</li>
						<li>Boccia</li>
						<li>Jet Ski</li>
						<li>Banana</li>
						<li>Parasiling</li>
						<li>Kano</li>
						<li>Dalış Okulu</li>
						<li>Deniz Bisikleti</li>
						<li>Canlı Eğlence</li>
						<li>Hava Alanı Servis</li>
					</ol>
				</div>
			</section>
			<section>
				<h4>Çocuk Aktiviteleri</h4>
				<div class="list-details with-scroll">
					<ol>
						<li>Mini Disco</li>
						<li>Çocuk Havuzu</li>
						<li>Mini Club</li>
						<li>Oyun Parkı</li>
						<li>Çocuk Oyun Alanları</li>
						<li>Bebek Bakıcısı</li>
					</ol>
				</div>
			</section>
			<section>
				<h4>Oda Özellikleri</h4>
				<div class="list-details with-scroll">
					<ol>
						<li>Merkezi Klima</li>
						<li>Lcd Tv</li>
						<li>Telefon</li>
						<li>Saç Kurutma Makinası</li>
						<li>Laminant Zemin</li>
						<li>Minibar</li>
						<li>Safe Box</li>
						<li>Duşakabin Banyo</li>
					</ol>
				</div>
			</section>
			<section>
				<h4>Havuz Özelikleri</h4>
				<div class="list-details with-scroll">
					<ol>
						<li>Şezlong</li>
						<li>Havlu</li>
						<li>Şemsiye</li>
						<li>Açık Havuz</li>
					</ol>
				</div>
			</section>
			<section>
				<h4>Plaj Özellikleri</h4>
				<div class="list-details with-scroll">
					<ol>
						<li>Özel Plaj</li>
						<li>Sahilde Pavilion</li>
						<li>İskele</li>
						<li>Kum Plaj</li>
						<li>Motorlu Su Sporları</li>
						<li>Motorsuz Su Sporları</li>
					</ol>
				</div>
			</section>
			<div class="tabButton" role="tab">
				Yaz Sezonu
			</div>
			<div class="tabContent" role="tabpanel">
				<div class="services">
					<h5>Oda</h5>
					<p></p>
					<p>Tesiste Toplam 454 Oda Bulunmaktadır. Odaların Tamamında Parke Zemin, Balkon, Duş, Wc, Sa&ccedil; Kurutma Makinesi, Direkt Telefon, Minibar, LCD TV, Uydu Yayını, Kasa (Elektronik Kasa),VRF Multi Klima Mevcuttur. Odalarda 220V Elektrik Mevcuttur. Odaların Tamamında &Ccedil;ay- Kahve Setup Mevcuttur. 2 Adet 0,5 lt Su &Uuml;cretsizdir.<br>
					<br>
					<strong>Club Oda:</strong>&nbsp;Tesiste 98 Adet Club Oda Bulunmaktadır. Genişliği 28-33 m2 Arasında Değişen Club Odaların 1 Adet 2 Kişilik Yataktan Oluşmaktadır. Banyoda Duş Mevcuttur. Azamı 2+1 veya 3 Kişi Konaklamaya Uygundur.(Sofabed)<br>
					<strong>Club Aile Odası</strong>: Tesiste Toplam 46 Adet Club Aile Odası Bulunmaktadır. Odaların Genişliği 28&nbsp;m2&#39;dir. Bu Oda Kategorisinde 2 Oda Ara Kapı 1 Banyo ve Tuvaletle Birbirine Bağlantılıdır. Bir Odada Yatak Odası Diğer Odada 2 Adet Tek Kişilik Yatak Mevcuttur. Odanın Kapasitesi Maksimum 4&#39;d&uuml;r.<br>
					<strong>Club Suit:</strong>&nbsp;Tesiste Toplam 16 Adet Club Suit Oda Bulunmaktadır.Genişliği 58 m2&#39;dir.3 Oda Ara Kapılı 1 Banyo ve Tuvaletle Birbirine Bağlantılıdır. 1 Odada Yatak Sayısı 2. Odada 2 Adet Tek Kişilik Yatak ve 3. Odada Oturma Takımları Mevcuttur. Odanın Kapasitesi 4&#39;d&uuml;r.<br>
					<strong>Club Junior Suit:</strong>Toplam Oda Sayısı 52&#39;dir . Genişliği 28 m2 Arasında Değişen Club Junior Suit Odaları 2 Oda Ara Kapılı 1 Banyo ve Tuvaletle Birbirine Bağlantılıdır. Bir Odada &Ccedil;ift Kişilik Yatak, Diğer Odada 2 Koltuk Bulunmaktadır. Odanın Kapasitesi 4&#39;d&uuml;r.</p>
					<p><strong>Ana Blok Oda ( L Blok):</strong>&nbsp;Ana Blok 1, 6 Katlı ve 108 Adet Odadan Oluşmaktadır. Genişliği 34 m2&#39;dir. Odalarda 1 Adet &Ccedil;ift Kişilik Yatak Bulunmaktadır.Banyoda Duş Mevcuttur. Azami 2+1 veya 3 Kişi Konaklamaya Uygundur.(Sofabed)<br>
					<strong>Ana Blok 2</strong>: Ana Blok 2,7 Katlı ve 134 Adet Odadan Oluşmaktadır.&nbsp;Genişliği 34 m2&#39;dir. &nbsp;Odalarda 1 Adet &Ccedil;ift Kişilik Yatak Bulunmaktadır. Banyoda Duş Mevcuttur.&nbsp;Azami 2+1 veya 3 Kişi Konaklamaya Uygundur.(Sofabed)</p>
				</div>
				<div class="services">
					<h5>Havuz & Plaj</h5>
					<p></p>
					<p>Tesiste 550 mt Uzunluğunda Kum Plaj Bulunmaktadır. Plaj Havlusu Depozitolu Olarak Sunulmaktadır. Tesiste 1150 m2 Alanında-150 cm Derinliğinde A&ccedil;ık Tatlı Su Havuzu,80 m2 Alanında 40 cm Derinliğinde A&ccedil;ık Tatlı Su &Ccedil;ocuk Havuzu Bulunmaktadır. Ayrıca 5 Bantlı - 144 m2 Alanında 120 cm Derinliğinde Kaydıraklı Havuz Bulunmaktadır. &Ccedil;ocuklar i&ccedil;in 40 cm Derinliğinde 80 m2 Alanında Kaydıraklı &Ccedil;ocuk Havuzu Bulunmaktadır.</p>
				</div>
				<div class="services">
					<h5>Spor Animasyon Aktivite</h5>
					<p></p>
					<p>G&uuml;nd&uuml;z Aktiviteleri, Dart, Masa Tenisi, Aerobic, Jimnastik, Step, Fitness Center, Animasyon ve Gece Şovları, Tavla, Satran&ccedil;, Kart Oyunları, Disco, A&ccedil;ık Havuzda ve Plajda Havlu, Şezlong, Plaj Voleybolu &nbsp;Bulunmaktadır.Ayrıca Tesisin Spa Merkezi&#39;nde Konsept Kapsamında T&uuml;rk Hamamı ve Sauna Bulunmaktadır. Spa Merkezi&#39;nde Konsept Haricinde Extra Olarak Alınabilecek Bakımlar: Kese, K&ouml;p&uuml;k, Masajlar, Cilt Bakımları, &Ouml;zel Programlar, B&ouml;lgesel İncelme ve Sel&uuml;lit Bakımları, Cilt ve V&uuml;cut Bakımları.</p>
				</div>
				<div class="services">
					<h5>Ücretli Aktiviteler</h5>
					<p></p>
					<p>Kapalı ve Şişede Markalı T&uuml;m İ&ccedil;ecekler, Extra Yabancı İ&ccedil;ecekler, 24 Saat Oda Servisi, Telefon, &Ccedil;amaşır Yıkama , Temizleme ve &Uuml;t&uuml;, Su Sporları, Ekipmanları ve Dersi, Oyun Salonu ( Gameland, Bilgisayar Oyunları vb. Elektronik Oyun ve Aktiviteler ), Doktor Hizmetleri, Masaj ve Cilt ve V&uuml;cut Bakım Hizmetleri, Tesiste Bulunan Alışveriş Merkezleri, Pavilyon Hizmetleri &Uuml;cretli Olarak Sunulmaktadır.</p>
				</div>
				<div class="services">
					<h5>Ücretsiz Aktiviteler</h5>
					<p></p>
					<p>Odalarda Kasa Kullanımı,Genel Alanlarda Kablosuz İnternet Bağlantısı,Minimum 7 Gece ve &Uuml;st&uuml; Konaklamalarda 1 Defaya Mahsus &Uuml;cretsiz A&#39;LA Carte Kullanımı, Spa Merkezinde T&uuml;rk Hamamı ve Sauna Kullanımı &Uuml;cretsiz Olarak Sunulmaktadır.</p>
				</div>
				<div class="services">
					<h5>Çocuk</h5>
					<p></p>
					<p><strong>MİNİ CLUB VE &Ccedil;OCUK AKTİVELERİ</strong><br>
					*Mini Club : 04-12 Yaş<br>
					*Hizmet Saatleri : 10:00-12:30 / 14:30-17:30<br>
					*Mini Disco : 21:00-21:30<br>
					*Mama Sandalyesi</p>
				</div>
				<div class="services">
					<h5>Not</h5>
					<p></p>
					<p>Tesise Evcil Hayvan Kabul Edilmemektedir.</p>
					<p><strong>BALAYI KONSEPTİ&nbsp;<br></strong><strong>&hearts;&nbsp;</strong>Balayı &ccedil;iftlerine &ouml;zel servis; VIP karşılama ,odaya &ouml;zel temalı dekorasyon (&ouml;zel nevresim takımları,bornoz ,terlikler)<br>
					&hearts;Giriş g&uuml;n&uuml; şarap ve meyve sepeti ikramı ,bir defa mahsus A&#39;la Carte restoranda dekore edilmiş masada akşam yemeği&nbsp;<br>
					&hearts;S&uuml;rpriz pasta&nbsp;<br>
					&hearts;&Ouml;zel kahvaltı servisi&nbsp;</p>
					<p><br>
					<strong>DOĞUM G&Uuml;N&Uuml; VE EVLİLİK YIL D&Ouml;N&Uuml;M&Uuml;<br></strong><strong>&hearts;&nbsp;</strong>Odaya şarap ve minik pasta ikramları&nbsp;</p>
				</div>
				<div class="services">
					<h5>Konaklama</h5>
					<p></p>
					<p><span><strong>ULTRA HERŞEY DAHİL</strong></span><br>
					07:00-10:00- Kahvaltı ( A&ccedil;ık B&uuml;fe /Ana Restaurant )<br>
					10:00-11:00- Ge&ccedil; Kahvaltı&nbsp;( Mini B&uuml;fe /Ana Restaurant )<br>
					12:30-14:30- &Ouml;ğle Yemeği&nbsp;( A&ccedil;ık B&uuml;fe /Ana Restaurant )<br>
					19:00-21:30- Akşam Yemeği&nbsp;( A&ccedil;ık B&uuml;fe /Ana Restaurant )<br>
					23:00-01:00- Gece Snack&nbsp;( Mini B&uuml;fe /Ana Restaurant )<br>
					<br>
					<strong>BARLAR</strong><br>
					12:00-16:00- Snack Bar ( Fast Food Men&uuml; )<br>
					12:00-16:00- Beach Snack Bar ( Snack Men&uuml; )<br>
					11:00-20:00- Beach Snack Bar ( Pasta ve Kek )<br>
					Beach Snack Bar ( Dondurma )- &Ouml;ğle ve akşam yemek saatlerinde&nbsp;</p>
					<p><strong>İ&Ccedil;ECEK HİZMETLERİ</strong><br>
					10:00-24:00- Havuz Bar ( Konseptte Belirlenmiş Yerli İ&ccedil;ecekler )&nbsp;<br>
					10:00-18:00- Beach Snack Bar&nbsp;( Konseptte Belirlenmiş Yerli İ&ccedil;ecekler )&nbsp;<br>
					10:00-18:00- Aqua Snack Bar (Meşrubat ve Sıcak İ&ccedil;ecek Servisi )<br>
					10:00-24:00- Lobby Bar&nbsp;( Konseptte Belirlenmiş Yerli İ&ccedil;ecekler )&nbsp;<br>
					07:00-21:30- Servis Bar ( Restoran Saatlerinde Yerli İ&ccedil;ecekler )<br>
					10:00-02:00- Arena Bar&nbsp;( Konseptte Belirlenmiş Yerli İ&ccedil;ecekler )&nbsp;<br>
					10:00-24:00- Patisserie ( &Ccedil;ay ve Kahve &Ccedil;eşitleri )<br>
					<br>
					<strong>MİNİBAR</strong><br>
					*Giriş G&uuml;n&uuml; 2 Adet 0,5 lt Su Bir Kereye Mahsus &Uuml;cretsizdir.<br>
					*&Ccedil;ay Kahve Set-up İ&ccedil;in Her G&uuml;n 2 Adet 0,5 lt Su Yenilenmektedir.<br>
					<br>
					<strong>A&#39;LA CARTE RESTAURANT</strong><br>
					Deniz &Uuml;r&uuml;nleri Restaurant &nbsp;<br>
					İtalyan Restaurant<br>
					T&uuml;rk Mutfağı Restaurant&nbsp;<br>
					Tepenyaki Asia Mutfağı Restaurant ( &Uuml;cretli )&nbsp;<br>
					<br>
					*Misafirlerimiz A&#39;la Carte Restaurantlardan 7 G&uuml;n ve &Uuml;st&uuml; Konakmalarda 1 Defaya Mahsus &Uuml;cretsiz Yararlanma Hakkı Vardır.<br>
					*A&#39;la Carte Restaurantlar i&ccedil;in Rezervasyon Kabul&uuml; Misafir İlişkileri Ofisinden Herg&uuml;n 09:30-14:00 Saatleri Arasında Yapılacaktır.<br>
					*A&#39;la Carte Restaurantların Servis Saati 19:30-22:00 Arasıdır. Son Misafir Kabul&uuml; Saat 20:00&#39;de Yapılır. Servis Her Hal&uuml;karda Son Misafirin Yemeği Tamamlanıncaya Kadar Devam Eder.<br>
					*A&rsquo;la Carte Restoranlarımızdan Yararlanacak Olan Misafirlerimizin A&ccedil;ılış Saatinden En Ge&ccedil; Yarım Saat Sonrasına Kadar Restorana Gelmiş Olmaları Gerekmektedir. Karar Değiştiren Ve Rezervasyonlarını İptal Ettirmek İsteyen Misafirlerimizin, Aynı G&uuml;n En Ge&ccedil; Saat 15:00 E Kadar Misafir İlişkileri Deskine Bilgi Vermesi Gerekmektedir. Bildirilmeden İptal Edilen Rezervasyon Karşılığında Başka Bir Rezervasyon Yapılmayacaktır<br>
					*A&#39;la Carte Restoranlarımızda Atmosfer Gereği Kıyafet Se&ccedil;imi &Ouml;nemlidir. Plaj Veya Havuz Giysileriyle Gelinmemesi Rica Olunur.<br>
					*Restoranlar Haftanın 6 G&uuml;n&uuml; A&ccedil;ıktır. Restoraların &Ccedil;alışma G&uuml;nlarini Misafir İlişkilerinden &Ouml;ğrenebilirsiniz.</p>
				</div>
			</div>
		</div>
		<div id="detay-footer">
			<div class="go-links">
				<a class="go-hotel" href="/otel/aurum-moon-resort">Otele Git</a> <a class="go-call" href="//www.anitur.com/biz-sizi-arayalim">Sizi Arayalım</a>
			</div>
		</div>
	</main><a href="/"></a>
	<div id="footer-main">
		<footer class="layout" id="footer">
			<div class="dip-text">
				<p>* Belirtilen fiyatlar tarih aralıklarına ve oda kategorilerine göre değişiklik gösterebilmektedir.</p>
			</div>
			<div class="phone">
				<div>
					<a href="tel:08503000264">0850 300 02 64</a>
				</div>
			</div>
			<div class="foot-links">
				<ul>
					<li>
						<a href="/kurumsal">KURUMSAL</a>
					</li>
					<li>
						<a href="/musteri-hizmetleri">MÜŞTERİ HİZMETLERİ</a>
					</li>
					<li>
						<a href="/acenteler">ACENTELER</a>
					</li>
					<li>
						<a href="/kampanyalar">KAMPANYALAR</a>
					</li>
					<li>
						<a href="/blog">BLOG</a>
					</li>
					<li>
						<a href="/tatil-rehberi">TATİL REHBERİ</a>
					</li>
					<li>
						<a href="/erken-rezervasyon-rehberi">ERKEN REZERVASYON REHBERİ</a>
					</li>
				</ul>
			</div>
			<div class="information-text">
				<p>anitur.com sitesinde yer alan tüm metin, resim ve içeriklerin telif hakları Anı Tur'a aittir. Basılı veya elektronik bir ortamda izinsiz kullanılamaz veya kopyalanamaz. Tüm otel bilgileri ve fiyatlar bilgilendirme amaçlı olup, değişiklik arz edebilir. Fiyat ve bilgi yanlışlıklarından Anı Tur sorumlu tutulamaz.</p>
			</div>
			<div class="tursab"></div>
			<div class="copyright">
				<p class="reserved">Tüm Hakları Saklıdır © 2017<span>Anı Turizm A.Ş</span></p>
			</div>
		</footer>
	</div>
</body>
</html>

有点像你想要的npm模块

然后做

layout_weight