黑色导航简洁风格HTML5模板下载_黑色导航宽屏html5css3大气线条_html网站模板

共40个文件

css：15个

jpg：7个

html：6个

网站模板

88 浏览量 2023-08-06 12:04:54 上传评论收藏 210KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

黑色导航简洁风格HTML5模板下载_黑色导航宽屏 html5 css3 大气线条_html网站模板_网页源码移动.rar （40个子文件）

黑色导航简洁风格HTML5模板下载_黑色导航宽屏 html5 css3 大气线条

html5-arcana

twocolumn1.html 9KB

twocolumn2.html 9KB

threecolumn1.html 9KB

css

style.css 4KB

5grid

mobileUI-flat.css 2KB

core.css 6KB

core-noscript.css 3KB

core-1000px.css 415B

mobileUI-modern.css 4KB

html5shiv.js 2KB

init.js 23KB

core-1200px.css 415B

jquery.js 91KB

core-fluid.css 394B

core-mobile.css 1KB

mobileUI-beveled.css 4KB

core-desktop.css 2KB

style-ie9.css 235B

style-1000px.css 836B

style-desktop.css 4KB

style-mobile.css 4KB

images

button.svg 425B

bg2.png 155B

nav-arrow.png 214B

bg3.png 4KB

header.png 16KB

bg1.png 3KB

mobileUI-site-nav-opener-bg.svg 555B

button-hover.svg 425B

button-active.svg 425B

index.html 10KB

onecolumn.html 8KB

threecolumn2.html 9KB

images

pic5.jpg 8KB

pic6.jpg 7KB

banner.jpg 68KB

pic4.jpg 6KB

pic2.jpg 8KB

pic3.jpg 8KB

pic1.jpg 9KB

