网页设计CSS盒子.ppt

上传人:小飞机 文档编号:6194631 上传时间:2023-10-04 格式:PPT 页数:28 大小:1,002.50KB
返回 下载 相关 举报
网页设计CSS盒子.ppt_第1页
第1页 / 共28页
网页设计CSS盒子.ppt_第2页
第2页 / 共28页
网页设计CSS盒子.ppt_第3页
第3页 / 共28页
网页设计CSS盒子.ppt_第4页
第4页 / 共28页
网页设计CSS盒子.ppt_第5页
第5页 / 共28页
点击查看更多>>
资源描述

《网页设计CSS盒子.ppt》由会员分享,可在线阅读,更多相关《网页设计CSS盒子.ppt(28页珍藏版)》请在三一办公上搜索。

1、CSS布局基础,Css盒子模型Css块状布局,Css盒子,CSS盒子是指具备内容(content)、填充(padding)、边框(border)、边界(margin),属性的模式。在CSS中所有的页面元素都可以看做“盒子”,一张网页就是由若干个盒子和盒子嵌套组成的。,Css盒子,HTML的元素类型,块元素(block)是作为内容的独特块而显示的元素,它以新行开始和结束。内联元素(inline)内联元素没有开始行和结束行,在某一行中逐个出现,没有换行,水平放置在页面中。,Css布局常用属性-display属性,使用该属性可以改变页面元素的值。None:不显示任何内容Block:将元素指定为块元素

2、Inline:将元素指定为内联元素,Css布局常用属性-position属性,使用该属性可以定位网页元素。static:静态定位,定位属性的默认值,元素按照html语法规则的自然属性定位。relative:相对定位(先对于页面的自然定位而言),具体位置由top、bottom、left、right属性联合制定。fixed:将元素按照浏览器窗口的左上角(或右下角)进行固定定位,具体位置由top、bottom、left、right属性联合制定。当用户滚动页面时,内容在此位置固定。Absolute:绝对定位,将元素定位到网页中的任何区域,具体位置由top、bottom、left、right属性联合制定

3、。,Css布局常用属性-float属性,用于控制对象的浮动方式。none:静态定位,定位属性的默认值,元素按照html语法规则的自然属性定位。left:左浮动(先对于页面的自然定位而言),具体位置由top、bottom、left、right属性联合制定。right:右浮动,DIV+CSS布局设计思路,1.用div来定义语义结构,放置具体内容;2.用css来布局div和美化div内部的内容和外部样式。,Css盒子实例,电子相册导航条页面布局,Css盒子实例电子相册,定义盛放图片的盒子,div.box margin:10px;border:1px dotted#0000ff;padding-top

4、:20px;padding-left:20px;height:120px;width:120px;float:right,定义盛放文字的盒子,div.desc text-align:center;font-weight:normal;width:120px;margin:2px;,Css盒子实例导航条,导航条的 盒子布局,最外边一个大盒子(ul),这个盒子与1像素高的背景图片等宽;里面又有五个小盒子(li)分别装着每一个导航栏,导航栏这个盒子里面又装着一个稍小的盒子(a);这个盒子又装着一个黄色的修饰盒子(a的左边框,这里勉强理解为盒子,因为它不像一般的边框那么细,在网页中看起来像个盒子)和一

5、个有文字的链接盒子(a的内容)。,Css盒子实例布局网页,定义四个盒子,最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:body font-family:Arial,Helvetica,sans-serif;font-size:12px;margin:0px auto;height:auto;width:760px;border:1px solid#006633;,定义页头盒子,#header height:100px;width:760px;background-image:url(headPic.gif);backgrou

6、nd-repeat:no-repeat;margin:0px 0px 3px 0px;,定义导航盒子,#nav height:25px;width:760px;font-size:14px;list-style-type:none;#nav li float:left;#nav li acolor:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;text-align:center;background-color:#009966;margin-left:2px;#nav li a:hoverbackground-color:#006633;color:#FFFFFF;,内容盒子,#content height:auto;width:740px;line-height:1.5em;padding:10px;#content p text-indent:2em;#content h3 font-size:16px;margin:10px;,页脚盒子,#footer height:50px;width:740px;line-height:2em;text-align:center;background-color:#009966;padding:10px;,

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 生活休闲 > 在线阅读


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号