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

相关文章

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

一文教你如何将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 开发基于