本文共计977个文字，预计阅读时间需要4分钟。

Eason 首页 - 艺术设计 + 木制表 + 动态展示 + 联系艺术 + 售后维修 + 海外 + 展现独特世界观 + 探索OVERSEAS2 + 展现独特世界观2 + 探索2 + OVERSEAS3 + 展现独特世界观3 + 探索3 + CSS样式 - public

html布局

OVERSEAS

展现独特的世界观

探索

OVERSEAS2

展现独特的世界观2

探索2

OVERSEAS3

展现独特的世界观3

探索3

css样式-public.css banner.css index.css

/*public.css*/ * { padding: 0; margin: 0; color: #333; font-family:'Microsoft Yahei'; } .container { position:relative; margin: 0 auto; width: 1117px; } @media screen and (max-width:1117px){ .container { width:100%; } } header { padding:15px 0; text-align: center; } .navbar-top { background: #363636; text-align: center; font-size: 0; } .navbar-top > ul { list-style: none; overflow: hidden; display: inline-block; /* 清除浮动 */ } .navbar-top > ul > li { float: left; } .navbar-top > ul > li > a { position: relative; display: block; margin: 0 36px; padding: 15px 12px; color: #fff; font-size: 16px; transition: all .35s; /* border-bottom: 2px #fff solid; */ text-decoration: none; } .navbar-top > ul > li > a::after{ content:''; position: absolute; left:50%; bottom:0; width: 0; height: 2px; background-color: #fff; transition:width .35s; transform:translateX(-50%); } .navbar-top > ul > li > a:hover{ color: #c5842d; } .navbar-top > ul > li > a:hover::after{ width: 75px; } @media screen and (max-width:992px){ .container { width:750px; } .navbar-top > ul > li > a { margin:0 18px; } } /*@media screen and (max-width:1024px){ width:1024px; body { } }*/ @media screen and (max-width:768px){ /* 手机屏幕 */ body { width:768px; } } /*public.css*/ /*banner.css*/ .banner { position: relative; width: 100%; overflow:hidden; } .banner > .banner-wrapper { position: relative; left: 0; overflow:hidden; /* transition:left .5s; */ } .banner .banner-item { float: left; } .banner .pagination { position: absolute; /* left: 50%; */ left: 0; right: 0; bottom: 40px; text-align: center; /* transform:translateX(-50%); */ } .banner .pagination > span{ margin: 0 9px; width: 12px; height: 12px; background-color: #6c6c6c; border-radius:50%; cursor: pointer; display: inline-block; } .banner .pagination > span.active { background-color: #fff; } /*banner.css*/ /*index.css*/ .banner{ background-color: #000; } .banner .container{ height: 670px; overflow:hidden; } .banner .banner-left { position: absolute; left:75px; top:200px; padding-top: 25px; width: 332px; text-align: center; /* height: 300px; */ background: url('../images/banner1-01_03.png') no-repeat left top,url('../images/banner1-01_03.png') no-repeat 0 170px; } .banner .banner-right { position: absolute; right:10px; top:115px; } .banner .banner-right::after{ content: ''; position: absolute; top:100%; width: 100%; height: 200px; background:url('../images/banner1-03.png'); } .banner .banner-left > h1 { color: #fff; /*font-size: 70px; font-family: 'SimHei'; font-weight: normal;*/ font:normal normal 70px 'SimHei'; } .banner .banner-left > h2 { margin-top: 10px; font-size: 26px; color: #fff; font-family: 'SimSun'; /* font-style:italic; */ font-weight:400; transform:skewX(-10deg); } .banner .banner-left > a { padding: 5px 20px; margin-top: 75px; color: #c5842d; font:normal normal 26px 'SimHei'; border: 1px #c5842d solid; text-decoration: none; transition:all .35s; display: inline-block; } .banner .banner-left > a:hover { border-radius:5px; color:#e5a857; border-color:#e5a857; } .banner .pagination { position: absolute; /* left: 50%; */ left: 0; right: 0; bottom: 40px; text-align: center; /* transform:translateX(-50%); */ } .banner .pagination > span{ margin: 0 9px; width: 12px; height: 12px; background-color: #6c6c6c; border-radius:50%; cursor: pointer; display: inline-block; } .banner .pagination > span.active { background-color: #fff; } /*index.css*/ 原生JS插件 carousel.js

function Carousel(container,options){ this.initFlag = 1; this.count = 0; var ctrl = this, container = document.querySelector(container); this.options = options; this.wrapper = container.querySelector('.banner-wrapper'); this.items = container.querySelectorAll('.banner-item'); this.itemLen = this.items.length; this.pagination = container.querySelector('.pagination'); this.timer = null; this.init(document); } Carousel.prototype.screenWidth = document.body.clientWidth; Carousel.prototype.init = function(doc){ if(this.initFlag){ this.initFlag = null; }else { console.log('你在尝试初始化两次??'); return; } var c = this; var screenWidth = this.screenWidth, items = this.items, itemLen = items.length, wrapper = this.wrapper, pagination = this.pagination, timer = this.timer, options = this.options; wrapper.style.width = screenWidth * (itemLen+1) + 'px'; wrapper.style.transition = 'left ' + options.speed + 'ms'; for( var i=0; i this.itemLen - 1){ c.wrapper.style.left = '-'+ c.count * c.screenWidth + 'px'; for(var i =0; i