【免费】博物馆Demo.rar资源-CSDN文库

共32个文件

jpg：13个

js：6个

css：4个

需积分: 0 34 浏览量 2023-02-28 11:03:35 上传评论收藏 4.57MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

博物馆Demo.rar （32个子文件）

博物馆Demo

bootstrap.js 54KB

bootstrap.min.js 28KB

jquery-1.11.1.js 276KB

jquery-1.11.1.min.map 138KB

respond.min.js 4KB

html5shiv.js 2KB

jquery-1.11.1.min.js 94KB

css

bootstrap.min.css 98KB

bootstrap-theme.css.map 37KB

bootstrap-theme.css 15KB

bootstrap.css.map 240KB

bootstrap.css 118KB

bootstrap-theme.min.css 13KB

index.html 15KB

images

firefox-logo.jpg 44KB

safari-logo-small.jpg 10KB

chrome-logo.jpg 25KB

chrome-logo-small.jpg 7KB

safari-big.jpg 85KB

firefox-logo-small.jpg 10KB

opera-logo.jpg 30KB

ie-logo.jpg 27KB

logo.psd 3.49MB

ie-big.jpg 32KB

safari-logo.jpg 56KB

firefox-big.jpg 238KB

opera-big.jpg 889KB

chrome-big.jpg 57KB

fonts

glyphicons-halflings-regular.svg 61KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>现代浏览器博物馆</title> <link href="css/bootstrap.min.css" rel="stylesheet">  <style> body { padding-top: 50px; } /* 轮播广告 */ .carousel { height: 500px; margin-bottom: 60px; } .carousel .item { height: 500px; background-color: #000; } .carousel .item img { width: 100%; } .carousel-caption p { margin-bottom: 20px; font-size: 20px; line-height: 1.8; } /* 简介 */ .summary { padding-right: 15px; padding-left: 15px; } .summary .col-md-4 { margin-bottom: 20px; text-align: center; } /* 特性 */ .feature-divider { margin: 40px 0; } .feature { padding: 30px 0; } .feature-heading { font-size: 50px; color: #2a6496; } .feature-heading .text-muted { font-size: 28px; } /* 响应式布局 */ @media (max-width: 768px) { .summary { padding-right: 3px; padding-left: 3px; } .carousel { height: 300px; margin-bottom: 30px; } .carousel .item { height: 300px; } .carousel img { min-height: 300px; } .carousel-caption p { font-size: 16px; line-height: 1.4; } .feature-heading { font-size: 34px; } .feature-heading .text-muted { font-size: 22px; } } @media (min-width: 992px) { .feature-heading { margin-top: 120px; } } </style> </head> <body>  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">现代浏览器博物馆</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#ad-carousel">综述</a></li> <li><a href="#summary-container">简述</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li> <li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li> <li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li> <li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li> <li><a href="#feature-tab" data-tab="tab-ie">IE</a></li> </ul> </li> <li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li> </ul> </div> </div> </div>  <div id="ad-carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#ad-carousel" data-slide-to="0" class="active"></li> <li data-target="#ad-carousel" data-slide-to="1"></li> <li data-target="#ad-carousel" data-slide-to="2"></li> <li data-target="#ad-carousel" data-slide-to="3"></li> <li data-target="#ad-carousel" data-slide-to="4"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/chrome-big.jpg" alt="1 slide"> <div class="container"> <div class="carousel-caption"> <h1>Chrome</h1> <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/firefox-big.jpg" alt="2 slide"> <div class="container"> <div class="carousel-caption"> <h1>Firefox</h1> <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/safari-big.jpg" alt="3 slide"> <div class="container"> <div class="carousel-caption"> <h1>Safari</h1> <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/opera-big.jpg" alt="4 slide"> <div class="container"> <div class="carousel-caption"> <h1>Opera</h1> <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="images/ie-big.jpg" alt="5 slide"> <div class="container"> <div class="carousel-caption"> <h1>IE</h1> <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>  <div class="container summary">  <div class="row" id="summary-container"> <div class="col-md-4"> <img class="img-circle"

评论收藏

内容反馈