freecodecamp小项目---个人网站

这个简陋的网站只用了html和css效果；

项目效果：

html代码：

 

JZX WebPage



jzx

• about
• interests
• contact

WHO AM I

My name is jzx.I'm studying in ZhongBei University now. My hometown is a small city named SuiNing in SiChuan province. My deam is to be a Font-End developer. I hope my parents are healthy forever.

INTERESTS

• 
• 
• 
• 
• 
• 

CONTACT ME

Name

Email

Phone

Message

send

Do you want to contact me?If you want,please write your information in the left area.I hope to communiate with everyone in the world!And also,i am interested in your experience in Font-End field. Writed by jzx.

About JZX WebPage Made with  and  by lightforme.

ABOUT THE WEB 

lightforme © . All Rights Reversed

 

 

css代码：

 

/*清除样式*/
body, div,iframe, ul, ol, dl, dt, dd, li, dl,   
h1, h2, h3, h4, table,th, td, input, button, select,  
 textarea,p {margin:0;padding:0;}

body{font-size:20px;font-family: 微软雅黑, Lato, sans-serif;}
ol,ul,li{list-style: none;}

img{border:0;}
a{text-decoration:none;}

/*清除样式结束*/

/*公共样式*/
.main{width:1040px;}
h2{
	text-align: center;
	padding:20px 0;
}
* { box-sizing:border-box; }
.clear:after{content:"";display: block;visibility:hidden;clear:both;}
.left{
	float:left;
}
/*公共样式结束*/
.right{
	float:right;
}

/*font-icon定义和设置*/
@font-face {
  font-family: 'iconfont';  /* project id 288961 */
  src: url('//at.alicdn.com/t/font_2tty7mqfoqb2zkt9.eot');
  src: url('//at.alicdn.com/t/font_2tty7mqfoqb2zkt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2tty7mqfoqb2zkt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_2tty7mqfoqb2zkt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2tty7mqfoqb2zkt9.svg#iconfont') format('svg');
}
.ic{

	font-family:"iconfont" !important;
	color: ;
	font-size: 70px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.ms{
	font-family:"iconfont" !important;
	color: ;
	font-size: 30px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.cof{
	font-family:"iconfont" !important;
	color: ;
	font-size: 30px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.in{
	font-family:"iconfont" !important;
	color: ;
	font-size: 30px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.git{
	font-family:"iconfont" !important;
	color: ;
	font-size: 35px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.csdn{
	font-family:"iconfont" !important;
	color: ;
	font-size: 26px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.tw{
	font-family:"iconfont" !important;
	color: ;
	font-size: 35px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
/*导航栏样式*/
.navbar{
	height:100px;
}
.navbar div ul{float:right;position: absolute;top:20px;right:10px;}
.navbar .navbar-header{
	position:absolute;
	top:10px;
	left:14px;
}
/*导航栏样式结束*/


/*content内容部分样式*/

.content{
	margin:0 auto;
	line-height: 35px;
	padding-bottom: 30px;
	background:#f0f0f0;
	padding:0px 20px;
	
}
/*class=about*/
.about{
	height:300px;
	/*border:1px solid red;*/
	position: relative;	
}
.about p{
	position:absolute;
	top:100px;
}
.about img.img_ab{
	width:320px;
	height:180px;
	position: absolute;
	top:70px;
	right:10px;
	border-radius:5px;
}

/*class=interests*/
.interests img{
	width:420px;
	height:300px;
	border-radius: 5px;
}
.interests ul li{
	display: inline-block;
	padding:20px 40px;
}


/*content部分样式结束*/

/*contact部分样式*/
.contact{
	padding: 30px 0;
}
/*contact表单样式*/
.contact .form{
	width:380px;
}
.group 			  { 
  position:relative; 
  margin-bottom:45px; 
}
input 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}
.contact form button{
	width:200px;
}
.contact .form form{width:400px;padding-left:90px;}
.contact{position:relative;}
.contact .form .group input{
	background:#f0f0f0;
}
/*contact tip样式*/
.contact .tip{
	width:380px;
}
.contact .tip{
	position:absolute;
	top:80px;
	right:40px;
}

/*contact部分样式结束*/

/*footer样式*/
.footer a,.footer a:visited{text-decoration: none;}
.footer a:hover,.footer a:active{text-decoration: none;}
.footer .f_bottom{height:50px;text-align: center;line-height: 50px;}
.footer .f_top{
	background:#F8F8F8;
}
.footer .f_top span{
	font-size:28px;	
}
.footer .f_bottom{
	background:#f0f0f0;
}