<!DOCTYPE HTML>  <html> <head> <title>Arcana: A Responsive HTML5 Site Template (Homepage)</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700" rel="stylesheet" /> <noscript><link rel="stylesheet" href="css/5grid/core.css" /><link rel="stylesheet" href="css/5grid/core-desktop.css" /><link rel="stylesheet" href="css/5grid/core-1200px.css" /><link rel="stylesheet" href="css/5grid/core-noscript.css" /><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/style-desktop.css" /></noscript> <script src="css/5grid/jquery.js"></script> <script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarHeight=60&mobileUI.openerWidth=52"></script>  </head> <body>  <div id="header-wrapper"> <header class="5grid-layout" id="site-header"> <div class="row"> <div class="12u"> <div id="logo"> <h1 class="mobileUI-site-name">Arcana</h1> </div> <nav class="mobileUI-site-nav" id="site-nav"> <ul> <li class="current_page_item"><a href="index.html">Homepage</a></li> <li><a href="threecolumn1.html">Three Column #1</a></li> <li><a href="threecolumn2.html">Three Column #2</a></li> <li><a href="twocolumn1.html">Two Column #1</a></li> <li><a href="twocolumn2.html">Two Column #2</a></li> <li><a href="onecolumn.html">One Column</a></li> </ul> </nav> </div> </div> </header> </div>  <div id="main-wrapper"> <div class="5grid-layout">  <div class="row"> <div class="12u"> <div id="banner"> <a href="#"><img src="images/banner.jpg" alt="" /></a> <div class="caption"> <span><strong>Arcana</strong>: A responsive HTML5 site template </span> <a href="#" class="button">Find Out More!</a> </div> </div> </div> </div>  <div class="row"> <div class="3u"> <section class="first"> <h2>Welcome to Arcana</h2> <p>This is <strong>Arcana</strong>, a fully responsive HTML5 site template designed by and released for free by It features a simple yet elegant design, solid HTML5 and CSS3 code, and full responsive support for desktop, tablet, and mobile displays.</p> </section> </div> <div class="3u"> <section> <h2>Responsive? Really?</h2> <p>Yup. This site template is fully responsive, meaning it'll look great on desktop (widescreen and standard), tablet and mobile device displays. Try it for yourself: simply narrow down your browser window and hit "reload" to see how stuff changes.</p> </section> </div> <div class="3u"> <section> <h2>The CCA 3.0 License</h2> <p><strong>Arcana</strong> is released for free under the Creative Commons Attribution 3.0 license, which means you can use it for pretty much any personal or commercial use. The catch? Just give us credit wherever you use it (oh, and tell your friends about us, though that's not in the license :)</p> </section> </div> <div class="3u"> <section class="last"> <h2>About HTML5 Up!</h2> <p>HTML5 Up! is a side project by AJ (aka n33) to test and improve 5grid, a responsive HTML5/CSS3 framework. You can find more cool designs at <a href="http://www.moobnn.com/">网站模板</a> or follow us on Twitter (n33co) for new release announcements and other cool stuff. </section> </div> </div>  <div class="row"> <div class="12u"> <div class="divider divider-top"></div> </div> </div>  <div class="row"> <div class="12u"> <div class="highlight-box"> <h2>Amet lorem varius tempus consequat lorem?</h2> <span>(tempus aliquam lorem blandit etiam suspendisse dapibus)</span> </div> </div> </div>  <div class="row"> <div class="12u"> <div class="divider divider-bottom"></div> </div> </div>  <div class="row"> <div class="12u"> <section class="thumbnails first last"> <div class="5grid"> <div class="row"> <div class="4u"> <div class="thumbnail first"> <a href="#"><img src="images/pic1.jpg" alt="" /></a> <blockquote>Duis neque nisi, dapibus sed mattis et quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspendapibus sed mattis quis.</blockquote> <cite><strong>Jane Doe</strong> Lorem Ipsum Dolore</cite> </div> </div> <div class="4u"> <div class="thumbnail"> <a href="#"><img src="images/pic2.jpg" alt="" /></a> <blockquote>Duis neque nisi, dapibus sed mattis et quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspenddapibus sed mattis quis.</blockquote> <cite><strong>John Doe</strong> Lorem Ipsum Dolore</cite> </div> </div> <div class="4u"> <div class="thumbnail"> <a href="#"><img src="images/pic3.jpg" alt="" /></a> <blockquote>Duis neque nisi, dapibus sed mattis et quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspenddapibus sed mattis quis.</blockquote> <cite><strong>Jane Doe</strong> Lorem Ipsum Dolore</cite> </div> </div> </div> <div class="row"> <div class="12u"> <div class="divider"></div> </div> </div> <div class="row"> <div class="4u"> <div class="thumbnail"> <a href="#"><img src="images/pic4.jpg" alt="" /></a> <blockquote>Duis neque nisi, dapibus sed mattis et quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspenddapibus sed mattis quis.</blockquote> <cite><strong>John Doe</strong> Lorem Ipsum Dolore</cite> </div> </div> <div class="4u"> <div class="thumbnail"> <a href="#"><img src="images/pic5.jpg" alt="" /></a> <blockquote>Duis neque nisi, dapibus sed mattis et quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspenddapibus sed mattis quis.</blockquote> <cite><strong>Jane Doe</strong> Lorem Ipsum Dolore</cite> </div> </div> <div class="4u"> <div class="thumbnail last"> <a href="#"><img src="images/pic6.jpg" alt="" /></a> <blockquote>Duis neque nisi, dapibus sed mattis et quis, rutrum accumsan sed. Suspendisse eu varius nibh. Suspenddapibus sed mattis quis.</blockquote> <cite><strong>John Doe</strong> Lorem Ipsum Dolore</cite> </div> </div> </div> </div> </section> </div> </div>  <div class="row"> <div class="12u"> <div class="divider divider-top"></div> </div> </div>  <div class="row"> <div class="12u"> <div class="cta-box"> <span>Amet lorem varius tempus consequat lorem?</span>

评论收藏

内容反馈