欢迎来到天天文库
浏览记录
ID：36432826
大小：1.17 MB
页数：14页
时间：2019-05-09
《《css与div介绍》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、CSS与DIV查阅www.w3.org可以查阅css的详细规格说明一、
2、可以包含于标记中，成为他的子元素，而反过来则不成立，即标记不能包含标记3、经验：在页面中大的区块使用div标记，span标记适用于需要独立设置风格的小元素，比如一个单词，一副图片和一个超链接等。块级元素（block-level），块状标签div标签ol、ul、li标签dl、dt、dd标签p标签table、tr、th、td标签h1、h2、h3、h4、h5、h6标签行内元素（lineelements），内联标签a标签br标签img标签span标签二、盒子模型1、盒子模型的概念是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版3、网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。一个盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)，这四部分组成整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width和height所定义的宽度和高度仅仅是内容部分的宽度和高度，这是容易搞混的地方2、border10-3.htmlborder的外围为元素的最外围，border的粗细会占据空间，因此计算元素的实际高和宽的时候要将border纳入。3、padding10-6.html4、margin14、0-8.html二、盒子模型1、float定位10-14.html定义了float属性后，div的宽度自动为包含内容的值，否则则默认为整行2、position定位10-20.html3、z-index空间位置默认值是后出现的元素覆盖先出现的4、实例：给图片签名（使用css绝对定位），比ps的好处是可以轻松修改签名三、元素的定位四、CSS+DIV布局排版的观念1、将页面用div分块11-1.html在设计网页时，首先应该先明确整个页面的组成，并且在HTML中搭建好框架，然后才是排版，以及各个细节。2、设计各块的位置当页面的内容已经确定后，则需要根据内容本身考虑整体的页面排版，例如单栏、双栏或左5、中右等。如下图常见的双栏模式。3、用css定位11-1.html五、css+div版式1、一列布局一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局2、两列布局二列自适应宽度二列固定宽度二列固定宽度居中3、三列布局三列自适应宽度三列固定宽度三列固定宽度居中4、固定宽度且居中版式：灵活，同时，无论浏览器的大小如何变化，网页均能正常显示。11-2.html实例：电子相册Thanks! 当前文档最多预览五页，下载文档查看全文 侵权申诉 举报 1 1 2 3 4 5 / 14 此文档下载收益归作者所有 下载文档 当前文档最多预览五页，下载文档查看全文 点击下载本文档 版权提示 下载文档 举报 温馨提示： 1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。 2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。 3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。 4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。
3、网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。一个盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)，这四部分组成整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width和height所定义的宽度和高度仅仅是内容部分的宽度和高度，这是容易搞混的地方2、border10-3.htmlborder的外围为元素的最外围，border的粗细会占据空间，因此计算元素的实际高和宽的时候要将border纳入。3、padding10-6.html4、margin1
4、0-8.html二、盒子模型1、float定位10-14.html定义了float属性后，div的宽度自动为包含内容的值，否则则默认为整行2、position定位10-20.html3、z-index空间位置默认值是后出现的元素覆盖先出现的4、实例：给图片签名（使用css绝对定位），比ps的好处是可以轻松修改签名三、元素的定位四、CSS+DIV布局排版的观念1、将页面用div分块11-1.html在设计网页时，首先应该先明确整个页面的组成，并且在HTML中搭建好框架，然后才是排版，以及各个细节。2、设计各块的位置当页面的内容已经确定后，则需要根据内容本身考虑整体的页面排版，例如单栏、双栏或左
5、中右等。如下图常见的双栏模式。3、用css定位11-1.html五、css+div版式1、一列布局一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局2、两列布局二列自适应宽度二列固定宽度二列固定宽度居中3、三列布局三列自适应宽度三列固定宽度三列固定宽度居中4、固定宽度且居中版式：灵活，同时，无论浏览器的大小如何变化，网页均能正常显示。11-2.html实例：电子相册Thanks!
此文档下载收益归作者所有
