亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /HTML5和CSS3扁平化風格博客

求源碼源碼

老師能給個源碼看看嗎

慕田峪0672647

2016-12-21

源自：HTML5和CSS3扁平化風格博客 3-8

關注問題我要回答

937

操作

收起

4 回答

Dreamer1017
2017-09-21

.clearfix:after{
	content:?'';
	display:?block;
	clear:?both;
}
ul{
	margin:?0;
}
header{
	background:?rgba(0,0,0,0.5);
}
nav{
	background:?transparent;
	height:?50px;
}
#banner{
	background:?transparent;
	color:?#fff;
	height:?550px;
	
	}
nav?ul{
	list-style:?none;
	margin:?0;
	float:?right;
}
nav?ul?li,nav?.logo{
	display:?inline-block;
	line-height:?50px;
	margin-right:?20px;
}
nav?ul?li?a{
	line-height:?50px;
	text-decoration:?none;
	display:?inline-block;
	height:?inherit;
	color:?#FFFFFF;
}

#banner?.inner{
	max-width:?300px;
	text-align:?center;
	margin:?0?auto;
	position:?relative;
	top:?160px;
}

#banner?.inner?h1{
	
	border-top:?3px?solid?#fff;
	border-bottom:?3px?solid?#fff;
	margin:?0;
	padding:?20px

}

button{
	border:?none;
	background:?#333;
	color:?#eee;
	padding:?10px?20px;
}
#banner?button{
	padding:?10px?20px;
}
#banner?.inner?.more
{
	margin-top:?50px;

}
.sub-heading{
	line-height:?30px;
	margin:?30px?0;
}
.logo{
	font-size:?20px;
	font-weight:?700;
	letter-spacing:?4px;
	padding:??0?10px;	
}
.logo?a{
	color:?#FFF;
	text-decoration:?none;
	padding:?10px;
}

.active{
	border-bottom:?4px?solid?#fff;
}
p{font-size:?18px;
letter-spacing:?1px;
	
}
h1{
	border-top:?3px?solid?#fff;
	border-bottom:?3px?solid?#fff;
	margin:?0;
	padding:?12px;
	letter-spacing:?10px;
}
h2{
	font-size:?30px;
}
h3{
	font-size:?26px;
	letter-spacing:?1px;
}
.hr{
	width:?100%;
	height:?3px;
	margin:?20px?auto;
}

.green-section{
	margin:?0;
	background:?#089db0;
	color:?#FFFFFF;
	text-align:?center;
	padding:?100px;
	
}
.green-section?.hr{
	background:?#078494;
	width:?60%;
}

.green-section?.icon-group?.icon{
	display:?inline-block;
	width:?80px;
	height:?80px;
	border:?2px?solid?#078494;
	transform:?rotate(45deg);
	margin:?20px;
}
.icon-group{
	margin-top:?80px;
}
.wrapper{
	max-width:?1080px;
	margin:?0?auto;
}
.gray-section{
	background:?#252f34;
	color:?#FFFFFF;
}
.gray-section?.img-section{
	width:?45%;
}
.img-section?img{
	width:?100%;
	
}
.gray-section?.text-section{
	max-width:?55%;
}
.article-preview?>?div{
	float:?left;
	margin:?0;
	padding:?0;
	font-size:?0;
}
.article-preview:nth-child(odd){
	background:?rgba(255,255,255,0.05);
}
.article-preview:after{
	content:?'';
	display:?block;
	clear:?both;
	
}
.text-section{
	position:?relative;
	top:?100px;
	left:?40px;
	
}
.text-section?h2{
	margin-bottom:?30;
}
.text-section?.sub-heading{
	font-size:?20px;
	margin-top:?0;
}
.text-section?h2{
	margin-bottom:?10px;
}
.gray-section?.article-preview?.text-section?p{
	font-size:?16px;
	
}
.text-section?>?*{
	max-width:?90%;
}
.purple-section{
	padding:?80px;
	background:?#3f3965;
	color:#ffffff;
}
.purple-section?.heading-wrapper{
	text-align:?center;
}
.purple-section?.hr{
	background:?#fff;
	width:?50%;
}
.card{
	float:?left;
	min-height:?300px;
	width:?50%;
	padding:?50px;
	-webkit-box-sizing:?border-box;

	-moz-box-sizing:?border-box;
	
	box-sizing:?border-box;

}
.card:first-child{
	background:?rgba(0,0,0,0.04);
}
.card:nth-child(2){
	background:?rgba(0,0,0,0.08);
}
.card:nth-child(3){
	background:?rgba(0,0,0,0.12);
}
.card:nth-child(4){
	background:?rgba(0,0,0,0.16);
}
.card:nth-child(5){
	background:?rgba(0,0,0,0.20);
}
.card:nth-child(6){
	background:?rgba(0,0,0,0.24);
}

