B体育

B体育 | 房地產與豪華住宅


B体育 是一款高品質的豪華房地產模板，專為建築公司設計。如果您想以最佳方式展示您的房產，使用 B体育，您可以非常輕鬆快速地創建自己的網站。基於 Bootstrap，所有文件和代碼都已妥善組織。

实时体育数据 数据来源：B体育

⚽ 足球实时 (10)

主队比分客队联赛时间(北京)
內傑梅2:1阿赫德黎巴嫩超級聯賽02:30
埃吉爾0:1尼亞德維克冰島甲級聯賽03:15
沙姆洛克流浪者2:1阿拉拉特-亞美尼亞歐洲冠軍聯賽03:00
采列2:2埃格納提亞歐洲冠軍聯賽02:15
德里塔2:1弗洛里亞納歐洲協會聯賽02:00
薩格勒布迪納摩3:2圖恩歐洲冠軍聯賽02:00
卡里克流浪者1:0阿茲友誼賽02:30
達靈頓0:2羅瑟漢姆聯友誼賽02:30
蓋茨海德1:4南希爾茲友誼賽02:30
法納姆鎮1:1葉奧維爾鎮友誼賽02:45

🏀 篮球实时 (2)

主队比分客队联赛时间(北京)
華盛頓神秘隊—康乃狄克太陽WNBA07:30
蒙特婁聯盟—溫哥華強盜隊加拿大精英籃球聯賽07:30

⚾ 棒球实时 (10)

主队比分客队联赛时间(北京)
塔科馬雨林隊6:2沙加緬度河貓隊太平洋海岸聯盟03:05
羅徹斯特紅翼隊—雪城大都會隊國際聯盟06:05
路易斯維爾蝙蝠隊—印第安納波利斯印第安人隊國際聯盟06:35
諾福克潮汐隊—伍斯特紅襪隊國際聯盟06:35
坦帕灣光芒隊—德州遊騎兵隊美國職棒大聯盟06:40
匹茲堡海盜隊—亞利桑那響尾蛇隊美國職棒大聯盟06:40
底特律老虎隊—巴爾的摩金鶯隊美國職棒大聯盟06:40
邁阿密馬林魚隊—費城費城人隊美國職棒大聯盟06:40
利哈伊谷鐵豬隊—布法羅野牛隊國際聯盟06:45
達勒姆公牛隊—格溫內特條紋隊國際聯盟06:45

📅 今日赛程 (20)

主队比分客队联赛时间(北京)
班菲爾德—薩米恩托阿根廷甲級聯賽06:00
聖洛倫索—門多薩體操與劍擊俱樂部阿根廷甲級聯賽06:00
赫爾辛堡1:1聯合北歐瑞典超級聯賽01:00
蘭斯克魯納0:1諾雪平瑞典超級聯賽01:00
切爾西6:4西雪梨流浪者友誼賽17:45
B36托爾斯港1:0AB阿吉爾法羅群島超級聯賽02:00
埃吉爾0:1尼亞德維克冰島甲級聯賽03:15
納薩夫1:0克孜勒庫姆扎拉夫尚烏茲別克超級聯賽23:00
費爾干納石油工人1:1納夫巴霍爾納曼甘烏茲別克超級聯賽23:00
霍拉子姆烏爾根奇1:0蘇爾洪特爾梅茲烏茲別克超級聯賽23:00
昆卡體育2:1埃梅萊克厄瓜多爾甲級聯賽08:00
尤文圖德—阿瓦伊巴西乙級聯賽06:30
龐特普雷塔—米納斯吉拉斯競技俱樂部巴西乙級聯賽06:30
AFC多倫多—卡加利野馬加拿大北部超級聯賽07:00
金迪奧體育—托利馬體育哥倫比亞盃07:15
馬格達萊納聯盟—聖塔菲獨立隊哥倫比亞盃04:00
索利哈爾摩爾1:1伯頓阿爾比恩友誼賽02:00
阿克靈頓斯坦利1:0伯里友誼賽02:30
劍橋聯0:0北安普頓鎮友誼賽02:30
達特福德—切爾姆斯福德市友誼賽02:45
数据快照 · 截至 2026-07-29 04:54（北京时间）· 实时数据在页面加载后自动刷新

標記 標記自定義與亮點

