Bootstrap+Timeliner+Github+JQUERY创建程序员的简历（二）---专业技能表

最新推荐文章于 2024-06-28 07:00:00 发布
最新推荐文章于 2024-06-28 07:00:00 发布
阅读量162 收藏
点赞数
文章标签： javascript 嵌入式 photoshop ViewUI
本文介绍了一个使用Bootstrap构建的专业技能展示页面。通过不同的标签颜色展示多种技能，包括编程语言、框架、编辑器等，并且整合了多个网站链接。

源码可见:https://github.com/gmszone/RESUME/tree/master/Web

最后效果如下图所示


也就是哪下所示

专业技能

开发
  • 语言:C/C++PythonJavascript
  • 语言:JavaC51LispErlang
  • 框架:DjangoPomeloBootstrap
  • 框架:jQueryjQuery Mobile
  • 框架:Cocos2d-XRails
  • Editor:EmacsVimCoda
  • Editor:Sublime TextNotepad++
  • IDE:EclipseAndroid Studio
  • IDE:AptanaDreamweaver
  • IDE:Visual StudioQT Creator
WEB集
skills
  • DB:MySQL/MariaDBMongoDB
  • DB:SQLite
  • OS:GNU/Linux(Centos,openSUSE)
  • OS:WindowsMac OS X
  • Design:Photoshop/GIMPInkscapeTexWorks
  • office:Microsoft OfficeLibreOffice
嵌入式
  • 芯片:AtmegaC51STM32
  • 芯片:Freescale K60/XS128
  • 芯片:MSP430
  • IDE:IARKeilArduino
  • Others:ProteusMultisim
  • EOS:uC/OS IIopenWRTLinux
  • others:OpenCVRaspberryPi
Phodal 2013

Bootstrap label


如官网所介绍

Add any of the below mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger 
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
可以有上面的几种颜色可以选择，那么加上这几种颜色，以及list-group来做列表，我们就可以做到类似上面的效果


源码如下所示 
  <div class="container " id="section-4">
	  <br />

	   <h2>专业技能</h2>
	    <div class="row">
        <div class="col-lg-3">
        <h4>开发</h4>
		    <ul class="list-group">
		        <li class="list-group-item">语言: 	    
			        <span class="label label-primary">C/C++</span>
			        <span class="label label-success">Python</span>
			        <span class="label label-primary">Javascript</span>
		        </li>
		       <li class="list-group-item">语言:    
			        <span class="label label-primary">Java</span>
			        <span class="label label-info">C51</span>
			        <span class="label label-success">Lisp</span>
			        <span class="label label-danger">Erlang</span>
		         </li>

		        <li class="list-group-item">框架: 	    
			        <span class="label label-info">Django</span>
			        <span class="label label-success">Pomelo</span>
			        <span class="label label-primary">Bootstrap</span>
		        </li>
		       <li class="list-group-item">框架:    
			        <span class="label label-primary">jQuery</span>
			        <span class="label label-info">jQuery Mobile</span>
		         </li>
		        <li class="list-group-item">框架:
		        	<span class="label label-success">Cocos2d-X</span>
		        	<span class="label label-danger">Rails</span>
		        </li>
		        <li class="list-group-item">Editor:
		        	<span class="label label-success">Emacs</span>
		        	<span class="label label-danger">Vim</span>
		        	<span class="label label-info">Coda</span>
		        </li>
		        <li class="list-group-item">Editor:
		        	<span class="label label-info">Sublime Text</span>
		        	<span class="label label-danger">Notepad++</span>
		        </li>
		        <li class="list-group-item">IDE:
		        	<span class="label label-primary">Eclipse</span>
		        	<span class="label label-success">Android Studio</span>
		        </li>
		        <li class="list-group-item">IDE:
		        	<span class="label label-info">Aptana</span>
		        	<span class="label label-danger">Dreamweaver</span>
		        </li>
		        <li class="list-group-item">IDE:
		        	<span class="label label-primary">Visual Studio</span>
		        	<span class="label label-suceess">QT Creator</span>
		        </li>
		        </ul>	
		        </div>

        <div class="col-lg-3">
        <h4>WEB集</h4>
	    <ul class="list-group">
       <ul class="list-group">
		        <li class="list-group-item"><a hre="http://api.phodal.com">http://api.phodal.com</li>
		        <li class="list-group-item"><a hre="http://blog.phodal.com">http://blog.phodal.com</li>
		        <li class="list-group-item"><a hre="http://www.phodal.com">http://www.phodal.com</li>
		        <li class="list-group-item"><a hre="http://socket.phodal.com">http://socket.phodal.com</li>
		        <li class="list-group-item"><a hre="http://www.fjrongyu.com">http://www.fjrongyu.com</li>		       
		        <li class="list-group-item"><a hre="http://www.sxsfjsh.com">http://www.sxsfjsh.com</li>
		        <li class="list-group-item"><a hre="http://www.mokcy.cn">http://www.mokcy.cn</li>
		        <li class="list-group-item"><a hre="http://www.hongzhishushe.com">http://www.hongzhishushe.com</a></li>
		        </ul>
		    </div>

        <div class="col-lg-3">
        <h4>skills</h4>
	    <ul class="list-group">
		    <ul class="list-group">
		        <li class="list-group-item">DB: 	    
			        <span class="label label-primary">MySQL/MariaDB</span>
			        <span class="label label-success">MongoDB</span>
			    </li>
		        <li class="list-group-item">DB: 	    
			        <span class="label label-primary">SQLite</span>
		        </li>

		        <li class="list-group-item">OS: 	    
			        <span class="label label-info">GNU/Linux(Centos,openSUSE)</span>
			    </li>
		        <li class="list-group-item">OS: 	    
			        <span class="label label-success">Windows</span>
			        <span class="label label-primary">Mac OS X</span>
		        </li>
		       <li class="list-group-item">Design:    
			        <span class="label label-primary">Photoshop/GIMP</span>
			        <span class="label label-info">Inkscape</span>
			        <span class="label lable-success">TexWorks</span>
		         </li>
		        <li class="list-group-item">office:
		        	<span class="label label-success">Microsoft Office</span>
		        	<span class="label label-danger">LibreOffice</span>
		        </li>
		        </ul>
		    </div>

        <div class="col-lg-3">
        <h4>嵌入式</h4>
	    <ul class="list-group">
		        <li class="list-group-item">芯片:
		        	<span class="label label-success">Atmega </span>
		        	<span class="label label-info">C51</span>
		        	<span class="label label-danger">STM32</span>
		        </li>
		        <li class="list-group-item">芯片:
		        	<span class="label label-primary">Freescale K60/XS128</span>
		        </li>
		        <li class="list-group-item">芯片:
		        	<span class="label label-default">MSP430</span>
		        </li>			        
		        <li class="list-group-item">IDE:
		        	<span class="label label-warning">IAR</span>
		        	<span class="label label-info">Keil</span>
		        	<span class="label label-primary">Arduino</span>
		        </li>	

		        <li class="list-group-item">Others:
		        	<span class="label label-success">Proteus</span>
		        	<span class="label label-default">Multisim</span>
		        </li>	
		        <li class="list-group-item">EOS:
		        	<span class="label label-primary">uC/OS II</span>
		        	<span class="label label-default">openWRT</span>
		        	<span class="label label-info">Linux</span>
		        </li>			
		        <li class="list-group-item">others:
		        	<span class="label label-warning">OpenCV</span>
		        	<span class="label label-success">RaspberryPi</span>
		        </li>			                		       
		        </ul>
		    </div>
		 </div>

        </div>


