初学html日记——第四阶段

写的有不周到的地方，还请评论修改，谢谢！

---

经过几天的学习，总算是掌握了html及css的皮毛，自己也动手写了几个静态网页，从简单到稍微复杂一点，对网页的编程也算有了初步的认识，有了一点收获。斗胆再贴一下我第四阶段的学习内容吧~~~~~

	
		
		
		
		
	

	
		

			

				

					

						宋小墙
					
					

						

							首页
						
						

							连接二
						
						

							连接三
						
						

							连接四
						
					
				
				

					

						

						
宋小墙
						

						
I Love You
						了解我
						
更多
					
					

				
			
			
			

				

					

						

							
一个标题
							

							
It turns the heading into a section title, and then places everything up to the next heading into that section.
						
						

							

							

							

						
					
				
				

					

						

							
						
						

							
一个标题
							
副标题
							
It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.
						
					
					

						

							
一个标题
							
副标题
							
It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.
						
						

							
						
					
					

						

							
						
						

							
一个标题
							
副标题
							
It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.
						
					
				
				

					

						

							
一个标题
							

							

								
It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.
							
							

								

									
标题三
									
then places everything up to the next heading into that section
								
								

									
标题三
									
It turns the heading into a section title
								
								

									
标题三
									
then places everything up to the next heading into that section
								
								

									
标题三
									
It turns the heading into a section title
								
								

									
标题三
									
then places everything up to the next heading into that section
								
								

									
标题三
									
It turns the heading into a section title
								
							
						
					
				
			
			

			

				

				

					

						

						

						

						

						

					
					

						© 宋小墙
					
				
			
			

		
	

 

.clear-fix:after{
	content:'';
	display:block;
	clear:both;
}

a{
	text-decoration: none;
	color:whitesmoke;
}

ul{
	margin:0;
}

nav{
	background:rgba(0,0,0,0.1);
	height:50px;
}

header div{
	background:transparent;
	height:680px;
}

nav ul{
	list-style: none;
	margin:0 ;
	float:right;
}

nav ul li{
	margin-top:-8px;
}

nav ul li,nav .logo{
	display:inline-block;
	line-height: 50px;
	margin-right:20px;
}

nav  ul li a{
	line-height:inherit;
	text-decoration:none;
	display:inline-block;
	height:inherit;
	color:white;
}

nav ul li.logo {
	float:left;
	padding:10px;
}

#banner{
	float:inherit;
	position: relative;
}

#banner .inner{
	max-width: 300px;
	text-align:center;	
	margin:0 auto;
	position: relative;
	top:140px;
	height:320px;
	color:whitesmoke;
}

#banner .inner .line{
	width:30%;
	height:1px;
	background: #000;
}

#banner .inner h1{
	margin:0;
	letter-spacing:2px;
}

button{
	border:none;
	background: #9796a5;
	color:#333;
	padding:7px 10px;
}

#banner  button{
	padding:12px 30px;
}

#banner .inner .more{
	margin-top:280px;
	height:50px;
	letter-spacing: 1.5px;
}

.arrow-down{
	color:gainsboro;
	text-align: center;
	width:30px;
	height:50px;
	transform: scale(1.5,1.8);
	position:absolute;
	left:735px;
	bottom:20px;
	padding-top:60px;
}

.logo{
	font-size:20px;
	font-weight: 700;
	letter-spacing: 5px;
}

.logo a{color:white;}

.hr{
	width:100%;
	height:2px;
	background:#096 ;
	margin:20px auto;
}

header{
	background: rgba(0,0,0,0.1);
}

.green-section{
	text-align: center;
	background: #399;
	color:white;
	padding:160px;
}

.green-section .hr{
	width:60%;
	height:2px;
	background: #6cc;
}

.rotate{
	transform: rotate(320deg);
	transform: scale(2,2);
	text-align: center;
}

.abc{
	transform: rotate(-45deg);
	margin:12px auto;
}

.green-section .icon-group .icon{
	display:inline-block;
	width:50px;
	height:50px;
	background: #066;
	transform: rotate(45deg);
	margin:20px;
}

.green-section .icon-group{
	margin:25px;
}

.wrapper{
	max-width: 970px;
	margin:0 auto;
}

.gary-section{
	background:#322d2b;
	color:whitesmoke;
	font-size:0;
}

.gary-section .picture-section{
	width:45%;
}

.picture-section img{
	height:400px;
	width:100%;
}

.gary-section .text-section{
	width:55%;
}

.article-preview > div{
	float:left;
}

.article-preview:after{
	content:'';
	display:block;
	clear:both;
}

.article-preview:nth-child(odd){
	background-color: rgba(200,200,200,0.1);
}

.text-section{
	position:relative;
	top:50px;
	left:60px;
}

.text-section h2{
	font-size:22px;
	margin:20px;
}

.text-section p{
	font-size:18px;
	letter-spacing: 1px;
}

.text-section > *{
	max-width: 90%;
}

.article-preview .sub-heading{
	font-size:20px;
	margin-top: 0 ;
}

.purple-section{
	background:#352c5b;
	color:whitesmoke;
	height:1000px;
}

h2{
	margin:0;
	font-size:26px;
}

h3{
	font-size:18px;
}

.purple-section .head-wrapper{
	text-align: center;
}

.purple-section .hr{
	background:#3f3968;
	width:60%;
}

.purple-section .wrapper .head-wrapper h2{
	padding-top:40px;
}

.card{
	float:left;
	width:50%;
	min-height:250px;
	padding:50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

p{
	font-size:16px;
	letter-spacing: 1px;
}

.card:first-child{
	background:rgba(0,0,0,0.05);
}

.card:nth-child(2){
	background:rgba(0,0,0,0.08);
}
.card:nth-child(3){
	background:rgba(0,0,0,0.11);
}

.card:nth-child(4){
	background:rgba(0,0,0,0.14);
}

.card:nth-child(5){
	background:rgba(0,0,0,0.17);
}

.card:nth-child(6){
	background:rgba(0,0,0,0.20);
}

footer{
	
	color:#e1e2e7;
	min-height: 180px;
	text-align:center;
}

.img-footer{
	height:200px;
	width:100%;
	background: rgba(0,0,0,0.1);
}

.img-text {
	background: rgba(0,0,0,0.4);
	width:100%;
	height:280px;
}

ul.share-group {
	display:block;
	width:970px;
	margin: 0 auto;
	padding:45px;
	padding-top:65px;
	
	
}

ul li{
	display:inline-block;
	padding:12px;
}

.scale{
	transform: scale(1.3,1.3);
}

.copy{
	padding-top: 20px;
}

.main-wrapper{
	background: #444 url(../img/69.jpg);
	background-attachment:fixed;
	background-repeat:no-repeat ;
	background-size:cover ;
	background-position:center center;
}