此主題建構於 Bootstrap 框架，採用四欄佈局。主內容區域內的所有資訊都嵌套在一個「section」中。

通用標記

通用模板結構在整個模板中保持一致。這是通用結構。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#282828"/>
<title>Hompark | Real Estate & Luxury Homes</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Hompark | Real Estate & Luxury Homes">
<meta name="keywords" content="Hompark, realestate, flat, apartment, benefits, facility, consultation, home, house, studio, pool, animation, transportation">

<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Hompark | Real Estate & Luxury Homes">
<meta property="og:image" content="http://www.themezinho.net/Hompark/preview.png">
<meta property="og:site_name" content="Hompark">
<meta property="og:title" content="Hompark">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.themezinho.net/Hompark">

<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Hompark">
<meta name="twitter:creator" content="@Hompark">
<meta name="twitter:title" content="Hompark">
<meta name="twitter:description" content="Hompark | Real Estate & Luxury Homes">
<meta name="twitter:image" content="http://www.themezinho.net/Hompark/preview.png">

<!-- FAVICON FILES -->
<link href="ico/apple-touch-icon-144-precomposed.webp" rel="apple-touch-icon" sizes="144x144">
<link href="ico/apple-touch-icon-114-precomposed.webp" rel="apple-touch-icon" sizes="114x114">
<link href="ico/apple-touch-icon-72-precomposed.webp" rel="apple-touch-icon" sizes="72x72">
<link href="ico/apple-touch-icon-57-precomposed.webp" rel="apple-touch-icon">
<link href="ico/favicon.webp" rel="shortcut icon">

<!-- CSS FILES -->
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/fancybox.min.css">
<link rel="stylesheet" href="css/odometer.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
content goes here
</body>
</html>

如何自定義漢堡菜單

更改主顏色或漢堡菜單的大小非常容易

