欢迎来到淘文阁 - 分享文档赚钱的网站! | 帮助中心 好文档才是您的得力助手!
淘文阁 - 分享文档赚钱的网站
全部分类
  • 研究报告>
  • 管理文献>
  • 标准材料>
  • 技术资料>
  • 教育专区>
  • 应用文书>
  • 生活休闲>
  • 考试试题>
  • pptx模板>
  • 工商注册>
  • 期刊短文>
  • 图片设计>
  • ImageVerifierCode 换一换

    中职 网页设计与制作案例教程第9章 .pptx

    • 资源ID:90570629       资源大小:3.44MB        全文页数:30页
    • 资源格式: PPTX        下载积分:20金币
    快捷下载 游客一键下载
    会员登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录   QQ登录  
    二维码
    微信扫一扫登录
    下载资源需要20金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    中职 网页设计与制作案例教程第9章 .pptx

    中职 网页设计与制作案例教程第9章 工信版第9 章 盒子模型WEB39.1 基础项目:根据布局图创建简单的盒模型页面9.2 知识库:盒子模型的理解与应用9.3 拓展项目:使用盒子模型创建网页布局目录WEB49.1 基础项目:根据布局图创建简单的盒模型页面5(1)掌握盒子模型的基本概念。(2)能够根据结构图或效果图建立盒子模型。(3)能够计算每个元素所占的宽度和高度。知识技能目标9.1 基础项目:根据布局图创建简单的盒模型页面WEB6内边距p adding内容cont ent边框bor der标准W3C 盒子模型9.2 知识库:盒子模型的理解与应用外边距mar ginWEB79.2.1 盒子模型的概念9.2.1 盒子模型的概念一个标准的W3C 盒子模型由cont ent、p adding、bor der和mar gin 这4 个属性组成。content(内容)盒子的内容,显示文本和图像padding(内边距)内容与边框之间的距离。会受到框中填充的背景 颜色影响。margin(外边距)盒子与其它盒子间的距离。margin 是完全透明的,没有背景色。border(边框)盒子的边框,它具有border-style、border-width、border-color 属性。边框是受到盒子的背景颜色影响的。9.2.1 盒子模型的概念在 CSS 的 标 准 盒 子 模 型 中,width 和 height 指 的 是 内 容 区 域(cont ent)的 宽 度 和 高 度,不 是 盒 子 的 实 际 大 小。增 加 内 边距、边 框 和 外 边 距 不 会 影 响 内 容 区 域 的 尺 寸,但 是 会 增 加 元 素框的总尺寸。注意:IE 的盒子模型与标准的W3C 盒子模型有区别,IE 的盒子模型中,width 和height 指的是内容区域+border+padding 的宽度和高度。在盒模型中,外边距可以是负值,而且在很多情况下都要使用负值的外边距。9.2.2 盒子模型的计算在标准的W3C 盒子模型中:元素框的总宽度=元素的width+p adding 的左右边距的值+mar gin 的左右边距的值+bor der 的左右宽度;元素框的总高度=元素的height+p adding 的上下边距的值+mar gin 的上下边距的值 bor der 的上下高度。9.2.2 盒子模型的计算width:250p x;height:300p x;p adding:10p x;mar gin:10p x;bor der:5p xsolidgray;请按照W3C 标准计算一下这个元素实际占用的空间9.2.2 盒子模型的计算算一下,以下两个盒子实际占用的宽度是多少(默认外边距为0)?.box1 width:100px;height:100px;padding:100px;border:1px solid red;.box2 width:250px;height:250px;padding:25px;border:1px solid red;9.2.2 盒子模型的计算在实际开发中,如何解决IE 的盒子模型width/height 计算方法和标准的W3C 盒子模型width 计算方法不同的问题?统一布局的烦恼9.2.3bo x-sizing 属性介绍bo x-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。语法格式:bo x-sizing:cont ent-bo x|bor der-bo x|inherit;属性值 描述c on t en t-bo x默认值。这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。bor der-bo x为元素设定的宽度和高度决定了元素的边框盒。就 是 说,为 元 素 指 定 的 任 何 内 边 距 和 边 框 都 将 在 已 设 定 的 宽 度 和高 度 内 进 行 绘 制。通 过 从 已 设 定 的 宽 度 和 高 度 分 别 减 去 边 框 和 内 边距才能得到内容的宽度和高度。inherit 规定应从父元素继承 box-sizing 属性的值。9.2.3bo x-sizing 属性介绍比较下面两段代码bo x-sizing 属性值及其带来的不同结果(mar gin:0).test1 box-sizing:content-box;width:200px;padding:10px;border:15px solid#eee;.test2 box-sizing:border-box;width:200px;padding:10px;border:15px solid#eee;9.2.4 伪元素用于向某些选择器设置特殊效果语法格式:select or:pseudo-elementpr oper ty:v alue;9.2.4 伪元素1:fir st-line 伪元素用于向文本的首行设置特殊样式p:fir st-linecolor:#ff0000;font-v ariant:small-caps;Y oucanusethe:fir st-linepseudo-elementt oaddaspecialeffectt othefir stlineo fat ext!只能用于块级元素9.2.4 伪元素2:fir st-lett er 伪元素用于向文本的首字母设置特殊样式p:fir st-lett ercolor:#ff0000;font-size:xx-lar ge;Y oucanusethe:fir st-lett erpseudo-elementt oaddaspecialeffectt othefir stlett ero fat ext!只能用于块级元素9.2.4 伪元素3 伪元素和类伪元素可以与CSS 类配合使用p.ar ticle:fir st-lett ercolor:#FF0000;Thisisap aragraphinanar ticle。Thisisap aragraphinanar ticle。select or.class:pseudo-elementpr oper ty:v alue;9.2.4 伪元素4 多重伪元素可以结合多个伪元素来使用p:fir st-lett ercolor:#ff0000;font-size:xx-lar ge;p:fir st-linecolor:#0000ff;font-v ariant:small-caps;Y oucancombinethe:fir st-lett erand:fir st-linepseudo-elementst oaddaspecialeffectt othefir stlett erandthefir stlineo fat ext!9.2.4 伪元素4 多重伪元素当文字在浏览器窗口显示在一行内时当文字在浏览器窗口中超过一行显示时9.2.4 伪元素5:befor e 伪元素可以在元素的内容前面插入新内容h1:befor econt ent:url(images/befor e.gif)ThisisaheadingThe:befor epseudo-elementinser tscont entbefor eanelement.9.2.4 伪元素6:af t er 伪元素可以在元素的内容之后插入新内容h1:af t ercont ent:url(images/af t er.gif)ThisisaheadingThe:af t erpseudo-elementinser tscont entaf t eranelement.9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题1 mar gin 越界第 一 个 子 元 素 的margin-top 和 最 后 一 个 子 元 素 的margin-bottom的越界问题。当父元素没有边框border 时,设置第一个子元素的margin-top 值的时候,会出现margin-top 值加在父元素上的现象。9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题1 mar gin 越界解决方法(1)给父元素加边框bor der(副作用)(2)给父元素设置p adding 值(副作用)(3)父元素添加ov er flow:hidden(副作用)(4)父元素加前置内容生成。(推荐)9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题2 浏览器间的盒子模型ul 标签在Mozilla 中默认是有p adding 值的,而在IE 中只有mar gin 有值。标准盒子模型与IE 模型之间的差异:标准的盒子模型就是前述介绍的那种,而IE 模型更像是bo x-sizing:bor der-bo x;其内容宽度还包含了bor der 和p adding。解决办法:在html 模板中加doctype 声明。9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题3 用盒子模型画三角形将盒子的width 和height 设置为0,利用bor der 属性可以绘制出三角形。299.3 拓展项目:使用盒子模型创建网页布局

    注意事项

    本文(中职 网页设计与制作案例教程第9章 .pptx)为本站会员(春哥&#****71;)主动上传,淘文阁 - 分享文档赚钱的网站仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知淘文阁 - 分享文档赚钱的网站(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于淘文阁 - 版权申诉 - 用户使用规则 - 积分规则 - 联系我们

    本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

    工信部备案号:黑ICP备15003705号 © 2020-2023 www.taowenge.com 淘文阁 

    收起
    展开