<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
</head>
<body>
<!-- header-section-starts -->
<div class="header">
<div class="header-top">
<div class="container">
<div class="logo">
<a href=""><img src="images/logo.png" class="img-responsive" alt="" /></a>
</div>
<div class="top-menu">
<span class="menu"> </span>
<ul>
<li><a href="#aboutus" class="scroll">About Me</a></li>
<li><a href="#work" class="scroll">Work</a></li>
<li><a href="#clients" class="scroll">Clients</a></li>
<li><a href="#contact" class="scroll">Let's talk</a></li>
<div class="clearfix"></div>
</ul>
</div>
<!-- script-for-menu -->
<script>
$("span.menu").click(function(){
$(".top-menu ul").slideToggle("slow" , function(){
});
});
</script>
<!-- script-for-menu -->
<div class="clearfix"></div>
</div>
</div>
<div class="index-banner">
<div class="container">
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="bannertop_box">
<h1>HELLO,<span>I'M YOUR NAME</span></h1>
<label>graphic / web / motion designer</label>
<p>Slider for your work.pictures yours recent projects or something like that.</p>
<p>You can put your own stuff such as other text information, images etc. </p>
<p>That's absolutely <span class="bold">free</span> template. Ihope you enjoy it!<span class="bold block">Thank you.</span></p>
</div>
<div class="banner_right">
<img src="images/slider-img2.jpg" class="img-responsive" alt="" />
</div>
<div class="clearfix"></div>
</div>
</article>
<article style="position: relative; width: 100%; opacity: 1;">
<div class="banner-wrap">
<div class="bannertop_box">
<h1>HAI,<span>I LOREM IPSUM</span></h1>
<label>design / chrome / developer</label>
<p>when unknown printer took galley of type Ipsum is not simply random text.</p>
<p>There are many variations passages of Lorem available, images etc. </p>
<p>The standard since <span class="bold">1500s</span> template. Ihope you enjoy it!<span class="bold block">Lorem Ipsum.</span></p>
</div>
<div class="banner_right">
<img src="images/slider-img1.jpg" class="img-responsive" alt="" />
</div>
<div class="clearfix"></div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="bannertop_box">
<h1>DONE,<span>THE TEMPLATE</span></h1>
<label>web / smartphone / mobile</label>
<p>Sed ut perspiciatis un omnis natus error voluptatem nulla pariatur.</p>
<p>But I must explain to you how all mistaken idea of denouncing pleasure. </p>
<p>The Lorem <span class="bold">therefore</span> template. Ihope you enjoy it!<span class="bold block">welcome</span></p>
</div>
<div class="banner_right">
<img src="images/slider-img.jpg" class="img-responsive" alt="" />
</div>
<div class="clearfix"></div>
</div>
</article>
</div>
<a class="wmuSliderPrev">Previous</a><a class="wmuSliderNext">Next</a>
<ul class="wmuSliderPagination">
<li><a href="#" class="">0</a></li>
<li><a href="#" class="">1</a></li>
<li><a href="#" class="wmuActive">2</a></li>
</ul>
</div>
<script src="js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
</div>
</div>
<!-- header-section-ends -->
<!-- content-starts -->
<div class="content">
<!-- about-section-starts -->
<div class="about-section" id="aboutus">
<div class="about-section-head text-center">
<div class="container">
<h3>ABOUT ME</h3>
<p>Well, you can write something about yourself. For example, full name, age, your geolocation and etc. And specific of your work. Maybe your work focused on UI / Web / Graphic or Motion design. I don't know :)</p>
</div>
</div>
<div class="about-section-grids">
<div class="about-section-top-grid">
<div class="container">
<div class="col-md-3 about-section-top-left-grid">
<h4>Software</h4>
</div>
<div class="col-md-9 about-section-top-right-grid">
<p>Ps | Ai | Id | Ae | Mu | Cinema4d | 3dsMax + Vray</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="about-section-middle-grid">
<div class="container">
<div class="col-md-3 about-section-middle-left-grid">
<h4>Skills</h4>
</div>
<div class="col-md-9 about-section-middle-right-grid">
<p>Conceptual thinking | Web | Illustration | Identity | Team work</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="about-section-bottom-grid">
<div class="container">
<div class="col-md-3 about-section-bottom-left-grid">
<h4>Hobby</h4>
</div>
<div class="col-md-9 about-section-bottom-right-grid">
<p>Music | Movies | Sport | Art | Photography</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- about-section-ends -->
<!-- work-section-starts -->
<div class="work-section" id="work">
<div class="container">
<div class="work-section-head text-center">
<h3>WORK</h3>
</div>
<div id="portfoliolist">
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a class="lightbox" href="#goofy">
<img src="images/pic1.jpg" class="img-responsive" alt="" />
</a>
<div class="lightbox-target" id="goofy">
<img src="images/pic1.jpg" class="img-responsive" alt="" />
<a class="lightbox-close" href="#"></a>
</div>
</div>
</div>
<div class="portfolio app mix_all" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a class="lightbox" href="#goofy">
<img src="images/pic2.jpg" class="img-responsive" alt="" />
</a>
</div>
</div>
<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
<div cl
公司人物简介网页模板是一款多种色彩组合的css3人物网站模板.rar
需积分: 0 127 浏览量
更新于2023-09-11
收藏 583KB RAR 举报
这款“公司人物简介网页模板”是一款基于CSS3技术设计的人物介绍网站模板,主要适用于企业或个人展示团队成员、员工风采的场景。HTML是其主要语言,意味着它使用HTML标记语言来构建网页结构,同时结合CSS3来实现丰富的样式效果和交互体验。
1. CSS3介绍:
CSS3是层叠样式表的最新版本,相较于CSS2,它引入了许多新的特性和功能。例如,选择器的增强使得我们可以更精确地定位和操作网页元素,如:伪类(`:hover`,`:active`,`:focus`)和伪元素(`::before`,`::after`)。CSS3还支持多列布局、过渡(transition)、动画(animation)、边框图像(border-image)以及阴影效果(box-shadow,text-shadow)等,为网页设计提供了更多可能性。
2. Bootstrap框架:
压缩包中的bootstrap.css文件表明此模板可能采用了Bootstrap框架。Bootstrap是目前最流行的前端开发框架,它提供了一套响应式、移动设备优先的流式栅格系统,以及一系列预定义的CSS、JavaScript组件和jQuery插件,能够快速创建美观且响应式的网站。Bootstrap的网格系统使得网页在不同设备上都能自适应显示,而其内置的组件如导航栏、按钮、表单、模态框等则大大提高了开发效率。
3. HTML5元素:
虽然描述中只提到HTML,但考虑到当前趋势,此模板可能使用了HTML5的新特性。HTML5引入了语义化标签,如`<header>`,`<nav>`,`<section>`,`<article>`,`<aside>`和`<footer>`,它们有助于提高网页的可读性和SEO优化。此外,HTML5还支持离线存储、拖放功能、媒体元素(`<audio>`,`<video>`)等,让网页内容更加丰富。
4. 图像资源:
压缩包内的图片文件(slider-img*.jpg和pic*jpg)主要用于美化网页,可能是轮播图(slider)的背景图或者人物简介的配图。在网页设计中,合理的图像使用可以增强视觉效果,提升用户体验。
5. 网页布局与设计:
style.css文件是CSS样式表,用于定义网页元素的样式和布局。通过调整CSS,我们可以控制网页的颜色、字体、尺寸、位置等,实现个性化的设计。例如,可以设置背景色、文字样式、边距、填充,以及定义模块的浮动、定位等。
6. 毕业设计应用:
该模板作为“毕业设计”的标签,表明它可能被学生用作学习成果,或者作为完成毕业项目的一部分。这样的设计可以帮助学生实践网页开发技能,理解HTML和CSS3在实际项目中的应用,并锻炼其解决问题和创新能力。
这个“公司人物简介网页模板”是一个结合了HTML5语义、CSS3样式和Bootstrap框架的实例,适合初学者进行网页设计学习,也适合作为快速构建人物简介页面的工具。通过深入研究和修改这个模板,可以进一步提升前端开发能力,掌握网页设计的技巧和方法。
Q_97095639
- 粉丝: 589
- 资源: 1万+
最新资源
- 基于Verilog的SPI口Master端四线制通信协议设计与仿真实现,附激励源及代码示例,基于Verilog的SPI口Master端四线制通信协议设计与仿真实现,附激励源及代码实现,SPI口,4线制
- UE5 C++ AES加密插件
- 电气CAD技术-11701198.pdf
- 清华DeepSeek从入门到精通:AI时代的全方位指南
- 基于半桥LLC谐振变换器的开环、闭环及仿真分析综合设计手册,《半桥LLC谐振变换器:开环、闭环及软启动Simulink仿真设计与配套说明》,半桥LLC谐振变器开环+闭环仿真设计资料 附带一份32页配套
- 基于PLECS4.7的特斯拉Model3电驱系统仿真研究:从双闭环Boost电路到三相逆变电路的搭建与控制策略分析,基于PLECS4.7的特斯拉Model3电驱系统仿真分析:从双闭环Boost电路到三
- 基于双馈风力发电系统DFIG的优化控制策略及其创新应用研究:2.5MW双PWM变换器控制系统下的智能功率管理策略与实践,双馈风力发电系统DFIG的先进控制策略与MPPT技术应用研究,2.5MW双馈风力
- 电气CAD实例教程-13173092.pdf
- 西门子S7-1200PLC与MCGS7.7联机程序实战:水塔水位控制及V20变频器接线详解(含IO表及注释博途V16),水塔水位监控系统:西门子S7-1200PLC与MCGS7.7联机程序实践及V16
- "车库自动门控制系统的组态王6.55仿真与西门子200 PLC梯形图程序优化改写,包含IO表及设计要求详解","车库自动门控制系统的组态王6.55仿真与西门子200 PLC梯形图程序优化改写,含IO表
- 电气CAD实例教程-1407514.pdf
- "PLECS 4.7仿真平台下的虚拟同步机控制三相逆变技术及其报告研究","PLECS 4.7仿真平台下的虚拟同步机控制三相逆变技术及其报告研究",PLECS4.7-同步机控制三相逆变仿真及报告(该曾
- "利用决策树算法进行参数区分:基于MATLAB的案例分析","利用决策树算法进行参数区分:设备来源的案例研究在MATLAB中的应用",参数区分:决策树算法区分参数来源设备(案例),MATLAB #参数
- "纯Verilog实现万兆网以太网全功能UDP协议,支持ARP与ping功能,Xilinx平台产品化测试验证稳定可靠",纯Verilog实现万兆网以太网UDP协议,支持ARP与ping功能,Xilin
- 基于 COMSOL 和 Simulink 的电磁铁悬浮控制:PID 算法、模型搭建与参数调试
- 电气CAD项目教程14165591.pdf