html网站-关于发展历程的案例
一、案例一
1.效果图：
2.代码：
所用到的文件自行在官网下载，也可在git上拉取。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>发展历程title>
<script type="text/javascript" src="static/js/jquery.js">script>
<link rel="stylesheet" href="static/css/swiper-bundle.min.css">
<script src="static/js/swiper.min.js">script>
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
body {
position: relative;
width: 100%;
margin: 0 auto;
min-width: 1200px;
overflow-x: hidden;
}
.w1280 {
width: 1280px;
margin: auto;
}
.historyCon .h3 {
font-size: 24px;
color: #333333;
line-height: 1;
margin-bottom: 13px;
margin-top: 40px;
}
.historyCon .h4 {
color: #666;
line-height: 28px;
font-size: 14px;
margin-bottom: 33px;
}
.historyCon {
position: relative;
padding-top: 62px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
height: 610px;
overflow: hidden;
background: #fff;
border: 1px solid;
}
.historyCon:after {
content: '';
position: absolute;
top: 50%;
margin-top: -3.5px;
left: 0;
right: 0;
margin: 0 auto;
width: 1198px;
height: 7px;
background: url('static/images/ti.png') no-repeat center;
}
.historyCon .ul {
height: 100%;
}
.historyCon .ul .swiper-slide {
overflow: hidden;
}
.historyCon .ul .li .ti {
padding-left: 25px;
font-size: 20px;
color: #333333;
font-weight: 800;
line-height: 1;
margin-bottom: 8px;
}
.historyCon .ul .li p {
padding-left: 25px;
color: #666666;
font-size: 14px;
line-height: 22px;
margin-bottom: 28px;
}
.historyCon .ul .li .img {
position: absolute;
bottom: 0;
padding-left: 25px;
width: 221px;
height: 116px;
overflow: hidden;
}
.historyCon .ul .li {
position: relative;
height: 200px;
z-index: 9;
margin-left: 10px;
}
.historyCon .ul .li:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 17px;
height: 237px;
}
.historyCon .ul .li:nth-child(odd) {
bottom: -21px;
}
.historyCon .ul .li:nth-child(even) {
bottom: -41px;
left: 290px;
padding-top: 40px;
height: 267px;
}
.historyCon .ul .li:nth-child(even):after {
height: 270px;
background: url('static/images/t2.png') no-repeat center;
}
.historyCon .ul .li:nth-child(odd):after {
background: url('static/images/t1.png') no-repeat center;
}
.historyCon .btn {
width: 130px;
position: absolute;
top: 50px;
right: 40px;
height: 18px;
}
.historyCon .btn .swiper-button-next,
.historyCon .btn .swiper-button-prev {
top: 0;
margin-top: 0;
width: 58px;
height: 58px;
transition: all .7s;
}
.historyCon .btn .swiper-button-prev {
left: 0;
background: url('static/images/prev.png') no-repeat center;
background-size: cover;
}
.historyCon .btn .swiper-button-prev:hover {
background-image: url('static/images/prev2.png');
}
.historyCon .btn .swiper-button-next {
right: 0;
background: url('static/images/next.png') no-repeat center;
background-size: cover;
}
.historyCon .btn .swiper-button-next:hover {
background-image: url('static/images/next2.png');
}
.historyCon .swiper-button-next:after {
right: 25px;
}
.historyCon .swiper-button-prev:after {
left: 25px;
}
.historyCon .swiper-button-next:after,
.historyCon .swiper-button-prev:after {
position: absolute;
content: '' !important;
font-family: auto !important;
width: 0px;
height: 2px;
transition: all .7s;
}
style>
head>
<body>
<div class="historyCon w1280">
<div class="swiper mySwiper ul">
<div class="swiper-wrapper">
<div class='swiper-slide'>
<div class='li'>
<div class='ti'>1988起点div>
<p>正式注册营业,运营管理金地工业区。p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
<div class='li'>
<div class='ti'>2004标杆div>
<p>全国城市更新文创园标杆项目上海8号桥开业p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
div>
<div class='swiper-slide'>
<div class='li'>
<div class='ti'>2010远见div>
<p>加大产业投资力度,珠海金地门道面市。p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
<div class='li'>
<div class='ti'>2012起航div>
<p>收购香港上市公司(535.HK),<br />运营金地威新软件科技园 ,<br />2013年公司正式更名为金地商置。p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
div>
<div class='swiper-slide'>
<div class='li'>
<div class='ti'>2014外拓div>
<p>金地进入美国市场p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
<div class='li'>
<div class='ti'>2015前瞻div>
<p>股权投资部成立战略投资潜力企业p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
div>
<div class='swiper-slide'>
<div class='li'>
<div class='ti'>2016深耕div>
<p>金地威新产业公司成立p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
<div class='li'>
<div class='ti'>2020胸怀div>
<p>首个孵化器金地Alpha Bay成立p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
div>
<div class='swiper-slide'>
<div class='li'>
<div class='ti'>2021快车道div>
<p>首进行业Top5实现全国化布局：华北、华东、华南、华中、西部、东北。p>
<div class='img'><img src="static/images/bg3.jpg" alt=''>div>
div>
div>
div>
div>
<div class="btn">
<div class="swiper-button-next">div>
<div class="swiper-button-prev">div>
div>
<script>
$(function() {
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
autoplay: 3000,
});
})
script>
div>
body>
html>
3.所用到的图标：
二、案例二
1.效果图：
2.代码：
所用到的文件自行在官网下载，也可在git上拉取。
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="zh-CN" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>发展历程title>
<script src="static/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8">script>
<script src="static/js/slick.js" type="text/javascript" charset="utf-8">script>
<style>
.fl {
float: left;
}
.fr {
float: right;
}
.l,
.r {
width: 50%;
}
.history_con_box {
position: relative;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
padding: 0 8.9%;
}
.history_con {
position: relative;
box-sizing: border-box;
padding: 0 9.2vw
}
.history_con .leftbtn,
.history_con .rightbtn {
width: 2.761vw;
cursor: pointer !important;
position: absolute;
top: 34px;
z-index: 999;
}
.history_con .leftbtn {
left: 7%;
}
.history_con .leftbtn_hover,
.history_con .rightbtn_hover {
transition: 0.5s;
opacity: 0;
}
.history_con .rightbtn {
right: 7%;
}
.history_con .timeline {
width: 100%;
height: 2px;
background: #eee;
position: absolute;
top: 108px;
left: 0;
z-index: 1;
}
.history_con .time {
font-size: 16px;
width: 100%;
color: #666;
}
.history_con .time .item {
text-align: center;
color: #333;
font-weight: bold;
font-size: 16px;
transform: translateY(60px);
position: relative;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s;
}
.history_con .time .item::after {
position: absolute;
bottom: -29px;
left: 50%;
width: 6px;
height: 6px;
background: #333;
border-radius: 50%;
content: '';
}
.history_con .time .item.slick-current::after {
position: absolute;
bottom: -26px;
left: 50%;
width: 6px;
height: 6px;
background: #333;
border-radius: 50%;
content: '';
transform: translateX(-50%);
}
.history_con .time .item.slick-current::before {
position: absolute;
bottom: -44px;
left: 50%;
width: 42px;
height: 42px;
background: #fff;
border-radius: 50%;
content: '';
box-shadow: 0 0 10px rgba(214, 214, 214, .35);
transform: translateX(-50%);
}
.history_con .time .item.slick-current {
font-size: 48px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #F18870;
transform: translateY(0);
padding-bottom: 16px;
}
.history_con .time .slick-list {
padding-bottom: 25px !important;
}
.history_con .time .item.slick-current::after {
opacity: 1;
}
.history_con .timecontent p {
font-size: 16px;
line-height: 2.25;
color: #666;
}
.history_con .slick-prev {
left: 0;
background: url('../imgs/[email protected]') no-repeat;
background-size: 100% 100%;
width: 53px;
height: 53px;
top: 96px;
cursor: pointer;
z-index: 99;
transform: rotate(-180deg);
opacity: 1;
}
.history_con .slick-next {
right: 0;
width: 53px;
height: 53px;
background: url('../imgs/[email protected]') no-repeat;
background-size: 100% 100%;
top: 96px;
cursor: pointer;
z-index: 10;
/* background-size: cover; */
}
.history_con .hisbg {
height: 300px;
margin-top: 73px;
background: url(../images/hisbg.jpg) no-repeat center;
}
.history_con .time .slick-list {
height: 130px;
position: relative;
z-index: 10;
}
.itemfl {
width: 50%;
border-right: 1px solid #eee;
padding-top: 60px;
padding-bottom: 130px;
box-sizing: border-box;
}
.itemfr {
width: 50%;
padding: 6.35vw 3.4vw 4vw;
box-sizing: border-box;
}
.itemfl img {
width: 23.959vw;
display: block;
margin: auto;
}
.itemfr p {
font-size: 16px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #666666;
line-height: 18px;
}
.ib {
display: inline-block;
vertical-align: middle;
}
.imgdiv img,
.tra0_3,
.imgk img {
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s;
}
.tra1 {
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}
.dimgdiv img:last-of-type {
display: none;
}
.dimgdiv:hover img:first-of-type {
display: none;
}
.dimgdiv:hover img:last-of-type {
display: inline;
}
.disnone {
display: none !important;
}
.clearfix::after {
display: block;
clear: both;
height: 0;
content: ' ';
}
.clearfix {
zoom: 1;
}
.cp {
cursor: pointer;
}
.fb {
font-weight: bold;
}
.fl {
float: left;
}
.fr {
float: right;
}
.l,
.r {
width: 50%;
}
.c_333 {
color: #333;
}
.c_666 {
color: #666;
}
.c_999 {
color: #999;
}
.c_w {
color: #fff;
}
.bg_w {
background: #fff;
}
.c_b {
color: #000;
}
.bg_b {
background: #000;
}
.img_d {
display: none;
}
.img_dd {
display: none !important;
}
.hm {
height: 100%;
}
.tn {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.t50 {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tx50 {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.ty50 {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.tac {
text-align: center;
}
.tal {
text-align: left;
}
.tar {
text-align: right;
}
.tablediv {
display: table;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.imgdiv {
overflow: hidden;
}
/* v1.4 2019.6.28 gary*/
/*slick 修整*/
.slick-track .slick-slide {
display: block !important;
}
/*分享修改*/
.bsBox,
#bsPanel div,
#bsMorePanel div,
#bshareF div {
box-sizing: content-box;
}
.bsTop span {
line-height: 24px !important;
}
#bsPanel {
margin-left: 20px !important;
}
/*编辑器图片和p默认样式处理*/
.yxedr_active img {
max-width: 100% !important;
height: auto !important;
}
.yxedr_active p {
font-size: 16px;
line-height: 1.75;
color: #666;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
outline: none;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
style>
head>
<body>
<div class="history_con_box">
<div class="history_con">
<div class="time">
<div class="item text-center">2014div>
<div class="item text-center">2015div>
<div class="item text-center">2017div>
<div class="item text-center">2018div>
<div class="item text-center">2019div>
<div class="item text-center">2021div>
<div class="item text-center">2022div>
div>
<div class="leftbox">
<img class="leftbtn leftbtn_before slick-arrow" src="static/imgs/right.png"
style="transform: rotate(180deg);">
<img class="leftbtn leftbtn_hover slick-arrow" src="static/imgs/left.png">
div>
<div class="rightbox">
<img class="rightbtn right_before slick-arrow" src="static/imgs/right.png">
<img class="rightbtn rightbtn_hover slick-arrow" src="static/imgs/left.png"
style="transform: rotate(180deg);">
div>
<script>
$(function() {
//左按钮
$('.leftbox').mouseover(function() {
$('.leftbtn_hover').css('opacity', '1')
$('.leftbtn_before').css('opacity', '0')
}).mouseout(function() {
$('.leftbtn_hover').css('opacity', '0')
$('.leftbtn_before').css('opacity', '1')
})
//右按钮
$('.rightbox').mouseover(function() {
$('.rightbtn_hover').css('opacity', '1')
$('.right_before').css('opacity', '0')
}).mouseout(function() {
$('.rightbtn_hover').css('opacity', '0')
$('.right_before').css('opacity', '1')
})
})
script>
<div class="timeline">div>
<div class="timecontent">
<div class="item clearfix">
<div class="itemfl fl">
<img src="static/imgs/[email protected]" alt="">
div>
<div class="itemfr fl">
<p>2014年8月 青岛分公司成立；p>
div>
div>
<div class="item clearfix">
<div class="itemfl fl">
<img src="static/imgs/[email protected]" alt="">
div>
<div class="itemfr fl">
<p>2015年年初，第一家技术研发中心；<br />
2015年年初，济宁板房成立；<br />
2015年9月份成立英国伦敦办事处；p>
div>
div>
<div class="item clearfix">
<div class="itemfl fl">
<img src="static/imgs/[email protected]" alt="">
div>
<div class="itemfr fl">
<p>2017年1月成立汶上县鸿瑞轩服饰有限公司；<br />
2017年4月成立上海办事处；<br />
2017年7月公司总部迁址于济南高新区汉峪金谷；p>
div>
div>
<div class="item clearfix">
<div class="itemfl fl">
<img src="static/imgs/[email protected]" alt="">
div>
<div class="itemfr fl">
<p>2018年6月成立平阴产品研发中心；p>
div>
div>
<div class="item clearfix">
<div class="itemfl fl">
<img src="static/imgs/[email protected]" alt="">
div>
<div class="itemfr fl">
<p>2019年1月成立汶上县鸿天服饰有限公司；<br />
2019年9月成立汶上县鸿天服饰有限公司白石分公司；p>
div>
div>
<div class="item clearfix">
<div class="itemfl fl">
<img src="static/imgs/[email protected]" alt="">
div>
<div class="itemfr fl">
<p>2021年7月在青岛成立产品研发中心；<br />
2021年7月成立汶上县鸿丰服饰有限公司、汶上县鸿兴服饰有限公司；<br />
2021年11月成立印花公司——汶上县鸿盛服饰有限公司；p>
div>
div>
<div class="item clearfix">
<div class="itemfl fl">
<img src="static/imgs/[email protected]" alt="">
div>
<div class="itemfr fl">
<p>2022年12月成立巨野县鸿天服饰有限公司。p>
div>
div>
div>
div>
<script>
$(function() {
// 发展历程
//时间
$(".time").slick({
autoplay: false,
arrows: true,
dots: false,
centerMode: true,
centerPadding: "0px",
autoplaySpeed: 4000,
slidesToShow: 5,
touchMove: true,
asNavFor: ".timecontent",
focusOnSelect: true,
prevArrow: $('.history_con .leftbtn'), //左箭头
nextArrow: $('.history_con .rightbtn'), //右箭头
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
]
});
// 事件详情
$(".timecontent").slick({
autoplay: false,
arrows: false,
dots: false,
centerPadding: "0px",
autoplaySpeed: 4000,
slidesToShow: 1,
asNavFor: ".time",
});
});
script>
div>
body>
html>
3.所用到的图标：