footer{
	min-height:?200px;
	background:?#333;
	color:?#fff;
	text-align:?center;
}
ul.share-group{
	display:?block;
	width:?1080px;
	margin:?0?auto;
	padding:?50px;

}
.share-group?li{
	display:?inline-block;
	padding:?10px;
}
.copy{
	padding-bottom:?20px;
}
.main-wrapper{
	background:?#444?url(../img/banner.jpg);
	background-attachment:?fixed;
	background-repeat:no-repeat?;	
	background-size:cover?;
	background-position:?center?center;
}

0 回復有任何疑惑可以回復我~

Dreamer1017
2017-09-21

<!DOCTYPE?html>
<html>
	<head>
		<meta?charset="utf-8"?/>
		<title>牛一and太萌</title>
		<link?rel="stylesheet"?href="css/reset.css"?/>
		<link?rel="stylesheet"?href="css/main.css"?/>
	</head>
	<body>
	<div?class="main-wrapper">
		<header>
			<nav>
				<div?class="logo"><a?href="#">WiLL</a>
					
				</div>
				<ul>
					<li><a?href="#"?class="active">首頁</a></li>
					<li><a?href="#">首頁</a></li>
					<li><a?href="#">首頁</a></li>
					<li><a?href="#">首頁</a></li>
					
				
				</ul>
			</nav>
			<div?id="banner">
				<div?class="inner">
	
					<h1>WiLL</h1>
	
					<p?class="sub-heading">Lorem?ipsum?dolor?sit?amet,??
						saepe?tenetur?consectetur.?Doloribus?vel?optio?
						maiores?nesciunt?quaerat?quasi.</p>
					<button>了解我</button>
					<div?class="more">更多</div>
				</div>
				
			</div>
	
		</header>	
		<div?class="content">
			<section?class="green-section">
				<div?class="wrapper">
					<div>
						<h2>一個標題</h2>
						<div?class="hr"></div>
						<p?class="sub-heading">Lorem?ipsum?dolor?sit?amet,?conse
							ctetur?adipisicing?elit.?labore?doloremque?
							eius?consequatur?eaque?aut.</p>
					</div>
						
					<div?class="icon-group">?
						<span?class="icon">item1</span>
						<span?class="icon">item2</span>
						<span?class="icon">item3</span>
					</div>
			</div>
			</section>
				
			<section?class="gray-section">
		<div?class="article-preview">
					<div?class="img-section">
					<img?src="img/pic01.jpg"/>	
					</div>
					<div?class="text-section">
						<h2>又一個標題</h2>
						<div?class="sub-heading">
							我是副標題你好
						</div>
							<p>Lorem?ipsum?dolor?sit?amet,
								iditate?nihil?labore?earum?
								recusandae?itLorem?ipsum?dolor?sit?amet,
								iditate?nihil?labore?earum?
								recusandae?temporibus.</p>
					</div>
				</div>		
		<div?class="article-preview">
					
					<div?class="text-section">

						<h2>又一個標題</h2>
						<div?class="sub-heading">
							我是副標題你好
						</div>
							<p>Lorem?ipsum?dolor?sit?amet,
								iditate?nihil?labore?earum?
								recusandae?itLorem?ipsum?dolor?sit?amet,
								iditate?nihil?labore?earum?
								recusandae?temporibus.</p>
					</div>
					<div?class="img-section">
					<img?src="img/pic02.jpg"/>	
					</div>
				</div>
		<div?class="article-preview">
					<div?class="img-section">
					<img?src="img/pic03.jpg"/>	
					</div>
					<div?class="text-section">
						<h2>又一個標題</h2>
						<div?class="sub-heading">
							我是副標題你好
						</div>
							<p>Lorem?ipsum?dolor?sit?amet,
								iditate?nihil?labore?earum?
								recusandae?itLorem?ipsum?dolor?sit?amet,
								iditate?nihil?labore?earum?
								recusandae?temporibus.</p>
					</div>
				</div>
				
				
			
			</section>
			
			<section?class="purple-section">
				<div?class="wrapper">
					<div?class="heading-wrapper">
						<h2>又一個標題</h2>
						<div?class="hr"></div>
						<div?class="sub-heading">
							Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?Commodi?omnis?earum?aspernatur?id?fugit?repellat?iure!?Nobis?animi?omnis?beatae?accusantium?nihil?quis?magni?sit?quibusdam?eveniet?consectetur?atque?placeat.
						</div>
					
					</div>
					<div?class="card-group?clearfix">
					<div?class="card">

						<h3>標題3</h3>
						<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?
							nisi?reprehenderit?deserunt?magni?veniam?placeat?culpa?quasi?officia?iure?cumque?non?
							maxime?soluta?eius?harum?possimus.</p>
					</div>	
					<div?class="card">
						<h3>標題3</h3>
						<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?
							nisi?reprehenderit?deserunt?magni?veniam?placeat?culpa?quasi?officia?iure?cumque?non?
							maxime?soluta?eius?harum?possimus.</p>
					</div>
					<div?class="card">

						<h3>標題3</h3>
						<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?
							nisi?reprehenderit?deserunt?magni?veniam?placeat?culpa?quasi?officia?iure?cumque?non?
							maxime?soluta?eius?harum?possimus.</p>
					</div>	
					<div?class="card">
						<h3>標題3</h3>
						<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?
							nisi?reprehenderit?deserunt?magni?veniam?placeat?culpa?quasi?officia?iure?cumque?non?
							maxime?soluta?eius?harum?possimus.</p>
					</div>
					<div?class="card">

						<h3>標題3</h3>
						<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?
							nisi?reprehenderit?deserunt?magni?veniam?placeat?culpa?quasi?officia?iure?cumque?non?
							maxime?soluta?eius?harum?possimus.</p>
					</div>	
					<div?class="card">
						<h3>標題3</h3>
						<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.?
							nisi?reprehenderit?deserunt?magni?veniam?placeat?culpa?quasi?officia?iure?cumque?non?
							maxime?soluta?eius?harum?possimus.</p>
					</div>
				
					</div>
			</div>
			</section>
		</div>
		<footer>
			<ul?class="share-group">
				<li>item</li>
				<li>item</li>
				<li>item</li>
				<li>item</li>
			</ul>
		<div?class="copy">
			&copy?WiLL?-??2017
			
		</div>
			
		</footer>
	</div>
	</body>
	
</html>

0 回復有任何疑惑可以回復我~

bigggge
2017-01-07

https://github.com/bigggge/JsPractice/tree/master/src/test/blog

簡單做了下，可以參考

3 回復有任何疑惑可以回復我~

慕慕7818947
2016-12-25

老師，給個源碼看下你的編碼細節啊，感覺自己寫的CSS很亂，自己找起來，調整都很麻煩

0 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

HTML5和CSS3扁平化風格博客

參與學習 86790 人
解答問題 406 個

HTML5與CSS3搭建超酷扁平化風格博客

求源碼源碼

我要回答關注問題

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

掃描二維碼
關注慕課網微信公眾號