- 1、本文档共19页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
网页样式(二);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采用外部引用文件方式;总结;本章相关学习资源
文档评论(0)