iteye_13202
关注
Web前端系列技术之CSS基础（从入门开始）①
小柴爱程序的博客
07-22 1004
Java系列技术之CSS基础（从入门开始）
框架漏洞-CVE复现-Node.JS+Jquery+Django+Flask
xiaoheizi的博客
07-18 1026
Django采用了MTV的框架模式，即模型M，视图V和模版T，使用Django，程序员可以方便、快捷地创建高品质、易维护、数据库驱动的应用程序。访问：/admin/vuln/collection/?描述：Node.js-systeminformation是用于获取各种信息的Node.js模块，在存在命令注入漏洞的版本中，攻击者可以通过未过滤的参数注入payload执行系统命令。添加请求路径：/static/../../../a/../../../../etc/passwd 成功获取敏感信息。
Web之CSS
tl2267190799的博客
02-28 796
前端的CSS使用
web基础篇-css
weixin_44803968的博客
06-28 1202
【代码】web基础篇-css。
web前端之CSS样式书写方法
姜大大的博客
03-09 2368
前言
web前端——css（一篇教会网页制作）
最新发布
2301_78341216的博客
06-28 3059
web前端，css
网上零食商城(ssm+bootstrap+jquery+AngularJs+EasyUI)
11-05
前后端分离（含有权限管理，高德地图地位，ECharts图形展示等技术），利用angularjs实现图片上传，消息提示框等功能，可以用作web项目的框架来使用，帮助学习angularjs和bootstrap前段和SSM后台框架的程序员，可当作...
0-毕业设计-个人博客首页-个人公司单位简介网页版-橙色风格程序员个人简历-模板单页纯HTML5网站模板下载.zip
08-08
这个模板设计简洁而专业，旨在为程序员提供一个展示个人技能、经历和作品的平台。以下是该模板可能涉及的IT知识点： 1. HTML5：作为网站的基础，HTML5提供了丰富的语义化标签，如、、、等，使得网页结构更加清晰，...
程序员简历模板 110.docx
06-24
【程序员简历模板】是针对IT行业的专业人士，特别是Java开发工程师准备的一个参考模板，旨在帮助求职者展示他们的专业技能和工作经验。以下是对模板中关键知识点的详细说明： 1. **Java开发经验**：简历中提到的两...
开发人员_2_网络公司it人员简历_程序员简历模板 (2)_计算机相关专业.docx
08-07
3. **系统优化**：他提到通过重构代码提升了系统性能，并在项目中使用了SPRING、MYBATIS、SPRINGMVC、AJAX、JQUERY和BOOTSTRAP等技术，这些工具和技术有助于提高开发效率和系统性能。 4. **项目管理**：他在项目...
web---CSS基础知识
Allure泽宇的博客
06-23 1830
CSS基础知识
web前端学习笔记--css书写位置
weixin_46493903的博客
08-04 685
css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML的文件样式的计算机语言。 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化 css规则：由两个主要的部分组成：选择器、以及一条或多条的声明 p{width：300px;font-size:14px;} 其中，p是选择器，{}里的是多条样式属性，每一条样式属性由属性名：属性值组成 书写位置： 根据书写位置的不同，可以分为内联式、内嵌式、外联式、导入式 内联式(行内式) 书写位置:在
CSS 内嵌样式
ivenqin的博客
08-31 4797
前面一节我们讲了行内样式，但是行内样式的缺点就是样式不能重用。例如当有好多个 <p> 标签，我们希望所有的 <p> 标签的样式都一致，那么需要在每个标签中都写一遍，这么会很麻烦，也会增加很多代码。 那么为了解决这个问题，本节我们学一下内嵌样式，也可以叫做内部样式。 什么是内嵌样式 内嵌样式就是将 CSS 代码写在 HTML 页面中的 <head> 标签中的 <style> 标签内。因为它与 HTML 内容位于同一个文件中，所以叫做内嵌样式表。 示例： 例如下面
web——CSS基础
qq_44745063的博客
05-29 1795
作者：小 琛 欢迎转载，请标明出处 文章目录引入方式选择器字体样式文本样式例子1：新闻网页例子2：产品推荐图 css:在web中，用于渲染网页的工具 引入方式 三大引入方式：内嵌、外联、行内 内嵌：在html的head中，定义style，将所有渲染内容写在里面 外联：定义一个.css文件，将所有渲染写在该文件内，在对应的html文件中，link该文件 行间：写在某一个标签内 一般的工程开发多用外联式，这样可以让工程文件看起来清晰；内嵌式通常用于演示等简单操作；行间式在css渲染阶段一般不使用，通
Day_03 css
lbw18的博客
03-02 291
文章目录2. 内容讲解2.1 CSS的作用2.2 CSS的引入方式2.2.1 行内样式2.2.2 内部样式2.2.3 外部样式2.3 CSS代码语法2.4 CSS选择器2.4.1 标签选择器2.4.2 id选择器2.4.3 类选择器 简单了解CSS 2. 内容讲解 2.1 CSS的作用 CSS是用于设置HTML页面标签的样式，用于美化HTML页面 2.2 CSS的引入方式 2.2.1 行内样式 也就是在要设置样式的标签中添加style属性，编写css样式; 行内样式仅对当前标签生效 <!--给div设
web开发中怎么样使css书写规范?
sxty0220 博客之家
04-17 804
于现在的web2.0,到底怎么书写css样式表，才算是最好的，最规范的！几乎没有什么明确的规定。在整个开发的项目中，只要写出一套最适合于团队开发的最好了。当然了很多的css样式书写范是大同小异的。需要不断的去归纳总结。 根据经验总结出以下几点规范，请大家参考一下： 一.所有的CSS的尽量采用外部调用:这是我认为最重要的一点,因为这影响加载页面时的速度. 书写时重定义的最先
WEBCSS定位
XiaoQuanQ的专栏
04-28 724
定位一直是标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。定位的定义：在中关于的内容是：position:relative | absolute | static | fixedstatic 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，
Web︱CSS
梦晨涌京
12-06 337
CSS 简介 CSS，即层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素 外部样式表可以极大提高工作效率，通常存储在 CSS 文件中。 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: CSS声明总是以分号(;)结束，声明总以大括号({})括起来: p {color:red;text-align:center;} CSS注释以 /* 开始, 以 */ 结束。 选择器 1. id选择器 可以为标有特定id的HTML元素指定特
Web-CSS
whale blog
06-08 1113
CSS概述     CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。    那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。CSS与HT...
个人技术展示网页：前端技术与优化布局解析
Jquery在网页开发中的应用非常广泛，开发者使用Jquery来简化DOM操作，执行AJAX请求，以及创建交互式动画。它还提供了大量现成的插件，可以轻易地实现复杂的功能，如轮播图、模态框等。 #### Bootstrap框架： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值