黑色大气风格响应式个人主页博客网站模板



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

7 27 10



模板描述:黑色 大气风格 响应式 个人主页。整站宽屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。适用个人主页等行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" type="text/css" href="./styles.css">

2. 引入JS

<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

3. HTML代码

<div class="container-fluid" id="header">
	<nav class="navbar navbar-expand-md navbar-light">
		<div class="container">
		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
		    <span class="navbar-toggler-icon"></span>
		  </button>
		  <a class="navbar-brand" href="#"><img src="./img/logo.png"></a>
		<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo03">
		                <ul class="navbar-nav">
		                    <li class="nav-item">
		                    <a class="nav-link" href="#">Travel Tips</a>
		                  </li>
		                <li class="nav-item">
		                  <a class="nav-link" href="#">Get Inspired</a>
		                </li>
		                <li class="nav-item">
		                  <a class="nav-link" href="#">Cheap Airfare</a>
		                </li>
		                <li class="nav-item">
		                  <a class="nav-link" href="#">About</a>
		                </li>
		            </ul>
		  </div>
	  </div>
	  </nav>
	  <!-- hero section -->
	  <div class="container" id="hero">
	  	<div class="row justify-content-end">
	  		<div class="col-lg-6 hero-img-container">
	  			<a href="./single.html">
	  			<div class="hero-img">
	  				<img src="./img/hero-img.png">
	  			</div>
	  			</a>
	  		</div>	  		
	  		<div class="col-lg-9">
	  			<div class="hero-title">
	  				<a href="./single.html">
	  				<h1>To theory equation, more have the or to was the</h1>
	  				</a>
	  			</div>
	  		</div>
	  		<div class="col-lg-6">
	  			<div class="hero-meta">
	  				<p>Herself of that similar live good up which is are to for French endeavours, screen.</p>
	  				<div class="author">
	  					<div class="author-img"><img src="./img/author-img.png"></div>
	  					<div class="author-meta">
	  					<span class="author-name">Celeste Connell</span>
	  					<span class="author-tag">Travel Blogger</span>
	  					</div>	
	  				</div>
	  			</div>
	  		</div>
	  	</div>
	  </div>
</div>
<!-- hero ends -->
<!-- Article Grid -->
<div class="container mt-2 mb-2 pt-5 pb-5" id="article-grid">
	<div class="row justify-content-center">
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/1.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>I tighten my siddur, which they fail to someone else's</h2>
					<p>Most of culture that the sensitivity of the condition of puppy love, my lemons.</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12  text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/2.jpeg">
			</div>
				<div class="article-meta  text-left">
					<h2>The details of justice to live in which converge into the accomplishment</h2>
					<p>Began it will a more first was something return. Were ...</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/3.jpeg">
			</div>
				<div class="article-meta  text-left">
					<h2>Time text to so legs screen step experiments term a</h2>
					<p>The due be to warp room he have place a problem offer, of just of screen there sitting.</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/4.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>Yet accuse however my people are</h2>
					<p>The for probably of totally parameters gloomy probably walls hearing.</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/5.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>They gain, the last were past material.</h2>
					<p>Were hundred arranged he statement the your especially his here.</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/6.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>Where instruments, cut out done far the for they'd seen</h2>
					<p>And his we not quickly tin, but distance, the best of client would of concise plan past.</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/7.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>Generally, without gain, means, to researches</h2>
					<p>The nor failing. First and friends the state fees...</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/8.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>Mind that she upper that caches of psychological be</h2>
					<p>A through were the the their a of for human officer sort to to anchors viewings of all of origin.</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/9.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>Heard designer a help reason to get psychological</h2>
					<p>May and a of to instruments, the could river the spineless.</p>
				</div>
			</div>
			</a>
		</div>
		<div class="col-xl-6 col-lg-12 text-center">
			<a href="./single.html">
			<div class="article-card">
			<div class="article-img">
				<img src="./img/10.jpeg">
			</div>
				<div class="article-meta text-left">
					<h2>Morning, it mouth. Harder of with from and narrow</h2>
					<p>Explain the in fly tone research volunteers and both only the drew cleaning to each language trial.</p>
				</div>
			</div>
			</a>
		</div>
	</div> <!-- Article Grid Row Ends -->
</div> <!-- Article Grid Container Ends -->
<!-- More articles button -->
<div class="container text-center pb-3 mb-5">
		<a href="#" class="btn btn-lg btn-light">More Articles</a>
</div>
<!-- Footer section  -->
<footer class="container-fluid mt-1 p-4">
	<div class="container ">
		<div class="row pb-1"> 
		<!-- Footer logo -->
		<div class="col-lg-3 col-md-12"><img src="./img/logo.png"></div>
		<!-- footer links -->
		<div class="col-lg-6 col-md-12">
			<ul class="nav justify-content-center">
			  <li class="nav-item">
			    <a class="nav-link active" href="#">Travel Tips</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">Get Inspired</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">Cheap Airfare</a>
			  </li>			  
			  <li class="nav-item">
			    <a class="nav-link" href="#">About</a>
			  </li>
			</ul>
		</div>
		<!-- footer social links -->
		<div class="col-lg-3 col-md-12">
			<ul class="nav justify-content-end">
			  <li class="nav-item">
			    <a class="nav-link active btn btn-light" href="#"><i class="fab fa-facebook-f"></i></a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link active btn btn-light" href="#"><i class="fab fa-google"></i></a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link active btn btn-light" href="#"><i class="fab fa-twitter"></i></a>
			  </li>
			</ul>
		</div>
		<hr>
		</div>
		<hr>
		<!-- copyright text -->
		<div class="row pt-2">
			<div class="col-lg-12 text-center">
				<span>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div></span>
			</div>
		</div>
	</div>
</footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 宽屏全屏 黑色 蓝色 欧美风 红色 中国风 绿色 韩系 灰色 日系 简洁简约 黄色 炫酷 紫色 卡通动画 橙色 精美 实用通用 艺术创意 粉色 大气 白色 棕色 清新 彩色 绘画 其他风格 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到