现代殡葬技术与管理专业群课程主题百分比布局.pptx

下载文档

0
0
约小于1千字
约 7页
2024-10-19 发布于江苏
举报
版权申诉
保障服务

现代殡葬技术与管理专业群课程主题百分比布局.pptx

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

网页设计客户端技术课程现代殡葬技术与管理专业群教学资源库主讲人：严志课程主题：百分比布局

百分比布局01一响应式布局实现

掌握百分比布局的使用，能够实现灵活的响应式网站布局一响应式布局实现百分比布局01百分比布局也成为流式布局，也称非固定像素布局。通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。注意事项：需要定义页面的最大和最小支持宽度。body{??margin:0auto;??min-width:320px;??max-width:540px;??....}

一响应式布局实现百分比布局01（01）百分比布局效果在chapter06目录下新建demo6-2.html文件，编写HTML代码。bodyheader头部/headernav导航/navsectionaside侧边栏/asidearticle文章/article/sectionfooter页脚/footer/body

一响应式布局实现百分比布局01style?type=text/css??*{box-sizing:?border-box;}??body*?{????width:?95%;????height:?auto;????margin:?0?auto;????margin-top:?10px;????border:?1px?solid?#000;????padding:?5px;??}/*省略部分代码*/??/style（02）编写CSS样式在demo6-2.html文件，编写CSS样式。

一响应式布局实现百分比布局01（03）运行程序在浏览器中查看demo6-2.html文件运行效果。

感谢聆听，批评指导