初学HTML+CSS练习搭建个人博客笔记

前言
工作需求初学html+css的使用，在网上看视频学着写了一个个人博客
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zRlIxPs-1589808685220)(https://img-blog.csdn.net/20171013175254065?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVhbmczNTEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

在这边只是做一下自己的学习笔记记录，如果对你有帮助，你就稍微看看，如果没有请忽略！

下面上html代码：

 
  
  
  
  
 
 
 	

	

		

			
		
		

			

				
黄墨一
				
围观其实也是一种态度，你觉得呢？
				 了解我
				 
			
		
	

	

		

			

				

					
一个标题
					

					
lorem ipsum dolor sit amet, 
					consectetur adipisicing elit.
				
				

					item1
					item2
					item3
				
			
		
		


			

			

					
				

					
又一个标题
					
我是副标题你好
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
				
				

			

				
				

					
又一个标题
					
我是副标题你好
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				

				

					
				
				
			

			

				

					
				
				

					
又一个标题
					
我是副标题你好
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
			
		

		

		

			

				
又是一个标题
				

				

					Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
			
			

				

					
标题三
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
				

					
标题三
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
			

			

				

					
标题三
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
				

					
标题三
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
			

			

				

					
标题三
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
				

					
标题三
					
Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
				
			
		
		
	


	
	
		

			
item1
			
item2
			
item3
			
item4
			
item5
		

		

			© 黄墨一-2017
		
	

	
	

然后就是对应css代码：

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

ul
{
	margin: 0;
}

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


nav{
	background: transparent;
	height: 50px;
}
#banner{
	background: transparent;
	height: 700px;
}

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

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

nav ul li a{
	line-height: 50px;
	text-decoration: none;
	display: inline-block;
	height: inherit;
	color: #fff;
}

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

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

#banner .inner h1
{
	margin: 0;
	color: #fff;
}

button
{
	border: none;
	background: #089DB0;
	color: #eee;
}

#banner button
{
	padding: 14px 60px;
}

#banner .inner .more
{
	margin-top: 280px;
	color: #fff;
}

.sub-heading
{
	line-height: 30px;
	margin: 30px 0;
	color: #fff;
}

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

.logo a
{
	color: #fff;
}

h2
{
	font-size: 30px;
}

h3
{
	font-size: 24px;
}

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

.hr
{
	width: 100%;
	height: 2px;
	margin: 0 auto;
	margin: 20px auto;
}

.sub-heading
{
	font-size: 18px;
}

#main-btn
{
	padding: 14px 28px;
	font-size: 20px;
	letter-spacing: 4px;
	border-collapse: 6px;
	background: #18a;
}

.green-section
{
	background: #089DB0;
	color: #fff;
	text-align: center;
	padding: 100px 0px;
}

.green-section .hr
{
	background: #079494;
	width: 60%;
}

.green-section .icon-group .icon
{
	display: inline-block;
	width: 80px;
	height: 80px;
	border: 1px solid  #0D6F7C;
	transform: rotate(45deg);
	margin: 30px;
}

.icon-group
{
	margin-top: 60px;
}

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

.gray-section
{
	background: #252F34;
	color: #fff;
}

.gray-section .img-section
{
	width: 45%;
	margin: 0;
}

.img-section img
{
	width: 100%
}

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

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

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

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

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

.text-section h2
{
	margin-bottom: 20px;
}

.text-section .sub-heading
{
	font-size: 22px;
	margin-top: 0;
}

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

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

.purple-section
{
	padding: 80px;
	background: #3F3965;
	color: #fff;
}

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

.purple-section .hr
{
	background: #373259;
	width: 100%;
}

.card
{
	float: left;
	width: 50%;
	min-height: 300px;
	padding: 50px;
	-webkit-box-sizing:border-box;
	-mon-box-sizing:border-box;
	box-sizing:border-box;
	/*border: 1px solid white;*/
}

.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
{
	background: #333;
	color: #fff;
	text-align: center;
	min-height: 200px
	
}

ul.share-group
{
	display: block;
	width: 1080px;
	margin: 0 auto;
	padding: 50px;
}

.share-group li
{
	display: inline-block;
	padding: 10px;
}

.copy
{
	padding-bottom: 30px;
}

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

更多文章资源，欢迎关注：开发者阵线联盟