html上下固定中间自适应div+css布局_html上下布局资源-CSDN文库

共1个文件

html：1个

3星 · 超过75%的资源需积分: 16 76 浏览量 2014-09-03 16:30:20 上传评论收藏 3KB RAR 举报

在网页设计中，HTML5引入了新的语义化标签，如`<header>`、`<footer>`、`<nav>`和`<section>`，这些标签为网页内容提供了更清晰的结构，增强了网页的可读性和可访问性。本文将详细探讨如何使用这些标签以及CSS来实现一个上下固定、中间自适应的布局。 `<header>`标签用于定义页面的头部，通常包含网站的logo、导航链接等元素。例如： ```html <header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> ``` 接着是`<nav>`标签，它用于定义导航链接区域。在这个例子中，它被包含在`<header>`内，但也可以独立使用。 `<section>`标签则用于定义页面中的独立内容块，比如文章、章节等。这可以用来组织页面的主体内容： ```html <section> <article>  </article> <article>  </article> </section> ``` `<footer>`标签用于定义页面的底部，通常包含版权信息、联系方式等： ```html <footer> <p>© 2022 网站所有权. 所有权利保留.</p> </footer> ``` 实现上下固定、中间自适应的布局，我们可以使用CSS的定位属性。对于`<header>`和`<footer>`，我们可以设置它们的`position`为`fixed`，并分别设置`top`或`bottom`属性使其固定在屏幕顶部或底部： ```css header { position: fixed; top: 0; width: 100%; /* 添加其他样式，如背景色、高度等 */ } footer { position: fixed; bottom: 0; width: 100%; /* 添加其他样式，如背景色、高度等 */ } ``` 至于中间内容的自适应布局，我们可以使用`<section>`作为主要容器，并设置`margin`来创建上下两个固定元素之间的间距，同时利用`max-width`控制内容的宽度，确保在不同屏幕尺寸下都能良好展示： ```css section { margin: 60px auto; /* 60px 是header和footer的高度 */ max-width: 1200px; /* 调整适合的宽度 */ padding: 0 20px; /* 添加内边距 */ box-sizing: border-box; /* 包括边框计算在内宽 */ } ``` 通过这种方式，我们就构建了一个符合要求的布局。`index3.html`文件可能就是实现了这个布局的示例页面，通过查看和分析它的代码，可以更深入地理解这种布局的实现细节。HTML5的新标签配合CSS的定位和流体布局技巧，能帮助我们创建出符合现代网页标准、结构清晰且响应式的页面。

资源推荐

资源详情

资源评论

收起资源包目录

html5使用header、footer、nav布局.rar （1个子文件）