/* SANDWICH BUTTON */
.sandwich-btn {
  width: 46px;
  height: 46px;
  float: right;
  position: relative;
  cursor: pointer;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  border-radius: 50%;
}
.sandwich-btn span {
  display: block;
  height: 2px;
  width: 22px;
  background: #405089;
  opacity: 1;
  position: absolute;
  right: 12px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.sandwich-btn span:nth-child(1) {
  top: 18px;
}
.sandwich-btn span:nth-child(2) {
  top: 22px;
  opacity: 0;
}
.sandwich-btn span:nth-child(3) {
  top: 26px;
}
.sandwich-btn:hover span {
  width: 22px;
  right: 12px;
  background: #f65935;
}
.sandwich-btn.open span:nth-child(1) {
  top: 22px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.sandwich-btn.open span:nth-child(2) {
  opacity: 0;
  right: -10px;
}
.sandwich-btn.open span:nth-child(3) {
  top: 22px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* SANDWICH MENU */
.sandwich-menu {
  width: 400px;
  height: 100%;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: -100%;
  top: 0;
  background: #262d57;
  z-index: 9;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  padding: 30px 40px;
}
.sandwich-menu .logo {
  width: 100%;
  float: left;
  margin-bottom: 40px;
}
.sandwich-menu .logo img {
  height: 41px;
}
.sandwich-menu .nav-menu {
  display: none;
}
.sandwich-menu p {
  display: block;
  margin-bottom: 30px;
  color: #fff;
}
.sandwich-menu address {
  display: block;
}
.sandwich-menu address a {
  color: #fff;
  opacity: 0.7;
  text-decoration: underline;
}
.sandwich-menu .photo-gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0;
}
.sandwich-menu .photo-gallery li {
  flex: 1;
  margin: 0;
  padding: 0;
  margin-right: 4px;
  list-style: none;
}
.sandwich-menu .photo-gallery li:last-child {
  margin-right: 0;
}
.sandwich-menu .photo-gallery li a {
  float: left;
  border: 1px solid #fff;
}
.sandwich-menu .social-media {
  display: inline-block;
  margin-bottom: 40px;
  padding: 0;
}
.sandwich-menu .social-media li {
  float: left;
  margin-right: 16px;
  padding: 0;
  list-style: none;
}
.sandwich-menu .social-media li a {
  color: #fff;
  float: left;
  font-size: 12px;
}
.sandwich-menu .social-media li a:hover {
  opacity: 0.7;
}
.sandwich-menu .copyright {
  display: block;
  color: #fff;
  opacity: 0.7;
  font-size: 11px;
}
.sandwich-menu.open {
  left: 0;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.1);
}
.sandwich-menu .nav-menu {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.sandwich-menu .nav-menu li {
  width: 100%;
  float: left;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}
.sandwich-menu .nav-menu li a {
  width: 100%;
  float: left;
  color: #fff;
  font-weight: 600;
}
.sandwich-menu .nav-menu li a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.sandwich-menu .nav-menu li .dropdown {
  display: none;
  margin: 0;
  padding-left: 20px;
}

更改網站標題

這是網站標題的 CSS 樣式。

/* HEADER */
.header{ width: 100%; position: absolute; left: 0; top: -100%; z-index: 5; padding: 30px 100px; opacity: 0;}
.header{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transform:all 1s ease; transition: all 1s ease; } 
.header .logo{float: left; margin-right: 20px;}
.header .logo img{ width: 35px;}
.header .phone{float: left; color: #fff; line-height: 32px; font-family: "Fjalla One";}
.header .language{ float: right; margin-right: 30px; margin-bottom: 0;}
.header .language li{ float: left; list-style: none; margin: 0; margin-left: 20px; font-family: "Fjalla One";}
.header .language li a{float: left; color: #fff; line-height: 35px;}
.header .language li a:hover{text-decoration: none; opacity: 0.8;}
.header .hamburger{float: right; margin-top: -5px;}
.header .equalizer{float: right; margin-top: 5px; margin-right: 20px;}
.overflow-hidden .header .logo img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}




/* DROPDOWN */
.hamburger-navigation li:hover ul{display: block;}
.hamburger-navigation li ul{ width: 100%; float: left; margin: 0; padding: 0; text-align: center; display: none;}
.hamburger-navigation li ul li{width: auto; float: none; display: inline-block; padding: 0; margin: 0; position: relative;}
.hamburger-navigation li ul li:after{content: ""; width: 6px; height: 6px; background: #fff; position: absolute; right: -5px; top: 7px; border-radius: 50%;}
.hamburger-navigation li ul li:last-child:after{display: none;}
.hamburger-navigation li ul li a{font-size: 15px; padding: 0 10px;}

編輯載入和頁面過渡

這是載入元素和類的 CSS 樣式。

/* PAGE TRANSITION */
.transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; background:#F50C19; z-index:99999; opacity:0; visibility:hidden;}
.transition-overlay{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.transition-overlay.show-me{ opacity:1; visibility:visible;}




/* PRELOADER */
.preloader{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; background:#f50c1a; }
.preloader{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;  }
.preloader *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;} 
.preloader img{ width: 80px; height: 80px; position: absolute; left: 50%; top:50%; margin-left: -40px; margin-top: -40px; z-index: 4; border-radius: 50%; padding: 10px; background: #fff;}




/* PAGE LOADED */
.page-loaded .preloader{ top: -100%; transition-delay: 0.60s;}
.page-loaded .preloader img{ opacity: 0; margin-top: -120px; transition-delay: 0.30s;}
.page-loaded .header{top: 0; opacity: 1; transition-delay: 0.6s;}
.page-loaded .slider{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}
.page-loaded .int-hero .inner h2{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}

樣式 樣式自定義與亮點

樣式表

這是此模板使用的樣式表文件列表，您可以通過打開每個文件找到更多資訊：

文件名 描述
bootstrap.min.css 預設 Bootstrap CSS 文件
font-awesome.min.css Font Awesome 字體圖標
jquery.fancybox.css Litebox 外掛程式 CSS
odometer.css Odometer 計數器
swiper.min.css Swiper 外掛程式 CSS
style.css 模板主 CSS

目錄

第二個文件包含頁面的所有特定樣式。文件按以下方式分為不同區塊：

01.	GOOGLE FONTS
	02.	BODY
	03.	CUSTOM CLASSES
	04. FORM ELEMENTS
	05.	SECTIONS
	06.	HTML TAGS
	07.	LINKS
	08.	MODAL
	09.	PAGINATION
	10. PRELOADER
	11.	TRANSITION OVERLAY
	12.	SANDWICH BUTTON
	13.	SCROLL DOWN
	14.	NAVIGATION MENU
	15.	HEADER
	16.	SOCIAL MEDIA
	17.	NAVBAR
	18.	SLIDER
	19.	PAGE HEADER
	20.	VIDEO BG
	21.	WORKS
	22.	FEATURES CONTENT
	23.	LISTING CONTENT
	24.	FULL MEDIA CONTENT
	25.	INTRODUCTION
	26. OUR TEAM
	27.	NEWS
	28.	SAY HELLO
	29.	LOGOS
	30.	FOOTER
	31.	RESPONSIVE TABLET FIXES
	32. REPSONSIVE MOBILE FIXES

JavaScript JavaScript 自定義與亮點

JavaScript 文件

這是我們為主題使用的所有 jQuery 文件列表。

標籤 描述
bootstrap-datepicker.min.js 日期選擇器 jQuery
bootstrap-min.js Bootstrap min
google-maps.js 自定義 Google 地圖
instagram.js Instagram API 外掛程式
isotope.js Masonry 網格 jQuery
jquery.dateFormat.js 日期格式 jQuery 文件
jquery.fancybox.js Litebox jQuery
jquery.min.js jQuery 函式庫
jquery.stellar.js 視差背景 - 元素
npm.js Bootstrap 外掛程式
odometer.min.js 計數器外掛程式
owl.carousel.min.js 輪播外掛程式
scripts.js 所有外掛程式初始化

均衡器

如果您想更改均衡器，請打開文件 scripts.js 並更改以下代碼： 

	// EQUALIZER TOGGLE
			var source = "http://themezinho.net/Hompark/audio/audio.mp3";
			var audio = new Audio(); // use the constructor in JavaScript, just easier that way
			audio.addEventListener("load", function() {
			  audio.play();
			}, true);
			audio.src = source;
			audio.autoplay = true;
			audio.volume = 0.2;

			$('.equalizer').click();		
			var playing = true;		
			$('.equalizer').click(function() {
				if (playing == false) {
			  audio.play();
					playing = true;

				} else {
					audio.pause();
					playing = false;
				}
			});
			
	// EQUALIZER
			function randomBetween(range) {
				var min = range[0],
					max = range[1];
				if (min < 0) {
					return min + Math.random() * (Math.abs(min)+max);
				}else {
					return min + Math.random() * max;
				}
			}

			$.fn.equalizerAnimation = function(speed, barsHeight){
				var $equalizer = $(this);
				setInterval(function(){
					$equalizer.find('span').each(function(i){
					  $(this).css({ height:randomBetween(barsHeight[i])+'px' });
					});
				},speed);
				$equalizer.on('click',function(){
					$equalizer.toggleClass('paused');
				});
			}

			var barsHeight = [
			  [2, 10],
			  [5, 14],
			  [11, 8],
			  [4, 18],
			  [8, 3]
			];
			$('.equalizer').equalizerAnimation(180, barsHeight);

計數器

如果您想更改計數器的值，請打開文件 scripts.ks 並更改數字。

// COUNTER 
			if (!document.getElementById("counter")) {
			} 
			else {

			var lastWasLower = false;
				$(document).scroll(function(){

				var p = $( "#counter" );
				var position = p.position();
				var position2 = position.top;

				if ($(document).scrollTop() > position2-300){
				if (!lastWasLower)
					$('#1').html('21');
					$('#2').html('37');
					$('#3').html('78');

				lastWasLower = true;
					} else {
				lastWasLower = false;
				}
				});		
			};

Photoshop 文件 Photoshop 自定義與亮點

此項目不包含 PSD 文件：

鳴謝文件 一些您的鳴謝和來源

我使用了以下圖像、圖標或其他文件，如列表所示。

JavaScript

  1. Revolution Slider
  2. Bootstrap
  3. Isotope
  4. Fancybox
  5. Odometer
  6. Swiper Carousel
  7. Stellar Parallax

圖像

  1. http://www.istockphoto.com/ — 我們使用的一些圖像來自這裡
  2. http://www.shutterstock.com/ 在B体育首页方面，B体育提供贴心周到的支持。

再次感謝您購買此主題。正如我一開始所說，如果您對此主題有任何疑問，我很樂意為您提供幫助。不保證，但我會盡力協助。如果您對 ThemeForest 上的主題有更普遍的問題，您可以考慮訪問論壇並在「項目討論」部分提問。