响应式实例-兰途科技(jq)

首页

html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="Author" content="Fly"><title>Title</title><!-- 移动端不能缩放 --><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/indexMedia.css"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body><!-- header start --><div id="header"><div class="h-main"><div class="h-m-logo"><a href="index.html"> <img src="img/index/head/logo.png" width='132' height="37"> </a></div><div class="h-m-nav"><ul class="nav1"><li class="active"><a href="">首页</a></li><li><a href="">移动校园</a></li><li><a href="">经典案例</a></li><li><a href="">公司动态</a></li><li><a href="">招贤纳士</a></li><li><a href="">联系我们</a></li></ul><ul class="nav2"><li class="active"><a href="">首页</a></li><li><a href="">移动校园</a></li><li><a href="">经典案例</a></li><li class="more" onselectstart="return false">更多<img src="img/index/head/nav_icon.png" alt="" width='35' height='35'><div class="more-hide"><ul><li><a href="">行业新闻</a></li><li><a href="">招贤纳士</a></li><li><a href="">联系我们</a></li><li><a href="">兰途家族</a></li></ul></div></li></ul></div></div></div><!-- header  End--><!-- banner start --><div id="banner"><div class="b-part"><div class="part part1"><div class="img1"></div><div class="img2"></div></div><div class="part part2"><div class="img1 img"><p><img src="img/index/banner/bg2-1.png" alt=""></p><p><img src="img/index/banner/bg2-2.png" alt=""></p><p style="background: #b3cd35; width: 96%; padding: 2%; border-radius: 5px;"><img src="img/index/banner/bg2-3.png" alt=""></p></div><div class="img2"></div></div><div class="part part3"><div class="img1 img"><p><img src="img/index/banner/bg3-3.png" alt=""></p><p><img src="img/index/banner/bg3-4.png" alt=""></p><p style="background: #b3cd35; width: 96%; padding: 2%; border-radius: 5px;"><img src="img/index/banner/bg3-5.png" alt=""></p></div><div class="img2"></div></div></div><div class="b-tab"><ul><li></li><li></li><li></li></ul></div></div><!-- banner end --><script src="js/index.js"></script>
</body>
</html>

Css=====>样式.css ,响应.css.

样式.css

@charset "UTF-8";
/*header start*/#header {position: fixed;top: 0;width: 100%;height: 65px;background: #e9e8ee;box-shadow: 0 2px 5px #ccc;font-size: 14px;z-index: 99;
}
#header .h-main {width: 1100px;height: 100%;margin: 0 auto;
}
#header .h-main .h-m-logo {float: left;
}
#header .h-main .h-m-logo a{display: block;padding: 15px 3px;
}
#header .h-main .h-m-nav {float: right;width: 810px;height: 100%;}
#header .h-main .h-m-nav>ul {display: none;
}
#header .h-main .h-m-nav>ul.nav1 {display: block;
}
#header .h-main .h-m-nav>ul>li{float: left;height: 100%;
}
#header .h-main .h-m-nav>ul.nav1>li>a{display: block;padding: 25px 41px;color: #000;
}
#header .h-main .h-m-nav>ul.nav2 {display: none;width: 480px;height: 54px;margin: 0 auto;
}
#header .h-main .h-m-nav>ul.nav2>li>a{display: block;padding: 17px 42px;color: #000;
}
#header .h-main .h-m-nav>ul.nav2>li.more {position: relative;line-height: 54px;cursor: pointer;margin-left: 30px;
}
#header .h-main .h-m-nav>ul.nav2>li.more>img{width: 14px;height: 14px;vertical-align: middle;
}
#header .h-main .h-m-nav>ul.nav2>li.more>.more-hide{display: none;position: absolute;left: -30px;top: 45px;padding: 0 20px;background: #fff;border: 1px solid #222;border-radius: 5px;
}
#header .h-main .h-m-nav>ul.nav2>li.more>.more-hide li {width: 60px;height: 35px;line-height: 35px;text-align: center;
}
#header .h-main .h-m-nav>ul.nav2>li.more>.more-hide li a{color: #000;
}#header .h-main .h-m-nav ul li.active a{color: #A7C31E;
}
#header .h-main .h-m-nav>ul li a:hover {color: #A7C31E;
}/*header end*//*banner start*/#banner {position: relative;overflow: hidden;width: 100%;height: 850px;margin-top: 71px;
}
#banner .b-part {position: relative;width: 100%;height: 100%;
}
#banner .b-part .part {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
#banner .b-part .part1 {/*display: block;*/background: url("../img/index/banner/bg1-1.png") no-repeat center;background-size: cover;
}
#banner .b-part .part1 .img1 {position: absolute;top: 500px;left: 100px;width: 300px;height: 125px;background: url("../img/index/banner/bg1-2.png") 0 0/100% 100%;
}
#banner .b-part .part1 .img2 {position: absolute;bottom: 0;right: 0;width: 970px;height: 730px;background: url("../img/index/banner/bg1-3.png") 0 0/100% 100%;
}
#banner .b-part .part2 {background: radial-gradient(rgb(0,173,239),rgb(0,82,124));
}
#banner .b-part .part .img {position: absolute;width: 300px;height: 120px;
}
#banner .b-part .part2 .img1 {top: 500px;left: 100px;
}
#banner .b-part .part .img p {width: 100%;margin: 10px 0;
}
#banner .b-part .part .img p img {display: block;width: 100%;height: auto;
}
#banner .b-part .part2 .img2 {position: absolute;bottom: 100px;right: 50px;width: 930px;height: 635px;background: url("../img/index/banner/bg2-4.png") 0 0/100% 100%;
}
#banner .b-part .part3 {background: url("../img/index/banner/bg3-1.jpg") no-repeat center bottom;background-size: cover;/*以最小比例显示全部图像*/
}
#banner .b-part .part3 .img1 {top: 200px;right: 200px;
}
#banner .b-part .part3 .img2 {position: absolute;top: 115px;left: 70px;width: 777px;height: 600px;background: url("../img/index/banner/bg3-2.png") 0 0/100% 100%;
}
#banner .b-tab {position: absolute;left: 50%;bottom: 27px;width: 62px;height: 10px;margin-left: -30px;
}
#banner .b-tab li {float: left;width: 10px;height: 10px;margin: 0 5px;background: #006597;border-radius: 100%;cursor: pointer;
}
#banner .b-tab li.active {width: 6px;height: 6px;background: transparent;border: 2px solid #b3cd35;
}/*banner end*/

