freecodecamp小项目---个人网站

2023-11-08 18:10

本文主要是介绍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.

your name

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

 

 

这篇关于freecodecamp小项目---个人网站的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/371603

相关文章

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

Nginx实现高并发的项目实践

《Nginx实现高并发的项目实践》本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用最新稳定版本的Nginx合理配置工作进程(workers)配置工作进程连接数(worker_co

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx