div+css标准布局实例:侧边栏与web标准原则
需积分: 9 114 浏览量
更新于2024-08-18
收藏 1.48MB PPT 举报
本文档详细介绍了如何使用HTML和CSS进行网页标准布局,特别是针对侧边栏的构建。在页面设计中,侧边栏通常用于放置导航、广告或其他辅助信息,它与主体内容并排呈现。作者强调了使用HTML标签的合理性,指出不应将所有块级元素都用div标记,而应充分利用每个标签的特性,遵循Web标准设计原则。
首先,文档指导读者通过div+css实现侧边栏的通用布局,使用`<div class="side_box">`来包裹侧边栏标题和内容区域,标题使用`<h2>`和`<strong>`标签来分别表示层级和强调文本。这种设计减少了不必要的样式定义,提高了代码效率。
其次,作者提到使用xhtml+css的重要性,强调div只是xhtml的一部分,过度依赖div可能会导致div的滥用。正确的做法是根据元素的语义来选择合适的标签,如用`<header>`, `<nav>`, `<main>`, `<aside>`等标签,以便更好地传达页面结构信息。
在搭建框架阶段,作者展示了如何在Dreamweaver中创建HTML文件,并添加header、nav、主体内容(包括主要区域和侧边栏)以及footer的id为识别的div元素。为了实现整个页面的居中和整体布局,引入了一个名为`<div id="container">`的父容器,将所有子元素包含其中,通过设置其宽度和居中属性,简化了后续的样式管理。
最后,文章可能还会涵盖其他布局技巧,如切图、相对路径的使用,以及底部和细节的调整,这些都是网页布局过程中不可或缺的步骤。整个教程旨在帮助读者掌握网页设计的基础布局技巧,确保遵循良好的编程习惯和网页标准,提高网页的可维护性和可读性。
2013-11-07 上传
2011-08-24 上传
2023-06-07 上传
2023-09-04 上传
2023-05-24 上传
2023-05-12 上传
2023-08-13 上传
2023-03-26 上传
2023-05-11 上传
![](https://profile-avatar.csdnimg.cn/6e17a45f5c5e4d00a06ce6e020f0d265_weixin_42188512.jpg!1)
黄宇韬
- 粉丝: 20
- 资源: 2万+
最新资源
- 解决Eclipse配置与导入Java工程常见问题
- 真空发生器:工作原理与抽吸性能分析
- 爱立信RBS6201开站流程详解
- 电脑开机声音解析:故障诊断指南
- JAVA实现贪吃蛇游戏
- 模糊神经网络实现与自学习能力探索
- PID型模糊神经网络控制器设计与学习算法
- 模糊神经网络在自适应PID控制器中的应用
- C++实现的学生成绩管理系统设计
- 802.1D STP 实现与优化:二层交换机中的生成树协议
- 解决Windows无法完成SD卡格式化的九种方法
- 软件测试方法:Beta与Alpha测试详解
- 软件测试周期详解:从需求分析到维护测试
- CMMI模型详解:软件企业能力提升的关键
- 移动Web开发框架选择:jQueryMobile、jQTouch、SenchaTouch对比
- Java程序设计试题与复习指南