网页设计基础

1、第九讲 CSS之空间控制2盒子模型(Box Model)实验八讲评navigator网站标题、大娘头像footer 网页的版权信息,站点地图等sidebar三种招牌面条container大娘致辞（三段）特供面条（列表）实验八要求将范大娘面吧首页实现如图的布局实验八讲评div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”回忆navigator,container,sidebar,

2、footer四个区块在HTML源文件中的位置CSS属性float的取值只有两种:right或left,不存在其他的值。例如：实验八讲评#navigator float : top; 错实验八讲评div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”#sidebarfloat:right;#containerfloat:left;navigator网站标题、logo图标footer 版权信息站点地图sidebar三种招牌面条container大娘致辞特供面条float改变区块型标签独占一行的属性每当显示完一个HTM

3、L元素，会立即定位下一个元素的位置实验八讲评div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”#sidebarfloat:right;navigator网站标题、logo图标footer 版权信息，站点地图sidebar三种招牌面条container大娘致辞特供面条区块的宽度使用width属性来调整。#sidebarwidth:30%;container大娘致辞特供面条Game Timediv id=“navigator”div id=“footer” div id=“sidebar”div id=“cont

4、ainer”问题：如何实现右图的布局？原有的HTML结构是否需要修改，如何修改？CSS是如何设定各个区块的位置的？原HTML结构navigator网站标题、logo图标footer 网页的版权信息,站点地图等sidebar三种招牌面条container大娘致辞（三段）特供面条（列表）实际就是实现如右图的布局Game Timenavigator网站标题、logo图标footer 版权信息，站点地图sidebar三种招牌面条container大娘致辞特供面条布局要求div id=“navigator”div id=“footer” div id=“sidebar”div id=“container

5、”HTML结构#sidebar float:right; width:30%;CSS代码Game Time参考答案Game Time虽然一般是先写HTML代码，再根据布局要求编写CSS代码，但从刚才的那个练习我们发现，如果HTML结构不理想，也很难实现布局要求。所以，在书写HTML代码时应该考虑布局的需要和变化。CSS属性 clear漂浮的区块sidebar进入了footer区块。使用clear属性能避免这种重叠的产生。#footer clear:both;表示清除进入它内部的浮动元素CSS属性 borderCSS允许为元素设置“边框”，使用border属性，border属性类似backgro

6、und属性，由一些要素组成：border-widthborder-styleborder-color边框宽度边框样式边框颜色与background要素可以单独使用不同的是，border的三个要素必须同时使用，不能单独出现。边框border的语法等同于p border:2px solid black;border: 粗细 样式 颜色；注意：3个属性的先后顺序不能颠倒。p border-width:2px; border-style:solid; border-color:black;边框的粗细 border-width属性border-width允许使用关键词和像素两中方法定义边框的粗细：bor

7、der-width:thin;border-width:5px;关键词可取:thinmediumThick分别表示细,中,粗像素可取:1px2px3px 边框的样式 border-style属性border-style允许使用关键词定义边框的样式(共8种):边框的颜色 border-color属性border-color允许使用关键词、RGB比例和色彩代码来设置边框的颜色。Border的四个边文字内容或者图象内容border-top: 5px solid black;border-right:2px dotted red;border-bottom:4px dashed blue;border

8、-left:9px double yellow;盒子模型 Box Model从CSS的角度看，任何一个元素都是一个盒子纸上得来终觉浅，绝知此事要躬行（王安石）纸上得来终觉浅，绝知此事要躬行（王安石）边框border边框与文本间的留白padding边框与外边界间的留白margin外边界（不显示）盒子模型 内容区域纸上得来终觉浅，绝知此事要躬行（王安石）内容区域用来存放文本，图片等内容它的大小恰恰能容下所需要保存的内容。文本区域并不实际存在,而是帮助大家理解用的盒子模型 边框border用它可以给能确定范围的HTML标签画边框它可以定义边框线的宽度、类型、和颜色纸上得来终觉浅，绝知此事要躬行（王安

9、石）边框borderp width:200px; border:5px solid black; 盒子模型 paddingpadding位于内容区域和边框(border)之间它没有任何颜色和装饰我们可以用padding 来控制内容区域与border的距离纸上得来终觉浅，绝知此事要躬行（王安石）边框与文本间的留白paddingPadding语法纸上得来终觉浅，绝知此事要躬行（王安石）padding-top: 10px;padding-right:15px;padding-bottom:12px;padding-left:18px;padding: 10px 15px 12px 18px;topr

10、ightbottomleft由于边框有上、右、下、左四个方向，所以内容域与边框的距离也分为top、right、bottom、left这四个方向使用padding属性时需注意其取值必须按照上右下左的顺时针顺序，不能颠倒或盒子模型 marginmargin是位于边框外围的一圈透明的空间它没有任何颜色和装饰一般我们用margin控制元素之间的距离纸上得来终觉浅，绝知此事要躬行（王安石）边框与外边界间的留白margin外边界（不显示）margin语法margin-top: 10px;margin-right:15px;margin-bottom:12px;margin-left:18px;margin

11、: 10px 15px 12px 18px;由于边框有上、右、下、左四个方向，所以边框外边界的距离也分为top、right、bottom、left这四个方向使用margin属性时需注意其取值必须按照上右下左的顺时针顺序，不能颠倒或纸上得来终觉浅，绝知此事要躬行（王安石）toprightbottomleft盒子模型的三个要素border: 1px solid gray;padding:1px 2px 2px 3px;margin: 20px 0px 20px 20px;简写Game Time问题：使用给定的HTML源代码，实现如右图片的布局。茶树洁面胶 规格：250ml 市场价格：130 元 本站价格：元 功能：清洁控油 介绍：一种非常温和不刺激肌肤的 脸部洁面胶，适合各个年龄层的男女使用，尤适合易患有问题肌肤的人。返回页首HTML代码Game Time参