- 1、本文档共6页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
作者:KwooJan出处: 本文版权归作者和w3cfuns共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
【基础五】块状元素和内联元素
? ?? ???我们在布局页面的时候,会将HTML标签分成两种,块状元素和内联元素(我们平时用到的标签div和p就是块状元素,链接标签a就是内联元素)。它们是很重要的两个概念,既然说到概念就先看看块状元素和内联元素的定义,在定义中你要留意它们两个的不同之处。注:这节课看似挺长,其实内容很少,通过举例子帮助大家更容易理解而已,不要被眼前的文字和代码吓到。块状元素? ?? ???一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。内联元素? ?? ???内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为“a”。做了个对比表,帮助大家理解。
7?天前 上传
下载附件 (2.97 KB)
对于上面的概念,我们用实例的方式给大家讲明白,如下【要求】ID为div1的红色(#900)区域,宽度和高度均为300像素,并且包含一个ID为div2的绿色区域,长度宽度均为100像素的div2。CSS代码如下:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
复制代码
HTML代码如下:
div id=div1
div id=div2/div
/div
复制代码
为了方便初学者更好的学习,我把完整的代码发出来
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=/1999/xhtml
head
meta http-equiv=Content-Type content=text/html; charset=gb2312 /
titleCSS学习网---“可容纳内联元素和其他块状元素”/title
style type=text/css
!--
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
--
/style
/head
body
div id=div1
div id=div2/div
/div
/body
/html
复制代码
怎么样,是不是下面的效果:
2010-11-8 22:24 上传
下载附件 (2.43 KB)
? ?? ???如果你做出来了,就继续往下看,咱们给刚才的要求再加一个条件,在div1里放入一个链接a,内容为“可容纳内联元素和其他块状元素”颜色为白色。CSS代码如下:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
a{color:#fff;}
复制代码
HTML代码如下:
div id=div1
div id=div2/div
a href=#可容纳内联元素和其他块状元素/a
/div
复制代码
是不是下面的效果:
2010-11-8 22:24 上传
下载附件 (3 KB)
? ?? ???到这里,我们可以看到div1这个块状元素里面拥有两个元素,一个是块状元素div2,另一个是内联元素a,这就是块状元素概念里面说的“一般是其他元素的容器,可容纳内联元素和其他块状元素”,为什么要说一般呢,因为块状元素不只是用来做容器,有时还有其他用途,这方面的内容会在后面详细讲解,因为不属于本节知识,就不多说。? ?? ???好~!我们继续加条件,在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块,代码如下CSS代码如下:
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; bac
您可能关注的文档
- 《javascript从入门到精通》09 窗口和框架.ppt
- 《网页技术总复习资料》.doc
- 《网站规划与设计》期末复习题.doc
- 01,02基本语法备查.ppt
- 01_javascript基础.ppt
- 2.5-超链接-《网页设计制作》.ppt
- 04 超级链接.ppt
- 04-超链接.ppt
- 5Javascript基本语法.ppt
- 6、js语法.ppt
- 四川省德阳市罗江中学2025届高三考前热身化学试卷含解析.doc
- 山东省枣庄现代实验学校2025届高三下学期第五次调研考试化学试题含解析.doc
- 吉林省长春市十一高中等九校教育联盟2025届高三一诊考试生物试卷含解析.doc
- 2025届江苏省盐城市伍佑中学高考仿真模拟化学试卷含解析.doc
- 2025届广西贺州中学高考冲刺押题(最后一卷)生物试卷含解析.doc
- 安徽省池州市贵池区2025届高三第一次模拟考试生物试卷含解析.doc
- 宁夏银川一中2025届高三(最后冲刺)化学试卷含解析.doc
- 广东省广州市增城区四校联考2025届高考压轴卷化学试卷含解析.doc
- 2025届邯郸市第一中学高考生物必刷试卷含解析.doc
- 2025届安徽省安庆市石化第一中学高考仿真卷化学试卷含解析.doc
文档评论(0)