(本科)CSS3页面渲染综合实例-“儿童摄影网”ppt课件.pptx
《(本科)CSS3页面渲染综合实例-“儿童摄影网”ppt课件.pptx》由会员分享,可在线阅读,更多相关《(本科)CSS3页面渲染综合实例-“儿童摄影网”ppt课件.pptx(16页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、课程主讲人:CSS3页面渲染综合实例-“儿童摄影网”昆明理工大学计算中心昆明理工大学计算中心WebWeb设计与应用设计与应用3.14 CSS3页面渲染综合实例 -“儿童摄影网”Web设计与应用 l 认识盒子模型l 盒子相关属性l 元素的浮动和定位l 元素的类型与转换拿到效果图后的准备工作对页面进行布局,并添加CSS样式。定义基础样式效果分析p 建立站点p 切图准备工作创建网站根目录新建站点站点建立完成在根目录下新建文件step1step2step3step4准备工作建立站点 将素材图片,存储在站点中的images文件夹中。准备工作素材图片 效果分析HTML 结构分析CSS样式分析页面中的各个模
2、块居中显示,宽度为980px,因此,页面的版心为980px。另外,页面中的所有字体均为微软雅黑,背景颜色为#fdfdfd,这些可以通过CSS公共样式进行定义。“青春树儿童摄影网”首页面从上到下可以分为5个模块。 “青春树儿童摄影网”首页面从上到下可以分为5个模块。效果分析 定义基础样式/*重置浏览器的默认样式*/*margin:0; padding:0; border:0; background:none;/*全局控制*/bodyfont-family:微软雅黑;background:#fdfdfd; 制作导航及banner模块效果图如下所示: 制作最新动态模块效果图如下所示: 制作样片欣赏模块效果图如下所示: 制作页脚及悬浮框模块效果图如下所示: 1. 盒子模型是CSS网页布局的基础,建议读者认真体会。好的布局可以大大减少页面的兼容bug。2. 块元素与行内元素也是本项目的重点哦,通过本项目的学习,你是不是能够根据页面需求灵活的实现它们之间的转换呢! 3. 使用HTML、CSS制作页面时,处处可见“浮动”,DIV+“浮动”布局是不是很神奇呢。另外提醒读者孰能生巧,多多练习才能提高代码编写效率哦!【项目总结】
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 本科 CSS3 页面 渲染 综合 实例 儿童 摄影 ppt 课件
限制150内