《十天学会web标准.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS布局入门第一天XHTMLCSS基础知识本节知识点css样式css优先级css盒模型组成css样式加载css样式有以下四种外部样式内部样式行内样式css优先级id优先级高于class后面的样式覆盖前面的指定的高于继承行内样式高于内部或外部样式总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的css盒模型组成第二天一列布局一列布局一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局一列固定宽度#layout{height:300px;width:400px;background:#99FFcc;}一列固定宽度居中列固定

2、宽度居中和一列固定宽度相比，我们要解决的问题就是居中。这里我们用到css的外边距属性：margin。在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。#layout{height:300px;width:400px;background:#99FFcc;margin:auto;}一列自适应宽度自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。#layout{height:300px;background:#99FFcc;}#l

3、ayout{height:300px;width:80%;background:#99FFcc;}body{margin:0;}一列自适应宽度居中同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。body{margin:0px;}#layout{margin:auto;height:300px;background:#99FFcc;width:80%;}一列二至多块布局一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、底部（footer）

4、。采用固定宽度居中的方式，代码如下：body{margin:0;padding:0;}#header{margin:5pxauto;width:500px;height:80px;background:#9F9;}#main{margin:5pxauto;width:500px;height:400px;background:#9FF;}#footer{margin:5pxauto;width:500px;height:80px;background:#9f9;第三天二列和三列布局二列和三列布局二列自适应宽度二列固定宽度二列固定宽度居中三列自适应宽度三列固定宽度三列固定宽度居中x

5、html的块级元素(div)和内联元素(span)块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。xhtml的块级元素(div)和内联元素(span)在一般的块级元素诸如段落

、标题

...、列表,

1. 、表格、表单、DIV
   和BODY等元素。而内联元素则如:表单元素、超级链接、图像、........块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且

   6、其后的无素也需另起一行进行显示。xhtml的块级元素(div)和内联元素(span)如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。float属性在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一

   7、行，直到拥有足够放下它的空间。二列自适应宽度下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。#side{background:#99FF99;height:300px;width:120px;float:left;}#main{background:#99FFFF;height:300px;width:70%;margin-left:120px;}二列固定宽度两列固定宽度只需要把#mai

   当前文档最多预览五页，下载文档查看全文

   侵权申诉 举报

   此文档下载收益归作者所有

   下载文档
   当前文档最多预览五页，下载文档查看全文
   点击下载本文档
   • 版权提示
   • 下载文档

   举报

   温馨提示：
   1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
   2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
   3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
   4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。
   

   相关文章

   更多

   • 十天学会divcss
   • 《十天学会web标准(div+css)》2
   • 十天学会web标准·第二天：一列布局
   • 十天学会asp教程.doc
   • asp教程—学会只需十天
   • 十天学会做淘客
   • 十天学会web标准
   • 十天学会ASP教程
   • 十天学会单片机课件.ppt
   • 郭天祥十天学会单片机课件.ppt

   相关标签

   ppt 十天 学会 标准