初学html日记——第四阶段

写的有不周到的地方,还请评论修改,谢谢!


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




	
		
		
		
		作业四
	

	
		

一个标题

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;
}

 

 

 

你可能感兴趣的:(html)