第3课javascript语法一01授课1.网页二.pptx

网页样式（二）;CSS的引入方式有哪些？ CSS的浮动方式有哪些？定位方式呢？ ;本课任务;学完本次课程后，你能够： 掌握如何进行网页布局 了解网页布局的一些原则和注意细节 ;如何进行网页布局;div标签“干净”，网页更小，打开更快 结构清晰，便于维护，利于SEO div标签更灵活，更好控制页面元素 样式与结构相分离，更好的结构重组 表现与内容相分离，利于分工协作;如何进行DIV+CSS网页布局;当当网首页 分为： 头部 顶部会员信息 LOGO 导航 … 主体部分 左中右三栏 …. 脚部 快速链接栏 版权信息;构造网页结构 table表格布局的方式 一列三行 DIV+CSS布局（推荐） 三个DIV容器 ;自动网页居中代码;使块元素水平并排显示;分别实现每个区域的内容 重复对大区块下进行切分布局 浮动布局 自动居中布局 定位布局 相对定位属性和绝对定位属性相结合 确定采用适合的HTML标签 遵循语义性标签优先原则 结构性容器一般采用DIV标签 小图标、小部件一般采用内联元素SPAN标签 列表形式的内容一般采用UL、OL标签 表单、表格标签元素有针对性使用 合理运用IMG标签或背景图片 ;对结构细节进行完善 采用图片处理工具（如Photoshop）确定元素的大小和位置 利用盒子模型调整元素之间的位置，精确到1个像素 原则上是与UI效果图一致 对内容有预判处理 内容超出范围的自动隐藏或换行 图片大小或无图片情况处理 尽量采用自动适应的方式处理 ;对制作的网页进行优化处理 多采用类选择器方式，减少CSS代码 压缩CSS文件代码，减小CSS文件大小 减少图片的请求 减少外部文件的引用 ;需求说明 装饰网页的头部导航部分 要求： 采用DIV+CSS方式布局 CSS采用外部引用文件方式;需求说明 装饰网页的头部有哪些信誉好的足球投注网站部分 要求： 采用DIV+CSS方式布局 CSS采用外部引用文件方式;总结;本章相关学习资源