241套-响应式HTML网站源码合集-解压即用.zip_响应式布局期末资源-CSDN文库

共2000个文件

js：608个

css：516个

html：269个

版权申诉

HTML

JavaScript

源码合集

web前端

94 浏览量 2024-04-09 15:10:10 上传评论收藏 199.72MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

241套-响应式HTML网站源码合集-解压即用.zip （2000个子文件）

main.css 182KB

bootstrap.min.css 141KB

hover.css 123KB

bootstrap.min.css 118KB

material-design-iconic-font.css 88KB

bootstrap.min.css 81KB

main.css 79KB

main.css 77KB

style.css 75KB

main.css 73KB

main.css 72KB

material-design-iconic-font.min.css 69KB

main.css 69KB

main.css 67KB

main.css 63KB

style.css 61KB

main.css 59KB

j-forms.css 54KB

fontawesome-all.css 43KB

fontawesome-all.css 42KB

style.css 41KB

font-awesome.css 37KB

style.css 35KB

fontawesome-all.min.css 35KB

font-awesome.css 34KB

jquery-ui.css 32KB

main.css 32KB

jquery-ui.css 32KB

jquery-ui.css 31KB

font-awesome.min.css 30KB

共 2000 条

<!DOCTYPE HTML>  <html> <head> <title>Story by HTML5 UP</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="assets/css/main.css" /> </head> <body>  <div id="wrapper" class="divided">  <section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right"> <div class="content"> <h1>Story</h1> <p class="major">A (modular, highly tweakable) responsive one-page template designed by <a href="https://html5up.net">HTML5 UP</a> and released for free under the <a href="https://html5up.net/license">Creative Commons</a>.</p> <p>This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-banner">details</a>).</p> <ul class="actions vertical"> <li><a href="#first" class="button big wide smooth-scroll-middle">Get Started</a></li> </ul> </div> <div class="image"> <img src="images/banner.jpg" alt="" /> </div> </section>  <section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in" id="first"> <div class="content"> <h2>Spotlight</h2> <p>This is a <strong>Spotlight</strong> element, and it's generally used – as its name implies – to spotlight a particular feature, subject, or pretty much whatever. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).</p> <ul class="actions vertical"> <li><a href="#" class="button">Learn More</a></li> </ul> </div> <div class="image"> <img src="images/spotlight01.jpg" alt="" /> </div> </section>  <section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in"> <div class="content"> <h2>Spotlight</h2> <p>This is also a <strong>Spotlight</strong> element, and it's here because this demo would look a bit empty with just one spotlight. Like all spotlights, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).</p> <ul class="actions vertical"> <li><a href="#" class="button">Learn More</a></li> </ul> </div> <div class="image"> <img src="images/spotlight02.jpg" alt="" /> </div> </section>  <section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in"> <div class="content"> <h2>Spotlight</h2> <p>And yes, this is another <strong>Spotlight</strong> element, and it's also here because I need to fill a bit of space. Naturally, like any other spotlight, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).</p> <ul class="actions vertical"> <li><a href="#" class="button">Learn More</a></li> </ul> </div> <div class="image"> <img src="images/spotlight03.jpg" alt="" /> </div> </section>  <section class="wrapper style1 align-center"> <div class="inner"> <h2>Gallery</h2> <p>This is a <strong>Gallery</strong> element. It can behave as a lightbox (when given the <code>lightbox</code> class), and you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-gallery">details</a>).</p> </div>  <div class="gallery style2 medium lightbox onscroll-fade-in"> <article> <a href="images/gallery/fulls/01.jpg" class="image"> <img src="images/gallery/thumbs/01.jpg" alt="" /> </a> <div class="caption"> <h3>Title</h3> <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/02.jpg" class="image"> <img src="images/gallery/thumbs/02.jpg" alt="" /> </a> <div class="caption"> <h3>Title</h3> <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/03.jpg" class="image"> <img src="images/gallery/thumbs/03.jpg" alt="" /> </a> <div class="caption"> <h3>Title</h3> <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/04.jpg" class="image"> <img src="images/gallery/thumbs/04.jpg" alt="" /> </a> <div class="caption"> <h3>Title</h3> <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/05.jpg" class="image"> <img src="images/gallery/thumbs/05.jpg" alt="" /> </a> <div class="caption"> <h3>Title</h3> <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/06.jpg" class="image"> <img src="images/gallery/thumbs/06.jpg" alt="" /> </a> <div class="caption"> <h3>Title</h3> <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/07.jpg" class="image"> <img src="images/gallery/thumbs/07.jpg" alt="" /> </a> <div class="caption"> <h3>Title</h3> <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article>

评论收藏

内容反馈

版权申诉