绿色精致导航响应式布局模板_绿色精致导航斜纹背景漂亮宽屏展示精品html5响应式博客整站.rar资源-CSDN文库

共47个文件

jpg：16个

css：13个

png：9个

需积分: 5 200 浏览量 2023-09-12 08:45:34 上传评论收藏 616KB RAR 举报

标题中的“绿色精致导航响应式布局模板”是指一个专门设计的网页模板，它采用了绿色作为主色调，并且在设计上注重细节和精致感。响应式布局是这个模板的关键特性，意味着它可以自动适应不同设备的屏幕尺寸，无论是桌面电脑、平板还是手机，都能提供良好的浏览体验。这种布局方式利用了HTML5的媒体查询（Media Queries）和其他相关技术，以确保在不同分辨率下内容的正确显示。描述中提到的“绿色精致导航斜纹背景漂亮宽屏展示”，揭示了模板的视觉设计元素。绿色通常给人带来清新、自然的感觉，而斜纹背景增加了视觉上的层次感和动感，使整体设计更具吸引力。宽屏展示则意味着该模板适合大屏幕设备，能够充分利用屏幕空间展示内容。标签部分为空，可能是因为原始信息不完整或者没有特别指定的标签。压缩包内的文件名称列表中，我们可以看到一系列CSS文件，这些文件用于定义网页的样式和布局： 1. `core.css` 和 `core-noscript.css`：核心样式表，可能包含了通用的样式规则，`noscript.css` 版本可能是为了处理用户禁用JavaScript时的样式备份。 2. `style.css`：全局样式表，可能包含整个网站的基础样式。 3. `style-mobile.css` 和 `style-desktop.css`：分别针对移动设备和桌面设备的特定样式，实现了响应式设计的核心部分。 4. `core-desktop.css`：可能是桌面设备的增强样式，进一步定制桌面端的显示效果。 5. `mobileUI-beveled.css` 和 `mobileUI-flat.css`：移动设备用户界面的两种不同风格，"beveled"可能表示有斜角或立体感的设计，而"flat"则可能代表扁平化设计。 6. `style-1000px.css`：可能是一个断点样式表，用于在屏幕宽度为1000px时应用的特定样式。这些CSS文件的分离和组织，展示了良好的代码结构和模块化，便于维护和更新。在实际开发中，开发者会根据设备特性选择加载合适的CSS，以实现最佳的用户体验。总结来说，这个模板利用HTML5的响应式设计技术，提供了美观的绿色导航和宽屏显示，适应各种设备。通过分离的CSS文件，可以灵活地控制不同设备和屏幕尺寸下的页面样式，保证了在任何环境下都能提供一致的视觉效果和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

绿色精致导航响应式布局模板_绿色精致导航斜纹背景漂亮宽屏展示精品html5响应式博客整站.rar （47个子文件）

pics08.jpg 3KB

style.css 3KB

main-content-bg.jpg 4KB

pics04.jpg 21KB

pics09.jpg 4KB

header-wrapper-bg.jpg 2KB

pics07.jpg 3KB

pics11.png 52KB

link-style1-divider.png 148B

mobileUI-flat.css 1013B

menu-bg.png 982B

footer-wrapper-bg.jpg 3KB

twocolumn1.html 8KB

core.css 6KB

style-1000px.css 1KB

menu-hover-bg.png 486B

core-noscript.css 3KB

core-1000px.css 415B

twocolumn2.html 9KB

menu-divider-bg.png 393B

arrow-right.png 1KB

threecolumn.html 6KB

style-desktop.css 3KB

pics11.jpg 25KB

dotted-mobile-link.png 2KB

style-mobile.css 3KB

pics12.jpg 27KB

html5shiv.js 2KB

pics05.jpg 3KB

init.js 17KB

index.html 7KB

onecolumn.html 11KB

pics01.jpg 94KB

pics02.jpg 48KB

pics06.jpg 2KB

core-1200px.css 415B

arrow-left.png 1KB

spacer.gif 43B

jquery.js 91KB

core-fluid.css 394B

pics03.jpg 65KB

core-mobile.css 1KB

mobileUI-beveled.css 2KB

header-bg.jpg 200KB

pics10.jpg 5KB

divider1-bg.png 785B

core-desktop.css 2KB

<!DOCTYPE HTML>  <html> <head> <title>Elemental collect from www.moobnn.com</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <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"></script>  </head> <body> <div id="header-wrapper"> <div id="header-wrapper2"> <header id="header" class="5grid-layout"> <div class="row"> <div class="12u" id="logo">  <h1><a href="#" class="mobileUI-site-name">Elemental</a></h1> <p>collect from www.moobnn.com</p> </div> </div> <div class="row"> <div class="12u" id="menu"> <nav class="mobileUI-site-nav"> <ul> <li class="current_page_item"><a href="index.html">Homepage</a></li> <li><a href="threecolumn.html">Three Column</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> <div id="page-wrapper"> <div class="12u"> <div class="5grid-layout"> <div class="row"> <section> <h2>One Column</h2> <p>Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed blandit. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. </p> <p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed blandit. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse platea dictumst. Nullam id ante eget dui vulputate aliquam. Pellentesque erat erat, tincidunt in, eleifend accumsan, malesuada eget, augue. Suspendisse sit amet tellus in eros bibendum condimentum. Vestibulum suscipit volutpat nulla. Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. </p> <p>Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed blandit. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. </p> <p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. Vestibulum sem magna, elementum ut, vestibulum eu, facilisis quis, arcu. Mauris a dolor. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed blandit. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent tac

评论收藏

内容反馈