index3.html 15KB

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Website Title</title> <style type="text/css"> * { margin: 0; padding: 0; } body, html { margin: 0; padding: 0 !important; padding: 124px 0 32px 0; width: 100%; height: 100%; overflow: hidden; } .main_top { background: #C9F; width: 100%; height: 124px; overflow: hidden; position: absolute; top: 0; width: 100%; } .middle { position: absolute !important; position: relative; top: 124px !important; top: 0; bottom: 32px; overflow: auto; height: auto !important; height: 100%; left: -3px; } .main { height: 100%; width: 100%; overflow-y: auto; overflow-x: auto; } .footer { background: #9CF; width: 100%; height: 32px; color: #e1efff; line-height: 32px; letter-spacing: 1px; text-align: center; clear: both; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <header class="main_top"> <div class="navbar-inner"> <div class="container-fluid">  <ul class="nav pull-right">  <li class="dropdown user"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="Theme/images/common/avatar.png" /> <span class="username">系统管理员</span> <i class="icon-angle-down"></i></a> <ul class="dropdown-menu"> <li><a href="extra_profile.html"><i class="icon-user"></i>My Profile</a></li> <li><a href="page_calendar.html"><i class="icon-calendar"></i>My Calendar</a></li> <li><a href="inbox.html"><i class="icon-envelope"></i>My Inbox(3)</a></li> <li><a href="#"><i class="icon-tasks"></i>My Tasks</a></li> <li class="divider"></li> <li><a href="extra_lock.html"><i class="icon-lock"></i>锁定屏幕</a></li> <li><a href="login.html"><i class="icon-key"></i>安全退出</a></li> </ul> </li>  </ul>  </div> </div> </header> <nav class="middle" style="text-align: center; width: 200px; float: left; overflow-y: auto;"> <ul class="page-sidebar-menu"> <li>  <div class="sidebar-toggler hidden-phone"> </div>  </li> <li class="start active "><a href="index.html"><i class="icon-home"></i><span class="title"> Dashboard</span> <span class="selected"></span></a></li> <li class=""><a href="javascript:;"><i class="icon-cogs"></i><span class="title">Layouts</span> <span class="arrow "></span></a> <ul class="sub-menu"> <li><a href="layout_horizontal_sidebar_menu.html">Horzontal & Sidebar Menu</a> </li> <li><a href="layout_horizontal_menu1.html">Horzontal Menu 1</a> </li> <li><a href="layout_horizontal_menu2.html">Horzontal Menu 2</a> </li> <li><a href="layout_promo.html">Promo Page</a> </li> <li><a href="layout_email.html">Email Templates</a> </li> <li><a href="layout_ajax.html">Content Loading via Ajax</a> </li> <li><a href="layout_sidebar_closed.html">Sidebar Closed Page</a> </li> <li><a href="layout_blank_page.html">Blank Page</a> </li> <li><a href="layout_boxed_page.html">Boxed Page</a> </li> <li><a href="layout_boxed_not_responsive.html">Non-Responsive Boxed Layout</a> </li> </ul> </li> <li class=""><a href="javascript:;"><i class="icon-bookmark-empty"></i><span class="title"> UI Features</span> <span class="arrow "></span></a> <ul class="sub-menu"> <li><a href="ui_general.html">General</a> </li> <li><a href="ui_buttons.html">Buttons</a> </li> <li><a href="ui_modals.html">Enhanced Modals</a> </li> <li><a href="ui_tabs_accordions.html">Tabs & Accordions</a> </li> <li><a href="ui_jqueryui.html">jQuery UI Components</a> </li> <li><a href="ui_sliders.html">Sliders</a> </li> <li><a href="ui_tiles.html">Tiles</a> </li> <li><a href="ui_typography.html">Typography</a> </li> <li><a href="ui_tree.html">Tree View</a> </li> <li><a href="ui_nestable.html">Nestable List</a> </li> </ul> </li> <li class=""><a href="javascript:;"><i class="icon-table"></i><span class="title">Form Stuff</span> <span class="arrow "></span></a> <ul class="sub-menu"> <li><a href="form_layout.html">Form Layouts</a> </li> <li><a href="form_samples.html">Advance Form Samples</a> </li> <li><a href="form_component.html">Form Components</a> </li> <li><a href="form_wizard.html">Form Wizard</a> </li> <li><a href="form_validation.html">Form Validation</a> </li> <li><a href="form_fileupload.html">Multiple File Upload</a> </li> <li><a href="form_dropzone.html">Dropzone File Upload</a> </li> </ul> </li> <li class=""><a href="javascript:;"><i class="icon-briefcase"></i><span class="title"> Pages</span> <span class="arrow "></span></a> <ul class="sub-menu"> <li><a href="page_timeline.html"><i class="icon-time"></i>Timeline</a> </li> <li><a href="page_coming_soon.html"><i class="icon-cogs"></i>Coming Soon</a> </li> <li><a href="page_blog.html"><i class="icon-comments"></i>Blog</a> </li> <li><a href="page_blog_item.html"><i class="icon-font"></i>Blog Post</a> </li> <li><a href="page_news.html"><i class="icon-coffee"></i>News</a> </li> <li><a href="page_news_item.html"><i class="icon-bell"></i>News View</a> </li> <li><a href="page_about.html"><i class="icon-group"></i>About Us</a> </li> <li><a href="page_contact.html"><i class="icon-envelope-alt"></i>Contact Us</a> </li> <li><a href="page_calendar.html"><i class="icon-calendar"></i>Calendar</a> </li> </ul> </li> <li class=""><a href="javascript:;"><i class="icon-gift"></i><span class="title">Extra</span> <span class="arrow "></span></a> <ul class="sub-menu"> <li><a href="extra_profile.html">User Profile</a> </li>

评论收藏

内容反馈