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/icon_go@2x.png') 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/icon_go@2x.png') 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">2014</div><div class="item text-center">2015</div><div class="item text-center">2017</div><div class="item text-center">2018</div><div class="item text-center">2019</div><div class="item text-center">2021</div><div class="item text-center">2022</div></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/image_history@2x.png" alt=""></div><div class="itemfr fl"><p>2014年8月 青岛分公司成立；</p></div></div><div class="item clearfix"><div class="itemfl fl"><img src="static/imgs/image_history@2x.png" 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/image_history@2x.png" 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/image_history@2x.png" alt=""></div><div class="itemfr fl"><p>2018年6月成立平阴产品研发中心；</p></div></div><div class="item clearfix"><div class="itemfl fl"><img src="static/imgs/image_history@2x.png" 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/image_history@2x.png" 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/image_history@2x.png" 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>