CSS实例:设置nav高度与背景,实现网页布局
需积分: 10 8 浏览量
更新于2024-08-14
收藏 1.33MB PPT 举报
本资源是一份详细的HTML与CSS网页标准布局实例教程,主要讲解如何使用div+css来构建一个具有层次感和响应式的网页布局。首先,作者介绍了页面布局的基本步骤,包括:
1. **设置导航栏样式**:通过CSS定义`#nav`的样式,设置了高度为66px,背景图片为`nav_bg.gif`,并设置了底部间距。当鼠标悬停时,导航链接会改变背景图片的位置,以实现动态效果。
2. **一级菜单和二级菜单的样式**:`.nav_main`用于一级菜单,设置高度为36px,隐藏溢出内容,每个列表项`li`使用`float:left`使其水平排列。一级菜单链接`a`和子菜单链接`a`都有各自的样式,包括字体大小、颜色、内边距和背景图片。当鼠标悬停在一级菜单上时,链接和子链接的背景图片也会相应更新。
3. **二级菜单`nav_son`**:二级菜单高度为30px,同样采用浮动布局,子链接宽度为78px,文本居中,悬停时也有背景图片的变化。
4. **HTML结构搭建**:使用`<div>`标签创建了页面的基本结构,如`header`、`nav`、`maincontent`(包含`main`和`side`两个子元素)和`footer`。通过添加`id`属性,便于CSS选择器定位元素。
5. **使用父容器`container`**:为了简化布局,作者引入了一个`container`父元素,将所有其他`div`元素包裹其中。这样,只需要设置`container`的宽度和居中,就可以自动使得内部的所有子元素保持居中,并且调整整体布局的对齐。
6. **相对路径和根目录路径**:在CSS中使用相对路径引用背景图片,如`../images/nav_bg.gif`,这是相对于当前HTML文件的位置来查找图片资源的。
通过这个实例,学习者可以了解如何使用CSS来控制HTML元素的布局和样式,掌握div+css标准布局的核心原理和实践技巧。同时,它也强调了结构分析、设计模式以及灵活运用CSS选择器的重要性。
2013-08-30 上传
2008-08-04 上传
2010-12-21 上传
点击了解资源详情
点击了解资源详情
2018-10-30 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
雪蔻
- 粉丝: 26
- 资源: 2万+
最新资源
- ES管理利器:ES Head工具详解
- Layui前端UI框架压缩包:轻量级的Web界面构建利器
- WPF 字体布局问题解决方法与应用案例
- 响应式网页布局教程:CSS实现全平台适配
- Windows平台Elasticsearch 8.10.2版发布
- ICEY开源小程序:定时显示极限值提醒
- MATLAB条形图绘制指南:从入门到进阶技巧全解析
- WPF实现任务管理器进程分组逻辑教程解析
- C#编程实现显卡硬件信息的获取方法
- 前端世界核心-HTML+CSS+JS团队服务网页模板开发
- 精选SQL面试题大汇总
- Nacos Server 1.2.1在Linux系统的安装包介绍
- 易语言MySQL支持库3.0#0版全新升级与使用指南
- 快乐足球响应式网页模板:前端开发全技能秘籍
- OpenEuler4.19内核发布:国产操作系统的里程碑
- Boyue Zheng的LeetCode Python解答集