海门市规划建设局网站,中小企业查询网站,蒙牛企业网站建设(分析)与推广,小程序app开发多少钱第五单元 盒子模型任务10 盒子模型及应用学习目标盒子模型的概念掌握边框的设置内边距的设置外边距的设置学习目标了解:利用盒子模型布局网页的优势任务目标实战演练——制作古诗文欣赏网页强化训练——制作散文赏析网页知识准备1. 盒子模型的概念知识准备1. 盒子模型的概念CSS…第五单元 盒子模型任务10 盒子模型及应用学习目标盒子模型的概念掌握边框的设置内边距的设置外边距的设置学习目标了解:利用盒子模型布局网页的优势任务目标实战演练——制作古诗文欣赏网页强化训练——制作散文赏析网页知识准备1. 盒子模型的概念知识准备1. 盒子模型的概念CSS将HTML页面中的每一个元素看成是一个矩形盒子占据一定的页面空间。一个HTML页面由很多这样的盒子组成这些盒子之间会相互影响因此网页布局主要是掌握一个独立的盒子的内部结构多个盒子之间的相互关系。盒子模型使用设置四边的边框样式为双实线 设置上下边框样式为单实线左右边框样式为虚线 设置上边框样式为单实线左右边框样式为虚线下边框样式为点线 知识准备小技巧分别设置边框样式上边框样式border-top-style右边框样式border-right-style下边框样式border-bottom-style左边框样式border-left-style知识准备2. 边框的设置边框宽度边框宽度(border-width)单位为像素px基本格式border- width上边框 [ 右边框 下边框 左边框]值复制原则1个值四边2个值上下/左右3个值上/左右/下4个值上/右/下/左知识准备示例边框宽度的设置 设置四边的边框为1像素单实线 设置上下边框为2像素左右边框为1像素单实线 设置上边框为2像素左右边框为3像素下边框为4像素单实线知识准备小技巧分别设置边框宽度上边框宽度border-top-width右边框宽度border-right-width下边框宽度border-bottom-width左边框宽度border-left-width知识准备2.边框的设置边框颜色边框颜色(border-color)预定义的颜色值、#RRGGBB或rgb(r,b,g)。基本格式border-color上边框 [ 右边框 下边框 左边框]值复制原则1个值四边2个值上下/左右3个值上/左右/下4个值上/右/下/左知识准备示例边框颜色的设置