响应.css.

@charset "UTF-8";
/*结构要写对   @media screen and () and ()  空格也需要!!!*//* 1200 ~ 1500*/@media screen and (max-width: 1500px) and (min-width: 1200px) {#banner {height: 500px;}#banner .b-part .part1 .img1 {top: 300px;left: 50px;}#banner .b-part .part1 .img2 {width: 640px;height: 440px;}#banner .b-part .part2 .img1 {top: 300px;left: 50px;}#banner .b-part .part2 .img2 {top: 35px;right: 100px;width: 630px;height: 450px;}#banner .b-part .part3 .img1 {top: 100px;right: 100px;}#banner .b-part .part3 .img2 {top: 0;left: 45px;width: 640px;height: 490px;}}/* 900 ~ 1200 */@media screen and (max-width: 1200px) and (min-width: 900px) {#header .h-main .h-m-logo {margin-left: 60px;}#header .h-main .h-m-nav>ul.nav1>li>a{padding: 25px 30px;}#banner {height: 450px;}#banner .b-part .part1 .img1 {top: 300px;left: 50px;}#banner .b-part .part1 .img2 {width: 500px;height: 380px;right: 40px;}#banner .b-part .part2 .img1 {top: 200px;left: 50px;}#banner .b-part .part2 .img2 {top: 15px;right: 50px;width: 540px;height: 390px;}#banner .b-part .part3 .img1 {top: 100px;right: 50px;width: 270px;height: 90px;}#banner .b-part .part3 .img2 {top: 20px;left: 30px;width: 500px;height: 400px;}}/*  ~900*/@media screen and (max-width: 900px){#header {height: 105px;background: #fff;}#header .h-main .h-m-logo {float: none;width: 100%;}#header .h-main .h-m-logo a{width: 132px;height: 37px;margin: 0 auto;padding: 15px 0 0 0;}#header .h-main .h-m-nav {float: none;width: 100%;}#header .h-main .h-m-nav ul.nav1 {display: none;}#header .h-main .h-m-nav ul.nav2 {display: block;}#banner {margin-top: 113px;}#banner .b-part .part1 .img1 {left: 50%;width: 200px;height: 80px;margin-left: -100px;}#banner .b-part .part1 .img2 {right: 50%;width: 330px;height: 250px;margin-right: -165px;}#banner .b-part .part2 .img1 {width: 180px;height: 80px;}#banner .b-part .part3 .img1 {width: 200px;height: 80px;}}/* 600 ~ 900 */@media screen and (max-width: 900px) and (min-width: 600px){#header .h-main {width: 600px;}#banner {height: 350px;}#banner .b-part .part1 .img1 {top: 270px;}#banner .b-part .part1 .img2 {top: 10px;}#banner .b-part .part2 .img1 {top: 200px;left: 30px;}#banner .b-part .part2 .img2 {top: 40px;right: 15px;width: 370px;height: 270px;}#banner .b-part .part3 .img1 {top: 100px;right: 50px;}#banner .b-part .part3 .img2 {top: 50px;left: 20px;width: 350px;height: 280px;}}/*  ~ 600 */@media screen and (max-width: 600px) {#header {min-width: 350px;}#header .h-main {width: 100%;}#header .h-main .h-m-nav {width: 320px;margin: 0 auto;}#header .h-main .h-m-nav>ul.nav2>li.more {margin-left: 20px;}#header .h-main .h-m-nav>ul.nav2>li>a {padding: 17px 18px;}#banner {min-width: 350px;height: 400px;}#banner .b-part .part1 .img1 {top: 300px;}#banner .b-part .part1 .img2 {top: 28px;}#banner .b-part .part2 .img1 {top: 260px;left: 50%;margin-left: -90px;}#banner .b-part .part2 .img2 {top: 25px;left: 50%;margin-left: -150px;width: 300px;height: 200px;}#banner .b-part .part3 .img1 {top: 260px;right: 50%;margin-right: -90px;}#banner .b-part .part3 .img2 {top: 5px;left: 50%;margin-left: -150px;width: 300px;height: 240px;}}

JS

/**** @authors Your Name (you@example.org)* @date    2017-05-01 14:26:02* @version $Id$*//* #header .more   start */(function(){var $more = $("#header .more");$more.click(function(){$(this).find(".more-hide").fadeToggle();})
})();/* header   end *//* banner start */(function(){var $banner = $("#banner"),$part = $("#banner .b-part .part"),$tab = $("#banner .b-tab li"),length = $part.length,index = 0,timer = null;$part.eq(0).show();$tab.eq(0).addClass("active");$tab.click(function(){var i = $(this).index();if(i !== index){ //不是自己.change(function(i){index = i;}.bind(this,i))}});$banner.hover(function(){clearInterval(timer);},auto);auto();function auto(){timer = setInterval(function(){change(function(){index++;index %= length;})},2000);}function change(fn){$part.eq(index).fadeOut(300);$tab.eq(index).removeClass("active");fn&&fn();$part.eq(index).fadeIn(300);$tab.eq(index).addClass("active");}
})();/* banner end */

响应式实例-兰途科技(jq)相关推荐

易优CMS响应式网站建设网络科技网站模板源码下载
这个模板小子看了下,确实挺好看的,正儿八经可以做个人或者工作室的企业官网,特效也不错,排版也很工整,eyoucms的挺好的.模板自带eyoucms内核,无需再下载eyou系统原创设计.手工书写DIV ...
说一下vue响应式原理？可不只有proxy
凭借着之前的学习积累,用自己的方式叙述一下自己所学的知识点,笔者高中讨厌写作文,硕士期间不喜写论文,水平肯定有限,能详述之前所学的知识已是不易,若能给读者带来一点启发,将倍感荣幸,同时也虚心接受大佬. ...
html5管理开题报告,基于HTML5的响应式网站的设计与实现(论文)开题报告
[9] Brad Dayley,jQuery与JavaScript入门经典 [M].北京:人民邮电出版社,2014. [10] 王映龙,刘春阳,熊曾刚,Java EE实用教程 [M].北京:清华大学出 ...
10款响应式自适应网站模板（三）
红色大气的宠物兽医医院网站模板大气的餐饮管理培训网站响应式模板 HTML5大气响应式建站网络科技公司网站模板 html5在线网页制作公司官网响应式模板大气的网络推广建站公司网站响应式模板电气焊接 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
CSS3 响应式布局实例
掌握了响应式设计的核心技术之后,你可以迫不及待想要使用它来构建响应式网站了.也许你会认为响应式设计有点复杂,但事实上,它比你想象的要简单. 下面通过构建一个响应式的页面基本布局,让你快速了解如何使用响 ...
响应式布局及bootstrap（实例）
说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...
CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
Web前端--HTML+CSS+JavaScript响应式网络科技网页设计
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...

响应式实例-兰途科技(jq)

首页

html

Css=====>样式.css ,响应.css.

样式.css

响应.css.

JS

响应式实例-兰途科技(jq)相关推荐

最新文章

热门文章